javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(vue): test app now uses vite and vitest (#26045)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-09-30 13:22:46 -05:00
committed by GitHub
parent f74cba416b
commit 4cb32b6c6b
29 changed files with 1421 additions and 22964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24019
packages/vue/test/apps/vue3/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
packages/vue/test/apps/vue3/package.json
View File

@ -4,13 +4,15 @@
"private": true, "private": true,
"description": "An Ionic project", "description": "An Ionic project",
"scripts": { "scripts": {
"build": "vue-cli-service build", "dev": "vite",
"test:unit": "vue-cli-service test:unit", "build": "vite build",
"test:e2e": "concurrently \"npm run start -- --mode production\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first", "serve": "vite preview",
"lint": "vue-cli-service lint", "test:unit": "vitest",
"test:e2e": "concurrently \"npm run build && npm run serve\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
"lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix src",
"cypress": "node_modules/.bin/cypress run --headless --browser chrome", "cypress": "node_modules/.bin/cypress run --headless --browser chrome",
"cypress.open": "cypress open", "cypress.open": "cypress open",
"start": "vue-cli-service serve", "start": "npm run dev",
"sync": "sh ./scripts/sync.sh" "sync": "sh ./scripts/sync.sh"
}, },
"dependencies": { "dependencies": {
@ -20,26 +22,19 @@
"vue-router": "^4.0.14" "vue-router": "^4.0.14"
}, },
"devDependencies": { "devDependencies": {
"@types/jest": "^27.5.2",
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0", "@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.3", "@vitejs/plugin-vue": "^3.1.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.3",
"@vue/cli-plugin-eslint": "~5.0.3",
"@vue/cli-plugin-router": "~5.0.3",
"@vue/cli-plugin-typescript": "~5.0.3",
"@vue/cli-plugin-unit-jest": "~5.0.3",
"@vue/cli-service": "~5.0.3",
"@vue/eslint-config-typescript": "^9.1.0", "@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-rc.18", "@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"concurrently": "^6.0.0", "concurrently": "^6.0.0",
"cypress": "^10.0.0", "cypress": "^10.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"jest": "^27.1.0", "jsdom": "^20.0.0",
"ts-jest": "^27.0.4",
"typescript": "~4.5.5", "typescript": "~4.5.5",
"vite": "^3.1.4",
"vitest": "^0.23.4",
"wait-on": "^5.3.0" "wait-on": "^5.3.0"
} }
} }

5
packages/vue/test/base/babel.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

1
packages/vue/test/base/cypress.config.ts
View File

@ -15,5 +15,6 @@ export default defineConfig({
}, },
specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}', specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
supportFile: 'tests/e2e/support/index.js', supportFile: 'tests/e2e/support/index.js',
baseUrl: 'http://localhost:8080'
}, },
}) })

4
packages/vue/test/base/public/index.html → packages/vue/test/base/index.html
View File

@ -14,12 +14,14 @@
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<link rel="shortcut icon" type="image/png" href="<%= BASE_URL %>assets/icon/favicon.png" /> <link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
<!-- add to homescreen for ios --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" /> <meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="module" src="/src/main.ts"></script>
</head> </head>
<body> <body>

BIN
packages/vue/test/base/public/assets/icon/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 930 B

BIN
packages/vue/test/base/public/assets/icon/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

1
packages/vue/test/base/public/assets/shapes.svg
View File

@ -1 +0,0 @@
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

2
packages/vue/test/base/src/router/index.ts
View File

@ -140,7 +140,7 @@ const routes: Array<RouteRecordRaw> = [
] ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes routes
}); });

9
packages/vue/test/base/tests/e2e/specs/hbb.cy.js
View File

