mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
chore(): sync with main
This commit is contained in:
Liam DeBeasi
@ -3,6 +3,44 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [6.2.7](https://github.com/ionic-team/ionic/compare/v6.2.6...v6.2.7) (2022-09-14)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.2.6](https://github.com/ionic-team/ionic/compare/v6.2.5...v6.2.6) (2022-09-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **vue:** custom animation plays when replacing ([#25863](https://github.com/ionic-team/ionic/issues/25863)) ([2d3661a](https://github.com/ionic-team/ionic/commit/2d3661ae3894b98ac4b8b158594b8de0f0823073)), closes [#25831](https://github.com/ionic-team/ionic/issues/25831)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.2.5](https://github.com/ionic-team/ionic/compare/v6.2.4...v6.2.5) (2022-08-31)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.2.4](https://github.com/ionic-team/ionic/compare/v6.2.3...v6.2.4) (2022-08-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **vue:** lifecycles now fire on tabs pages ([#25786](https://github.com/ionic-team/ionic/issues/25786)) ([3020005](https://github.com/ionic-team/ionic/commit/30200051bbab6ce57fd363668dafc49287c87c56)), closes [#25784](https://github.com/ionic-team/ionic/issues/25784)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [6.2.3](https://github.com/ionic-team/ionic/compare/v6.2.2...v6.2.3) (2022-08-17)
|
||||
|
||||
**Note:** Version bump only for package @ionic/vue
|
||||
|
||||
50
packages/vue/package-lock.json
generated
50
packages/vue/package-lock.json
generated
@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "@ionic/vue",
|
||||
"version": "6.2.3",
|
||||
"version": "6.2.7",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/vue",
|
||||
"version": "6.2.3",
|
||||
"version": "6.2.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ionic/core": "^6.2.3",
|
||||
"@ionic/core": "^6.2.7",
|
||||
"ionicons": "^6.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -59,19 +59,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ionic/core": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.3.tgz",
|
||||
"integrity": "sha512-TqSVN5nfDC8Ovcfgv6PH6FsNY8P9Awl2zSXVMBpgr5CSFNOb6xB4U8utdhMtJbuo/OYgqAbjSVq+pD4RiBt1rw==",
|
||||
"version": "6.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
|
||||
"integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^2.16.0",
|
||||
"ionicons": "^6.0.2",
|
||||
"@stencil/core": "^2.17.4",
|
||||
"ionicons": "^6.0.3",
|
||||
"tslib": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ionic/core/node_modules/@stencil/core": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
|
||||
"integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
|
||||
"version": "2.17.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.4.tgz",
|
||||
"integrity": "sha512-SGRlHpjV1RyFvzw6jFMVKpLNox9Eds3VvpbpD2SW9CuxdLonHDSFtQks5zmT4zs1Rse9I6kFc2mFK/dHNTalkg==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@ -421,9 +421,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ionicons": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
|
||||
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
|
||||
"integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
|
||||
"dependencies": {
|
||||
"@stencil/core": "~2.16.0"
|
||||
}
|
||||
@ -768,19 +768,19 @@
|
||||
}
|
||||
},
|
||||
"@ionic/core": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.3.tgz",
|
||||
"integrity": "sha512-TqSVN5nfDC8Ovcfgv6PH6FsNY8P9Awl2zSXVMBpgr5CSFNOb6xB4U8utdhMtJbuo/OYgqAbjSVq+pD4RiBt1rw==",
|
||||
"version": "6.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.7.tgz",
|
||||
"integrity": "sha512-pQWcIqr5zfCX5De/MQ9kFs+nhaPCr8HIh5QjmydxvmlLv6WU4vlny/Mg0y1+JwLE0qxPD0T9sMykawWH9e3y5Q==",
|
||||
"requires": {
|
||||
"@stencil/core": "^2.16.0",
|
||||
"ionicons": "^6.0.2",
|
||||
"@stencil/core": "^2.17.4",
|
||||
"ionicons": "^6.0.3",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stencil/core": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
|
||||
"integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
|
||||
"version": "2.17.4",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.4.tgz",
|
||||
"integrity": "sha512-SGRlHpjV1RyFvzw6jFMVKpLNox9Eds3VvpbpD2SW9CuxdLonHDSFtQks5zmT4zs1Rse9I6kFc2mFK/dHNTalkg=="
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.2.0",
|
||||
@ -1095,9 +1095,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"ionicons": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
|
||||
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
|
||||
"integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
|
||||
"requires": {
|
||||
"@stencil/core": "~2.16.0"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/vue",
|
||||
"version": "6.2.3",
|
||||
"version": "6.2.7",
|
||||
"description": "Vue specific wrapper for @ionic/core",
|
||||
"scripts": {
|
||||
"prepublishOnly": "npm run build",
|
||||
@ -61,7 +61,7 @@
|
||||
"vue-router": "^4.0.16"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^6.2.3",
|
||||
"@ionic/core": "^6.2.7",
|
||||
"ionicons": "^6.0.2"
|
||||
},
|
||||
"vetur": {
|
||||
|
||||
@ -88,19 +88,20 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
|
||||
* all of the keys in the params object, we check the url path to
|
||||
* see if they are different after ensuring we are in a parameterized route.
|
||||
*/
|
||||
if (currentMatchedRouteRef === undefined) { return; }
|
||||
if (currentMatchedRouteRef !== undefined) {
|
||||
const matchedDifferentRoutes = currentMatchedRouteRef !== previousMatchedRouteRef;
|
||||
const matchedDifferentParameterRoutes = (
|
||||
currentRoute.matched[currentRoute.matched.length - 1] === currentMatchedRouteRef &&
|
||||
currentRoute.path !== previousMatchedPath
|
||||
);
|
||||
|
||||
const matchedDifferentRoutes = currentMatchedRouteRef !== previousMatchedRouteRef;
|
||||
const matchedDifferentParameterRoutes = (
|
||||
currentRoute.matched[currentRoute.matched.length - 1] === currentMatchedRouteRef &&
|
||||
currentRoute.path !== previousMatchedPath
|
||||
);
|
||||
|
||||
if (matchedDifferentRoutes || matchedDifferentParameterRoutes) {
|
||||
setupViewItem(matchedRouteRef);
|
||||
previousMatchedRouteRef = currentMatchedRouteRef;
|
||||
previousMatchedPath = currentRoute.path;
|
||||
if (matchedDifferentRoutes || matchedDifferentParameterRoutes) {
|
||||
setupViewItem(matchedRouteRef);
|
||||
}
|
||||
}
|
||||
|
||||
previousMatchedRouteRef = currentMatchedRouteRef;
|
||||
previousMatchedPath = currentRoute.path;
|
||||
});
|
||||
|
||||
const canStart = () => {
|
||||
@ -216,9 +217,18 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
|
||||
requestAnimationFrame(async () => {
|
||||
enteringEl.classList.add('ion-page-invisible');
|
||||
|
||||
const hasRootDirection = direction === undefined || direction === 'root' || direction === 'none';
|
||||
const result = await ionRouterOutlet.value.commit(enteringEl, leavingEl, {
|
||||
deepWait: true,
|
||||
duration: direction === undefined || direction === 'root' || direction === 'none' ? 0 : undefined,
|
||||
/**
|
||||
* replace operations result in a direction of none.
|
||||
* These typically do not have need animations, so we set
|
||||
* the duration to 0. However, if a developer explicitly
|
||||
* passes an animationBuilder, we should assume that
|
||||
* they want an animation to be played even
|
||||
* though it is a replace operation.
|
||||
*/
|
||||
duration: hasRootDirection && animationBuilder === undefined ? 0 : undefined,
|
||||
direction,
|
||||
showGoBack,
|
||||
progressAnimation,
|
||||
@ -274,13 +284,13 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
|
||||
* return early for swipe to go back when
|
||||
* going from a non-tabs page to a tabs page.
|
||||
*/
|
||||
if (isViewVisible(enteringEl) && leavingViewItem !== undefined && !isViewVisible(leavingViewItem.ionPageElement)) {
|
||||
if (isViewVisible(enteringEl) && leavingViewItem?.ionPageElement !== undefined && !isViewVisible(leavingViewItem.ionPageElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
fireLifecycle(enteringViewItem.vueComponent, enteringViewItem.vueComponentRef, LIFECYCLE_WILL_ENTER);
|
||||
|
||||
if (leavingViewItem && enteringViewItem !== leavingViewItem) {
|
||||
if (leavingViewItem?.ionPageElement && enteringViewItem !== leavingViewItem) {
|
||||
let animationBuilder = routerAnimation;
|
||||
const leavingEl = leavingViewItem.ionPageElement;
|
||||
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"pluginsFile": "tests/e2e/plugins/index.js",
|
||||
"video": false,
|
||||
"screenshotOnRunFailure": false,
|
||||
"defaultCommandTimeout": 10000
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
# Copy ionic vue dist
|
||||
rm -rf node_modules/@ionic/vue/dist node_modules/@ionic/vue/css
|
||||
cp -a ../dist node_modules/@ionic/vue/dist
|
||||
cp -a ../css node_modules/@ionic/vue/css
|
||||
cp -a ../package.json node_modules/@ionic/vue/package.json
|
||||
|
||||
# Copy ionic vue router dist
|
||||
rm -rf node_modules/@ionic/vue-router/dist
|
||||
cp -a ../../vue-router/dist node_modules/@ionic/vue-router/dist
|
||||
cp -a ../../vue-router/package.json node_modules/@ionic/vue-router/package.json
|
||||
|
||||
# Copy core dist and components
|
||||
rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
|
||||
cp -a ../../../core/package.json node_modules/@ionic/core/package.json
|
||||
cp -a ../../../core/dist node_modules/@ionic/core/dist
|
||||
cp -a ../../../core/components node_modules/@ionic/core/components
|
||||
|
||||
# Copy stencil
|
||||
rm -rf node_modules/@stencil/core
|
||||
cp -a ../../../core/node_modules/@stencil/core node_modules/@stencil/core
|
||||
|
||||
# Copy ionicons
|
||||
rm -rf node_modules/ionicons
|
||||
cp -a ../../../core/node_modules/ionicons node_modules/ionicons
|
||||
@ -1,25 +0,0 @@
|
||||
/* eslint-disable arrow-body-style */
|
||||
// https://docs.cypress.io/guides/guides/plugins-guide.html
|
||||
|
||||
// if you need a custom webpack configuration you can uncomment the following import
|
||||
// and then use the `file:preprocessor` event
|
||||
// as explained in the cypress docs
|
||||
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
|
||||
|
||||
// /* eslint-disable import/no-extraneous-dependencies, global-require */
|
||||
// const webpack = require('@cypress/webpack-preprocessor')
|
||||
|
||||
module.exports = (on, config) => {
|
||||
// on('file:preprocessor', webpack({
|
||||
// webpackOptions: require('@vue/cli-service/webpack.config'),
|
||||
// watchOptions: {}
|
||||
// }))
|
||||
|
||||
return Object.assign({}, config, {
|
||||
fixturesFolder: 'tests/e2e/fixtures',
|
||||
integrationFolder: 'tests/e2e/specs',
|
||||
screenshotsFolder: 'tests/e2e/screenshots',
|
||||
videosFolder: 'tests/e2e/videos',
|
||||
supportFile: 'tests/e2e/support/index.js'
|
||||
})
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { createRouter, createWebHistory } from '@ionic/vue-router';
|
||||
import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { waitForRouter } from './utils';
|
||||
|
||||
const App = {
|
||||
components: { IonApp, IonRouterOutlet },
|
||||
template: '<ion-app><ion-router-outlet /></ion-app>',
|
||||
}
|
||||
|
||||
const BasePage = {
|
||||
template: '<ion-page :data-pageid="name"></ion-page>',
|
||||
components: { IonPage },
|
||||
}
|
||||
|
||||
const Page1 = {
|
||||
...BasePage,
|
||||
data() {
|
||||
return {
|
||||
name: 'page1'
|
||||
}
|
||||
},
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
}
|
||||
|
||||
const Page2 = defineComponent({
|
||||
...BasePage,
|
||||
setup() {
|
||||
return {
|
||||
name: 'page2'
|
||||
}
|
||||
},
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
});
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', component: Page1 },
|
||||
{ path: '/2', component: Page2 }
|
||||
]
|
||||
});
|
||||
|
||||
describe('Lifecycle Events', () => {
|
||||
beforeAll(() => {
|
||||
(HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
|
||||
});
|
||||
it('Triggers lifecycle events', async () => {
|
||||
// Initial render
|
||||
router.push('/');
|
||||
await router.isReady();
|
||||
const wrapper = mount(App, {
|
||||
global: {
|
||||
plugins: [router, IonicVue]
|
||||
}
|
||||
});
|
||||
|
||||
// Page 1 lifecycle hooks
|
||||
expect(Page1.ionViewWillEnter).toHaveBeenCalledWith();
|
||||
expect(Page1.ionViewWillEnter.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewDidEnter).toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidEnter.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
expect(wrapper.html()).toContain('page1');
|
||||
|
||||
// Page 2 lifecycle hooks
|
||||
expect(Page2.ionViewWillEnter).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidEnter).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
|
||||
// Navigate to 2nd page
|
||||
router.push('/2');
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
// Page 1 lifecycle hooks
|
||||
expect(Page1.ionViewDidEnter).not.toHaveBeenCalled();
|
||||
expect(Page1.ionViewWillEnter).not.toHaveBeenCalled();
|
||||
|
||||
expect(Page1.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(Page1.ionViewWillLeave.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewDidLeave).toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidLeave.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
// Page 2 lifecycle hooks
|
||||
expect(Page2.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect((Page2.ionViewWillEnter as jest.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.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
expect(wrapper.html()).toContain('page2');
|
||||
});
|
||||
});
|
||||
43
packages/vue/test/README.md
Normal file
43
packages/vue/test/README.md
Normal file
@ -0,0 +1,43 @@
|
||||
# Vue E2E Test Apps
|
||||
|
||||
Ionic Framework supports multiple versions of Vue. As a result, we need to verify that Ionic works correctly with each of these Vue versions.
|
||||
|
||||
## Test App Build Structure
|
||||
|
||||
Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
|
||||
|
||||
**apps** - This directory contains partial applications for each version of Vue we want to test. Typically these directories contain new `package.json` files, `jest.config.js` files, and more. If you have code that is specific to a particular version of Vue, put it in this directory.
|
||||
|
||||
**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.
|
||||
|
||||
**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git.
|
||||
|
||||
**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory.
|
||||
|
||||
Usage:
|
||||
|
||||
```shell
|
||||
# Build a test app using apps/vue3 as a reference
|
||||
./build.sh vue3
|
||||
```
|
||||
|
||||
## How to modify test apps
|
||||
|
||||
To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
|
||||
|
||||
If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/vue3`, make sure you place the file in `apps/vue3/tests/e2e/test.e2e.ts`.
|
||||
|
||||
### Version-specific tests
|
||||
|
||||
If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
|
||||
|
||||
## Adding New Test Apps
|
||||
|
||||
As we add support for new versions of Vue, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
|
||||
|
||||
1. Navigate to the built app for the most recent version of Vue that Ionic tests.
|
||||
2. Update the application to the latest version of Vue.
|
||||
3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc).
|
||||
4. Copy the changed files to a new directory in `apps`.
|
||||
5. Add a new entry to the matrix for `test-core-vue` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
|
||||
6. Commit these changes and push.
|
||||
@ -28,7 +28,7 @@
|
||||
"@vue/test-utils": "^2.0.0-rc.18",
|
||||
"@vue/vue3-jest": "^27.0.0-alpha.4",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^8.3.0",
|
||||
"cypress": "^10.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"jest": "^27.1.0",
|
||||
@ -3169,9 +3169,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/sinonjs__fake-timers": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz",
|
||||
"integrity": "sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==",
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
|
||||
"integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/sizzle": {
|
||||
@ -6579,31 +6579,32 @@
|
||||
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
|
||||
},
|
||||
"node_modules/cypress": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-8.7.0.tgz",
|
||||
"integrity": "sha512-b1bMC3VQydC6sXzBMFnSqcvwc9dTZMgcaOzT0vpSD+Gq1yFc+72JDWi55sfUK5eIeNLAtWOGy1NNb6UlhMvB+Q==",
|
||||
"version": "10.8.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
|
||||
"integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@cypress/request": "^2.88.6",
|
||||
"@cypress/request": "^2.88.10",
|
||||
"@cypress/xvfb": "^1.2.4",
|
||||
"@types/node": "^14.14.31",
|
||||
"@types/sinonjs__fake-timers": "^6.0.2",
|
||||
"@types/sinonjs__fake-timers": "8.1.1",
|
||||
"@types/sizzle": "^2.3.2",
|
||||
"arch": "^2.2.0",
|
||||
"blob-util": "^2.0.2",
|
||||
"bluebird": "^3.7.2",
|
||||
"buffer": "^5.6.0",
|
||||
"cachedir": "^2.3.0",
|
||||
"chalk": "^4.1.0",
|
||||
"check-more-types": "^2.24.0",
|
||||
"cli-cursor": "^3.1.0",
|
||||
"cli-table3": "~0.6.0",
|
||||
"cli-table3": "~0.6.1",
|
||||
"commander": "^5.1.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"dayjs": "^1.10.4",
|
||||
"debug": "^4.3.2",
|
||||
"enquirer": "^2.3.6",
|
||||
"eventemitter2": "^6.4.3",
|
||||
"eventemitter2": "6.4.7",
|
||||
"execa": "4.1.0",
|
||||
"executable": "^4.1.1",
|
||||
"extract-zip": "2.0.1",
|
||||
@ -6616,16 +6617,15 @@
|
||||
"listr2": "^3.8.3",
|
||||
"lodash": "^4.17.21",
|
||||
"log-symbols": "^4.0.0",
|
||||
"minimist": "^1.2.5",
|
||||
"minimist": "^1.2.6",
|
||||
"ospath": "^1.2.2",
|
||||
"pretty-bytes": "^5.6.0",
|
||||
"proxy-from-env": "1.0.0",
|
||||
"ramda": "~0.27.1",
|
||||
"request-progress": "^3.0.0",
|
||||
"semver": "^7.3.2",
|
||||
"supports-color": "^8.1.1",
|
||||
"tmp": "~0.2.1",
|
||||
"untildify": "^4.0.0",
|
||||
"url": "^0.11.0",
|
||||
"yauzl": "^2.10.0"
|
||||
},
|
||||
"bin": {
|
||||
@ -7971,9 +7971,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/eventemitter2": {
|
||||
"version": "6.4.5",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
|
||||
"integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==",
|
||||
"version": "6.4.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
|
||||
"integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
@ -14559,16 +14559,6 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/querystring": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
|
||||
"integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
|
||||
"deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.4.x"
|
||||
}
|
||||
},
|
||||
"node_modules/queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
@ -14589,12 +14579,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/ramda": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz",
|
||||
"integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@ -16578,22 +16562,6 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
|
||||
"integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"punycode": "1.3.2",
|
||||
"querystring": "0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/url/node_modules/punycode": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
|
||||
"integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@ -20168,9 +20136,9 @@
|
||||
}
|
||||
},
|
||||
"@types/sinonjs__fake-timers": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz",
|
||||
"integrity": "sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==",
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
|
||||
"integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/sizzle": {
|
||||
@ -22717,30 +22685,31 @@
|
||||
"integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
|
||||
},
|
||||
"cypress": {
|
||||
"version": "8.7.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-8.7.0.tgz",
|
||||
"integrity": "sha512-b1bMC3VQydC6sXzBMFnSqcvwc9dTZMgcaOzT0vpSD+Gq1yFc+72JDWi55sfUK5eIeNLAtWOGy1NNb6UlhMvB+Q==",
|
||||
"version": "10.8.0",
|
||||
"resolved": "https://registry.npmjs.org/cypress/-/cypress-10.8.0.tgz",
|
||||
"integrity": "sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@cypress/request": "^2.88.6",
|
||||
"@cypress/request": "^2.88.10",
|
||||
"@cypress/xvfb": "^1.2.4",
|
||||
"@types/node": "^14.14.31",
|
||||
"@types/sinonjs__fake-timers": "^6.0.2",
|
||||
"@types/sinonjs__fake-timers": "8.1.1",
|
||||
"@types/sizzle": "^2.3.2",
|
||||
"arch": "^2.2.0",
|
||||
"blob-util": "^2.0.2",
|
||||
"bluebird": "^3.7.2",
|
||||
"buffer": "^5.6.0",
|
||||
"cachedir": "^2.3.0",
|
||||
"chalk": "^4.1.0",
|
||||
"check-more-types": "^2.24.0",
|
||||
"cli-cursor": "^3.1.0",
|
||||
"cli-table3": "~0.6.0",
|
||||
"cli-table3": "~0.6.1",
|
||||
"commander": "^5.1.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"dayjs": "^1.10.4",
|
||||
"debug": "^4.3.2",
|
||||
"enquirer": "^2.3.6",
|
||||
"eventemitter2": "^6.4.3",
|
||||
"eventemitter2": "6.4.7",
|
||||
"execa": "4.1.0",
|
||||
"executable": "^4.1.1",
|
||||
"extract-zip": "2.0.1",
|
||||
@ -22753,16 +22722,15 @@
|
||||
"listr2": "^3.8.3",
|
||||
"lodash": "^4.17.21",
|
||||
"log-symbols": "^4.0.0",
|
||||
"minimist": "^1.2.5",
|
||||
"minimist": "^1.2.6",
|
||||
"ospath": "^1.2.2",
|
||||
"pretty-bytes": "^5.6.0",
|
||||
"proxy-from-env": "1.0.0",
|
||||
"ramda": "~0.27.1",
|
||||
"request-progress": "^3.0.0",
|
||||
"semver": "^7.3.2",
|
||||
"supports-color": "^8.1.1",
|
||||
"tmp": "~0.2.1",
|
||||
"untildify": "^4.0.0",
|
||||
"url": "^0.11.0",
|
||||
"yauzl": "^2.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
@ -23756,9 +23724,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"eventemitter2": {
|
||||
"version": "6.4.5",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
|
||||
"integrity": "sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==",
|
||||
"version": "6.4.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
|
||||
"integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
|
||||
"dev": true
|
||||
},
|
||||
"eventemitter3": {
|
||||
@ -28655,24 +28623,12 @@
|
||||
"integrity": "sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==",
|
||||
"dev": true
|
||||
},
|
||||
"querystring": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
|
||||
"integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
|
||||
"dev": true
|
||||
},
|
||||
"queue-microtask": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
|
||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true
|
||||
},
|
||||
"ramda": {
|
||||
"version": "0.27.2",
|
||||
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz",
|
||||
"integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==",
|
||||
"dev": true
|
||||
},
|
||||
"randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@ -30189,24 +30145,6 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"url": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
|
||||
"integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"punycode": "1.3.2",
|
||||
"querystring": "0.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"punycode": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
|
||||
"integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@ -9,6 +9,7 @@
|
||||
"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",
|
||||
"cypress": "node_modules/.bin/cypress run --headless --browser chrome",
|
||||
"cypress.open": "cypress open",
|
||||
"start": "vue-cli-service serve",
|
||||
"sync": "sh ./scripts/sync.sh"
|
||||
},
|
||||
@ -33,7 +34,7 @@
|
||||
"@vue/test-utils": "^2.0.0-rc.18",
|
||||
"@vue/vue3-jest": "^27.0.0-alpha.4",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^8.3.0",
|
||||
"cypress": "^10.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"jest": "^27.1.0",
|
||||
19
packages/vue/test/base/cypress.config.ts
Normal file
19
packages/vue/test/base/cypress.config.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { defineConfig } from 'cypress';
|
||||
|
||||
export default defineConfig({
|
||||
video: false,
|
||||
screenshotOnRunFailure: false,
|
||||
defaultCommandTimeout: 10000,
|
||||
fixturesFolder: 'tests/e2e/fixtures',
|
||||
screenshotsFolder: 'tests/e2e/screenshots',
|
||||
videosFolder: 'tests/e2e/videos',
|
||||
e2e: {
|
||||
// We've imported your old cypress plugins here.
|
||||
// You may want to clean this up later by importing these.
|
||||
setupNodeEvents(on, config) {
|
||||
return require('./tests/e2e/plugins/index.js')(on, config)
|
||||
},
|
||||
specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
|
||||
supportFile: 'tests/e2e/support/index.js',
|
||||
},
|
||||
})
|
||||
|
Before Width: | Height: | Size: 930 B After Width: | Height: | Size: 930 B |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
24
packages/vue/test/base/scripts/sync.sh
Normal file
24
packages/vue/test/base/scripts/sync.sh
Normal file
@ -0,0 +1,24 @@
|
||||
# Copy ionic vue dist
|
||||
rm -rf node_modules/@ionic/vue/dist node_modules/@ionic/vue/css
|
||||
cp -a ../../../dist node_modules/@ionic/vue/dist
|
||||
cp -a ../../../css node_modules/@ionic/vue/css
|
||||
cp -a ../../../package.json node_modules/@ionic/vue/package.json
|
||||
|
||||
# Copy ionic vue router dist
|
||||
rm -rf node_modules/@ionic/vue-router/dist
|
||||
cp -a ../../../../vue-router/dist node_modules/@ionic/vue-router/dist
|
||||
cp -a ../../../../vue-router/package.json node_modules/@ionic/vue-router/package.json
|
||||
|
||||
# Copy core dist and components
|
||||
rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
|
||||
cp -a ../../../../../core/package.json node_modules/@ionic/core/package.json
|
||||
cp -a ../../../../../core/dist node_modules/@ionic/core/dist
|
||||
cp -a ../../../../../core/components node_modules/@ionic/core/components
|
||||
|
||||
# Copy stencil
|
||||
rm -rf node_modules/@stencil/core
|
||||
cp -a ../../../../../core/node_modules/@stencil/core node_modules/@stencil/core
|
||||
|
||||
# Copy ionicons
|
||||
rm -rf node_modules/ionicons
|
||||
cp -a ../../../../../core/node_modules/ionicons node_modules/ionicons
|
||||
@ -8,6 +8,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
path: '/',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/version-test',
|
||||
component: () => import('@/views/VersionTest.vue')
|
||||
},
|
||||
{
|
||||
path: '/delayed-redirect',
|
||||
beforeEnter: DelayGuard,
|
||||
41
packages/vue/test/base/src/views/VersionTest.vue
Normal file
41
packages/vue/test/base/src/views/VersionTest.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<ion-page data-pageid="version-test">
|
||||
<ion-header :translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-buttons>
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>VersionTest</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content :fullscreen="true" class="ion-padding">
|
||||
Version-specific tests
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
IonBackButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
IonBackButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
}
|
||||
});
|
||||
</script>
|
||||
22
packages/vue/test/base/tests/e2e/plugins/index.js
Normal file
22
packages/vue/test/base/tests/e2e/plugins/index.js
Normal file
@ -0,0 +1,22 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
};
|
||||
@ -203,7 +203,9 @@ describe('useIonRouter', () => {
|
||||
await waitForRouter();
|
||||
|
||||
expect(router.currentRoute.value.path).toEqual('/page2');
|
||||
expect(animFn).not.toHaveBeenCalled();
|
||||
|
||||
// Animation should still be called even though this is a replace operation
|
||||
expect(animFn).toHaveBeenCalled();
|
||||
|
||||
expect(vm.ionRouter.canGoBack()).toEqual(false);
|
||||
})
|
||||
221
packages/vue/test/base/tests/unit/lifecycle.spec.ts
Normal file
221
packages/vue/test/base/tests/unit/lifecycle.spec.ts
Normal file
@ -0,0 +1,221 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { createRouter, createWebHistory } from '@ionic/vue-router';
|
||||
import { IonicVue, IonApp, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import { waitForRouter } from './utils';
|
||||
|
||||
const App = {
|
||||
components: { IonApp, IonRouterOutlet },
|
||||
template: '<ion-app><ion-router-outlet /></ion-app>',
|
||||
}
|
||||
|
||||
const BasePage = {
|
||||
template: '<ion-page :data-pageid="name"></ion-page>',
|
||||
components: { IonPage },
|
||||
}
|
||||
|
||||
const Page1 = {
|
||||
...BasePage,
|
||||
data() {
|
||||
return {
|
||||
name: 'page1'
|
||||
}
|
||||
},
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
}
|
||||
|
||||
const Page2 = defineComponent({
|
||||
...BasePage,
|
||||
setup() {
|
||||
return {
|
||||
name: 'page2'
|
||||
}
|
||||
},
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.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),
|
||||
routes: [
|
||||
{ path: '/', component: Page1 },
|
||||
{ path: '/2', component: Page2 }
|
||||
]
|
||||
});
|
||||
|
||||
// Initial render
|
||||
router.push('/');
|
||||
await router.isReady();
|
||||
const wrapper = mount(App, {
|
||||
global: {
|
||||
plugins: [router, IonicVue]
|
||||
}
|
||||
});
|
||||
|
||||
// Page 1 lifecycle hooks
|
||||
expect(Page1.ionViewWillEnter).toHaveBeenCalledWith();
|
||||
expect(Page1.ionViewWillEnter.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewDidEnter).toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidEnter.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
expect(wrapper.html()).toContain('page1');
|
||||
|
||||
// Page 2 lifecycle hooks
|
||||
expect(Page2.ionViewWillEnter).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidEnter).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
|
||||
// Navigate to 2nd page
|
||||
router.push('/2');
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
// Page 1 lifecycle hooks
|
||||
expect(Page1.ionViewDidEnter).not.toHaveBeenCalled();
|
||||
expect(Page1.ionViewWillEnter).not.toHaveBeenCalled();
|
||||
|
||||
expect(Page1.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(Page1.ionViewWillLeave.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
expect(Page1.ionViewDidLeave).toHaveBeenCalled();
|
||||
expect(Page1.ionViewDidLeave.mock.instances[0]).toEqual(expect.objectContaining({ name: 'page1' }))
|
||||
|
||||
// Page 2 lifecycle hooks
|
||||
expect(Page2.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect((Page2.ionViewWillEnter as jest.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.ionViewWillLeave).not.toHaveBeenCalled();
|
||||
expect(Page2.ionViewDidLeave).not.toHaveBeenCalled();
|
||||
expect(wrapper.html()).toContain('page2');
|
||||
});
|
||||
it('should fire lifecycle events on inner tab page', async () => {
|
||||
const TabsPage = {
|
||||
template: `
|
||||
<ion-page>
|
||||
<ion-tabs>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-tabs>
|
||||
</ion-page>
|
||||
`,
|
||||
components: { IonPage, IonTabs, IonRouterOutlet },
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
}
|
||||
const Tab1Page = {
|
||||
...BasePage,
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
}
|
||||
|
||||
const NonTabPage = {
|
||||
...BasePage,
|
||||
ionViewWillEnter: jest.fn(),
|
||||
ionViewDidEnter: jest.fn(),
|
||||
ionViewWillLeave: jest.fn(),
|
||||
ionViewDidLeave: jest.fn(),
|
||||
}
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', component: TabsPage, children: [
|
||||
{ path: 'tab1', component: Tab1Page }
|
||||
]},
|
||||
{ path: '/non-tab', component: NonTabPage }
|
||||
]
|
||||
});
|
||||
|
||||
// Initial render
|
||||
router.push('/tab1');
|
||||
await router.isReady();
|
||||
const wrapper = mount(App, {
|
||||
global: {
|
||||
plugins: [router, IonicVue]
|
||||
}
|
||||
});
|
||||
|
||||
// Initial load
|
||||
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(TabsPage.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
expect(Tab1Page.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(Tab1Page.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
expect(NonTabPage.ionViewWillEnter).not.toHaveBeenCalled();
|
||||
expect(NonTabPage.ionViewDidEnter).not.toHaveBeenCalled();
|
||||
|
||||
// Navigate out of tabs
|
||||
router.push('/non-tab');
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(TabsPage.ionViewDidLeave).toHaveBeenCalled();
|
||||
|
||||
// Tab1Page currently does not call leaving hooks
|
||||
// when navigating out of tabs
|
||||
//expect(Tab1Page.ionViewWillLeave).toHaveBeenCalled();
|
||||
//expect(Tab1Page.ionViewDidLeave).toHaveBeenCalled();
|
||||
|
||||
expect(NonTabPage.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(NonTabPage.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
// Go back
|
||||
router.back();
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(TabsPage.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
expect(Tab1Page.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(Tab1Page.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
expect(NonTabPage.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(NonTabPage.ionViewDidLeave).toHaveBeenCalled();
|
||||
|
||||
// Navigate out of tabs again
|
||||
router.push('/non-tab');
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
expect(TabsPage.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(TabsPage.ionViewDidLeave).toHaveBeenCalled();
|
||||
|
||||
expect(NonTabPage.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(NonTabPage.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
// Go back again
|
||||
router.back();
|
||||
jest.resetAllMocks();
|
||||
await waitForRouter();
|
||||
|
||||
expect(TabsPage.ionViewWillEnter).toHaveBeenCalled();
|
||||
expect(TabsPage.ionViewDidEnter).toHaveBeenCalled();
|
||||
|
||||
expect(NonTabPage.ionViewWillLeave).toHaveBeenCalled();
|
||||
expect(NonTabPage.ionViewDidLeave).toHaveBeenCalled();
|
||||
})
|
||||
});
|
||||
157
packages/vue/test/base/tests/unit/router-outlet.spec.ts
Normal file
157
packages/vue/test/base/tests/unit/router-outlet.spec.ts
Normal file
@ -0,0 +1,157 @@
|
||||
import { enableAutoUnmount, mount } from '@vue/test-utils';
|
||||
import { createRouter, createWebHistory } from '@ionic/vue-router';
|
||||
import {
|
||||
IonicVue,
|
||||
IonApp,
|
||||
IonRouterOutlet,
|
||||
IonPage,
|
||||
useIonRouter,
|
||||
createAnimation
|
||||
} from '@ionic/vue';
|
||||
import { onBeforeRouteLeave } from 'vue-router';
|
||||
import { mockAnimation, waitForRouter } from './utils';
|
||||
|
||||
enableAutoUnmount(afterEach);
|
||||
|
||||
const App = {
|
||||
components: { IonApp, IonRouterOutlet },
|
||||
template: '<ion-app><ion-router-outlet /></ion-app>',
|
||||
}
|
||||
|
||||
const BasePage = {
|
||||
template: '<ion-page :data-pageid="name"></ion-page>',
|
||||
components: { IonPage },
|
||||
}
|
||||
|
||||
/**
|
||||
* While these tests use useIonRouter,
|
||||
* they are different from the tests in hook.spec.ts
|
||||
* in that they are testing that the correct parameters
|
||||
* are passed to IonRouterOutlet as opposed to hook.spec.ts
|
||||
* which makes sure that the animation function is called when
|
||||
* specifically using useIonRouter.
|
||||
*/
|
||||
describe('Routing', () => {
|
||||
it('should have an animation duration of 0 if replacing without an explicit animation', async () => {
|
||||
const Page1 = {
|
||||
...BasePage,
|
||||
setup() {
|
||||
const ionRouter = useIonRouter();
|
||||
const redirect = () => {
|
||||
ionRouter.replace('/page2')
|
||||
}
|
||||
|
||||
return { redirect }
|
||||
}
|
||||
};
|
||||
|
||||
const Page2 = {
|
||||
...BasePage
|
||||
};
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', component: Page1 },
|
||||
{ path: '/page2', component: Page2 }
|
||||
]
|
||||
});
|
||||
|
||||
router.push('/');
|
||||
await router.isReady();
|
||||
const wrapper = mount(App, {
|
||||
global: {
|
||||
plugins: [router, IonicVue]
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Mock the commit function on IonRouterOutlet
|
||||
*/
|
||||
const commitFn = jest.fn();
|
||||
const routerOutlet = wrapper.findComponent(IonRouterOutlet);
|
||||
routerOutlet.vm.$el.commit = commitFn;
|
||||
|
||||
// call redirect method on Page1
|
||||
const cmp = wrapper.findComponent(Page1);
|
||||
cmp.vm.redirect();
|
||||
await waitForRouter();
|
||||
|
||||
expect(commitFn).toBeCalledWith(
|
||||
/**
|
||||
* We are not checking the first 2
|
||||
* params in this test,
|
||||
* so we can use expect.anything().
|
||||
*/
|
||||
expect.anything(),
|
||||
expect.anything(),
|
||||
expect.objectContaining({
|
||||
direction: "none",
|
||||
duration: 0,
|
||||
animationBuilder: undefined
|
||||
})
|
||||
)
|
||||
});
|
||||
|
||||
it('should have an animation duration of null if replacing with an explicit animation', async () => {
|
||||
const animation = mockAnimation();
|
||||
const Page1 = {
|
||||
...BasePage,
|
||||
setup() {
|
||||
const ionRouter = useIonRouter();
|
||||
const redirect = () => {
|
||||
ionRouter.replace('/page2', animation)
|
||||
}
|
||||
|
||||
return { redirect }
|
||||
}
|
||||
};
|
||||
|
||||
const Page2 = {
|
||||
...BasePage
|
||||
};
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes: [
|
||||
{ path: '/', component: Page1 },
|
||||
{ path: '/page2', component: Page2 }
|
||||
]
|
||||
});
|
||||
|
||||
router.push('/');
|
||||
await router.isReady();
|
||||
const wrapper = mount(App, {
|
||||
global: {
|
||||
plugins: [router, IonicVue]
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Mock the commit function on IonRouterOutlet
|
||||
*/
|
||||
const commitFn = jest.fn();
|
||||
const routerOutlet = wrapper.findComponent(IonRouterOutlet);
|
||||
routerOutlet.vm.$el.commit = commitFn;
|
||||
|
||||
// call redirect method on Page1
|
||||
const cmp = wrapper.findComponent(Page1);
|
||||
cmp.vm.redirect();
|
||||
await waitForRouter();
|
||||
|
||||
expect(commitFn).toBeCalledWith(
|
||||
/**
|
||||
* We are not checking the first 2
|
||||
* params in this test,
|
||||
* so we can use expect.anything().
|
||||
*/
|
||||
expect.anything(),
|
||||
expect.anything(),
|
||||
expect.objectContaining({
|
||||
direction: "none",
|
||||
duration: undefined,
|
||||
animationBuilder: animation
|
||||
})
|
||||
)
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,5 @@
|
||||
import { flushPromises } from '@vue/test-utils';
|
||||
import { createAnimation } from '@ionic/vue';
|
||||
|
||||
export const waitForRouter = async () => {
|
||||
await flushPromises();
|
||||
@ -6,10 +7,5 @@ export const waitForRouter = async () => {
|
||||
}
|
||||
|
||||
export const mockAnimation = () => {
|
||||
return jest.fn(() => {
|
||||
return {
|
||||
onFinish: () => {},
|
||||
play: () => {}
|
||||
}
|
||||
})
|
||||
return jest.fn(() => createAnimation());
|
||||
}
|
||||
33
packages/vue/test/build.sh
Executable file
33
packages/vue/test/build.sh
Executable file
@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
|
||||
# The directory where the source
|
||||
# for each specific application is.
|
||||
APPS_DIR="apps"
|
||||
|
||||
# The directory where the
|
||||
# base application logic is
|
||||
BASE_DIR="base"
|
||||
BUILD_DIR="build"
|
||||
|
||||
# The specific application
|
||||
# we are building
|
||||
APP_DIR="${1}"
|
||||
|
||||
# The full path to the specific application.
|
||||
FULL_APP_DIR="${APPS_DIR}/${APP_DIR}/."
|
||||
|
||||
# The full path to the base application.
|
||||
FULL_BASE_DIR="${BASE_DIR}/."
|
||||
|
||||
# The full path to the built application.
|
||||
BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/"
|
||||
|
||||
# Make the build directory if it does not already exist.
|
||||
mkdir -p $BUILD_DIR
|
||||
|
||||
# First we need to copy the base application
|
||||
cp -R $FULL_BASE_DIR $BUILD_APP_DIR
|
||||
|
||||
# Then we can copy the specific app which
|
||||
# will override any files in the base application.
|
||||
cp -R $FULL_APP_DIR $BUILD_APP_DIR
|
||||
Reference in New Issue
Block a user