Merge remote-tracking branch 'origin/main' into sync-v7-09-09-2022

packages/vue/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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

packages/vue/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "6.2.5",
+  "version": "6.2.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.2.5",
+      "version": "6.2.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.2.5",
+        "@ionic/core": "^6.2.6",
         "ionicons": "^6.0.2"
       },
       "devDependencies": {
@@ -59,9 +59,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.5.tgz",
-      "integrity": "sha512-PLnG182RYydXB71cjkMk2TLxFVKabvEc9wjeK5SsvxI1/QE9+wPfxDnvKWag8UeXgaGUhby1bitWkV5pniDaXA==",
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
+      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
       "dependencies": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",
@@ -768,9 +768,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.5.tgz",
-      "integrity": "sha512-PLnG182RYydXB71cjkMk2TLxFVKabvEc9wjeK5SsvxI1/QE9+wPfxDnvKWag8UeXgaGUhby1bitWkV5pniDaXA==",
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.6.tgz",
+      "integrity": "sha512-79VGvJ33YlCX/rhepfamL2YUQnqu3cruKMo0yFbrhyJWzoF3GTT/p371FHu1e+SdIZsMu/xcn+dkcTxQjEEcdA==",
       "requires": {
         "@stencil/core": "^2.17.4",
         "ionicons": "^6.0.3",

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.2.5",
+  "version": "6.2.6",
   "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.5",
+    "@ionic/core": "^6.2.6",
     "ionicons": "^6.0.2"
   },
   "vetur": {

packages/vue/src/components/IonRouterOutlet.ts

@@ -217,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,

packages/vue/test/base/tests/unit/hooks.spec.ts

@@ -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);
   })

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

@@ -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
+      })
+    )
+  });
+});

packages/vue/test/base/tests/unit/utils.ts

@@ -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());
 }