Visual tests never run, no error is given

[lazd]

Steps

Install grunt-phantomcss from master:

cd node_modules
git clone https://github.com/chrisgladd/grunt-phantomcss
cd grunt-phantomcss
npm install

Copy grunt-phantomcss' test suite

cp node_modules/grunt-phantomcss/config/testsuite.js test/visual/suite.js

Setup grunt to use grunt-phantomcss:

grunt.initConfig({
  phantomcss: {
    visual: {
      options: {
        configFile: 'test/visual/suite.js',
      }
    }
  }
});

Run grunt

grunt phantomcss:visual

Expected

Visual tests run successfully (that's very hopeful, heh).

Result

The following output is given

Running "phantomcss:visual" (phantomcss) task
Warning: Task "phantomcss:visual" failed. Use --force to continue.

Aborted due to warnings.

Workarounds

Point to the correct location of phantomjs

phantomjs is not in the $PATH, so it doesn't start. It is, however, installed in the node_modules folder of the project that uses grunt-phantomcss as phantomjs is a peer dependency for grunt-phantomcss.

In grunt-phantomcss/tasks/phantomcss.js change the location of the phantomjs binary in the spawn command to the location of the phantomjs binary as installed in node_modules:

var phantomBinary = require('phantomjs').path;

grunt.util.spawn({
    "cmd": phantomBinary
    /* ... */
});

With the above changes in place, the output is:

Running "phantomcss:visual" (phantomcss) task
Can't open 'test/visual/suite.js'
Warning: Task "phantomcss:visual" failed. Use --force to continue.

Aborted due to warnings.

Install phantomcss bower component

node_modules/grunt-phantomcss/tasks/phantomcss.js expects bower_components/phantomcss to be available. The folder doesn't exist; no bower install was performed when the module was installed.

Do a bower install in the node_modules/grunt-phantomcss folder to fix this.

Fix the location of the test suite

Since the cwd passed to grunt.util.spawn is bower_components/phantomcss, then expected test suite file is not available. The path needs to be resolved correctly in node_modules/grunt-phantomcss/tasks/phantomcss.js when a custom configFile option is passed:

options.configFile = path.resolve(options.configFile);

With the above changes in place, the new output is:

Running "phantomcss:visual" (phantomcss) task
Phantom Args{"configFile":"../../config/testsuite.js","screenshots":"/Users/lazd/repos/wellTested/screenshots","failures":"/Users/lazd/repos/wellTested/failures"}
Error: Cannot find module 'CasperJs/modules/cli.js'

  phantomjs://bootstrap.js:289
  phantomjs://bootstrap.js:254 in require
  CasperJs/bin/bootstrap.js:205 in patchedRequire
  CasperJs/bin/bootstrap.js:322
  CasperJs/bin/bootstrap.js:342
Error: Cannot find module 'CasperJs/modules/casper.js'

  phantomjs://bootstrap.js:289
  phantomjs://bootstrap.js:254 in require
  CasperJs/bin/bootstrap.js:205 in patchedRequire
  ../../config/testsuite.js:32

Make phantom.casperPath absolute

Both node_modules/grunt-phantomcss/config/compare.js and node_modules/grunt-phantomcss/config/testsuite.js use a relative path for phantom.casperPath. This works when including phantom.casperPath + '/bin/bootstrap.js', but it doesn't work when bootstrap.js tries to require additional modules.

Import the fs module and use fs.workingDirectory to build an absolute path.

After this change, the tests run:

Running "phantomcss:visual" (phantomcss) task
Phantom Args{"configFile":"/Users/lazd/repos/wellTested/node_modules/grunt-phantomcss/config/compare.js","screenshots":"/Users/lazd/repos/wellTested/screenshots","failures":"/Users/lazd/repos/wellTested/failures"}

THE END.

Done, without errors.

[danielflower]

Thanks for the detailed work around steps as I'm facing the same issues. Would be great to see this merged.

[lazd]

@danielflower, you can use my fork as a dependency in the mean time, see the npm docs on Github URLs for more info and a package.json that uses my fork.

Also, see my sample repo, wellTested, for the new changes in action.