How to test String.prototype.includes in PhantomJS

Question

I have an ember-cli 0.2.7 using Ember.js 1.12.0 app with a piece of code that looks like:

controllers/cart.js

import Ember from 'ember';

export default Ember.Controller.extend({

    footwearInCart: Ember.computed('[email protected]', function() {
        return this.get('model').any(product => product.get('category').includes('Footwear'));
    })
});

It goes through all the objects in the model and returns true if their category property has 'footwear' in it.

I'm trying to test it like so:

tests/unit/controllers/cart-test.js

import { moduleFor, test } from 'ember-qunit';
import Ember from 'ember';

var products = [Ember.Object.create({name: 'shoe', category: 'Footwear', subTotal: 10}), Ember.Object.create({name: 'shirt', subTotal: 20})];

var model = Ember.ArrayProxy.create({
  content: Ember.A(products)
});

moduleFor('controller:cart', {
  beforeEach() {
    this.controller = this.subject();
  }
});

test('footwearInCart property works', function(assert) {
  this.controller.set('model', model);

  assert.equal(this.controller.get('footwearInCart'), true, 'The footwearInCart function returns true if the category property of product in cart contains the word "Footwear"');
});

The code works the way it should when I run the app, but PhantomJS apparently does not recognise the .includes method. (The method is documented here String.prototype.includes()

How can I get PhantomJS to recognize the .includes method?

Thanks!

Answer 1

Apparently PhantomJS doesn't implement ES6 features properly. Luckily String.prototype.includes is quite easy to polyfill. You can choose if you want to do that in the test suite or the controller. The polyfill code is:

if (!String.prototype.includes) {
  String.prototype.includes = function() {'use strict';
    return String.prototype.indexOf.apply(this, arguments) !== -1;
  };
}

Either put it right before the assert call (you might want to use a flag to remember of you added the polyfill and remove it after the assert), or do it in the module itself, before or after the export block.

Answer 2

While the selected answer is correct, I think it's worth noting that adding this into the specific test is not good enough for most apps; I'd suggest creating a vendor/phantom-js-polyfills.js that contains this polyfill (plus any others that come up down the line) and then inside your ember-cli-build.js you can conditionally load it in:

  if (EmberApp.env() === 'test') {
    app.import('vendor/phantom-js-polyfills.js');
  }