kempo-testing-framework 1.3.6 → 1.3.8

package/.github/workflows/publish-major.yml

@@ -0,0 +1,39 @@
+name: Publish Major Version to npmjs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write  # enables npm provenance
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Setup Node and create an .npmrc that uses the token from NODE_AUTH_TOKEN
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+
+      # Auto-increment major version, commit, and push
+      - name: Bump major version
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          npm version major --no-git-tag-version
+          git add package.json package-lock.json || true
+          git commit -m "ci: bump major version [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main || echo "No changes to push"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/publish-minor.yml

@@ -0,0 +1,39 @@
+name: Publish Minor Version to npmjs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write  # enables npm provenance
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      # Setup Node and create an .npmrc that uses the token from NODE_AUTH_TOKEN
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+
+      # Auto-increment minor version, commit, and push
+      - name: Bump minor version
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          npm version minor --no-git-tag-version
+          git add package.json package-lock.json || true
+          git commit -m "ci: bump minor version [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main || echo "No changes to push"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/{publish-npm.yml → publish-patch.yml}

@@ -1,5 +1,5 @@
 
-name: Publish Package to npmjs
+name: Publish Patch Version to npmjs
 
 on:
   push:

package/README.md

@@ -66,8 +66,65 @@ Test files can export the following optional lifecycle functions:
 - **`beforeEach`** - Runs before each individual test
 - **`afterEach`** - Runs after each individual test
 
+
 **Note:** All test functions and lifecycle callbacks can be `async` functions if you need to await asynchronous operations.
 
+### Custom Test Pages for Browser Tests
+
+You can specify a custom HTML page for your browser tests by exporting a `page` string in your test file. This is useful for testing in a specific static environment or reusing a custom fixture across multiple test files.
+
+- The path should be relative to the test file location.
+- If no `page` export is present, the default test page (`test.html`) will be used.
+
+#### Example
+
+Suppose you have the following files in your `tests` directory:
+- `custom-test-page.html`
+- `custom-page.browser-test.js`
+
+Your test file:
+```javascript
+// tests/custom-page.browser-test.js
+export const page = './custom-test-page.html';
+
+export default {
+  'should find custom element in custom page': ({ pass, fail }) => {
+    const el = document.getElementById('custom-test-element');
+    if (el && el.textContent === 'Hello from custom page!') {
+      pass('Custom element found and content matches');
+    } else {
+      fail('Custom element not found or content mismatch');
+    }
+  }
+};
+```
+
+Your custom HTML page:
+```html
+<!-- tests/custom-test-page.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Custom Test Page</title>
+</head>
+<body>
+  <div id="custom-test-element">Hello from custom page!</div>
+  <!-- The test runner will inject scripts here -->
+</body>
+</html>
+```
+
+When you run:
+```bash
+npx kempo-test custom-page
+```
+Kempo will serve your custom HTML page for this test file and inject the test runner, so your tests run in the context of your custom page.
+
+You can share the same custom page across multiple test files by exporting the appropriate relative path in each file.
+
+---
+
 ## Example Test File
 
 `[name].test.js`, `[name].browser-test.js`, or `[name].node-test.js`... they all should look exactly the same.

package/gui/index.html

@@ -5,29 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Kempo Testing Library GUI</title>
   <link rel="stylesheet" href="/kempo.css" />
-  <style>
-    .loading-state {
-      padding: 1rem;
-      text-align: center;
-      color: #666;
-      font-style: italic;
-    }
-    
-    .empty-state {
-      padding: 1rem;
-      color: #888;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-      margin: 0.5rem 0;
-    }
-    
-    .empty-state code {
-      background-color: #e8e8e8;
-      padding: 0.2rem 0.4rem;
-      border-radius: 3px;
-      font-family: monospace;
-    }
-  </style>
 </head>
 <body>
 <main>
@@ -52,20 +29,20 @@
   <div id="universalTestsContainer">
     <h2>Universal Tests</h2>
     <p>Tests that run in both Node and Browser environments</p>
-    <div id="universalTestsLoading" class="loading-state">Loading universal tests...</div>
-    <div id="universalTestsEmpty" class="empty-state" style="display: none;">No universal tests found. Create test files with <code>.test.js</code> extension to run tests in both environments.</div>
+    <div id="universalTestsLoading" class="p ta-center tc-muted" style="font-style: italic;">Loading universal tests...</div>
+    <div id="universalTestsEmpty" class="p bg-alt r my" style="display: none;">No universal tests found. Create test files with <code>.test.js</code> extension to run tests in both environments.</div>
     <div id="universalTests"></div>
   </div>
   <div id="nodeTestsContainer">
     <h2>Node Tests</h2>
-    <div id="nodeTestsLoading" class="loading-state">Loading Node tests...</div>
-    <div id="nodeTestsEmpty" class="empty-state" style="display: none;">No Node-only tests found. Create test files with <code>.node-test.js</code> extension to run tests only in Node.</div>
+    <div id="nodeTestsLoading" class="p ta-center tc-muted" style="font-style: italic;">Loading Node tests...</div>
+    <div id="nodeTestsEmpty" class="p bg-alt r my" style="display: none;">No Node-only tests found. Create test files with <code>.node-test.js</code> extension to run tests only in Node.</div>
     <div id="nodeTests"></div>
   </div>
   <div id="browserTestsContainer">
     <h2>Browser Tests</h2>
