ember-cli: Test setup fails with PhantomJS 2.0

Software versions:

ember-cli: 0.2.3
PhantomJS: 2.0.0

My basic suite of unit and acceptance tests passes when using PhantomJS 1.9.8. I have a new test that requires some of the fixes present in PhantomJS 2.0.0. I also have 'bail_on_uncaught_errors': true set in testem.json.

Occasionally the test suite will run and all tests will pass. However 75% of the time on my local machine (OSX 10.10.2) and 100% on CircleCI (running PhantomJS 2.0) the test errors out with something like:

not ok 1 PhantomJS 2.0 - Global error: ReferenceError: Can't find variable: define at http://localhost:7357/assets/test-loader.js, line 3

`SyntaxError: Unexpected token '.' vendor.js:38923

I’ve diff’d the vendor.js files from a time when the suite hung and when it ran fully, the files were identical.

I’m opening the issue here but I realize this also touches testem and PhantomJS itself. I’m working on setting up a demo repo to see if I can replicate it. What else can I provide that would be helpful?

Also, thank you to the ember-cli team for all your work on this project.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (9 by maintainers)

Commits related to this issue

fix issue where phantomjs doesn’t work when a remote font is embedded in CSS See https://github.com/ember-cli/ember-cli/issues/3894 or https://github.com/ariya/phantomjs/issues/14173 or https://githu... — committed to krachtstefan/runverter by krachtstefan 8 years ago
fix frontend tests according to: https://github.com/ember-cli/ember-cli/issues/3894 — committed to roschaefer/rundfunk-mitbestimmen by deleted user 7 years ago
set up travis ci testing for frontend, backend and full-stack additional links: http://entulho.fiatjaf.alhur.es/guias/how-to-use-node-along-with-other-language-on-travis-ci/ https://github.com/ember-... — committed to roschaefer/rundfunk-mitbestimmen by deleted user 7 years ago

Most upvoted comments

In my case, this error happend when trying to @import a custom font from Google in my CSS files. Removing this @import line causes everything to work correctly. Since I don’t really want to remove my custom fonts I did a bit more research and discovered that if I block the request on Phantom’s end then things also work fine.

tests/phantom-runner.js

// Custom version of the Testem PhantomJS runner.
//   This exists to block requests to fonts.googleapis.com because this can cause
//     Phantom to incompletely load JS files causing bizarre syntax errors.
//   See https://github.com/ariya/phantomjs/issues/14173.
var system = require('system');
var page = require('webpage').create();
var url = system.args[1];
page.viewportSize = {
  width: 1024,
  height: 768
};
// The magic!
page.onResourceRequested = function(requestData, networkRequest) {
  if (requestData.url.match('fonts.googleapis.com')) {
    networkRequest.abort();
  }
};
page.open(url);

testem.js

/*jshint node:true*/
module.exports = {
  "framework": "qunit",
  "test_page": "tests/index.html?hidepassed",
  "disable_watching": true,
  "launchers": {
    "AltPhantom": {
      "exe": "phantomjs",
      "args": ["tests/phantom-runner.js"],
      "protocol": "browser"
    }
  },
  "launch_in_ci": [
    "AltPhantom"
  ],
  "launch_in_dev": [
    "PhantomJS",
    "Chrome"
  ]
};

+28

wagenet on Apr 21, 2016

It appears that there may be other things that can cause Phantom to load incorrectly, but it’s definitely worth investigating whether your CSS tries to fetch any external resources.

wagenet on Apr 21, 2016