@ -1,6 +1,7 @@
describe('Hardware Back Button', () => { describe('Hardware Back Button', () => {
it('should correctly go back to Tab 1', () => { it('should correctly go back to Tab 1', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click(); cy.get('ion-tab-button#tab-button-tab2').click();
cy.ionPageHidden('tab1'); cy.ionPageHidden('tab1');
@ -30,7 +31,8 @@ describe('Hardware Back Button', () => {
}); });
it('should correctly go back to the root tab from child pages', () => { it('should correctly go back to the root tab from child pages', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/tabs'); cy.routerPush('/tabs');
cy.ionPageHidden('home'); cy.ionPageHidden('home');
@ -59,7 +61,8 @@ describe('Hardware Back Button', () => {
// TODO FW-1389 // TODO FW-1389
it.skip('should correctly go back to the root tab after switching pages', () => { it.skip('should correctly go back to the root tab after switching pages', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/tabs'); cy.routerPush('/tabs');
cy.ionPageHidden('home'); cy.ionPageHidden('home');

2
packages/vue/test/base/tests/e2e/specs/inputs.cy.js
View File

@ -1,6 +1,6 @@
describe('Inputs', () => { describe('Inputs', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('http://localhost:8080/inputs') cy.visit('/inputs')
}) })
it('should have default value', () => { it('should have default value', () => {
cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false); cy.get('ion-checkbox').should('have.prop', 'checked').and('eq', false);

10
packages/vue/test/base/tests/e2e/specs/lifecycle.cy.js
View File

@ -1,6 +1,7 @@
describe('Lifecycle', () => { describe('Lifecycle', () => {
it('should fire lifecycle events when navigating to and from a page', () => { it('should fire lifecycle events when navigating to and from a page', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#lifecycle').click(); cy.get('#lifecycle').click();
testLifecycle('lifecycle', { testLifecycle('lifecycle', {
@ -42,7 +43,7 @@ describe('Lifecycle', () => {
}); });
it('should fire lifecycle events when landed on directly', () => { it('should fire lifecycle events when landed on directly', () => {
cy.visit('http://localhost:8080/lifecycle'); cy.visit('/lifecycle');
testLifecycle('lifecycle', { testLifecycle('lifecycle', {
ionViewWillEnter: 1, ionViewWillEnter: 1,
@ -57,7 +58,8 @@ describe('Lifecycle', () => {
}); });
it('should fire lifecycle events when navigating to and from a page - setup', () => { it('should fire lifecycle events when navigating to and from a page - setup', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#lifecycle-setup').click(); cy.get('#lifecycle-setup').click();
testLifecycle('lifecycle-setup', { testLifecycle('lifecycle-setup', {
@ -87,7 +89,7 @@ describe('Lifecycle', () => {
}); });
it('should fire lifecycle events when landed on directly - setup', () => { it('should fire lifecycle events when landed on directly - setup', () => {
cy.visit('http://localhost:8080/lifecycle-setup'); cy.visit('/lifecycle-setup');
testLifecycle('lifecycle-setup', { testLifecycle('lifecycle-setup', {
onIonViewWillEnter: 1, onIonViewWillEnter: 1,

2
packages/vue/test/base/tests/e2e/specs/navigation.cy.js
View File

@ -1,6 +1,6 @@
describe('Navigation', () => { describe('Navigation', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('http://localhost:8080/navigation'); cy.visit('/navigation');
}); });
it('should push a page with props', () => { it('should push a page with props', () => {

5
packages/vue/test/base/tests/e2e/specs/nested.cy.js
View File

@ -1,6 +1,6 @@
describe('Nested', () => { describe('Nested', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('http://localhost:8080/nested'); cy.visit('/nested');
cy.ionPageVisible('nestedchild'); cy.ionPageVisible('nestedchild');
}); });
@ -31,7 +31,8 @@ describe('Nested', () => {
describe('Nested - Replace', () => { describe('Nested - Replace', () => {
it('should replace a route but still be able to go back to main outlet', () => { it('should replace a route but still be able to go back to main outlet', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/nested'); cy.routerPush('/nested');
cy.ionPageHidden('home'); cy.ionPageHidden('home');

2
packages/vue/test/base/tests/e2e/specs/overlays-keep-contents-mounted.cy.js
View File

@ -1,7 +1,7 @@
describe('overlays - keepContentsMounted', () => { describe('overlays - keepContentsMounted', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(1000, 900); cy.viewport(1000, 900);
cy.visit('http://localhost:8080/keep-contents-mounted') cy.visit('/keep-contents-mounted')
}) })
describe('modal', () => { describe('modal', () => {
it('should not mount component if false', () => { it('should not mount component if false', () => {

2
packages/vue/test/base/tests/e2e/specs/overlays.cy.js
View File

@ -40,7 +40,7 @@ const testComponent = (overlay, shadow = false) => {
describe('Overlays', () => { describe('Overlays', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(1000, 900); cy.viewport(1000, 900);
cy.visit('http://localhost:8080/overlays') cy.visit('/overlays');
}) })
it(`should open and close ion-alert via controller`, () => { it(`should open and close ion-alert via controller`, () => {

79
packages/vue/test/base/tests/e2e/specs/routing.cy.js
View File

@ -1,6 +1,7 @@
describe('Routing', () => { describe('Routing', () => {
it('should go to sibling page', () => { it('should go to sibling page', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('ion-item#routing').click(); cy.get('ion-item#routing').click();
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -8,13 +9,15 @@ describe('Routing', () => {
}); });
it('should set query params and keep view in stack', () => { it('should set query params and keep view in stack', () => {
cy.visit('http://localhost:8080/routing'); cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#route-params').click(); cy.get('#route-params').click();
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
}); });
it('should go back home', () => { it('should go back home', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('ion-item#routing').click(); cy.get('ion-item#routing').click();
cy.ionBackClick('routing'); cy.ionBackClick('routing');
@ -24,7 +27,8 @@ describe('Routing', () => {
}); });
it('should go back home with default href', () => { it('should go back home with default href', () => {
cy.visit('http://localhost:8080/default-href'); cy.visit('/default-href');
cy.ionPageVisible('defaulthref');
cy.ionBackClick('defaulthref'); cy.ionBackClick('defaulthref');
@ -33,7 +37,8 @@ describe('Routing', () => {
}); });
it('should show back button', () => { it('should show back button', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#routing').click(); cy.get('#routing').click();
cy.get('#child').click(); cy.get('#child').click();
@ -48,7 +53,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359
it('should navigate to multiple pages that match the same parameterized route', () => { it('should navigate to multiple pages that match the same parameterized route', () => {
cy.visit('http://localhost:8080/routing'); cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#parameter-abc').click(); cy.get('#parameter-abc').click();
cy.ionPageVisible('routingparameter-abc'); cy.ionPageVisible('routingparameter-abc');
@ -64,7 +70,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359
it('should handle parameterized urls properly', () => { it('should handle parameterized urls properly', () => {
cy.visit('http://localhost:8080/routing'); cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#parameter-abc').click(); cy.get('#parameter-abc').click();
cy.ionPageVisible('routingparameter-abc'); cy.ionPageVisible('routingparameter-abc');
@ -76,7 +83,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22324 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22324
it('should show correct view when navigating back from parameterized page to query string page', () => { it('should show correct view when navigating back from parameterized page to query string page', () => {
cy.visit('http://localhost:8080/routing'); cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#route-params').click(); cy.get('#route-params').click();
cy.get('#parameter-view-item').click(); cy.get('#parameter-view-item').click();
@ -91,7 +99,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359
it('should work properly with async navigation guards', () => { it('should work properly with async navigation guards', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#delayed-redirect').click(); cy.get('#delayed-redirect').click();
cy.get('ion-loading').should('exist'); cy.get('ion-loading').should('exist');
@ -107,8 +116,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22412 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22412
it('should correctly replace route in a component', () => { it('should correctly replace route in a component', () => {
cy.visit('http://localhost:8080/routing?ionic:mode=ios'); cy.visit('/routing?ionic:mode=ios');
cy.ionPageVisible('routing');
cy.get('#replace').click(); cy.get('#replace').click();
cy.ionPageVisible('navigation'); cy.ionPageVisible('navigation');
@ -120,8 +129,7 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22654 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22654
it('should show correct view when navigating between parameter urls', () => { it('should show correct view when navigating between parameter urls', () => {
cy.visit('http://localhost:8080/nested'); cy.visit('/nested');
cy.ionPageVisible('nestedchild'); cy.ionPageVisible('nestedchild');
cy.get('[data-pageid="routeroutlet"] #trash').click(); cy.get('[data-pageid="routeroutlet"] #trash').click();
@ -148,7 +156,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22658 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22658
it('should select correct leaving view when navigating between parameter urls', () => { it('should select correct leaving view when navigating between parameter urls', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing/123'); cy.routerPush('/routing/123');
cy.ionPageVisible('routingparameter-123'); cy.ionPageVisible('routingparameter-123');
@ -177,7 +186,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22528 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22528
it('should not show ion-back-button when replacing to root page', () => { it('should not show ion-back-button when replacing to root page', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/navigation'); cy.routerPush('/navigation');
cy.ionPageVisible('navigation'); cy.ionPageVisible('navigation');
@ -192,7 +202,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22662 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22662
it('should push a new instance of a parameterized page so there is a transition', () => { it('should push a new instance of a parameterized page so there is a transition', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing/123'); cy.routerPush('/routing/123');
cy.ionPageVisible('routingparameter-123'); cy.ionPageVisible('routingparameter-123');
@ -209,7 +220,8 @@ describe('Routing', () => {
}); });
it('should select correct view when using router.go()', () => { it('should select correct view when using router.go()', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -233,7 +245,8 @@ describe('Routing', () => {
}) })
it('should select correct view when traversing backward and forward through history', () => { it('should select correct view when traversing backward and forward through history', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -265,7 +278,8 @@ describe('Routing', () => {
}) })
it('should create new stack items when going back then pushing pages', () => { it('should create new stack items when going back then pushing pages', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -289,7 +303,8 @@ describe('Routing', () => {
}) })
it('should properly go back using ion-back-button after using router.go()', () => { it('should properly go back using ion-back-button after using router.go()', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -317,7 +332,8 @@ describe('Routing', () => {
}); });
it('should unmount views skipped over by using router.go with a negative value', () => { it('should unmount views skipped over by using router.go with a negative value', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -335,7 +351,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23987 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23987
it('should choose correct view when navigating back', () => { it('should choose correct view when navigating back', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -380,7 +397,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24226 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24226
it('should correctly replace a route after popping', () => { it('should correctly replace a route after popping', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -401,7 +419,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23873 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23873
it('should correctly show pages after going back to defaultHref page', () => { it('should correctly show pages after going back to defaultHref page', () => {
cy.visit('http://localhost:8080/default-href'); cy.visit('/default-href');
cy.ionPageVisible('defaulthref');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -433,7 +452,8 @@ describe('Routing', () => {
}) })
it('should correctly update location history after rewriting past state', () => { it('should correctly update location history after rewriting past state', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -473,7 +493,8 @@ describe('Routing', () => {
}) })
it('should correctly update location history after setting root state', () => { it('should correctly update location history after setting root state', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');
@ -516,7 +537,8 @@ describe('Routing', () => {
describe('Routing - Swipe to Go Back', () => { describe('Routing - Swipe to Go Back', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(320, 568); cy.viewport(320, 568);
cy.visit('http://localhost:8080?ionic:mode=ios'); cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home');
cy.get('#routing').click(); cy.get('#routing').click();
cy.ionPageHidden('home'); cy.ionPageHidden('home');
cy.ionPageVisible('routing') cy.ionPageVisible('routing')
@ -537,7 +559,8 @@ describe('Routing - Swipe to Go Back', () => {
}); });
it.skip('swipe to go back should work when using router.go()', () => { it.skip('swipe to go back should work when using router.go()', () => {
cy.visit('http://localhost:8080?ionic:mode=ios'); cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home');
cy.routerPush('/routing'); cy.routerPush('/routing');
cy.ionPageVisible('routing'); cy.ionPageVisible('routing');

84
packages/vue/test/base/tests/e2e/specs/tabs.cy.js
View File

@ -1,6 +1,7 @@
describe('Tabs', () => { describe('Tabs', () => {
it('should go back from child pages', () => { it('should go back from child pages', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
cy.ionPageHidden('tab1'); cy.ionPageHidden('tab1');
@ -19,7 +20,8 @@ describe('Tabs', () => {
}); });
it('should go back to child page when switching tabs', () => { it('should go back to child page when switching tabs', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
@ -37,7 +39,8 @@ describe('Tabs', () => {
}); });
it('should go to correct tab when going back via browser', () => { it('should go to correct tab when going back via browser', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
@ -52,7 +55,8 @@ describe('Tabs', () => {
}); });
it('should return to tab root when clicking tab button after going back', () => { it('should return to tab root when clicking tab button after going back', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -73,7 +77,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934
it('should return to tab root when clicking tab button', () => { it('should return to tab root when clicking tab button', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -95,7 +100,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934
it('should return to tab root after replacing history', () => { it('should return to tab root after replacing history', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -115,7 +121,8 @@ describe('Tabs', () => {
}) })
it('should be able to create and destroy tabs', () => { it('should be able to create and destroy tabs', () => {
cy.visit('http://localhost:8080') cy.visit('/')
cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click();
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
@ -133,7 +140,8 @@ describe('Tabs', () => {
}); });
it('should go back from a tabs page to a non-tabs page using ion-back-button', () => { it('should go back from a tabs page to a non-tabs page using ion-back-button', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click();
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
@ -147,7 +155,8 @@ describe('Tabs', () => {
}); });
it('should properly clear stack when leaving tabs', () => { it('should properly clear stack when leaving tabs', () => {
cy.visit('http://localhost:8080/'); cy.visit('/');
cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click();
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
@ -168,7 +177,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22344 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22344
it('should show tab 1 when redirecting from tab 3', () => { it('should show tab 1 when redirecting from tab 3', () => {
cy.visit('http://localhost:8080/tabs/tab3'); cy.visit('/tabs/tab3');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.ionPageDoesNotExist('tab3'); cy.ionPageDoesNotExist('tab3');
@ -177,7 +186,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22307 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22307
it('should select correct tab after going back', () => { it('should select correct tab after going back', () => {
cy.visit('http://localhost:8080/tabs-secondary/tab1'); cy.visit('/tabs-secondary/tab1');
cy.ionPageVisible('tab1-secondary');
cy.get('ion-tab-button#tab-button-tab2-secondary').click(); cy.get('ion-tab-button#tab-button-tab2-secondary').click();
cy.ionPageVisible('tab2-secondary'); cy.ionPageVisible('tab2-secondary');
@ -202,7 +212,8 @@ describe('Tabs', () => {
// Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519 // Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519
it('should show correct tab when switching between tabbed and non-tabbed contexts', () => { it('should show correct tab when switching between tabbed and non-tabbed contexts', () => {
cy.visit('http://localhost:8080/routing'); cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('[data-pageid="routing"] #tab1').click(); cy.get('[data-pageid="routing"] #tab1').click();
cy.ionPageHidden('routing'); cy.ionPageHidden('routing');
@ -224,7 +235,8 @@ describe('Tabs', () => {
// Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519 // Verifies 1 of 2 fixes for https://github.com/ionic-team/ionic-framework/issues/22519
it('should not create a new tabs instance when switching between tabbed and non-tabbed contexts', () => { it('should not create a new tabs instance when switching between tabbed and non-tabbed contexts', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.routerPush('/'); cy.routerPush('/');
cy.ionPageHidden('tabs'); cy.ionPageHidden('tabs');
@ -241,7 +253,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22597 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22597
it('should deselect old tab button when going to a tab that does not have a tab button', () => { it('should deselect old tab button when going to a tab that does not have a tab button', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab1').should('have.class', 'tab-selected'); cy.get('ion-tab-button#tab-button-tab1').should('have.class', 'tab-selected');
@ -254,7 +267,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23101 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23101
it('should return to previous tab instance when using the ion-back-button', () => { it('should return to previous tab instance when using the ion-back-button', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.get('#tabs-secondary').click(); cy.get('#tabs-secondary').click();
cy.ionPageHidden('tabs'); cy.ionPageHidden('tabs');
@ -275,7 +289,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23087 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23087
it('should return to correct view and url when going back from child page after switching tabs', () => { it('should return to correct view and url when going back from child page after switching tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.get('#child-one').click(); cy.get('#child-one').click();
cy.ionPageHidden('tab1'); cy.ionPageHidden('tab1');
@ -298,8 +313,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22847 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22847
it('should support dynamic tabs', () => { it('should support dynamic tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('ion-tab-button').its('length').should('equal', 3); cy.get('ion-tab-button').its('length').should('equal', 3);
@ -319,8 +333,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23699 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23699
it('should preserve query string when switching tabs', () => { it('should preserve query string when switching tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('#child-one-query-string').click(); cy.get('#child-one-query-string').click();
@ -340,8 +353,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24353 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24353
it('should handle clicking tab multiple times without query string', () => { it('should handle clicking tab multiple times without query string', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
cy.get('ion-tab-button#tab-button-tab2').click(); cy.get('ion-tab-button#tab-button-tab2').click();
@ -363,7 +375,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24332 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24332
it('should not unmount tab 1 when leaving tabs context', () => { it('should not unmount tab 1 when leaving tabs context', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
// Dynamically add tab 4 because tab 3 redirects to tab 1 // Dynamically add tab 4 because tab 3 redirects to tab 1
@ -390,7 +402,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24654 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24654
it('should not error when going back to a tabs view from a non tabs view', () => { it('should not error when going back to a tabs view from a non tabs view', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone'); cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -416,7 +429,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
it('should properly reset location history when switching tabs after going back', () => { it('should properly reset location history when switching tabs after going back', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone'); cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -437,7 +451,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
it('should correctly replace a route in a child tab route', () => { it('should correctly replace a route in a child tab route', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone'); cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -450,7 +465,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24859 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24859
it('should go back to the root page after navigating between tab and non tab outlets', () => { it('should go back to the root page after navigating between tab and non tab outlets', () => {
cy.visit('http://localhost:8080'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/tabs/tab1'); cy.routerPush('/tabs/tab1');
cy.ionPageVisible('tab1'); cy.ionPageVisible('tab1');
@ -480,7 +496,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24936 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24936
it('should correctly go back after changing tabs', () => { it('should correctly go back after changing tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1'); cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone'); cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -509,7 +526,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24303 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24303
it('should correctly perform router.go without errors after navigating into tabs', () => { it('should correctly perform router.go without errors after navigating into tabs', () => {
cy.visit('http://localhost:8080/'); cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/inputs'); cy.routerPush('/inputs');
cy.ionPageVisible('inputs'); cy.ionPageVisible('inputs');
@ -538,7 +556,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/25255 // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/25255
it('should not error when going back to root tab multiple times', () => { it('should not error when going back to root tab multiple times', () => {
cy.visit('http://localhost:8080/tabs'); cy.visit('/tabs');
cy.ionPageVisible('tab1');
cy.routerPush('/tabs/tab1/childone'); cy.routerPush('/tabs/tab1/childone');
cy.ionPageVisible('tab1childone'); cy.ionPageVisible('tab1childone');
@ -585,7 +604,8 @@ describe('Tabs', () => {
describe('Tabs - Swipe to Go Back', () => { describe('Tabs - Swipe to Go Back', () => {
beforeEach(() => { beforeEach(() => {
cy.viewport(320, 568); cy.viewport(320, 568);
cy.visit('http://localhost:8080?ionic:mode=ios'); cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home');
cy.get('#tabs').click(); cy.get('#tabs').click();
cy.ionPageHidden('home'); cy.ionPageHidden('home');
cy.ionPageVisible('tab1') cy.ionPageVisible('tab1')
@ -656,7 +676,7 @@ describe('Tabs - Swipe to Go Back', () => {
describe('Multi Tabs', () => { describe('Multi Tabs', () => {
it('should navigate to multiple tabs instances', () => { it('should navigate to multiple tabs instances', () => {
cy.visit('http://localhost:8080/tabs') cy.visit('/tabs')
cy.get('#tabs-secondary').click(); cy.get('#tabs-secondary').click();
cy.ionPageHidden('tabs'); cy.ionPageHidden('tabs');

10
packages/vue/test/base/tests/unit/hooks.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, useIonRouter, createAnimation } from '@ionic/vue'; import { IonicVue, IonApp, IonRouterOutlet, IonPage, useIonRouter, createAnimation } from '@ionic/vue';
import { mockAnimation, waitForRouter } from './utils'; import { mockAnimation, waitForRouter } from './utils';
@ -14,15 +15,6 @@ const BasePage = {
} }
describe('useIonRouter', () => { describe('useIonRouter', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn((entering, leaving, opts) => {
if (opts && opts.animationBuilder) {
opts.animationBuilder(entering, leaving);
}
return Promise.resolve(true);
});
});
it('should correctly navigate back', async () => { it('should correctly navigate back', async () => {
const Page1 = { const Page1 = {
...BasePage ...BasePage

58
packages/vue/test/base/tests/unit/lifecycle.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue'; import { IonicVue, IonApp, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -21,10 +22,10 @@ const Page1 = {
name: 'page1' name: 'page1'
} }
}, },
ionViewWillEnter: jest.fn(), ionViewWillEnter: vi.fn(),
ionViewDidEnter: jest.fn(), ionViewDidEnter: vi.fn(),
ionViewWillLeave: jest.fn(), ionViewWillLeave: vi.fn(),
ionViewDidLeave: jest.fn(), ionViewDidLeave: vi.fn(),
} }
const Page2 = defineComponent({ const Page2 = defineComponent({
@ -34,16 +35,13 @@ const Page2 = defineComponent({
name: 'page2' name: 'page2'
} }
}, },
ionViewWillEnter: jest.fn(), ionViewWillEnter: vi.fn(),
ionViewDidEnter: jest.fn(), ionViewDidEnter: vi.fn(),
ionViewWillLeave: jest.fn(), ionViewWillLeave: vi.fn(),
ionViewDidLeave: jest.fn(), ionViewDidLeave: vi.fn(),
}); });
describe('Lifecycle Events', () => { describe('Lifecycle Events', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('Triggers lifecycle events', async () => { it('Triggers lifecycle events', async () => {
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
@ -81,7 +79,7 @@ describe('Lifecycle Events', () => {
// Navigate to 2nd page // Navigate to 2nd page
router.push('/2'); router.push('/2');
jest.resetAllMocks(); vi.resetAllMocks();
await waitForRouter(); await waitForRouter();
// Page 1 lifecycle hooks // Page 1 lifecycle hooks
@ -96,10 +94,10 @@ describe('Lifecycle Events', () => {
// Page 2 lifecycle hooks // Page 2 lifecycle hooks
expect(Page2.ionViewWillEnter).toHaveBeenCalled(); expect(Page2.ionViewWillEnter).toHaveBeenCalled();
expect((Page2.ionViewWillEnter as jest.Mock).mock.instances[0]).toEqual(expect.objectContaining({ name: 'page2' })) expect((Page2.ionViewWillEnter as vi.Mock).mock.instances[0]).toEqual(expect.objectContaining({ name: 'page2' }))
expect(Page2.ionViewDidEnter).toHaveBeenCalled(); expect(Page2.ionViewDidEnter).toHaveBeenCalled();
expect((Page2.ionViewDidEnter as jest.Mock).mock.instances[0]).toEqual(expect.objectContaining({ name: 'page2' })) expect((Page2.ionViewDidEnter as vi.Mock).mock.instances[0]).toEqual(expect.objectContaining({ name: 'page2' }))
expect(Page2.ionViewWillLeave).not.toHaveBeenCalled(); expect(Page2.ionViewWillLeave).not.toHaveBeenCalled();
expect(Page2.ionViewDidLeave).not.toHaveBeenCalled(); expect(Page2.ionViewDidLeave).not.toHaveBeenCalled();
@ -115,25 +113,25 @@ describe('Lifecycle Events', () => {
</ion-page> </ion-page>
`, `,
components: { IonPage, IonTabs, IonRouterOutlet }, components: { IonPage, IonTabs, IonRouterOutlet },
ionViewWillEnter: jest.fn(), ionViewWillEnter: vi.fn(),
ionViewDidEnter: jest.fn(), ionViewDidEnter: vi.fn(),
ionViewWillLeave: jest.fn(), ionViewWillLeave: vi.fn(),
ionViewDidLeave: jest.fn(), ionViewDidLeave: vi.fn(),
} }
const Tab1Page = { const Tab1Page = {
...BasePage, ...BasePage,
ionViewWillEnter: jest.fn(), ionViewWillEnter: vi.fn(),
ionViewDidEnter: jest.fn(), ionViewDidEnter: vi.fn(),
ionViewWillLeave: jest.fn(), ionViewWillLeave: vi.fn(),
ionViewDidLeave: jest.fn(), ionViewDidLeave: vi.fn(),
} }
const NonTabPage = { const NonTabPage = {
...BasePage, ...BasePage,
ionViewWillEnter: jest.fn(), ionViewWillEnter: vi.fn(),
ionViewDidEnter: jest.fn(), ionViewDidEnter: vi.fn(),
ionViewWillLeave: jest.fn(), ionViewWillLeave: vi.fn(),
ionViewDidLeave: jest.fn(), ionViewDidLeave: vi.fn(),
} }
@ -168,7 +166,7 @@ describe('Lifecycle Events', () => {
// Navigate out of tabs // Navigate out of tabs
router.push('/non-tab'); router.push('/non-tab');
jest.resetAllMocks(); vi.resetAllMocks();
await waitForRouter(); await waitForRouter();
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled(); expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
@ -184,7 +182,7 @@ describe('Lifecycle Events', () => {
// Go back // Go back
router.back(); router.back();
jest.resetAllMocks(); vi.resetAllMocks();
await waitForRouter(); await waitForRouter();
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled(); expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();
@ -198,7 +196,7 @@ describe('Lifecycle Events', () => {
// Navigate out of tabs again // Navigate out of tabs again
router.push('/non-tab'); router.push('/non-tab');
jest.resetAllMocks(); vi.resetAllMocks();
await waitForRouter(); await waitForRouter();
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled(); expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
@ -209,7 +207,7 @@ describe('Lifecycle Events', () => {
// Go back again // Go back again
router.back(); router.back();
jest.resetAllMocks(); vi.resetAllMocks();
await waitForRouter(); await waitForRouter();
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled(); expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();

6
packages/vue/test/base/tests/unit/memory.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it, vi } from 'vitest';
import { createRouter, createMemoryHistory } from '@ionic/vue-router'; import { createRouter, createMemoryHistory } from '@ionic/vue-router';
import { import {
IonContent, IonContent,
@ -18,9 +19,6 @@ const App = {
} }
describe('createMemoryHistory', () => { describe('createMemoryHistory', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should not error when going back with memory router', async () => { it('should not error when going back with memory router', async () => {
const PageTemplate = { const PageTemplate = {
template: ` template: `
@ -44,7 +42,7 @@ describe('createMemoryHistory', () => {
{ path: '/page3', component: PageTemplate } { path: '/page3', component: PageTemplate }
] ]
}); });
const push = jest.spyOn(router, 'back') const push = vi.spyOn(router, 'back');
router.push('/'); router.push('/');
await router.isReady(); await router.isReady();

4
packages/vue/test/base/tests/unit/page.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue'; import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue';
@ -8,9 +9,6 @@ const App = {
} }
describe('IonPage', () => { describe('IonPage', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should add ion-page class', async () => { it('should add ion-page class', async () => {
const Page1 = { const Page1 = {
template: '<ion-page></ion-page>', template: '<ion-page></ion-page>',

5
packages/vue/test/base/tests/unit/router-outlet.spec.ts
View File

@ -1,4 +1,5 @@
import { enableAutoUnmount, mount } from '@vue/test-utils'; import { enableAutoUnmount, mount } from '@vue/test-utils';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { import {
IonicVue, IonicVue,
@ -68,7 +69,7 @@ describe('Routing', () => {
/** /**
* Mock the commit function on IonRouterOutlet * Mock the commit function on IonRouterOutlet
*/ */
const commitFn = jest.fn(); const commitFn = vi.fn();
const routerOutlet = wrapper.findComponent(IonRouterOutlet); const routerOutlet = wrapper.findComponent(IonRouterOutlet);
routerOutlet.vm.$el.commit = commitFn; routerOutlet.vm.$el.commit = commitFn;
@ -130,7 +131,7 @@ describe('Routing', () => {
/** /**
* Mock the commit function on IonRouterOutlet * Mock the commit function on IonRouterOutlet
*/ */
const commitFn = jest.fn(); const commitFn = vi.fn();
const routerOutlet = wrapper.findComponent(IonRouterOutlet); const routerOutlet = wrapper.findComponent(IonRouterOutlet);
routerOutlet.vm.$el.commit = commitFn; routerOutlet.vm.$el.commit = commitFn;

14
packages/vue/test/base/tests/unit/routing.spec.ts
View File

@ -1,4 +1,5 @@
import { enableAutoUnmount, mount } from '@vue/test-utils'; import { enableAutoUnmount, mount } from '@vue/test-utils';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { import {
IonicVue, IonicVue,
@ -27,9 +28,6 @@ const BasePage = {
} }
describe('Routing', () => { describe('Routing', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should pass no props', async () => { it('should pass no props', async () => {
const Page1 = { const Page1 = {
...BasePage, ...BasePage,
@ -95,7 +93,7 @@ describe('Routing', () => {
} }
}; };
const propsFn = jest.fn((route) => { const propsFn = vi.fn((route) => {
return { title: `${route.params.id} Title` } return { title: `${route.params.id} Title` }
}); });
@ -160,7 +158,7 @@ describe('Routing', () => {
}); });
it('should call vue router hooks properly', async () => { it('should call vue router hooks properly', async () => {
const leaveHook = jest.fn(); const leaveHook = vi.fn();
const Page1 = { const Page1 = {
...BasePage, ...BasePage,
name: 'Page1', name: 'Page1',
@ -343,7 +341,7 @@ describe('Routing', () => {
name: 'Home', name: 'Home',
} }
const propsFn = jest.fn((route) => { const propsFn = vi.fn((route) => {
return { title: `${route.params.id} Title` } return { title: `${route.params.id} Title` }
}); });
@ -422,8 +420,8 @@ describe('Routing', () => {
}); });
it('should fire guard written in a component', async () => { it('should fire guard written in a component', async () => {
const beforeRouteEnterSpy = jest.fn(); const beforeRouteEnterSpy = vi.fn();
const beforeRouteLeaveSpy = jest.fn(); const beforeRouteLeaveSpy = vi.fn();
const Page = { const Page = {
beforeRouteEnter() { beforeRouteEnter() {
beforeRouteEnterSpy(); beforeRouteEnterSpy();

1
packages/vue/test/base/tests/unit/tab-bar.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue'; import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue';

4
packages/vue/test/base/tests/unit/tabs.spec.ts
View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router'; import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel } from '@ionic/vue'; import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel } from '@ionic/vue';
import { waitForRouter } from './utils'; import { waitForRouter } from './utils';
@ -36,9 +37,6 @@ const Tab2 = {
} }
describe('ion-tabs', () => { describe('ion-tabs', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should emit will change and did change events when changing tab', async () => { it('should emit will change and did change events when changing tab', async () => {
const router = createRouter({ const router = createRouter({
history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),

3
packages/vue/test/base/tests/unit/utils.ts
View File

@ -1,5 +1,6 @@
import { flushPromises } from '@vue/test-utils'; import { flushPromises } from '@vue/test-utils';
import { createAnimation } from '@ionic/vue'; import { createAnimation } from '@ionic/vue';
import { vi } from 'vitest';
export const waitForRouter = async () => { export const waitForRouter = async () => {
await flushPromises(); await flushPromises();
@ -7,5 +8,5 @@ export const waitForRouter = async () => {
} }
export const mockAnimation = () => { export const mockAnimation = () => {
return jest.fn(() => createAnimation()); return vi.fn().mockImplementation(createAnimation);
} }

2
packages/vue/test/base/tsconfig.json
View File

@ -1,6 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2019", "target": "es2021",
"module": "esnext", "module": "esnext",
"strict": true, "strict": true,
"jsx": "preserve", "jsx": "preserve",

24
packages/vue/test/base/vite.config.js Normal file
View File

@ -0,0 +1,24 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
test: {
environment: 'jsdom'
},
// Server applies to "vite" command
server: {
port: 8080
},
// Preview applies to "vite preview" command
preview: {
port: 8080
}
})