-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(vue): custom animation plays when replacing (#25863)
resolves #25831
- Loading branch information
1 parent
629f1ed
commit 2d3661a
Showing
4 changed files
with
172 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
packages/vue/test/base/tests/unit/router-outlet.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}) | ||
) | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,11 @@ | ||
import { flushPromises } from '@vue/test-utils'; | ||
import { createAnimation } from '@ionic/vue'; | ||
|
||
export const waitForRouter = async () => { | ||
await flushPromises(); | ||
await new Promise((r) => setTimeout(r, 500)); | ||
} | ||
|
||
export const mockAnimation = () => { | ||
return jest.fn(() => { | ||
return { | ||
onFinish: () => {}, | ||
play: () => {} | ||
} | ||
}) | ||
return jest.fn(() => createAnimation()); | ||
} |