diff --git a/packages/vue/test-app/package-lock.json b/packages/vue/test-app/package-lock.json index e0c4be5c95..4fb82fbd1d 100644 --- a/packages/vue/test-app/package-lock.json +++ b/packages/vue/test-app/package-lock.json @@ -26,7 +26,7 @@ "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.0.0-0", "@vue/eslint-config-typescript": "^5.0.2", - "@vue/test-utils": "^2.0.0-0", + "@vue/test-utils": "^2.0.0-rc.18", "concurrently": "^6.0.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", @@ -409,7 +409,6 @@ "version": "7.15.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", - "dev": true, "engines": { "node": ">=6.9.0" } @@ -1671,7 +1670,6 @@ "version": "7.16.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", - "dev": true, "dependencies": { "@babel/helper-validator-identifier": "^7.15.7", "to-fast-properties": "^2.0.0" @@ -4847,7 +4845,6 @@ "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -5005,6 +5002,11 @@ "@vue/shared": "3.2.22" } }, + "node_modules/@vue/reactivity/node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, "node_modules/@vue/ref-transform": { "version": "3.2.22", "resolved": "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.22.tgz", @@ -5017,11 +5019,6 @@ "magic-string": "^0.25.7" } }, - "node_modules/@vue/reactivity/node_modules/@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - }, "node_modules/@vue/runtime-core": { "version": "3.2.22", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.22.tgz", @@ -5064,10 +5061,13 @@ "integrity": "sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==" }, "node_modules/@vue/test-utils": { - "version": "2.0.0-beta.10", - "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-beta.10.tgz", - "integrity": "sha512-CRcWjEjDEJc0Ag9uZfMx8y7lGfS16TAHbYGGPAJBRdte6sJn7j7eGRNLNIxjeiIROA2ZIAftYkb2/PnBS+78eA==", - "dev": true + "version": "2.0.0-rc.18", + "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz", + "integrity": "sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==", + "dev": true, + "peerDependencies": { + "vue": "^3.0.1" + } }, "node_modules/@vue/web-component-wrapper": { "version": "1.2.0", @@ -20189,7 +20189,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, "engines": { "node": ">=4" } @@ -23184,8 +23183,7 @@ "@babel/helper-validator-identifier": { "version": "7.15.7", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz", - "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==", - "dev": true + "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==" }, "@babel/helper-validator-option": { "version": "7.14.5", @@ -24043,7 +24041,6 @@ "version": "7.16.0", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz", "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==", - "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.15.7", "to-fast-properties": "^2.0.0" @@ -26688,8 +26685,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" } } }, @@ -26827,6 +26823,12 @@ "integrity": "sha512-xNkLAItjI0xB+lFeDgKCrSItmrHTaAzSnt8LmdSCPQnDyarmzbi/u4ESQnckWvlL7lSRKiEaOvblaNyqAa7OnQ==", "requires": { "@vue/shared": "3.2.22" + }, + "dependencies": { + "@vue/shared": { + "version": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + } } }, "@vue/ref-transform": { @@ -26848,6 +26850,12 @@ "requires": { "@vue/reactivity": "3.2.22", "@vue/shared": "3.2.22" + }, + "dependencies": { + "@vue/shared": { + "version": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + } } }, "@vue/runtime-dom": { @@ -26858,13 +26866,6 @@ "@vue/runtime-core": "3.2.22", "@vue/shared": "3.2.22", "csstype": "^2.6.8" - }, - "dependencies": { - "@vue/shared": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", - "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" - } } }, "@vue/server-renderer": { @@ -26882,9 +26883,9 @@ "integrity": "sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ==" }, "@vue/test-utils": { - "version": "2.0.0-beta.10", - "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-beta.10.tgz", - "integrity": "sha512-CRcWjEjDEJc0Ag9uZfMx8y7lGfS16TAHbYGGPAJBRdte6sJn7j7eGRNLNIxjeiIROA2ZIAftYkb2/PnBS+78eA==", + "version": "2.0.0-rc.18", + "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.0.0-rc.18.tgz", + "integrity": "sha512-aifolXjVdsogjaLmDoZ0FU8vN+R67aWmg9OuVeED4w5Ij5GFQLrlhM19uhWe/r5xXUL4fXMk3pX5wW6FJP1NcQ==", "dev": true }, "@vue/web-component-wrapper": { @@ -39474,8 +39475,7 @@ "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, "to-object-path": { "version": "0.3.0", @@ -40112,6 +40112,38 @@ "@vue/runtime-dom": "3.2.22", "@vue/server-renderer": "3.2.22", "@vue/shared": "3.2.22" + }, + "dependencies": { + "@vue/compiler-core": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.1.5.tgz", + "integrity": "sha512-TXBhFinoBaXKDykJzY26UEuQU1K07FOp/0Ie+OXySqqk0bS0ZO7Xvl7UmiTUPYcLrWbxWBR7Bs/y55AI0MNc2Q==", + "requires": { + "@babel/parser": "^7.12.0", + "@babel/types": "^7.12.0", + "@vue/shared": "3.1.5", + "estree-walker": "^2.0.1", + "source-map": "^0.6.1" + } + }, + "@vue/compiler-dom": { + "version": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.1.5.tgz", + "integrity": "sha512-ZsL3jqJ52OjGU/YiT/9XiuZAmWClKInZM2aFJh9gnsAPqOrj2JIELMbkIFpVKR/CrVO/f2VxfPiiQdQTr65jcQ==", + "requires": { + "@vue/compiler-core": "3.1.5", + "@vue/shared": "3.1.5" + } + }, + "@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } } }, "vue-eslint-parser": { diff --git a/packages/vue/test-app/package.json b/packages/vue/test-app/package.json index 3fe2b0628a..cd3b200542 100644 --- a/packages/vue/test-app/package.json +++ b/packages/vue/test-app/package.json @@ -31,7 +31,7 @@ "@vue/cli-service": "~4.5.15", "@vue/compiler-sfc": "^3.0.0-0", "@vue/eslint-config-typescript": "^5.0.2", - "@vue/test-utils": "^2.0.0-0", + "@vue/test-utils": "^2.0.0-rc.18", "concurrently": "^6.0.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", diff --git a/packages/vue/test-app/tests/unit/routing.spec.ts b/packages/vue/test-app/tests/unit/routing.spec.ts index 6d169580f6..82952bea5d 100644 --- a/packages/vue/test-app/tests/unit/routing.spec.ts +++ b/packages/vue/test-app/tests/unit/routing.spec.ts @@ -1,4 +1,4 @@ -import { mount } from '@vue/test-utils'; +import { enableAutoUnmount, mount } from '@vue/test-utils'; import { createRouter, createWebHistory } from '@ionic/vue-router'; import { IonicVue, @@ -14,6 +14,8 @@ import { import { onBeforeRouteLeave } from 'vue-router'; import { waitForRouter } from './utils'; +enableAutoUnmount(afterEach); + const App = { components: { IonApp, IonRouterOutlet }, template: '', @@ -312,124 +314,6 @@ describe('Routing', () => { expect(cmpAgain[0].props()).toEqual({ title: 'xyz' }); }); - /** - * TODO(FW-653) Either Ionic Vue or Vue Test Utils - * is leaking routing information between tests. Moving these tests - * to the end cause them to fail. Need to figure out what the root cause is. - */ - // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24109 - it('canGoBack() should return the correct value', async () => { - const Page = { - components: { IonPage }, - template: `` - } - const Page2 = { - components: { IonPage }, - template: `` - } - const AppWithInject = { - components: { IonApp, IonRouterOutlet }, - template: '', - setup() { - const ionRouter = useIonRouter(); - return { ionRouter } - } - } - - const router = createRouter({ - history: createWebHistory(process.env.BASE_URL), - routes: [ - { path: '/', component: Page } - { path: '/page2', component: Page2 } - ] - }); - - router.push('/'); - await router.isReady(); - const wrapper = mount(AppWithInject, { - global: { - plugins: [router, IonicVue] - } - }); - - const ionRouter = wrapper.vm.ionRouter; - expect(ionRouter.canGoBack()).toEqual(false); - - router.push('/page2'); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(true); - - router.back(); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(false); - }); - - // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24109 - it('canGoBack() should return the correct value when using router.go', async () => { - const Page = { - components: { IonPage }, - template: `` - } - const Page2 = { - components: { IonPage }, - template: `` - } - const Page3 = { - components: { IonPage }, - template: `` - } - const AppWithInject = { - components: { IonApp, IonRouterOutlet }, - template: '', - setup() { - const ionRouter = useIonRouter(); - return { ionRouter } - } - } - - const router = createRouter({ - history: createWebHistory(process.env.BASE_URL), - routes: [ - { path: '/', component: Page } - { path: '/page2', component: Page2 }, - { path: '/page3', component: Page3 }, - ] - }); - - router.push('/'); - await router.isReady(); - const wrapper = mount(AppWithInject, { - global: { - plugins: [router, IonicVue] - } - }); - - const ionRouter = wrapper.vm.ionRouter; - expect(ionRouter.canGoBack()).toEqual(false); - - router.push('/page2'); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(true); - - router.push('/page3'); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(true); - - router.go(-2); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(false); - - router.go(2); - await waitForRouter(); - - expect(ionRouter.canGoBack()).toEqual(true); - }); - // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23043 it('should call the props function again when params change', async () => { const Page1 = { @@ -568,6 +452,119 @@ describe('Routing', () => { expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(2); }); + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24109 + it('canGoBack() should return the correct value', async () => { + const Page = { + components: { IonPage }, + template: `` + } + const Page2 = { + components: { IonPage }, + template: `` + } + const AppWithInject = { + components: { IonApp, IonRouterOutlet }, + template: '', + setup() { + const ionRouter = useIonRouter(); + return { ionRouter } + } + } + + const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes: [ + { path: '/', component: Page } + { path: '/page2', component: Page2 } + ] + }); + + router.push('/'); + await router.isReady(); + const wrapper = mount(AppWithInject, { + global: { + plugins: [router, IonicVue] + } + }); + + const ionRouter = wrapper.vm.ionRouter; + expect(ionRouter.canGoBack()).toEqual(false); + + router.push('/page2'); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(true); + + router.back(); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(false); + }); + + // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24109 + it('canGoBack() should return the correct value when using router.go', async () => { + const Page = { + components: { IonPage }, + template: `` + } + const Page2 = { + components: { IonPage }, + template: `` + } + const Page3 = { + components: { IonPage }, + template: `` + } + const AppWithInject = { + components: { IonApp, IonRouterOutlet }, + template: '', + setup() { + const ionRouter = useIonRouter(); + return { ionRouter } + } + } + + const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes: [ + { path: '/', component: Page } + { path: '/page2', component: Page2 }, + { path: '/page3', component: Page3 }, + ] + }); + + router.push('/'); + await router.isReady(); + const wrapper = mount(AppWithInject, { + global: { + plugins: [router, IonicVue] + } + }); + + const ionRouter = wrapper.vm.ionRouter; + expect(ionRouter.canGoBack()).toEqual(false); + + router.push('/page2'); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(true); + + router.push('/page3'); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(true); + + router.go(-2); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(false); + + router.go(2); + await waitForRouter(); + + expect(ionRouter.canGoBack()).toEqual(true); + }); + it('should not mount intermediary components when delta is 1', async () => { const Page = { components: { IonPage }, diff --git a/packages/vue/test-app/tests/unit/tab-bar.spec.ts b/packages/vue/test-app/tests/unit/tab-bar.spec.ts index 02877698de..c451e0f2d5 100644 --- a/packages/vue/test-app/tests/unit/tab-bar.spec.ts +++ b/packages/vue/test-app/tests/unit/tab-bar.spec.ts @@ -36,8 +36,11 @@ describe('ion-tab-bar', () => { } }); - const innerHTML = wrapper.find('ion-tabs').html(); - expect(innerHTML).toContain(`
`); + const tabs = wrapper.findComponent(IonTabs); + const children = tabs.vm.$el.children; + expect(children[0].tagName).toEqual('ION-TAB-BAR'); + expect(children[1].tagName).toEqual('DIV'); + expect(children[1].className).toEqual('tabs-inner'); }); @@ -69,9 +72,11 @@ describe('ion-tab-bar', () => { } }); - const innerHTML = wrapper.find('ion-tabs').html(); - expect(innerHTML).toContain(`
`); - + const tabs = wrapper.findComponent(IonTabs); + const children = tabs.vm.$el.children; + expect(children[0].tagName).toEqual('DIV'); + expect(children[0].className).toEqual('tabs-inner'); + expect(children[1].tagName).toEqual('ION-TAB-BAR'); }); it('should render in the default slot', async () => { @@ -102,8 +107,12 @@ describe('ion-tab-bar', () => { } }); - const innerHTML = wrapper.find('ion-tabs').html(); - expect(innerHTML).toContain(`
`) + const tabs = wrapper.findComponent(IonTabs); + const children = tabs.vm.$el.children; + const tabsInner = children[0]; + expect(tabsInner.tagName).toEqual('DIV'); + expect(tabsInner.className).toEqual('tabs-inner'); + expect(tabsInner.children[0].tagName).toEqual('ION-ROUTER-OUTLET'); }); // Verifies the fix for https://github.com/ionic-team/ionic-framework/issues/22642 @@ -138,6 +147,11 @@ describe('ion-tab-bar', () => { }); const innerHTML = wrapper.find('ion-tabs').html(); - expect(innerHTML).toContain(`>`) + + const tabs = wrapper.findComponent(IonTabBar); + const children = tabs.vm.$el.childNodes; + + // 8 is a comment node: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType + expect(children[0].nodeType).toEqual(8); }) });