fix: remove phantomjs limitation (#663)

vuejs · May 27, 2018 · e9f3305 · e9f3305
1 parent b15fc5f
commit e9f3305
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 89 deletions.
diff --git a/docs/api/options.md b/docs/api/options.md
@@ -59,14 +59,6 @@ const wrapper = shallowMount(Component, {
 expect(wrapper.find('div')).toBe(true)
 ```
 
-### Passing text
-
-You can pass text to `slots`.  
-There is a limitation to this.
-
-This does not support PhantomJS.  
-You can use [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) as an alternative.
-
 ## scopedSlots
 
 - type: `{ [name: string]: string }`

diff --git a/docs/ja/api/options.md b/docs/ja/api/options.md
@@ -54,12 +54,6 @@ const wrapper = shallowMount(Component, {
 expect(wrapper.find('div')).toBe(true)
 ```
 
-## テキストを渡す
-
-テキストを値として `slots` に渡すことはできますが、1つ制限事項があります。  
-PhantomJS をサポートしません。  
-代わりに [Puppeteer](https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer) を使用してください。
-
 ## scopedSlots
 
 - 型: `{ [name: string]: string }`

diff --git a/packages/create-instance/add-slots.js b/packages/create-instance/add-slots.js
@@ -21,9 +21,6 @@ function validateEnvironment (): void {
   if (typeof window === 'undefined') {
     throwError('the slots string option does not support strings in server-test-uitls.')
   }
-  if (window.navigator.userAgent.match(/PhantomJS/i)) {
-    throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
-  }
 }
 
 function addSlotToVm (vm: Component, slotName: string, slotValue: SlotValue): void {

diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js
@@ -4,29 +4,14 @@ import ComponentWithSlots from '~resources/components/component-with-slots.vue'
 import ComponentAsAClass from '~resources/components/component-as-a-class.vue'
 import {
   describeWithMountingMethods,
-  vueVersion,
-  isRunningPhantomJS
+  vueVersion
 } from '~resources/utils'
 import {
   itSkipIf,
   itDoNotRunIf
 } from 'conditional-specs'
 
 describeWithMountingMethods('options.slots', (mountingMethod) => {
-  let _window
-
-  beforeEach(() => {
-    if (typeof window !== 'undefined') {
-      _window = window
-    }
-  })
-
-  afterEach(() => {
-    if (typeof window !== 'undefined' && !window.navigator.userAgent.match(/Chrome/i)) {
-      window = _window // eslint-disable-line no-native-reassign
-    }
-  })
-
   it('mounts component with default slot if passed component in slot object', () => {
     const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: Component }})
     if (mountingMethod.name === 'renderToString') {
@@ -38,7 +23,6 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
 
   itDoNotRunIf(
     mountingMethod.name === 'shallowMount' ||
-    isRunningPhantomJS ||
     process.env.TEST_ENV === 'node',
     'mounts component with default slot if passed component as string in slot object', () => {
       const CustomComponent = {
@@ -85,7 +69,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
   })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with default slot if passed string in slot object', () => {
       const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: '<span />' }})
       if (mountingMethod.name === 'renderToString') {
@@ -96,7 +80,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || vueVersion < 2.3 || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node' || vueVersion < 2.3,
     'works correctly with class component', () => {
       const wrapper = mountingMethod(ComponentAsAClass, { slots: { default: '<span />' }})
       if (mountingMethod.name === 'renderToString') {
@@ -106,27 +90,6 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
       }
     })
 
-  itDoNotRunIf(
-    typeof window === 'undefined' || window.navigator.userAgent.match(/Chrome/i),
-    'works if the UserAgent is PhantomJS when passed Component is in slot object', () => {
-      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
-      const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: [Component] }})
-      if (mountingMethod.name === 'renderToString') {
-        expect(wrapper).contains('<div></div>')
-      } else {
-        expect(wrapper.contains(Component)).to.equal(true)
-      }
-    })
-
-  itDoNotRunIf(
-    typeof window === 'undefined' || window.navigator.userAgent.match(/Chrome/i),
-    'throws error if the UserAgent is PhantomJS when passed string is in slot object', () => {
-      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
-      const message = '[vue-test-utils]: the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.'
-      const fn = () => mountingMethod(ComponentWithSlots, { slots: { default: 'foo' }})
-      expect(fn).to.throw().with.property('message', message)
-    })
-
   itDoNotRunIf(
     process.env.TEST_ENV !== 'node',
     'throws error passed string is in slot object', () => {
@@ -135,30 +98,28 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
       expect(fn).to.throw().with.property('message', message)
     })
 
-  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>')
-      const wrapper8 = mountingMethod(ComponentWithSlots, { slots: { default: '   space ' }})
-      expect(wrapper8.find('main').html()).to.equal('<main>   space </main>')
-    })
+  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>')
+    const wrapper8 = mountingMethod(ComponentWithSlots, { slots: { default: '   space ' }})
+    expect(wrapper8.find('main').html()).to.equal('<main>   space </main>')
+  })
 
   itSkipIf(mountingMethod.name === 'renderToString',
     'throws error if passed string in default slot object and vue-template-compiler is undefined', () => {
@@ -178,7 +139,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with default slot if passed string in slot array object', () => {
       const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: ['<span />'] }})
       if (mountingMethod.name === 'renderToString') {
@@ -189,7 +150,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     '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') {
@@ -289,7 +250,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     }
   })
 
-  itDoNotRunIf(process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+  itDoNotRunIf(process.env.TEST_ENV === 'node',
     'mounts component with default slot if passed string in slot object', () => {
       const TestComponent = {
         name: 'component-with-slots',
@@ -305,7 +266,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with named slot if passed string in slot object', () => {
       const TestComponent = {
         functional: true,
@@ -320,7 +281,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -335,7 +296,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -350,7 +311,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    process.env.TEST_ENV === 'node' || isRunningPhantomJS,
+    process.env.TEST_ENV === 'node',
     'mounts component with named slot if passed string in slot object in array', () => {
       const TestComponent = {
         functional: true,
@@ -431,7 +392,7 @@ describeWithMountingMethods('options.slots', (mountingMethod) => {
     })
 
   itDoNotRunIf(
-    mountingMethod.name === 'renderToString' || isRunningPhantomJS,
+    mountingMethod.name === 'renderToString',
     'does not error when triggering a click in a slot', () => {
       const Parent = {
         name: 'Parent',