-    <div id="browserTestsLoading" class="loading-state">Loading browser tests...</div>
-    <div id="browserTestsEmpty" class="empty-state" style="display: none;">No browser-only tests found. Create test files with <code>.browser-test.js</code> extension to run tests only in the browser.</div>
+    <div id="browserTestsLoading" class="p ta-center tc-muted" style="font-style: italic;">Loading browser tests...</div>
+    <div id="browserTestsEmpty" class="p bg-alt r my" style="display: none;">No browser-only tests found. Create test files with <code>.browser-test.js</code> extension to run tests only in the browser.</div>
     <div id="browserTests"></div>
   </div>
   </ktf-test-framework>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-testing-framework",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "The Kempo Testing Framework is a simple testing framework built on the principle that code intended to be ran in the browser should be tested in the browser, code intended to be ran in Node should be tested in Node, and code intended to be ran in both should be tested in both. No mocking, no complexity—just testing.",
   "main": "index.js",
   "bin": {

package/src/runBrowserTests.js

@@ -1,6 +1,8 @@
 import { startServer, stopServer } from './browserTestServer.js';
 import puppeteer from 'puppeteer';
 import LOG_LEVELS from './utils/logLevels.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
 export default async ({
   testFile,
@@ -14,11 +16,42 @@ export default async ({
    * Start Test Server
    */
   const url = await startServer(port);
-  
+
   if(logLevel >= LOG_LEVELS.VERBOSE){
     console.log(`\x1b[90m Browser test server started at ${url}\x1b[0m`);
   }
-  
+
+
+  // Setup __dirname for ESM
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+
+  // Load the test module to check for 'page' export
+  let customPage = null;
+  try {
+    const testFilePath = path.resolve(process.cwd(), testFile.replace(/\//g, path.sep));
+    const testModule = await import(`file://${testFilePath}`);
+    if (typeof testModule.page === 'string') {
+      customPage = testModule.page;
+    }
+  } catch (e) {
+    // Ignore errors, fallback to default page
+  }
+
+  // Determine which HTML page to serve
+  let pageUrl;
+  if (customPage) {
+    // Resolve custom page relative to test file location
+    const testDir = path.dirname(testFile);
+    const customPagePath = path.join(testDir, customPage);
+    pageUrl = `${url.replace(/\/$/, '')}/${customPagePath.replace(/\\/g, '/')}`;
+    if(logLevel >= LOG_LEVELS.VERBOSE){
+      console.log(`\x1b[90m Using custom test page: ${customPagePath}\x1b[0m`);
+    }
+  } else {
+    pageUrl = `${url}?testFile=${testFile}&testFilter=${filter}&delay=${delayMs}`;
+  }
+
   const sleep = (ms) => new Promise(r => setTimeout(r, ms));
   try {
     /*
@@ -45,9 +78,33 @@ export default async ({
       await sleep(delayMs);
     }
 
-    await page.goto(`${url}?testFile=${testFile}&testFilter=${filter}&delay=${delayMs}`);
+    await page.goto(pageUrl);
     await page.waitForFunction(() => document.readyState === 'complete' || document.readyState === 'interactive');
-    
+
+    // If using a custom page, inject the test runner script
+    if (customPage) {
+      // Inject a script that mimics test.html: loads runTests.js, imports the test file, and sets window.results
+      await page.addScriptTag({
+        content: `
+          (async () => {
+            try {
+              const runTestsModule = await import('/src/runTests.js');
+              const urlParams = new URLSearchParams(window.location.search);
+              const testFile = urlParams.get('testFile') || '${testFile}';
+              const testFilter = urlParams.get('testFilter') || '';
+              const delay = parseInt(urlParams.get('delay') || '0', 10) || 0;
+              const testsModule = await import('/' + testFile);
+              const results = await runTestsModule.default(testsModule, testFilter, delay);
+              window.results = results;
+            } catch (error) {
+              console.error('Browser test error:', error);
+              window.error = error.message || String(error);
+            }
+          })();
+        `
+      });
+    }
+
     // Ensure the test page has focus when browser is visible
     if (showBrowser) {
       await page.bringToFront();
@@ -55,7 +112,7 @@ export default async ({
         console.log(`\x1b[90m Bringing test page to front\x1b[0m`);
       }
     }
-    
+
     // Check for any errors first
     const hasError = await page.evaluate(() => window.error !== undefined);
     if (hasError) {

package/tests/custom-page.browser-test.js

@@ -0,0 +1,12 @@
+export const page = './custom-test-page.html';
+
+export default {
+  'should find custom element in custom page': ({ pass, fail }) => {
+    const el = document.getElementById('custom-test-element');
+    if (el && el.textContent === 'Hello from custom page!') {
+      pass('Custom element found and content matches');
+    } else {
+      fail('Custom element not found or content mismatch');
+    }
+  }
+};

package/tests/custom-test-page.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Custom Test Page</title>
+</head>
+<body>
+  <div id="custom-test-element">Hello from custom page!</div>
+  <!-- The test runner will inject scripts here -->
+</body>
+</html>