test(vue): update vue test app dependencies (#24955)

packages/vue/test-app/.eslintrc.js

@@ -9,13 +9,15 @@ module.exports = {
     '@vue/typescript/recommended'
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
+    parser: '@typescript-eslint/parser'
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/no-deprecated-slot-attribute': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    'vue/multi-word-component-names': 'off'
   },
   overrides: [
     {

packages/vue/test-app/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
   transform: {
-    "^.+\\.vue$": "vue-jest"
+    "^.+\\.vue$": "@vue/vue3-jest"
   },
   transformIgnorePatterns: ['/node_modules/(?!ionicons|@stencil/core|@ionic/core|@ionic/vue|@ionic/vue-router)'],
   globals: {

packages/vue/test-app/package.json

@@ -13,30 +13,32 @@
     "sync": "sh ./scripts/sync.sh"
   },
   "dependencies": {
-    "@ionic/vue": "5.6.3",
+    "@ionic/vue": "^6.0.12",
-    "@ionic/vue-router": "5.6.3",
+    "@ionic/vue-router": "^6.0.12",
-    "vue": "^3.2.22",
+    "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-babel": "~5.0.3",
-    "@vue/cli-plugin-e2e-cypress": "^5.0.0-alpha.7",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.3",
-    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~5.0.3",
-    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-router": "~5.0.3",
-    "@vue/cli-plugin-typescript": "~4.5.15",
+    "@vue/cli-plugin-typescript": "~5.0.3",
-    "@vue/cli-plugin-unit-jest": "~4.5.15",
+    "@vue/cli-plugin-unit-jest": "~5.0.3",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-service": "~5.0.3",
-    "@vue/compiler-sfc": "^3.0.0-0",
+    "@vue/eslint-config-typescript": "^9.1.0",
-    "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
     "concurrently": "^6.0.0",
-    "eslint": "^6.7.2",
+    "cypress": "^8.3.0",
-    "eslint-plugin-vue": "^7.0.0-0",
+    "eslint": "^7.32.0",
-    "typescript": "~4.1.5",
+    "eslint-plugin-vue": "^8.0.3",
-    "vue-jest": "^5.0.0-0",
+    "jest": "^27.1.0",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5",
     "wait-on": "^5.3.0"
   }
 }

packages/vue/test-app/src/App.vue

@@ -9,7 +9,6 @@ import { IonApp, IonRouterOutlet, useIonRouter } from '@ionic/vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'App',
   components: {
     IonApp,
     IonRouterOutlet

packages/vue/test-app/src/components/ExploreContainer.vue

@@ -8,7 +8,6 @@
 <script lang="ts">
 
 export default {
-  name: 'ExploreContainer',
   props: {
     name: String
   }

packages/vue/test-app/src/components/ModalContent.vue

@@ -28,7 +28,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'ModalContent',
   props: {
     title: { type: String, default: 'Default Title' }
   },

packages/vue/test-app/src/components/PopoverContent.vue

@@ -12,7 +12,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'PopoverContent',
   props: {
     title: { type: String, default: 'Default Title' }
   },

packages/vue/test-app/src/router/index.ts

@@ -23,17 +23,14 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/overlays',
-    name: 'Overlays',
     component: () => import('@/views/Overlays.vue')
   },
   {
     path: '/inputs',
-    name: 'Inputs',
     component: () => import('@/views/Inputs.vue')
   },
   {
     path: '/slides',
-    name: 'Slides',
     component: () => import('@/views/Slides.vue')
   },
   {
@@ -63,7 +60,6 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/nested',
-    name: 'RouterOutlet',
     component: () => import('@/views/RouterOutlet.vue'),
     children: [
       {

packages/vue/test-app/src/views/Folder.vue

@@ -28,7 +28,6 @@
 import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
 
 export default {
-  name: 'Folder',
   components: {
     IonButtons,
     IonContent,

packages/vue/test-app/src/views/Home.vue

@@ -64,7 +64,6 @@ import { IonButtons, IonBackButton, IonContent, IonHeader, IonItem, IonLabel, Io
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Home',
   components: {
     IonButtons,
     IonBackButton,

packages/vue/test-app/src/views/Inputs.vue

@@ -132,7 +132,6 @@ import {
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-  name: 'Home',
   components: {
     IonBackButton,
     IonButton,

packages/vue/test-app/src/views/NestedChild.vue

@@ -38,7 +38,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'NestedChild',
   components: {
     IonBackButton,
     IonButton,

packages/vue/test-app/src/views/NestedChildTwo.vue

@@ -32,7 +32,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'NestedChildTwo',
   components: {
     IonBackButton,
     IonButtons,

packages/vue/test-app/src/views/Overlays.vue

@@ -164,7 +164,6 @@ import ModalContent from '@/components/ModalContent.vue';
 import PopoverContent from '@/components/PopoverContent.vue';
 
 export default defineComponent({
-  name: 'Overlays',
   components: {
     ModalContent,
     PopoverContent,

packages/vue/test-app/src/views/RouterOutlet.vue

@@ -30,7 +30,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'RouterOutlet',
   components: {
     IonHeader,
     IonButtons,

packages/vue/test-app/src/views/Slides.vue

@@ -50,7 +50,6 @@ import {
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-  name: 'Home',
   components: {
     IonBackButton,
     IonButton,

packages/vue/test-app/src/views/Tab1.vue

@@ -44,7 +44,6 @@ import { IonButtons, IonBackButton, IonPage, IonHeader, IonItem, IonLabel, IonTo
 import ExploreContainer from '@/components/ExploreContainer.vue';
 
 export default  {
-  name: 'Tab1',
   components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent, IonPage }
 }
 </script>

packages/vue/test-app/src/views/Tab3.vue

@@ -22,7 +22,6 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue
 import ExploreContainer from '@/components/ExploreContainer.vue';
 
 export default  {
-  name: 'Tab3',
   components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
 }
 </script>

packages/vue/test-app/src/views/Tabs.vue

@@ -28,7 +28,6 @@ import { useRouter } from 'vue-router';
 import { ref, defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Tabs',
   components: { IonButton, IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
   setup() {
     const tabs = ref([

packages/vue/test-app/src/views/TabsSecondary.vue

@@ -29,7 +29,6 @@ import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPag
 import { ellipse, square, triangle } from 'ionicons/icons';
 
 export default {
-  name: 'Tabs',
   components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
   setup() {
     return {

packages/vue/test-app/src/views/Template.vue

@@ -32,7 +32,6 @@ import {
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Home',
   components: {
     IonBackButton,
     IonButtons,

packages/vue/test-app/tests/unit/hooks.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { IonicVue, IonApp, IonRouterOutlet, IonPage, useIonRouter, createAnimation } from '@ionic/vue';
-import { waitForRouter } from './utils';
+import { mockAnimation, waitForRouter } from './utils';
 
 const App = {
   components: { IonApp, IonRouterOutlet },
@@ -59,7 +59,7 @@ describe('useIonRouter', () => {
 
     const cmp = wrapper.findComponent(Page2);
     const vm = cmp.vm as any;
-    const animFn = jest.fn();
+    const animFn = mockAnimation();
 
     vm.ionRouter.back(animFn);
     await waitForRouter();
@@ -104,7 +104,7 @@ describe('useIonRouter', () => {
 
     const cmp = wrapper.findComponent(Page2);
     const vm = cmp.vm as any;
-    const animFn = jest.fn();
+    const animFn = mockAnimation();
 
     vm.ionRouter.back();
     await waitForRouter();
@@ -153,7 +153,7 @@ describe('useIonRouter', () => {
 
     const cmp = wrapper.findComponent(Page1);
     const vm = cmp.vm as any;
-    const animFn = jest.fn();
+    const animFn = mockAnimation();
 
     vm.ionRouter.push('/page2', animFn);
     await waitForRouter();
@@ -197,13 +197,13 @@ describe('useIonRouter', () => {
 
     const cmp = wrapper.findComponent(Page1);
     const vm = cmp.vm as any;
-    const animFn = jest.fn();
+    const animFn = mockAnimation();
 
     vm.ionRouter.replace('/page2', animFn);
     await waitForRouter();
 
     expect(router.currentRoute.value.path).toEqual('/page2');
-    expect(animFn).toHaveBeenCalled();
+    expect(animFn).not.toHaveBeenCalled();
 
     expect(vm.ionRouter.canGoBack()).toEqual(false);
   })
@@ -243,7 +243,7 @@ describe('useIonRouter', () => {
 
     const cmp = wrapper.findComponent(Page1);
     const vm = cmp.vm as any;
-    const animFn = jest.fn();
+    const animFn = mockAnimation();
 
     vm.ionRouter.navigate('/page2', 'forward', 'push', animFn);
     await waitForRouter();

packages/vue/test-app/tests/unit/page.spec.ts

@@ -14,6 +14,7 @@ describe('IonPage', () => {
   it('should add ion-page class', async () => {
     const Page1 = {
       template: '<ion-page></ion-page>',
+      name: 'Page1',
       components: { IonPage }
     };
 
@@ -38,6 +39,7 @@ describe('IonPage', () => {
   it('should preserve custom classes', async () => {
     const Page1 = {
       template: '<ion-page class="custom-class"></ion-page>',
+      name: 'Page1',
       components: { IonPage }
     };
 

packages/vue/test-app/tests/unit/routing.spec.ts

@@ -33,6 +33,7 @@ describe('Routing', () => {
   it('should pass no props', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
@@ -60,6 +61,7 @@ describe('Routing', () => {
   it('should pass route props as an object', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
@@ -87,6 +89,7 @@ describe('Routing', () => {
   it('should pass route props as a function', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
@@ -131,6 +134,7 @@ describe('Routing', () => {
   it('should pass route params as props', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
@@ -159,13 +163,15 @@ describe('Routing', () => {
     const leaveHook = jest.fn();
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       setup() {
         onBeforeRouteLeave(leaveHook);
       }
     };
 
     const Page2 = {
-      ...BasePage
+      ...BasePage,
+      name: 'Page2',
     };
 
     const router = createRouter({
@@ -195,6 +201,7 @@ describe('Routing', () => {
   it('should show correct view when replacing', async () => {
     const Tabs = {
       components: { IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel, IonRouterOutlet },
+      name: 'Tabs',
       template: `
         <ion-page>
           <ion-tabs>
@@ -213,14 +220,17 @@ describe('Routing', () => {
     }
     const Tab1 = {
       components: { IonPage },
+      name: 'Tab1',
       template: `<ion-page>Tab 1</ion-page>`
     }
     const Tab2 = {
       components: { IonPage },
+      name: 'Tab2',
       template: `<ion-page>Tab 2</ion-page>`
     }
     const Parent = {
       ...BasePage,
+      name: 'Parent',
       template: `<ion-page>Parent Page</ion-page>`
     }
 
@@ -273,13 +283,15 @@ describe('Routing', () => {
   it('should show the latest props passed to a route', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
     };
 
     const Home = {
-      ...BasePage
+      ...BasePage,
+      name: 'Home',
     }
 
     const router = createRouter({
@@ -320,13 +332,15 @@ describe('Routing', () => {
   it('should call the props function again when params change', async () => {
     const Page1 = {
       ...BasePage,
+      name: 'Page1',
       props: {
         title: { type: String, default: 'Default Title' }
       }
     };
 
     const Home = {
-      ...BasePage
+      ...BasePage,
+      name: 'Home',
     }
 
     const propsFn = jest.fn((route) => {
@@ -372,6 +386,7 @@ describe('Routing', () => {
   // Verifies fix for https://github.com/ionic-team/ionic-framework/pull/23189
   it('should update props on a parameterized url', async () => {
     const Page = {
+      name: 'Page',
       props: {
         id: { type: String, default: 'Default ID' }
       },
@@ -416,11 +431,13 @@ describe('Routing', () => {
       beforeRouteLeave() {
         beforeRouteLeaveSpy();
       },
+      name: 'Page',
       components: { IonPage },
       template: `<ion-page></ion-page>`
     }
     const Page2 = {
       components: { IonPage },
+      name: 'Page2',
       template: `<ion-page></ion-page>`
     }
 
@@ -458,14 +475,17 @@ describe('Routing', () => {
   it('canGoBack() should return the correct value', async () => {
     const Page = {
       components: { IonPage },
+      name: 'Page',
       template: `<ion-page></ion-page>`
     }
     const Page2 = {
       components: { IonPage },
+      name: 'Page2',
       template: `<ion-page></ion-page>`
     }
     const AppWithInject = {
       components: { IonApp, IonRouterOutlet },
+      name: 'AppWithInject',
       template: '<ion-app><ion-router-outlet /></ion-app>',
       setup() {
         const ionRouter = useIonRouter();
@@ -507,18 +527,22 @@ describe('Routing', () => {
   it('canGoBack() should return the correct value when using router.go', async () => {
     const Page = {
       components: { IonPage },
+      name: 'Page',
       template: `<ion-page></ion-page>`
     }
     const Page2 = {
       components: { IonPage },
+      name: 'Page2',
       template: `<ion-page></ion-page>`
     }
     const Page3 = {
       components: { IonPage },
+      name: 'Page3',
       template: `<ion-page></ion-page>`
     }
     const AppWithInject = {
       components: { IonApp, IonRouterOutlet },
+      name: 'AppWithInject',
       template: '<ion-app><ion-router-outlet /></ion-app>',
       setup() {
         const ionRouter = useIonRouter();
@@ -570,14 +594,17 @@ describe('Routing', () => {
   it('should not mount intermediary components when delta is 1', async () => {
     const Page = {
       components: { IonPage },
+      name: 'Page',
       template: `<ion-page></ion-page>`
     }
     const Page2 = {
       components: { IonPage },
+      name: 'Page2',
       template: `<ion-page></ion-page>`
     }
     const Page3 = {
       components: { IonPage },
+      name: 'Page3',
       template: `<ion-page></ion-page>`
     }
 
@@ -621,14 +648,17 @@ describe('Routing', () => {
   it('should unmount intermediary components when using router.go', async () => {
     const Page = {
       components: { IonPage },
+      name: 'Page',
       template: `<ion-page></ion-page>`
     }
     const Page2 = {
       components: { IonPage },
+      name: 'Page2',
       template: `<ion-page></ion-page>`
     }
     const Page3 = {
       components: { IonPage },
+      name: 'Page3',
       template: `<ion-page></ion-page>`
     }
 

packages/vue/test-app/tests/unit/utils.ts

@@ -2,5 +2,14 @@ import { flushPromises } from '@vue/test-utils';
 
 export const waitForRouter = async () => {
   await flushPromises();
-  await new Promise((r) => setTimeout(r, 100));
+  await new Promise((r) => setTimeout(r, 500));
+}
+
+export const mockAnimation = () => {
+  return jest.fn(() => {
+    return {
+      onFinish: () => {},
+      play: () => {}
+    }
+  })
 }