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

fix(vue): mount correct views when navigating (#24056)

Browse Source 
resolves #23914
This commit is contained in:
Liam DeBeasi
2021-10-14 11:28:36 -04:00
committed by GitHub
parent a09d7d4ab6
commit 24659a527a
6 changed files with 125 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -441,4 +441,104 @@ describe('Routing', () => {
expect(beforeRouteEnterSpy).toHaveBeenCalledTimes(2);
});
it('should not mount intermediary components when delta is 1', async () => {
const Page = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page2 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page3 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/page', component: Page },
{ path: '/page2', component: Page2 },
{ path: '/page3', component: Page3 },
{ path: '/', redirect: '/page' }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(App, {
global: {
plugins: [router, IonicVue]
}
});
expect(wrapper.findComponent(Page).exists()).toBe(true);
router.push('/page2');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(true);
router.back();
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(false);
router.push('/page3');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(false);
expect(wrapper.findComponent(Page3).exists()).toBe(true);
});
it('should unmount intermediary components when using router.go', async () => {
const Page = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page2 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const Page3 = {
components: { IonPage },
template: `<ion-page></ion-page>`
}
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: '/page', component: Page },
{ path: '/page2', component: Page2 },
{ path: '/page3', component: Page3 },
{ path: '/', redirect: '/page' }
]
});
router.push('/');
await router.isReady();
const wrapper = mount(App, {
global: {
plugins: [router, IonicVue]
}
});
router.push('/page2');
await waitForRouter();
router.push('/page3');
await waitForRouter();
expect(wrapper.findComponent(Page2).exists()).toBe(true);
expect(wrapper.findComponent(Page3).exists()).toBe(true);
router.go(-2);
await waitForRouter();
expect(wrapper.findComponent(Page).exists()).toBe(true);
expect(wrapper.findComponent(Page2).exists()).toBe(false);
expect(wrapper.findComponent(Page3).exists()).toBe(false);
});
});