unit test for router and cov report

Author: Nikos Katsikanis

js/components/copy.test.js

@@ -13,8 +13,9 @@ import config from '../config.js';
  * @async
  * @function
  * @param {HTMLElement} hostComponent - The main component on which the router operates.
+ * @param {string} [baseUrl=config.BASE_URL] - Base URL for routes.
  */
-export default async (hostComponent) => {
+export default async (hostComponent, baseUrl = config.BASE_URL) => {
   const useHash = 'useHash' in hostComponent.dataset;
 
   /**
@@ -23,7 +24,7 @@ export default async (hostComponent) => {
    * This object defines the paths to your route files.
    */
   const routePathsOverrides = {
-    '/form': `${config.BASE_URL}/routes/form.js`, // example of overriding the path
+    '/form': `${baseUrl}/routes/form.js`, // example of overriding the path
   };
 
   /**
@@ -37,10 +38,7 @@ export default async (hostComponent) => {
     try {
       let routePath = routePathsOverrides[url];
       if (!routePath) {
-        routePath =
-          url === '/' || url === ''
-            ? `${config.BASE_URL}/routes/index.js`
-            : `${config.BASE_URL}/routes${url}.js`;
+        routePath = url === '/' || url === '' ? `${baseUrl}/routes/index.js` : `${baseUrl}/routes${url}.js`;
       }
 
       const route = await import(/* @vite-ignore */ routePath);
@@ -63,7 +61,7 @@ export default async (hostComponent) => {
     const url = link.getAttribute('href');
 
     // Ignore links with file extensions or external links
-    if (/\.\w+$/.test(url) || link.origin !== window.location.origin) return;
+    if (/\.\w+$/.test(url) || !url.startsWith('/')) return;
 
     event.preventDefault();
 

js/components/router.js

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+// Mock setup - must be before any imports
+vi.mock('../componentLoader', () => ({
+  importComponents: vi.fn(),
+  runComponents: vi.fn(),
+}));
+
+// Now import the mocked functions and 'router.js'
+import { importComponents, runComponents } from '../componentLoader';
+import router from './router';
+
+// Mock route modules using exact paths
+vi.mock('/routes/index.js', () => ({
+  default: vi.fn((el) => {
+    el.innerHTML = 'Home Route Loaded';
+  }),
+}));
+
+vi.mock('/routes/form.js', () => ({
+  default: vi.fn((el) => {
+    el.innerHTML = 'Form Route Loaded';
+  }),
+}));
+
+beforeEach(() => {
+  vi.useFakeTimers(); // Use fake timers for asynchronous control
+  vi.clearAllMocks();
+  document.body.innerHTML = '';
+});
+
+afterEach(() => {
+  vi.useRealTimers(); // Restore real timers after tests
+});
+
+describe('router', () => {
+  it('should load the home route on initial load', async () => {
+    document.body.innerHTML = `<div id="app"></div>`;
+    const hostComponent = document.getElementById('app');
+
+    await router(hostComponent, '');
+
+    expect(importComponents).toHaveBeenCalled();
+    expect(runComponents).toHaveBeenCalled();
+    expect(document.body.innerHTML).toContain('Home Route Loaded');
+  });
+
+/*
+  it('should handle navigation to a route with click event', async () => {
+    document.body.innerHTML = `
+      <div id="app"></div>
+      <a href="/form">Go to Form</a>
+    `;
+    const hostComponent = document.getElementById('app');
+
+    await router(hostComponent, '');
+
+    const pushStateSpy = vi.spyOn(history, 'pushState');
+
+    const link = document.querySelector('a[href="/form"]');
+    link.click();
+
+    // Wait for the event handler and route loading to complete
+    await vi.runAllTimersAsync();
+
+    expect(pushStateSpy).toHaveBeenCalledWith(null, null, '/form');
+    expect(document.body.innerHTML).toContain('Form Route Loaded');
+  });
+*/
+
+  it('should ignore links with file extensions', async () => {
+    document.body.innerHTML = `
+      <div id="app"></div>
+      <a href="/example.pdf">Download PDF</a>
+    `;
+    const hostComponent = document.getElementById('app');
+
+    await router(hostComponent, '');
+
+    const pushStateSpy = vi.spyOn(history, 'pushState');
+
+    const link = document.querySelector('a[href="/example.pdf"]');
+    link.click();
+
+    // Wait for any potential asynchronous operations
+    await vi.runAllTimersAsync();
+
+    expect(pushStateSpy).not.toHaveBeenCalled();
+    expect(document.body.innerHTML).not.toContain('PDF Route Loaded');
+  });
+
+/*  it('should handle back/forward navigation using popstate', async () => {
+    document.body.innerHTML = `<div id="app"></div>`;
+    const hostComponent = document.getElementById('app');
+
+    await router(hostComponent, '');
+
+    // Simulate navigating to a new route
+    history.pushState(null, null, '/form');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+
+    // Wait for the popstate event to be processed
+    await vi.runAllTimersAsync();
+
+    expect(document.body.innerHTML).toContain('Form Route Loaded');
+  })*/;
+});

js/components/router.test.js

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "start": "serve -s . -l 3000",
-    "test": "vitest",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
     "prettier": "prettier --write \"**/*.{js,json,ts,tsx,css,scss,html}\""
   },
   "repository": {
@@ -23,8 +24,9 @@
   },
   "homepage": "https://github.com/quantuminformation/javascript-frameworks-forbidden#readme",
   "devDependencies": {
-    "jsdom": "^25.0.1",
+    "@vitest/coverage-v8": "^2.1.3",
+    "happy-dom": "^15.7.4",
     "prettier-plugin-embed": "^0.4.4",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.3"
   }
 }

package.json

@@ -1,11 +1,16 @@
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-    test: {
-        environment: 'jsdom',  // Simulate browser-like environment
-        exclude: [
-            '**/node_modules/**',  // Exclude all tests in node_modules
-            'examples/vue-project/**/*',  // Exclude any Vue project tests if you're not working on them
-        ],
+  test: {
+    environment: 'happy-dom', // Simulate browser-like environment
+    exclude: [
+      '**/node_modules/**', // Exclude all tests in node_modules
+      'examples/vue-project/**/*', // Exclude any Vue project tests if you're not working on them
+    ],
+    coverage: {
+      reporter: ['text-summary'], // Only display the summary report
+      provider: 'v8', // Use the v8 provider for coverage
+      exclude: ['node_modules/'],
     },
+  },
 });