Document language level of phantomJS (requires polyfills for ES6 features etc)

[gquintana]

Add a basic function, in src/services/FormatService.js

export default {
  formatSize: function (s) {
    console.log('String has endsWith: ' + (String.prototype.endsWith !== undefined))
    return s.endsWith('_size')
  }
}

Then the associated test:

import formatService from '@/services/FormatService'

describe('FormatService', () => {
  it('should format size', () => {
    expect(formatService.formatSize('test')).to.equal(false)
    expect(formatService.formatSize('test_size')).to.equal(true)
  })
})

The FormatService works perfectly in the browser (npm run dev), but it fails in the tests (npm run test) because the endsWith method is undefined on the String class:

LOG LOG: 'String has endsWith: false'
  FormatService
    ✗ should format size
	undefined is not a function (evaluating 's.endsWith('_size')')
	formatSize@webpack:///src/services/FormatService.js:4:22 <- index.js:217:22
	webpack:///test/unit/specs/FormatService.spec.js:5:32 <- index.js:12228:42

node 6.11.5
npm 3.10.10
vue-cli 2.9.1

[LinusBorg]

Well, what is the language level of the development environment? That depends on the browser you are using, right? So it's not something we can definitely for you either way.

But yes, the karma test setup uses phantomjs by default, which doesn't have modern browser features (just like IE)., so features that run fine during development in chrome can fail in phantomjs because you used some ES6 feature that babel could not transpile and that phantomjs doesn't have natively. That can be a good thing if you want to support IE alongside modern browsers - such a failing test means a polyfill is missing.

If you want to test in modern browsers instead, replace phantomjs with karma-chrome-launcher.

[gquintana]

Thanks for help.

As this template is using ECMAScript++ language features (imports...) I expected it would also ECMAScript++ APIs.

Here is what I did to fix it:

npm install --save babel-polyfill

And then

import 'babel-polyfill'

in src/main.js and test/index.js. Is it appropriate?

I think you should document it.

[LinusBorg]

I agree that better documentation for that would be helpful.