test(vue): add tests (#22089)

.circleci/config.yml

@@ -149,7 +149,6 @@ jobs:
           root: /tmp/workspace
           paths:
             - "*"
-
   build-react-router:
     <<: *defaults
     steps:
@@ -179,6 +178,58 @@ jobs:
           paths:
             - "*"
 
+  build-vue:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/vue
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
+  build-vue-router:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link @ionic/vue
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/vue-router
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -282,6 +333,26 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/packages/react-router
 
+  test-vue-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/vue
+
+  test-vue-router-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/vue-router
+
   test-react-spec:
     <<: *defaults
     steps:
@@ -320,6 +391,28 @@ jobs:
           command: npm run test.spec
           working_directory: /tmp/workspace/packages/react-router
 
+  test-vue-router-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/vue
+      - run:
+          command: sudo npm link @ionic/vue
+          working_directory: /tmp/workspace/packages/vue-router
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/vue-router
+
   test-angular-e2e:
     <<: *defaults
     steps:
@@ -378,6 +471,16 @@ workflows:
           requires: [build-react]
       - test-react-router-spec:
           requires: [build-react-router]
+      - build-vue:
+          requires: [build-core]
+      - build-vue-router:
+          requires: [build-core, build-vue]
+      - test-vue-lint:
+          requires: [build-vue]
+      - test-vue-router-lint:
+          requires: [build-vue-router]
+      - test-vue-router-spec:
+          requires: [build-vue-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.4.0-dev.202009111459.5ffa65f",
+  "version": "5.4.0-dev.202009101933.5ffa65f",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

packages/vue-router/__tests__/locationHistory.spec.ts

@@ -0,0 +1,90 @@
+import { createLocationHistory } from '../src/locationHistory';
+
+let locationHistory;
+describe('Location History', () => {
+  beforeEach(() => {
+    locationHistory = createLocationHistory();
+  });
+
+  it('should correctly add an item to location history', () => {
+    locationHistory.add({ pathname: '/' });
+    expect(locationHistory.canGoBack(1)).toEqual(false);
+  });
+
+  it('should correctly replace an item to location history', () => {
+    locationHistory.add({ pathname: '/home' });
+    locationHistory.add({ pathname: '/login', routerAction: 'replace' });
+
+    const current = locationHistory.current();
+    expect(current.pathname).toEqual('/login');
+  });
+
+  it('should correctly pop an item from location history', () => {
+    locationHistory.add({ pathname: '/home' });
+    locationHistory.add({ pathname: '/login', routerAction: 'pop' });
+
+    const current = locationHistory.current();
+    expect(current.pathname).toEqual('/login');
+    expect(locationHistory.canGoBack(1)).toEqual(false);
+  });
+
+  it('should correctly wipe location history when routerDirection is root', () => {
+    locationHistory.add({ pathname: '/home' });
+    locationHistory.add({ pathname: '/login' });
+    locationHistory.add({ pathname: '/logout', routerDirection: 'root' });
+
+    const current = locationHistory.current();
+    expect(current.pathname).toEqual('/logout');
+    expect(locationHistory.canGoBack(1)).toEqual(false);
+  });
+
+  it('should correctly update a route', () => {
+    locationHistory.add({ id: '1', pathname: '/tabs/tab1', tab: 'tab1' });
+    locationHistory.add({ id: '2', pathname: '/tabs/tab2' });
+
+    const current = { ...locationHistory.current() };
+    current.tab = 'tab2';
+
+    locationHistory.update(current);
+
+    const getCurrentAgain = locationHistory.current();
+    expect(getCurrentAgain.tab).toEqual('tab2');
+  });
+
+  it('should correctly get the first route for a tab', () => {
+    locationHistory.add({ id: '1', pathname: '/tabs/tab1', tab: 'tab1' });
+    locationHistory.add({ id: '2', pathname: '/tabs/tab1/child', tab: 'tab1' });
+    locationHistory.add({ id: '2', pathname: '/tabs/tab1/child/1', tab: 'tab1' });
+
+    const first = locationHistory.getFirstRouteInfoForTab('tab1');
+    expect(first.pathname).toEqual('/tabs/tab1');
+  });
+
+  it('should correctly get the current route for a tab', () => {
+    locationHistory.add({ id: '1', pathname: '/tabs/tab1', tab: 'tab1' });
+    locationHistory.add({ id: '2', pathname: '/tabs/tab1/child', tab: 'tab1' });
+    locationHistory.add({ id: '2', pathname: '/tabs/tab1/child/1', tab: 'tab1' });
+
+    const first = locationHistory.getCurrentRouteInfoForTab('tab1');
+    expect(first.pathname).toEqual('/tabs/tab1/child/1');
+  });
+
+  it('should correctly get current and previous routes', () => {
+    locationHistory.add({ pathname: '/home' });
+    locationHistory.add({ pathname: '/login' });
+
+    const current = locationHistory.current();
+    expect(current.pathname).toEqual('/login');
+
+    const previous = locationHistory.previous();
+    expect(previous.pathname).toEqual('/home');
+  });
+
+  it('should correctly determine if we can go back', () => {
+    locationHistory.add({ pathname: '/home' });
+    locationHistory.add({ pathname: '/login' });
+
+    expect(locationHistory.canGoBack(1)).toEqual(true);
+    expect(locationHistory.canGoBack(2)).toEqual(false);
+  });
+});

packages/vue-router/__tests__/viewStacks.spec.ts

@@ -0,0 +1,108 @@
+import { createViewStacks } from '../src/viewStacks';
+
+let viewStacks;
+let counter = 0;
+
+describe('View Stacks', () => {
+  beforeEach(() => {
+    counter = 0;
+    viewStacks = createViewStacks();
+  });
+
+  it('should create a view item', () => {
+    const item = viewStacks.createViewItem(
+      '1',
+      () => {},
+      'mockMatchedRoute',
+      { pathname: '/home' }
+    );
+
+    expect(item.outletId).toEqual('1');
+    expect(item.matchedRoute).toEqual('mockMatchedRoute');
+    expect(item.pathname).toEqual('/home');
+  });
+
+  it('should add a view item', () => {
+    const item = viewStacks.createViewItem(
+      '1',
+      () => {},
+      'mockMatchedRoute',
+      { pathname: '/home' }
+    );
+
+    viewStacks.add(item);
+    const viewItem = viewStacks.findViewItemByRouteInfo({ pathname: '/home' }, '1');
+    expect(viewItem).toEqual(item);
+  });
+
+  it('should register an ion page', () => {
+    const item = viewStacks.createViewItem(
+      '1',
+      () => {},
+      'mockMatchedRoute',
+      { pathname: '/home' }
+    );
+
+    viewStacks.add(item);
+
+    const ionPage = document.createElement('div');
+    ionPage.classList.add('ion-page');
+
+    viewStacks.registerIonPage(item, ionPage);
+
+    const viewItem = viewStacks.findViewItemByRouteInfo({ pathname: '/home' }, '1');
+    expect(viewItem.ionPageElement).toEqual(ionPage);
+  });
+
+  it('should get view item by route info', () => {
+    const itemA = createRegisteredViewItem(viewStacks, '1', '/home');
+    const itemB = createRegisteredViewItem(viewStacks, '2', '/dashboard');
+
+    const getViewItem = viewStacks.findViewItemByRouteInfo({ pathname: '/dashboard', outletId: '2' });
+    expect(getViewItem.id).toEqual(itemB.id);
+
+    const getViewItemAgain = viewStacks.findViewItemByRouteInfo({ pathname: '/dashboard' });
+    expect(getViewItemAgain.id).toEqual(itemB.id);
+  });
+
+  it('should get leaving view by route info', () => {
+    const itemA = createRegisteredViewItem(viewStacks, '1', '/home');
+    const itemB = createRegisteredViewItem(viewStacks, '2', '/dashboard');
+
+    const getLeavingView = viewStacks.findLeavingViewItemByRouteInfo({ pathname: '/home', lastPathname: '/dashboard' });
+
+    expect(getLeavingView).toEqual(itemB);
+  });
+
+  it('should get children to render', () => {
+      const itemA = createRegisteredViewItem(viewStacks);
+      const itemB = createRegisteredViewItem(viewStacks);
+      const itemC = createRegisteredViewItem(viewStacks);
+
+      itemA.mount = itemC.mount = true;
+
+      const routes = viewStacks.getChildrenToRender('1');
+      expect(routes).toEqual([
+        itemA,
+        itemC
+      ]);
+    });
+})
+
+const createRegisteredViewItem = (viewStacks, outletId = '1', route = `/home/${counter++}`) => {
+  const item = viewStacks.createViewItem(
+    outletId,
+    () => {},
+    'mockMatchedRoute',
+    { pathname: route }
+  );
+
+  viewStacks.add(item);
+
+  const ionPage = document.createElement('div');
+  ionPage.classList.add('ion-page');
+
+  viewStacks.registerIonPage(item, ionPage);
+
+  return item;
+}

packages/vue-router/package.json

@@ -3,7 +3,7 @@
   "version": "5.4.0-dev.202009101934.5ffa65f",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
-    "test": "jest",
+    "test.spec": "jest",
     "lint": "echo add linter",
     "build": "npm run clean && npm run compile",
     "clean": "rimraf dist",
@@ -42,12 +42,29 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "devDependencies": {
+    "@ionic/vue": "0.3.1",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.10.1",
+    "jest": "^26.4.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.22.1",
+    "ts-jest": "^26.3.0",
     "typescript": "^3.9.7",
     "vue": "^3.0.0-rc.4",
-    "workbox-build": "4.3.1",
     "vue-router": "^4.0.0-beta.9",
-    "@ionic/vue": "0.2.0-5"
+    "workbox-build": "4.3.1"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.(js|ts|tsx)$": "<rootDir>/test/jest.preprocessor.js"
+    },
+    "testRegex": "(\\.(test|spec))\\.(ts?|tsx?|jsx?)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "json",
+      "jsx"
+    ]
   }
 }

