javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 16:52:26 +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,
"description": "An Ionic project",
"scripts": {
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "concurrently \"npm run start -- --mode production\" \"wait-on http-get://localhost:8080 && npm run cypress\" --kill-others --success first",
"lint": "vue-cli-service lint",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"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.open": "cypress open",
"start": "vue-cli-service serve",
"start": "npm run dev",
"sync": "sh ./scripts/sync.sh"
},
"dependencies": {
@ -20,26 +22,19 @@
"vue-router": "^4.0.14"
},
"devDependencies": {
"@types/jest": "^27.5.2",
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"@vue/cli-plugin-babel": "~5.0.3",
"@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",
"@vitejs/plugin-vue": "^3.1.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"concurrently": "^6.0.0",
"cypress": "^10.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.1.0",
"ts-jest": "^27.0.4",
"jsdom": "^20.0.0",
"typescript": "~4.5.5",
"vite": "^3.1.4",
"vitest": "^0.23.4",
"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}',
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="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 -->
<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-status-bar-style" content="black" />
<script type="module" src="/src/main.ts"></script>
</head>
<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({
history: createWebHistory(process.env.BASE_URL),
history: createWebHistory(import.meta.env.BASE_URL),
routes
});

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

@ -1,6 +1,7 @@
describe('Hardware Back Button', () => {
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.ionPageHidden('tab1');
@ -30,7 +31,8 @@ describe('Hardware Back Button', () => {
});
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.ionPageHidden('home');
@ -59,7 +61,8 @@ describe('Hardware Back Button', () => {
// TODO FW-1389
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.ionPageHidden('home');

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

@ -1,6 +1,6 @@
describe('Inputs', () => {
beforeEach(() => {
cy.visit('http://localhost:8080/inputs')
cy.visit('/inputs')
})
it('should have default value', () => {
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', () => {
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();
testLifecycle('lifecycle', {
@ -42,7 +43,7 @@ describe('Lifecycle', () => {
});
it('should fire lifecycle events when landed on directly', () => {
cy.visit('http://localhost:8080/lifecycle');
cy.visit('/lifecycle');
testLifecycle('lifecycle', {
ionViewWillEnter: 1,
@ -57,7 +58,8 @@ describe('Lifecycle', () => {
});
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();
testLifecycle('lifecycle-setup', {
@ -87,7 +89,7 @@ describe('Lifecycle', () => {
});
it('should fire lifecycle events when landed on directly - setup', () => {
cy.visit('http://localhost:8080/lifecycle-setup');
cy.visit('/lifecycle-setup');
testLifecycle('lifecycle-setup', {
onIonViewWillEnter: 1,

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

@ -1,6 +1,6 @@
describe('Navigation', () => {
beforeEach(() => {
cy.visit('http://localhost:8080/navigation');
cy.visit('/navigation');
});
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', () => {
beforeEach(() => {
cy.visit('http://localhost:8080/nested');
cy.visit('/nested');
cy.ionPageVisible('nestedchild');
});
@ -31,7 +31,8 @@ describe('Nested', () => {
describe('Nested - Replace', () => {
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.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', () => {
beforeEach(() => {
cy.viewport(1000, 900);
cy.visit('http://localhost:8080/keep-contents-mounted')
cy.visit('/keep-contents-mounted')
})
describe('modal', () => {
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', () => {
beforeEach(() => {
cy.viewport(1000, 900);
cy.visit('http://localhost:8080/overlays')
cy.visit('/overlays');
})
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', () => {
it('should go to sibling page', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.get('ion-item#routing').click();
cy.ionPageVisible('routing');
@ -8,13 +9,15 @@ describe('Routing', () => {
});
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.ionPageVisible('routing');
});
it('should go back home', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.get('ion-item#routing').click();
cy.ionBackClick('routing');
@ -24,7 +27,8 @@ describe('Routing', () => {
});
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');
@ -33,7 +37,8 @@ describe('Routing', () => {
});
it('should show back button', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.get('#routing').click();
cy.get('#child').click();
@ -48,7 +53,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359
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.ionPageVisible('routingparameter-abc');
@ -64,7 +70,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22359
it('should handle parameterized urls properly', () => {
cy.visit('http://localhost:8080/routing');
cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#parameter-abc').click();
cy.ionPageVisible('routingparameter-abc');
@ -76,7 +83,8 @@ describe('Routing', () => {
// 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', () => {
cy.visit('http://localhost:8080/routing');
cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('#route-params').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
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('ion-loading').should('exist');
@ -107,8 +116,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22412
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.ionPageVisible('navigation');
@ -120,8 +129,7 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22654
it('should show correct view when navigating between parameter urls', () => {
cy.visit('http://localhost:8080/nested');
cy.visit('/nested');
cy.ionPageVisible('nestedchild');
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
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.ionPageVisible('routingparameter-123');
@ -177,7 +186,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22528
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.ionPageVisible('navigation');
@ -192,7 +202,8 @@ describe('Routing', () => {
// 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', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing/123');
cy.ionPageVisible('routingparameter-123');
@ -209,7 +220,8 @@ describe('Routing', () => {
});
it('should select correct view when using router.go()', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
@ -233,7 +245,8 @@ describe('Routing', () => {
})
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.ionPageVisible('routing');
@ -265,7 +278,8 @@ describe('Routing', () => {
})
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.ionPageVisible('routing');
@ -289,7 +303,8 @@ describe('Routing', () => {
})
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.ionPageVisible('routing');
@ -317,7 +332,8 @@ describe('Routing', () => {
});
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.ionPageVisible('routing');
@ -335,7 +351,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23987
it('should choose correct view when navigating back', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
@ -380,7 +397,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24226
it('should correctly replace a route after popping', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
@ -401,7 +419,8 @@ describe('Routing', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/23873
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.ionPageVisible('routing');
@ -433,7 +452,8 @@ describe('Routing', () => {
})
it('should correctly update location history after rewriting past state', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
@ -473,7 +493,8 @@ describe('Routing', () => {
})
it('should correctly update location history after setting root state', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');
@ -516,7 +537,8 @@ describe('Routing', () => {
describe('Routing - Swipe to Go Back', () => {
beforeEach(() => {
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.ionPageHidden('home');
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()', () => {
cy.visit('http://localhost:8080?ionic:mode=ios');
cy.visit('?ionic:mode=ios');
cy.ionPageVisible('home');
cy.routerPush('/routing');
cy.ionPageVisible('routing');

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

@ -1,6 +1,7 @@
describe('Tabs', () => {
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.ionPageHidden('tab1');
@ -19,7 +20,8 @@ describe('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();
@ -37,7 +39,8 @@ describe('Tabs', () => {
});
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();
@ -52,7 +55,8 @@ describe('Tabs', () => {
});
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.ionPageVisible('tab1childone');
@ -73,7 +77,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934
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.ionPageVisible('tab1childone');
@ -95,7 +100,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24934
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.ionPageVisible('tab1childone');
@ -115,7 +121,8 @@ describe('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.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', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.get('#tabs').click();
cy.ionPageVisible('tab1');
@ -147,7 +155,8 @@ describe('Tabs', () => {
});
it('should properly clear stack when leaving tabs', () => {
cy.visit('http://localhost:8080/');
cy.visit('/');
cy.ionPageVisible('home');
cy.get('#tabs').click();
cy.ionPageVisible('tab1');
@ -168,7 +177,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22344
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.ionPageDoesNotExist('tab3');
@ -177,7 +186,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22307
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.ionPageVisible('tab2-secondary');
@ -202,7 +212,8 @@ describe('Tabs', () => {
// 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', () => {
cy.visit('http://localhost:8080/routing');
cy.visit('/routing');
cy.ionPageVisible('routing');
cy.get('[data-pageid="routing"] #tab1').click();
cy.ionPageHidden('routing');
@ -224,7 +235,8 @@ describe('Tabs', () => {
// 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', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.routerPush('/');
cy.ionPageHidden('tabs');
@ -241,7 +253,8 @@ describe('Tabs', () => {
// 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', () => {
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');
@ -254,7 +267,8 @@ describe('Tabs', () => {
// 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', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.get('#tabs-secondary').click();
cy.ionPageHidden('tabs');
@ -275,7 +289,8 @@ describe('Tabs', () => {
// 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', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
cy.get('#child-one').click();
cy.ionPageHidden('tab1');
@ -298,8 +313,7 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22847
it('should support dynamic tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
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
it('should preserve query string when switching tabs', () => {
cy.visit('http://localhost:8080/tabs/tab1');
cy.visit('/tabs/tab1');
cy.ionPageVisible('tab1');
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
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.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
it('should not unmount tab 1 when leaving tabs context', () => {
cy.visit('http://localhost:8080/tabs');
cy.visit('/tabs');
cy.ionPageVisible('tab1');
// 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
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.ionPageVisible('tab1childone');
@ -416,7 +429,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
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.ionPageVisible('tab1childone');
@ -437,7 +451,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24432
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.ionPageVisible('tab1childone');
@ -450,7 +465,8 @@ describe('Tabs', () => {
// 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', () => {
cy.visit('http://localhost:8080');
cy.visit('/');
cy.ionPageVisible('home');
cy.routerPush('/tabs/tab1');
cy.ionPageVisible('tab1');
@ -480,7 +496,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24936
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.ionPageVisible('tab1childone');
@ -509,7 +526,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/24303
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.ionPageVisible('inputs');
@ -538,7 +556,8 @@ describe('Tabs', () => {
// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/25255
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.ionPageVisible('tab1childone');
@ -585,7 +604,8 @@ describe('Tabs', () => {
describe('Tabs - Swipe to Go Back', () => {
beforeEach(() => {
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.ionPageHidden('home');
cy.ionPageVisible('tab1')
@ -656,7 +676,7 @@ describe('Tabs - Swipe to Go Back', () => {
describe('Multi Tabs', () => {
it('should navigate to multiple tabs instances', () => {
cy.visit('http://localhost:8080/tabs')
cy.visit('/tabs')
cy.get('#tabs-secondary').click();
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 { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, useIonRouter, createAnimation } from '@ionic/vue';
import { mockAnimation, waitForRouter } from './utils';
@ -14,15 +15,6 @@ const BasePage = {
}
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 () => {
const Page1 = {
...BasePage

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

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils';
import { describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue';
import { defineComponent } from 'vue';
@ -21,10 +22,10 @@ const Page1 = {
name: 'page1'
}
},
ionViewWillEnter: jest.fn(),
ionViewDidEnter: jest.fn(),
ionViewWillLeave: jest.fn(),
ionViewDidLeave: jest.fn(),
ionViewWillEnter: vi.fn(),
ionViewDidEnter: vi.fn(),
ionViewWillLeave: vi.fn(),
ionViewDidLeave: vi.fn(),
}
const Page2 = defineComponent({
@ -34,16 +35,13 @@ const Page2 = defineComponent({
name: 'page2'
}
},
ionViewWillEnter: jest.fn(),
ionViewDidEnter: jest.fn(),
ionViewWillLeave: jest.fn(),
ionViewDidLeave: jest.fn(),
ionViewWillEnter: vi.fn(),
ionViewDidEnter: vi.fn(),
ionViewWillLeave: vi.fn(),
ionViewDidLeave: vi.fn(),
});
describe('Lifecycle Events', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('Triggers lifecycle events', async () => {
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
@ -81,7 +79,7 @@ describe('Lifecycle Events', () => {
// Navigate to 2nd page
router.push('/2');
jest.resetAllMocks();
vi.resetAllMocks();
await waitForRouter();
// Page 1 lifecycle hooks
@ -96,10 +94,10 @@ describe('Lifecycle Events', () => {
// Page 2 lifecycle hooks
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 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.ionViewDidLeave).not.toHaveBeenCalled();
@ -115,25 +113,25 @@ describe('Lifecycle Events', () => {
</ion-page>
`,
components: { IonPage, IonTabs, IonRouterOutlet },
ionViewWillEnter: jest.fn(),
ionViewDidEnter: jest.fn(),
ionViewWillLeave: jest.fn(),
ionViewDidLeave: jest.fn(),
ionViewWillEnter: vi.fn(),
ionViewDidEnter: vi.fn(),
ionViewWillLeave: vi.fn(),
ionViewDidLeave: vi.fn(),
}
const Tab1Page = {
...BasePage,
ionViewWillEnter: jest.fn(),
ionViewDidEnter: jest.fn(),
ionViewWillLeave: jest.fn(),
ionViewDidLeave: jest.fn(),
ionViewWillEnter: vi.fn(),
ionViewDidEnter: vi.fn(),
ionViewWillLeave: vi.fn(),
ionViewDidLeave: vi.fn(),
}
const NonTabPage = {
...BasePage,
ionViewWillEnter: jest.fn(),
ionViewDidEnter: jest.fn(),
ionViewWillLeave: jest.fn(),
ionViewDidLeave: jest.fn(),
ionViewWillEnter: vi.fn(),
ionViewDidEnter: vi.fn(),
ionViewWillLeave: vi.fn(),
ionViewDidLeave: vi.fn(),
}
@ -168,7 +166,7 @@ describe('Lifecycle Events', () => {
// Navigate out of tabs
router.push('/non-tab');
jest.resetAllMocks();
vi.resetAllMocks();
await waitForRouter();
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
@ -184,7 +182,7 @@ describe('Lifecycle Events', () => {
// Go back
router.back();
jest.resetAllMocks();
vi.resetAllMocks();
await waitForRouter();
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();
@ -198,7 +196,7 @@ describe('Lifecycle Events', () => {
// Navigate out of tabs again
router.push('/non-tab');
jest.resetAllMocks();
vi.resetAllMocks();
await waitForRouter();
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
@ -209,7 +207,7 @@ describe('Lifecycle Events', () => {
// Go back again
router.back();
jest.resetAllMocks();
vi.resetAllMocks();
await waitForRouter();
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 { describe, expect, it, vi } from 'vitest';
import { createRouter, createMemoryHistory } from '@ionic/vue-router';
import {
IonContent,
@ -18,9 +19,6 @@ const App = {
}
describe('createMemoryHistory', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should not error when going back with memory router', async () => {
const PageTemplate = {
template: `
@ -44,7 +42,7 @@ describe('createMemoryHistory', () => {
{ path: '/page3', component: PageTemplate }
]
});
const push = jest.spyOn(router, 'back')
const push = vi.spyOn(router, 'back');
router.push('/');
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 { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue';
@ -8,9 +9,6 @@ const App = {
}
describe('IonPage', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should add ion-page class', async () => {
const Page1 = {
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 { afterEach, describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import {
IonicVue,
@ -68,7 +69,7 @@ describe('Routing', () => {
/**
* Mock the commit function on IonRouterOutlet
*/
const commitFn = jest.fn();
const commitFn = vi.fn();
const routerOutlet = wrapper.findComponent(IonRouterOutlet);
routerOutlet.vm.$el.commit = commitFn;
@ -130,7 +131,7 @@ describe('Routing', () => {
/**
* Mock the commit function on IonRouterOutlet
*/
const commitFn = jest.fn();
const commitFn = vi.fn();
const routerOutlet = wrapper.findComponent(IonRouterOutlet);
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 { afterEach, describe, expect, it, vi } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import {
IonicVue,
@ -27,9 +28,6 @@ const BasePage = {
}
describe('Routing', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should pass no props', async () => {
const Page1 = {
...BasePage,
@ -95,7 +93,7 @@ describe('Routing', () => {
}
};
const propsFn = jest.fn((route) => {
const propsFn = vi.fn((route) => {
return { title: `${route.params.id} Title` }
});
@ -160,7 +158,7 @@ describe('Routing', () => {
});
it('should call vue router hooks properly', async () => {
const leaveHook = jest.fn();
const leaveHook = vi.fn();
const Page1 = {
...BasePage,
name: 'Page1',
@ -343,7 +341,7 @@ describe('Routing', () => {
name: 'Home',
}
const propsFn = jest.fn((route) => {
const propsFn = vi.fn((route) => {
return { title: `${route.params.id} Title` }
});
@ -422,8 +420,8 @@ describe('Routing', () => {
});
it('should fire guard written in a component', async () => {
const beforeRouteEnterSpy = jest.fn();
const beforeRouteLeaveSpy = jest.fn();
const beforeRouteEnterSpy = vi.fn();
const beforeRouteLeaveSpy = vi.fn();
const Page = {
beforeRouteEnter() {
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 { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
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 { describe, expect, it } from 'vitest';
import { createRouter, createWebHistory } from '@ionic/vue-router';
import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel } from '@ionic/vue';
import { waitForRouter } from './utils';
@ -36,9 +37,6 @@ const Tab2 = {
}
describe('ion-tabs', () => {
beforeAll(() => {
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
});
it('should emit will change and did change events when changing tab', async () => {
const router = createRouter({
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 { createAnimation } from '@ionic/vue';
import { vi } from 'vitest';
export const waitForRouter = async () => {
await flushPromises();
@ -7,5 +8,5 @@ export const waitForRouter = async () => {
}
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": {
"target": "es2019",
"target": "es2021",
"module": "esnext",
"strict": true,
"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
}
})