From 4d88907fd6d7cff1983ab7f57e675bd80d76a82a Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Fri, 23 Apr 2021 16:40:40 +0200 Subject: [PATCH 1/6] -added a test to check the error from the issue, but the error won't happen. --- test/specs/wrapper/find.spec.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index d8412ba8a..f251695c7 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -279,6 +279,35 @@ describeWithShallowAndMount('find', mountingMethod => { } ) + it('have no better name right now, but this does not fail.........', () => { + const TestComponentToFind = { + render: h => h('div'), + name: 'test-component-to-find' + } + const TestComponent = { + template: ` +
+ + + +
' + `, + components: { + TestComponentToFind + }, + name: 'test-component' + } + + const wrapper = mountingMethod(TestComponent) + + expect( + wrapper + .findAllComponents({ name: 'test-component-to-find' }) + .at(0) + .exists() + ).toBe(true) + }) + it('returns extended functional component', () => { const TestFunctionalComponent = Vue.extend({ render: h => h('div'), From 186ec74e00694f70d4b5f666081a5abef8255c24 Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Fri, 23 Apr 2021 17:22:53 +0200 Subject: [PATCH 2/6] -found a way to reproduce the error. --- test/specs/wrapper/find.spec.js | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index f251695c7..bf90c7938 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -15,6 +15,7 @@ import { isRunningChrome } from '~resources/utils' import { itDoNotRunIf, itSkipIf } from 'conditional-specs' +import VueRouter from 'vue-router' describeWithShallowAndMount('find', mountingMethod => { it('returns a Wrapper matching tag selector passed', () => { @@ -308,6 +309,39 @@ describeWithShallowAndMount('find', mountingMethod => { ).toBe(true) }) + it('ok this test fails', async () => { + const TestComponentToFind = { + render: h => h('div'), + name: 'test-component-to-find' + } + const localVue = createLocalVue() + localVue.use(VueRouter) + const routes = [ + { + path: '/a/b', + name: 'ab', + component: TestComponentToFind + } + ] + const router = new VueRouter({ routes }) + // and this will not work with shallowMount because router view gets stubbed! How can I just test mount? + const wrapper = mountingMethod( + { + template: '' + }, + { + localVue, + router + } + ) + + try { + await router.push('/a/b') + } catch (e) {} // this will throw NavigationDuplicated the second time, dunno how to fix it + + expect(wrapper.findComponent(TestComponentToFind).exists()).toBe(true) + }) + it('returns extended functional component', () => { const TestFunctionalComponent = Vue.extend({ render: h => h('div'), From e13c0f528885aff6661102aef44694353404270e Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Mon, 26 Apr 2021 09:06:09 +0200 Subject: [PATCH 3/6] -updated the failing test to just test mount here because shallowMount will stub the router-view and fails. --- test/specs/wrapper/find.spec.js | 86 +++++++++++---------------------- 1 file changed, 29 insertions(+), 57 deletions(-) diff --git a/test/specs/wrapper/find.spec.js b/test/specs/wrapper/find.spec.js index bf90c7938..055779872 100644 --- a/test/specs/wrapper/find.spec.js +++ b/test/specs/wrapper/find.spec.js @@ -280,67 +280,39 @@ describeWithShallowAndMount('find', mountingMethod => { } ) - it('have no better name right now, but this does not fail.........', () => { - const TestComponentToFind = { - render: h => h('div'), - name: 'test-component-to-find' - } - const TestComponent = { - template: ` -
- - - -
' - `, - components: { - TestComponentToFind - }, - name: 'test-component' - } - - const wrapper = mountingMethod(TestComponent) - - expect( - wrapper - .findAllComponents({ name: 'test-component-to-find' }) - .at(0) - .exists() - ).toBe(true) - }) - - it('ok this test fails', async () => { - const TestComponentToFind = { - render: h => h('div'), - name: 'test-component-to-find' - } - const localVue = createLocalVue() - localVue.use(VueRouter) - const routes = [ - { - path: '/a/b', - name: 'ab', - component: TestComponentToFind - } - ] - const router = new VueRouter({ routes }) - // and this will not work with shallowMount because router view gets stubbed! How can I just test mount? - const wrapper = mountingMethod( - { - template: '' - }, - { - localVue, - router + itDoNotRunIf( + mountingMethod.name === 'shallowMount', + 'returns a VueWrapper using a component', + async () => { + const localVue = createLocalVue() + localVue.use(VueRouter) + const TestComponentToFind = { + render: h => h('div'), + name: 'test-component-to-find' } - ) + const routes = [ + { + path: '/a/b', + name: 'ab', + component: TestComponentToFind + } + ] + const router = new VueRouter({ routes }) + const wrapper = mountingMethod( + { + template: '' + }, + { + localVue, + router + } + ) - try { await router.push('/a/b') - } catch (e) {} // this will throw NavigationDuplicated the second time, dunno how to fix it - expect(wrapper.findComponent(TestComponentToFind).exists()).toBe(true) - }) + expect(wrapper.findComponent(TestComponentToFind).exists()).toBe(true) + } + ) it('returns extended functional component', () => { const TestFunctionalComponent = Vue.extend({ From 80430b81ad514ac3c410b78fc022321520d55236 Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Tue, 27 Apr 2021 11:05:50 +0200 Subject: [PATCH 4/6] -check is a functional component and ignore it and take the next child. --- packages/test-utils/src/matches.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 959613472..090a9516f 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -56,7 +56,12 @@ export function matches(node, selector) { return element && element.matches && element.matches(selector.value) } - const componentInstance = node[FUNCTIONAL_OPTIONS] || node.child + // ignore the functional component if its a RouterView + // Find a good explanation comment why tahts the case, please help! + const componentInstance = + node[FUNCTIONAL_OPTIONS]?.name === 'RouterView' + ? node.child + : node[FUNCTIONAL_OPTIONS] || node.child if (!componentInstance) { return false From 52be32f956842275aeabce1545c0e57c262085dd Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Thu, 29 Apr 2021 13:33:15 +0200 Subject: [PATCH 5/6] fix(matches.js): do not use ? operator I should not use ? operator because it's not compatible in the build process. --- packages/test-utils/src/matches.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index 090a9516f..c4bc8a367 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -59,7 +59,7 @@ export function matches(node, selector) { // ignore the functional component if its a RouterView // Find a good explanation comment why tahts the case, please help! const componentInstance = - node[FUNCTIONAL_OPTIONS]?.name === 'RouterView' + node[FUNCTIONAL_OPTIONS] && node[FUNCTIONAL_OPTIONS]?.name === 'RouterView' ? node.child : node[FUNCTIONAL_OPTIONS] || node.child From 07e889c055724c232da02d2090df7c45fe6b4952 Mon Sep 17 00:00:00 2001 From: Sebastian Richter Date: Thu, 29 Apr 2021 14:11:18 +0200 Subject: [PATCH 6/6] fix(matches.js): don't use ? Operator Omg I forgot to remove the ? operator the first time. --- packages/test-utils/src/matches.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/matches.js b/packages/test-utils/src/matches.js index c4bc8a367..d26980dd1 100644 --- a/packages/test-utils/src/matches.js +++ b/packages/test-utils/src/matches.js @@ -59,7 +59,7 @@ export function matches(node, selector) { // ignore the functional component if its a RouterView // Find a good explanation comment why tahts the case, please help! const componentInstance = - node[FUNCTIONAL_OPTIONS] && node[FUNCTIONAL_OPTIONS]?.name === 'RouterView' + node[FUNCTIONAL_OPTIONS] && node[FUNCTIONAL_OPTIONS].name === 'RouterView' ? node.child : node[FUNCTIONAL_OPTIONS] || node.child