packages/vue-router/src/locationHistory.ts

@@ -149,10 +149,8 @@ export const createLocationHistory = () => {
     current,
     previous,
     add,
-    pop,
     canGoBack,
     update,
-    getTabsHistory,
     getFirstRouteInfoForTab,
     getCurrentRouteInfoForTab,
     findLastLocation

packages/vue-router/test/jest.preprocessor.js

@@ -0,0 +1,14 @@
+const tsc = require('typescript');
+const tsConfig = require('../tsconfig.json');
+
+// force the output to use commonjs modules required by jest
+tsConfig.compilerOptions.module = 'commonjs';
+
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      return tsc.transpile(src, tsConfig.compilerOptions, path, []);
+    }
+    return src;
+  },
+};

packages/vue/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "5.4.0-dev.202009111459.5ffa65f",
+  "version": "5.4.0-dev.202009101933.5ffa65f",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -76,9 +76,9 @@
       }
     },
     "@ionic/core": {
-      "version": "0.3.0",
+      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.3.1.tgz",
-      "integrity": "sha512-ssrWyD6gae0+dU2tNpCzrsqOleXWt3zfrksEWbZXSe02mhhbUx16pH4CCT2KAHnybm6mguKtPjfLzF2qnuKe0A==",
+      "integrity": "sha512-Qdo1Sc5SMFDn3X/pT+5KtOATpgpDJbWLEBzZxHk+2GKfZ5Ypv/qMRg/II/IaoH2GmeIZoKdDmLGTQQjqVw1/oA==",
       "requires": {
         "ionicons": "^5.1.2",
         "tslib": "^1.10.0"
@@ -91,6 +91,14 @@
       "dev": true,
       "requires": {
         "typescript": "3.9.7"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "3.9.7",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
+          "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
+          "dev": true
+        }
       }
     },
     "@vue/compiler-core": {