Ember Acceptance Test Failing in PhantomJS but Passing in Chrome

Question

I'm trying to write an acceptance test for my Ember app and I seem to be having some trouble when it comes to PhantomJS and the Ember test server.

I'm running the following versions:

Ember      : v1.13.6
Ember Data : v1.13.7

PhantomJS is failing with the following error:

Died on test #1     at http://localhost:7357/assets/test-support.js:2934
            at http://localhost:7357/assets/test-support.js:6640
            at http://localhost:7357/assets/test-loader.js:31
            at http://localhost:7357/assets/test-loader.js:21
            at http://localhost:7357/assets/test-loader.js:40
            at http://localhost:7357/assets/test-support.js:6647: Can't find variable: DS

Is this a known issue?

The test is running fine within the chrome runner.

Here is my ember-cli-build.js (Brocfile):

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  // Build Options
  var options = {
    // Build for development (ember s)
    development: {
      sassOptions: {
        includePaths: ['bower_components/materialize/sass']
      }
    },

    // Build for deployments
    dev_deploy: {
      sassOptions: {
        includePaths: ['bower_components/materialize/sass']
      },

      fingerprint: {
        enabled: true,
        prepend: 'redacted',
        extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
      }
    },

    // Build for deployments
    staging_deploy: {
      sassOptions: {
        includePaths: ['bower_components/materialize/sass']
      },

      fingerprint: {
        enabled: true,
        prepend: 'redacted',
        extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
      }
    },

    prod_deploy: {
      sassOptions: {
        includePaths: ['bower_components/materialize/sass']
      },

      fingerprint: {
        enabled: true,
        prepend: 'redacted',
        extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
      }
    }
  };

  var env = process.env.EMBER_ENV || 'development';

  var app = new EmberApp(defaults, options[env]);

  // IMPORTED LIBRARIES
  app.import('vendor/js/ember-uploader.named-amd.js', {
    exports: {
      'ember-uploader': [ 'default' ]
    }
  });

  app.import('vendor/js/faye-browser.js');
  app.import('vendor/js/Util.js');
  app.import('vendor/js/CanvasVirtualJoyStick.js');
  app.import('vendor/js/CanvasZoomController.js');
  app.import('vendor/js/chosen.jquery.js');

  app.import('vendor/css/chosen.css');

  return app.toTree();
};

Here is my test:

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'teal-turtle/tests/helpers/start-app';

var application;

module('Acceptance | platforms', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('visiting /platforms', function(assert) {
  authenticateSession();
  visit('/platforms');

  andThen(function() {
    assert.equal(currentURL(), '/platforms');
  });
});

Thanks!

did you have a working version recently or is the right out of the box? also -how much code do you have in the app so far (not a lot of detail in your question to help debug why it's broken) — Toran Billups, Aug 06 '15 at 00:37
@ToranBillups With this app I haven't seen a working version yet, starting a bit late in the game when it comes to tests (unfortunately). There's quite a bit in the app. Are there specific areas that would be helpful for you to see? — Mike George, Aug 06 '15 at 02:09
what shows up on the line in your stacktrace (http://localhost:7357/assets/test-support.js:6647) is it a ember-data model? what is in your Brocfile.js ? any special ember-data hacks? do you have ember-data in your bower.json file and your package.json file? — Toran Billups, Aug 06 '15 at 03:58
@ToranBillups I've added the Brocfile to my question. Line 6647 of test-support.js is a call to `TestLoader.load();`. We don't have any special ember data hacks and it is in the bower.json and package.json files. The app works as expected in the Chrome test runner and when using it. — Mike George, Aug 06 '15 at 14:01

score 5 · Accepted Answer · answered Aug 07 '15 at 00:55

5

I noticed you were using .bind in the route file (platform) and .bind isn't very phantomJS friendly :( so I did the following...

Added the es5 shim and broccoli funnel to your package.json

"broccoli-funnel": "^0.2.3",
"es5-shim": "^4.0.5"

Next I opened the ember-cli-build.js (prev known as the Brocfile)

var funnel = require('broccoli-funnel');
var es5Shim = funnel('node_modules/es5-shim', {
    files: ['es5-shim.js'],
    destDir: '/assets'
});

return app.toTree([es5Shim]);

And finally I added the es5 shim to your tests/index.html above vendor.js

<script src="assets/es5-shim.js"></script>

Below is a full commit on github showing all the files changed (note: Brocfile in this commit example because I'm using an older ember-cli version)

https://github.com/toranb/ember-cli-simple-store/commit/4f46a392b3be0ec93864342ba2edddbd3430e293

answered Aug 07 '15 at 00:55

Toran Billups

27,111
40
155
268

Ah, nice! I really appreciate your work here :) I had a feeling it was something messing with PhantomJS since the chrome build worked fine. The error message I got really threw me off. – Mike George Aug 07 '15 at 00:57
you aren't alone - the error wasn't helpful at all but when I saw our good old friend "bind" I knew a place we could start – Toran Billups Aug 07 '15 at 01:02
This is great. We had a similar issue which wasn't a problem on PhantomJS 2.0 but it was on the build server which runs PhantomJS 1.9.7. Putting the es5-shim in place fixed it! – Nathan Palmer Sep 23 '15 at 11:49
Legend! @ToranBillups, the exact answer I was banging my head looking for. – Deeksy Jan 18 '17 at 04:42

Ember Acceptance Test Failing in PhantomJS but Passing in Chrome

1 Answers1

Linked