fix: remove Array.find (#572)

run tests in phantom

fixes #499

Author: eddyerburgh

package.json

@@ -19,13 +19,14 @@
     "lint:fix": "npm run lint -- --fix",
     "prepublish": "npm run build && npm run test:unit:only",
     "publish": "lerna publish --conventional-commits -m \"chore(release): publish %s\"",
-    "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma npm run test:unit:node",
+    "test": "npm run lint && npm run lint:docs && npm run flow && npm run test:types && npm run test:unit && npm run test:unit:karma && npm run test:unit:node",
     "test:compat": "scripts/test-compat.sh",
     "test:unit": "npm run build:test && npm run test:unit:only",
     "test:unit:only": "mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
     "test:unit:debug": "npm run build:test && node --inspect-brk node_modules/.bin/mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
-    "test:unit:karma": "npm run build:test TARGET=browser karma start test/setup/karma.conf.js --single-run",
+    "test:unit:karma": "npm run build:test && TARGET=browser karma start test/setup/karma.conf.js --single-run",
     "test:unit:node": "npm run build:test && npm run test:unit:node:only",
+    "test:unit:node:only": "TEST_ENV=node mocha-webpack --webpack-config test/setup/webpack.test.config.js test/specs --recursive --require test/setup/mocha.setup.js",
     "test:types": "tsc -p packages/test-utils/types && tsc -p packages/server-test-utils/types"
   },
   "devDependencies": {
@@ -54,6 +55,7 @@
     "karma": "^1.7.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sinon-chai": "^1.3.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",

packages/test-utils/src/mount.js

@@ -29,11 +29,10 @@ export default function mount (component: Component, options: Options = {}): Vue
   } else {
     vm.$mount()
   }
+  const componentsWithError = findAllVueComponentsFromVm(vm).filter(c => c._error)
 
