test(intercept): add tests

Author: tmsns

package-lock.json

@@ -5,9 +5,15 @@
  * If the module to be intercepted contains a default export, the export will be available in the `default` property. Only function expressions are supported when intercepting default exports.
  */
 export async function interceptModule(moduleName) {
+  if (moduleName.includes('./')) {
+    throw new Error(
+      `Parameter \`moduleName\` ('${moduleName}') contains a relative reference. This is not supported. Convert \`moduleName\` first to a server relative path. (eg. \`new URL(import.meta.resolve(moduleName)).pathname\`)`,
+    );
+  }
+
   let module;
   try {
-    module = await import(`/__intercept-module__/${moduleName}`);
+    module = await import(`/__intercept-module__?${moduleName}`);
   } catch (e) {
     throw new Error(
       `Module interception is not active. Make sure the \`interceptModulePlugin\` of \`@web/test-runner-intercept\` is added to the Test Runner config.`,

packages/test-runner-intercept/browser/index.js renamed to packages/test-runner-intercept/browser/index.mjs

@@ -17,7 +17,7 @@
   "exports": {
     ".": {
       "types": "./browser/index.d.ts",
-      "default": "./browser/index.js"
+      "default": "./browser/index.mjs"
     },
     "./plugin": {
       "types": "./plugin.d.ts",
@@ -26,14 +26,12 @@
     }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "build": "tsc",
-    "test": "mocha \"test/**/*.test.ts\" --require ts-node/register && npm run test:ci",
-    "test:browser": "node ../test-runner/dist/bin.js test-browser/test/**/*.test.{js,html} --config test-browser/web-test-runner.config.mjs",
-    "test:ci": "npm run test:browser",
-    "test:watch": "mocha \"test/**/*.test.ts\" --require ts-node/register --watch --watch-files src,test"
+    "test": "mocha test/**/*.test.ts --require ts-node/register",
+    "test:watch": "mocha test/**/*.test.ts --require ts-node/register --watch --watch-files src,test"
   },
   "files": [
     "*.d.ts",
@@ -54,10 +52,13 @@
     "intercept"
   ],
   "dependencies": {
-    "@web/dev-server-core": "^0.6.2",
+    "@web/dev-server-core": "^0.7.0",
     "es-module-lexer": "^1.3.1"
   },
   "devDependencies": {
-    "@web/test-runner": "^0.17.0"
+    "@web/test-runner": "^0.18.0",
+    "@web/test-runner-chrome": "^0.15.0",
+    "chai": "^4.2.0",
+    "mocha": "^10.2.0"
   }
 }

packages/test-runner-intercept/package.json

@@ -1,5 +1,4 @@
 import { Plugin } from '@web/dev-server-core';
-import { readFile } from 'fs/promises';
 import { parse } from 'es-module-lexer';
 import { createResolveImport, ResolveImport } from './createResolveImport';
 import { stripColor } from './stripColor';
@@ -8,7 +7,7 @@ import { stripColor } from './stripColor';
  * Plugin that allows the interception of modules
  */
 export function interceptModulePlugin(): Plugin {
-  const paths: string[] = [];
+  const absolutePaths: string[] = [];
 
   let resolveImport: ResolveImport;
   return {
@@ -18,24 +17,28 @@ export function interceptModulePlugin(): Plugin {
       resolveImport = createResolveImport(params, this);
     },
     async serve(context) {
-      if (context.path.startsWith('/__intercept-module__/')) {
-        let body;
-        try {
-          const source = context.path.replace('/__intercept-module__/', '');
-          paths.push(source);
-
+      let body;
+      try {
+        if (context.path.endsWith('/__intercept-module__')) {
+          const source = (context.querystring[0] === '/' ? '.' : '') + context.querystring;
           const resolvedPath = await resolveImport({ context, source });
-          const url = new URL(resolvedPath as string, context.request.href);
-          const relativeFilePath = url.pathname.substring(1);
 
-          const content = await readFile(relativeFilePath, 'utf-8');
-          const [, exports] = await parse(content, resolvedPath as string);
+          if (!resolvedPath) {
+            throw new Error(`Could not resolve "${context.querystring}".`);
+          }
+
+          body = `export * from '${resolvedPath}?intercept-module'`;
+        } else if (context.querystring === 'intercept-module') {
+          const url = new URL(context.path, context.request.href);
+          const response = await fetch(url);
+          const content = await response.text();
+          const [, exports] = await parse(content, context.path);
 
           const namedExports = exports.map(e => e.n).filter(n => n !== 'default');
           const hasDefaultExport = exports.some(e => e.n === 'default');
 
           body = `
-          import * as original from '${resolvedPath}';
+          import * as original from '${url.pathname}';
           const newOriginal = {...original};
 
           ${namedExports.map(x => `export let ${x} = newOriginal['${x}'];`).join('\n')}
@@ -66,20 +69,22 @@ export function interceptModulePlugin(): Plugin {
             },
           });
         `;
-        } catch (error) {
-          // Server side errors might contain ANSI color escape sequences.
-          // These sequences are not readable in a browser's console, so we strip them. 
-          const errorMessage = stripColor((error as Error).message).replaceAll("'", "\\'");
-          body = `export const __wtr_error__ = '${errorMessage}';`;
         }
-        return { body, type: 'text/javascript' };
+      } catch (error) {
+        // Server side errors might contain ANSI color escape sequences.
+        // These sequences are not readable in a browser's console, so we strip them.
+        const errorMessage = stripColor((error as Error).message).replace(/'/g, "\\'");
+        body = `export const __wtr_error__ = '${errorMessage}';`;
       }
-      return undefined;
+
+      return body ? { body, type: 'text/javascript' } : undefined;
     },
 
-    resolveImport({ source }) {
-      if (paths.includes(source)) {
-        return `/__intercept-module__/${source}`;
+    resolveImport({ source, context }) {
+      if (context.path === '/__intercept-module__') {
+        absolutePaths.push(source);
+      } else if (absolutePaths.includes(source)) {
+        return `${source}?intercept-module`;
       }
       return undefined;
     },

packages/test-runner-intercept/src/interceptModulePlugin.ts

@@ -0,0 +1,24 @@
+import { expect } from '../chai.js';
+import { interceptModule } from '../../../browser/index.mjs';
+
+const timeLibrary = await interceptModule('time-library/hour');
+const { getTimeOfDay } = await import('./fixture/getTimeOfDay.js');
+
+let backup;
+it('can run a module normally', () => {
+  backup = timeLibrary.getCurrentHour;
+  const timeOfDay = getTimeOfDay();
+  expect(timeOfDay).to.equal('night');
+});
+
+it('can intercept a module', () => {
+  timeLibrary.getCurrentHour = () => 12;
+  const timeOfDay = getTimeOfDay();
+  expect(timeOfDay).to.equal('day');
+});
+
+it('can restore an intercepted module', () => {
+  timeLibrary.getCurrentHour = backup;
+  const timeOfDay = getTimeOfDay();
+  expect(timeOfDay).to.equal('night');
+});

packages/test-runner-intercept/test/fixtures/bare/browser-test.js

@@ -0,0 +1,9 @@
+import { getCurrentHour } from 'time-library/hour';
+
+export function getTimeOfDay() {
+  const hour = getCurrentHour();
+  if (hour < 6 || hour > 18) {
+    return 'night';
+  }
+  return 'day';
+}

packages/test-runner-intercept/test/fixtures/bare/fixture/getTimeOfDay.js

@@ -0,0 +1,4 @@
+{
+    "name": "my-app"
+  }
+  

packages/test-runner-intercept/test/fixtures/bare/fixture/node_modules/time-library/index.js

@@ -0,0 +1,5 @@
+/* eslint-env browser */
+import '../../../../node_modules/chai/chai.js';
+
+export const expect = window.chai.expect;
+export const assert = window.chai.assert;