Merge pull request #113 from Banno/switch-to-vitest

chore: convert to vitest from karma

.github/workflows/node.js.yml

@@ -1,29 +1,25 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Tests
 
 on:
   push:
     branches: [ master ]
   pull_request:
     branches: [ master ]
-
+    types: [opened, synchronize, ready_for_review]
+    paths-ignore:
+      - '**/*.md'
 jobs:
-  build:
-
+  test:
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x, 22.x]
-
     steps:
     - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: run tests
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: '20.x'
     - run: yarn install
-    - run: yarn test
-
+    - run: npx playwright install --with-deps chromium
+    - run: CI=1 yarn test

.gitignore

@@ -2,3 +2,4 @@
 yarn-error.log
 *.d.ts
 !types/index.d.ts
+.vitest

package.json

@@ -15,9 +15,9 @@
   "scripts": {
     "build": "tsc && yarn build:ts",
     "build:ts": "tsc --project tsconfig.buildts.json",
-    "clean": "rimraf './lib/**/*.d.ts' && rimraf './*.d.ts' && rimraf './lib/*.mixin.js'",
+    "clean": "rimraf ./lib/**/*.d.ts ./*.d.ts ./lib/*.mixin.js --glob",
     "prepublish": "yarn clean && yarn build",
-    "test": "karma start test/karma.config.cjs --single-run"
+    "test": "vitest"
   },
   "repository": {
     "type": "git",
@@ -33,18 +33,16 @@
     "path-to-regexp": "^6.2.1"
   },
   "resolutions": {
-    "@types/node": "^18.11.18",
-    "socket.io-parser": "^4.2.3",
-    "qs": "^6.7.3",
-    "engine.io": "^6.4.2"
+    "@types/node": "^18.11.18"
   },
   "devDependencies": {
     "@polymer/polymer": "^3.4.1",
-    "jasmine-core": "^5.x",
-    "karma": "^6.x",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-jasmine": "5.x",
-    "karma-spec-reporter": "^0.0.36",
-    "typescript": "^5.2.2"
+    "@types/node": "^22.10.0",
+    "@vitest/browser": "^2.1.6",
+    "playwright": "1.49.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.2.2",
+    "vite": "6.0.0",
+    "vitest": "^2.1.6"
   }
 }

test/page-spec.js

@@ -1,4 +1,5 @@
 import { Context, Page } from '../lib/page.js';
+import {vi, expect} from 'vitest';
 
 function JSCompiler_renameProperty(propName, instance) {
   return propName;
@@ -9,8 +10,8 @@ describe('Page', () => {
 
   beforeEach(() => {
     page = new Page();
-    spyOn(History.prototype, 'pushState').and.callFake(() => {});
-    spyOn(Context.prototype, 'pushState').and.callFake(() => {});
+    vi.spyOn(History.prototype, 'pushState');
+    vi.spyOn(Context.prototype, 'pushState');
   });
 
   const dispatchPropertyName = JSCompiler_renameProperty('dispatch', Page.prototype);
@@ -21,7 +22,7 @@ describe('Page', () => {
     const dispatch = true;
     const push = false;
     beforeEach(() => {
-      spyOn(page, dispatchPropertyName).and.callFake(async () => {});
+      vi.spyOn(page, dispatchPropertyName);
     });
     describe('when dispatch === false', () => {
       const dispatch = false;
@@ -49,7 +50,7 @@ describe('Page', () => {
       it('calls dispatch(ctx, prev, push)', () => {
         const prev = page.prevContext;
         page.show(path, state, dispatch);
-        expect(page.dispatch).toHaveBeenCalledWith(jasmine.any(Context), prev);
+        expect(page.dispatch).toHaveBeenCalledWith(expect.any(Context), prev);
       });
       describe('when push === false', () => {
         const push = false;

test/route-tree-node-spec.js

@@ -13,6 +13,7 @@
  */
 import testRouteTree from './utils/testing-route-setup.js';
 import {Context} from '../router.js';
+import {vi} from 'vitest';
 
 describe('RouteTreeNode', () => {
   const ROOT = testRouteTree.tree.getNodeByKey(testRouteTree.Id.ROOT);
@@ -80,7 +81,7 @@ describe('RouteTreeNode', () => {
     });
 
     it('returning "false" from the routeEnter method should prevent future methods from being invoked', async () => {
-      spyOn(A.getValue().element, 'routeEnter').and.callFake(function() {
+      vi.spyOn(A.getValue().element, 'routeEnter').mockImplementation(function() {
         routePath.push('A-enter');
         return Promise.resolve(false);
       });

test/router-spec.js

@@ -14,6 +14,7 @@ import testRouteTree from './utils/testing-route-setup.js';
 import testRouteConfig from './utils/test-route-config.js';
 import Router, {Context, RouteTreeNode} from '../router.js';
 import RoutedElement from './fixtures/custom-fixture.js';
+import {vi} from 'vitest';
 
 function JSCompiler_renameProperty(propName, instance) {
   return propName;
@@ -54,7 +55,7 @@ describe('Router', () => {
   });
 
   beforeEach(() => {
-    spyOn(router.page, startPropertyName).and.callThrough();
+    vi.spyOn(router.page, startPropertyName);
   });
 
   it('.start should register routes and start routing', () => {
@@ -72,12 +73,12 @@ describe('Router', () => {
     expect(router.currentNodeId_).toBe(undefined);
   });
 
-  it('callbacks should call router.routeChangeCallback_ with the correct this binding and arguments', (done) => {
+  it('callbacks should call router.routeChangeCallback_ with the correct this binding and arguments', async () => {
     newRouteChangeCallback = (function(node, ...args) {
       expect(args.length).toBe(2);
       expect(this instanceof router.constructor).toBe(true);
       expect(node instanceof RouteTreeNode).toBe(true);
-      done();
+
     }).bind(router);
 
     router.go('/B/somedata');
@@ -206,8 +207,8 @@ describe('Router', () => {
 
   describe('go()', () => {
     beforeEach(() => {
-      spyOn(router.page, JSCompiler_renameProperty('show', router.page)).
-        and.callFake(async (path) => new Context(path));
+      vi.spyOn(router.page, JSCompiler_renameProperty('show', router.page)).
+        mockImplementation(async (path) => new Context(path));
     });
 
     it('should navigate to the given path', () => {

vitest.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig((env) => ({
+  cacheDir: '.vitest/web-component-router',
+  build: {},
+  optimzeDeps: {
+    include: ['path-to-regexp'],
+  },
+  test: {
+    include: ["test/**/*-spec.js"],
+    browser: {
+      provider: 'playwright',
+      enabled: true,
+      headless: !!process.env.CI,
+      name: 'chromium',
+    },
+    globals: true,
+    coverage: {
+      enabled: false,
+      all: true,
+      provider: 'v8',
+      reporter: ['lcov', 'json', 'json-summary', 'html'],
+      include: [],
+      exclude: [],
+      lines: 80,
+      branches: 80,
+      functions: 80,
+      statements: 80,
+    },
+  },
+}));