-  const componentWithError = findAllVueComponentsFromVm(vm).find(c => c._error)
-
-  if (componentWithError) {
-    throw (componentWithError._error)
+  if (componentsWithError.length > 0) {
+    throw (componentsWithError[0]._error)
   }
 
   const wrapperOptions = {

test/resources/utils.js

@@ -11,6 +11,11 @@ export const isRunningJSDOM =
   navigator.userAgent.includes &&
   navigator.userAgent.includes('jsdom')
 
+export const isRunningPhantomJS =
+  typeof navigator !== 'undefined' &&
+  navigator.userAgent.includes &&
+  navigator.userAgent.match(/PhantomJS/i)
+
 export function injectSupported () {
   return vueVersion > 2.2
 }

test/setup/karma.conf.js

@@ -2,7 +2,7 @@ const webpackConfig = require('./webpack.test.config.js')
 
 module.exports = function (config) {
   config.set({
-    browsers: ['ChromeHeadless'],
+    browsers: ['PhantomJS', 'ChromeHeadless'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec'],
     files: [

test/specs/mounting-options/attrs.spec.js

@@ -2,11 +2,13 @@ import { compileToFunctions } from 'vue-template-compiler'
 import { attrsSupported } from '~resources/utils'
 import {
   describeWithMountingMethods,
-  itSkipIf
+  itSkipIf,
+  isRunningPhantomJS
 } from '~resources/utils'
 
 describeWithMountingMethods('options.attrs', (mountingMethod) => {
-  itSkipIf(mountingMethod.name === 'renderToString',
+  itSkipIf(
+    mountingMethod.name === 'renderToString' || isRunningPhantomJS,
     'handles inherit attrs', () => {
       if (!attrsSupported()) return
       const wrapper = mountingMethod(compileToFunctions('<p :id="anAttr" />'), {

test/specs/mounting-options/listeners.spec.js

@@ -1,20 +1,25 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import { listenersSupported } from '~resources/utils'
-import { describeWithShallowAndMount } from '~resources/utils'
+import {
+  describeWithShallowAndMount,
+  itSkipIf,
+  isRunningPhantomJS
+} from '~resources/utils'
 
 describeWithShallowAndMount('options.listeners', (mountingMethod) => {
-  it('handles inherit listeners', () => {
-    if (!listenersSupported()) return
-    const aListener = () => {}
-    const wrapper = mountingMethod(compileToFunctions('<p :id="aListener" />'), {
-      listeners: {
-        aListener
-      }
-    })
+  itSkipIf(isRunningPhantomJS,
+    'handles inherit listeners', () => {
+      if (!listenersSupported()) return
+      const aListener = () => {}
+      const wrapper = mountingMethod(compileToFunctions('<p :id="aListener" />'), {
+        listeners: {
+          aListener
+        }
+      })
 
-    expect(wrapper.vm.$listeners.aListener).to.equal(aListener)
-    expect(wrapper.vm.$listeners.aListener).to.equal(aListener)
-  })
+      expect(wrapper.vm.$listeners.aListener).to.equal(aListener)
+      expect(wrapper.vm.$listeners.aListener).to.equal(aListener)
+    })
 
   it('defines listeners as empty object even when not passed', () => {
     const wrapper = mountingMethod(compileToFunctions('<p />'))

test/specs/mounting-options/localVue.spec.js

@@ -1,27 +1,33 @@
 import Vue from 'vue'
-import { describeWithMountingMethods } from '~resources/utils'
+import {
+  describeWithMountingMethods,
+  itSkipIf,
+  isRunningPhantomJS
+} from '~resources/utils'
 
 describeWithMountingMethods('options.localVue', (mountingMethod) => {
-  it('mounts component using passed localVue as base Vue', () => {
-    const TestComponent = {
-      template: `
+  itSkipIf(
+    isRunningPhantomJS,
+    'mounts component using passed localVue as base Vue', () => {
+      const TestComponent = {
+        template: `
         <div>{{test}}</div>
       `
-    }
-    const localVue = Vue.extend()
-    localVue.version = '2.3'
-    const wrapper = mountingMethod(TestComponent, {
-      localVue: localVue,
-      mocks: { test: 'some value' }
+      }
+      const localVue = Vue.extend()
+      localVue.version = '2.3'
+      const wrapper = mountingMethod(TestComponent, {
+        localVue: localVue,
+        mocks: { test: 'some value' }
+      })
+      const HTML = mountingMethod.name === 'renderToString'
+        ? wrapper
+        : wrapper.html()
+      expect(HTML).to.contain('some value')
+      const freshWrapper = mountingMethod(TestComponent)
+      const freshHTML = mountingMethod.name === 'renderToString'
+        ? freshWrapper
+        : freshWrapper.html()
+      expect(freshHTML).to.not.contain('some value')
     })
-    const HTML = mountingMethod.name === 'renderToString'
-      ? wrapper
-      : wrapper.html()
-    expect(HTML).to.contain('some value')
-    const freshWrapper = mountingMethod(TestComponent)
-    const freshHTML = mountingMethod.name === 'renderToString'
-      ? freshWrapper
-      : freshWrapper.html()
-    expect(freshHTML).to.not.contain('some value')
-  })
 })

test/specs/mounting-options/scopedSlots.spec.js

@@ -1,4 +1,9 @@
-import { describeWithShallowAndMount, vueVersion, itDoNotRunIf } from '~resources/utils'
+import {
+  describeWithShallowAndMount,
+  vueVersion,
+  itDoNotRunIf,
+  isRunningPhantomJS
+} from '~resources/utils'
 import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
 
 describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
@@ -14,7 +19,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
     }
   })
 
-  itDoNotRunIf(vueVersion < 2.5,
+  itDoNotRunIf(vueVersion < 2.5 || isRunningPhantomJS,
     'mounts component scoped slots', () => {
       const wrapper = mountingMethod(ComponentWithScopedSlots, {
         slots: { default: '<span>123</span>' },
@@ -41,7 +46,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
     }
   )
 
-  itDoNotRunIf(vueVersion < 2.5,
+  itDoNotRunIf(vueVersion < 2.5 || isRunningPhantomJS,
     'throws exception when it is seted to a template tag at top', () => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {
@@ -55,7 +60,7 @@ describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
     }
   )
 
-  itDoNotRunIf(vueVersion >= 2.5,
+  itDoNotRunIf(vueVersion >= 2.5 || isRunningPhantomJS,
     'throws exception when vue version < 2.5', () => {
       const fn = () => {
         mountingMethod(ComponentWithScopedSlots, {

test/specs/mounting-options/slots.spec.js

@@ -6,7 +6,8 @@ import {
   describeWithMountingMethods,
   vueVersion,
   itSkipIf,
-  itDoNotRunIf
+  itDoNotRunIf,
+  isRunningPhantomJS
 } from '~resources/utils'
 
 describeWithMountingMethods('options.slots', (mountingMethod) => {
@@ -53,7 +54,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
   })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with default slot if passed string in slot object', () => {
       const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: '<span />' }})
       if (mountingMethod.name === 'renderToString') {
@@ -64,7 +65,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || vueVersion < 2.3,
+    process.env.TEST_ENV === 'node' || vueVersion < 2.3 || isRunningPhantomJS,
     'works correctly with class component', () => {
       const wrapper = mountingMethod(ComponentAsAClass, { slots: { default: '<span />' }})
       if (mountingMethod.name === 'renderToString') {
@@ -91,26 +92,28 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
       expect(fn).to.throw().with.property('message', message)
     })
 
-  it('mounts component with default slot if passed string in slot object', () => {
-    if (mountingMethod.name === 'renderToString') {
-      return
-    }
-    const wrapper1 = mountingMethod(ComponentWithSlots, { slots: { default: 'foo<span>123</span>{{ foo }}' }})
-    expect(wrapper1.find('main').html()).to.equal('<main>foo<span>123</span>bar</main>')
-    const wrapper2 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}2' }})
-    expect(wrapper2.find('main').html()).to.equal('<main><p>1</p>bar2</main>')
-    const wrapper3 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}<p>2</p>' }})
-    expect(wrapper3.find('main').html()).to.equal('<main><p>1</p>bar<p>2</p></main>')
-    const wrapper4 = mountingMethod(ComponentWithSlots, { slots: { default: '123' }})
-    expect(wrapper4.find('main').html()).to.equal('<main>123</main>')
-    const wrapper5 = mountingMethod(ComponentWithSlots, { slots: { default: '1{{ foo }}2' }})
-    expect(wrapper5.find('main').html()).to.equal('<main>1bar2</main>')
-    wrapper5.trigger('keydown')
-    const wrapper6 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p><p>2</p>' }})
-    expect(wrapper6.find('main').html()).to.equal('<main><p>1</p><p>2</p></main>')
-    const wrapper7 = mountingMethod(ComponentWithSlots, { slots: { default: '1<p>2</p>3' }})
-    expect(wrapper7.find('main').html()).to.equal('<main>1<p>2</p>3</main>')
-  })
+  itDoNotRunIf(
+    isRunningPhantomJS,
+    'mounts component with default slot if passed string in slot object', () => {
+      if (mountingMethod.name === 'renderToString') {
+        return
+      }
+      const wrapper1 = mountingMethod(ComponentWithSlots, { slots: { default: 'foo<span>123</span>{{ foo }}' }})
+      expect(wrapper1.find('main').html()).to.equal('<main>foo<span>123</span>bar</main>')
+      const wrapper2 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}2' }})
+      expect(wrapper2.find('main').html()).to.equal('<main><p>1</p>bar2</main>')
+      const wrapper3 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}<p>2</p>' }})
+      expect(wrapper3.find('main').html()).to.equal('<main><p>1</p>bar<p>2</p></main>')
+      const wrapper4 = mountingMethod(ComponentWithSlots, { slots: { default: '123' }})
+      expect(wrapper4.find('main').html()).to.equal('<main>123</main>')
+      const wrapper5 = mountingMethod(ComponentWithSlots, { slots: { default: '1{{ foo }}2' }})
+      expect(wrapper5.find('main').html()).to.equal('<main>1bar2</main>')
+      wrapper5.trigger('keydown')
+      const wrapper6 = mountingMethod(ComponentWithSlots, { slots: { default: '<p>1</p><p>2</p>' }})
+      expect(wrapper6.find('main').html()).to.equal('<main><p>1</p><p>2</p></main>')
+      const wrapper7 = mountingMethod(ComponentWithSlots, { slots: { default: '1<p>2</p>3' }})
+      expect(wrapper7.find('main').html()).to.equal('<main>1<p>2</p>3</main>')
+    })
 
   itSkipIf(mountingMethod.name === 'renderToString',
     'throws error if passed string in default slot object and vue-template-compiler is undefined', () => {
@@ -130,7 +133,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with default slot if passed string in slot array object', () => {
       const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: ['<span />'] }})
       if (mountingMethod.name === 'renderToString') {
@@ -141,7 +144,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with default slot if passed string in slot text array object', () => {
       const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: ['{{ foo }}<span>1</span>', 'bar'] }})
       if (mountingMethod.name === 'renderToString') {
@@ -241,7 +244,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     }
   })
 
-  itDoNotRunIf(process.env.TEST_ENV === 'node',
+  itDoNotRunIf(process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with default slot if passed string in slot object', () => {
       const TestComponent = {
         name: 'component-with-slots',
@@ -257,7 +260,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with named slot if passed string in slot object', () => {
       const TestComponent = {
         functional: true,
@@ -272,7 +275,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -287,7 +290,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -302,7 +305,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node',
+    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -382,8 +385,9 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
       require.cache[require.resolve('vue-template-compiler')].exports.compileToFunctions = compilerSave
     })
 
-  itDoNotRunIf(mountingMethod.name === 'renderToString',
-    'afd', () => {
+  itDoNotRunIf(
+    mountingMethod.name === 'renderToString' || isRunningPhantomJS,
+    'does not error when triggering a click in a slot', () => {
       const Parent = {
         name: 'Parent',
         template: `