@remix-run/test 0.1.0 → 0.3.0

package/dist/test/framework.test.browser.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import decamelize from 'decamelize';
+import * as assert from '@remix-run/assert';
+import { describe, it } from '@remix-run/test';
+import { on } from '@remix-run/ui';
+import { render } from '@remix-run/ui/test';
+describe('Counter', () => {
+    function Counter(handle) {
+        let count = handle.props.count ?? 0;
+        return () => (_jsxs("div", { children: [
+                _jsx("h3", { children: "Counter" }), _jsxs("div", { children: [
+                        _jsx("button", { "data-action": "decrement", mix: [
+                                on('click', () => {
+                                    count--;
+                                    handle.update();
+                                }),
+                            ], children: "-" }), _jsx("span", { "data-testid": "count", style: { fontSize: '24px', minWidth: '2ch', textAlign: 'center' }, children: count }), _jsx("button", { "data-action": "increment", mix: [
+                                on('click', () => {
+                                    count++;
+                                    handle.update();
+                                }),
+                            ], children: "+" })
+                    ] })
+            ] }));
+    }
+    it('renders with initial count of 0 when not specified', (t) => {
+        let { $, cleanup } = render(_jsx(Counter, {}));
+        t.after(cleanup);
+        assert.equal(Number($('[data-testid="count"]').textContent), 0);
+    });
+    it('renders with a provided initial count', (t) => {
+        let { $, cleanup } = render(_jsx(Counter, { count: 5 }));
+        t.after(cleanup);
+        assert.equal(Number($('[data-testid="count"]').textContent), 5);
+    });
+    it('increments the count', async (t) => {
+        let { $, act, cleanup } = render(_jsx(Counter, {}));
+        t.after(cleanup);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 1);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 2);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 3);
+    });
+    it('decrements the count', async (t) => {
+        let { $, act, cleanup } = render(_jsx(Counter, { count: 3 }));
+        t.after(cleanup);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 2);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 1);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 0);
+    });
+});
+describe('FieldLabel (using decamelize)', () => {
+    // Demonstrates that ESM third-party libraries are importable from test modules
+    function FieldLabel(_handle) {
+        return (props) => (_jsx("span", { "data-testid": "label", children: decamelize(props.name, { separator: ' ' }) }));
+    }
+    it('renders a single word unchanged', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "name" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'name');
+    });
+    it('converts camelCase to spaced words', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "firstName" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'first name');
+    });
+    it('handles multiple humps', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "dateOfBirth" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'date of birth');
+    });
+});
+describe('DOM Tests', () => {
+    it('can interact with DOM', async () => {
+        let div = document.createElement('div');
+        div.textContent = 'Hello';
+        assert.equal(div.textContent, 'Hello');
+    });
+    it('can test fetch API', async () => {
+        let response = await fetch('data:text/plain,hello');
+        let text = await response.text();
+        assert.equal(text, 'hello');
+    });
+    it.skip('skip: can skip tests', () => {
+        assert.equal(true, false);
+    });
+    it.todo('todo: can mark tests as todo');
+});
+describe('render/cleanup', () => {
+    it('cleanup removes the container from the DOM', () => {
+        let { container, cleanup } = render(_jsx("div", { "data-testid": "manual", children: "hello" }));
+        assert.equal(document.body.contains(container), true);
+        cleanup();
+        assert.equal(document.body.contains(container), false);
+    });
+});
+describe.skip('skip: Skipped Test Suite', () => {
+    it('would fail', () => {
+        assert.equal(true, false);
+    });
+});
+describe.todo('todo: Test Suite');

package/dist/test/framework.test.e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework.test.e2e.d.ts","sourceRoot":"","sources":["../../src/test/framework.test.e2e.tsx"],"names":[],"mappings":""}

package/dist/test/framework.test.e2e.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import * as assert from 'node:assert/strict';
+import { renderToString } from '@remix-run/ui/server';
+import { createTestServer } from '@remix-run/node-fetch-server/test';
+import { describe, it } from "../lib/framework.js";
+const html = async (n) => new Response(await renderToString(n), {
+    headers: { 'Content-Type': 'text/html' },
+});
+describe('e2e tests', () => {
+    it('runs playwright against a fetch handler', async (t) => {
+        function Doc(handle) {
+            return () => (_jsxs("html", { children: [
+                    _jsx("head", { children: _jsx("title", { children: "Test" }) }), _jsx("body", { children: handle.props.children })
+                ] }));
+        }
+        let handler = (request) => {
+            let url = new URL(request.url);
+            if (url.pathname === '/') {
+                return html(_jsxs(Doc, { children: [
+                        _jsx("h1", { children: "Hello Remix" }), _jsx("a", { href: "/about", children: "About" })
+                    ] }));
+            }
+            if (url.pathname === '/about') {
+                return html(_jsx(Doc, { children: _jsx("h1", { children: "About Remix" }) }));
+            }
+            return new Response('Not found', { status: 404 });
+        };
+        let page = await t.serve(await createTestServer(handler));
+        await page.goto('/');
+        assert.equal(await page.locator('h1').textContent(), 'Hello Remix');
+        await page.click('[href="/about"]');
+        assert.equal(await page.locator('h1').textContent(), 'About Remix');
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@remix-run/test",
-  "version": "0.1.0",
-  "description": "A browser-based test framework for Remix components",
+  "version": "0.3.0",
+  "description": "A test framework for JavaScript and TypeScript projects",
   "author": "Shopify Inc.",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,11 @@
     "!src/**/*.test.*"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=24.3.0"
+  },
   "bin": {
-    "remix-test": "./dist/cli.js"
+    "remix-test": "./dist/cli-entry.js"
   },
   "exports": {
     ".": {
@@ -28,13 +31,23 @@
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
-    "./cli": "./dist/cli.js"
+    "./cli": {
+      "types": "./dist/cli.d.ts",
+      "default": "./dist/cli.js"
+    }
   },
   "dependencies": {
+    "es-module-lexer": "^2.0.0",
+    "esbuild": "^0.27.1",
+    "get-tsconfig": "^4.13.6",
+    "istanbul-lib-coverage": "^3.2.2",
+    "istanbul-lib-report": "^3.0.1",
+    "istanbul-reports": "^3.2.0",
+    "magic-string": "^0.30.21",
+    "source-map-js": "^1.2.1",
     "tsx": "^4.21.0",
-    "@remix-run/component": "0.7.0",
-    "@remix-run/fetch-router": "0.18.1",
-    "@remix-run/node-fetch-server": "0.13.0"
+    "v8-to-istanbul": "^9.3.0",
+    "@remix-run/terminal": "^0.1.0"
   },
   "peerDependencies": {
     "playwright": "^1.59.0"
@@ -45,10 +58,17 @@
     }
   },
   "devDependencies": {
+    "@types/dom-navigation": "1.0.6",
+    "@types/istanbul-lib-coverage": "^2.0.6",
+    "@types/istanbul-lib-report": "^3.0.3",
+    "@types/istanbul-reports": "^3.0.4",
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
+    "decamelize": "^6.0.1",
     "playwright": "^1.59.0",
-    "@remix-run/assert": "0.1.0"
+    "@remix-run/node-fetch-server": "^0.13.1",
+    "@remix-run/assert": "^0.2.0",
+    "@remix-run/ui": "^0.1.1"
   },
   "keywords": [
     "testing",
@@ -61,7 +81,8 @@
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
     "clean": "git clean -fdX",
-    "test": "node src/cli.ts",
+    "test": "node src/cli-entry.ts",
+    "test:bun": "bun --bun src/cli-entry.ts --type server",
     "typecheck": "tsgo --noEmit"
   }
 }

package/src/app/client/entry.ts

@@ -0,0 +1,357 @@
+import { normalizeLine } from '../../lib/normalize.ts'
+import type { TestResult, TestResults } from '../../lib/reporters/results.ts'
+
+interface TestsSetup {
+  testPaths: string[]
+  baseDir: string
+}
+
+type FileResults = TestResults & { tests: Array<TestResult & { filePath: string }> }
+
+const STYLES = `
+.rt-container {
+  font-family: monospace;
+  padding: 16px;
+  max-width: 900px;
+}
+.rt-summary {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+.rt-summary-row {
+  display: block;
+}
+.rt-info {
+  color: #0ea5e9;
+}
+.rt-indent {
+  margin-left: 16px;
+  margin-top: 4px;
+}
+.rt-suite-details {
+  margin-bottom: 8px;
+}
+.rt-suite-summary {
+  cursor: pointer;
+  padding: 2px 0;
+  user-select: none;
+}
+.rt-suite-icon {
+  margin-left: 6px;
+}
+.rt-test-item {
+  padding: 3px 18px;
+}
+.rt-test-duration {
+  color: #999;
+  font-size: 0.85em;
+}
+.rt-error-pre {
+  margin: 4px 0 4px 16px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #dc2626;
+  background: #fff5f5;
+  border-left: 3px solid #dc2626;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.rt-error-stack {
+  color: #999;
+  margin-top: 6px;
+}
+.rt-button {
+  margin-top: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.rt-stack-link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: #aaa;
+}
+.rt-passed {
+  color: #16a34a;
+}
+.rt-failed {
+  color: #dc2626;
+}
+.rt-muted {
+  color: #666;
+}
+.rt-todo {
+  color: #a16207;
+}
+`
+
+const styleEl = document.createElement('style')
+styleEl.textContent = STYLES
+document.head.appendChild(styleEl)
+
+const setupEl = document.getElementById('test-setup')
+if (!setupEl?.textContent) {
+  throw new Error('Test runner: missing #test-setup payload')
+}
+const setup = JSON.parse(setupEl.textContent) as TestsSetup
+const root = document.getElementById('test-root')
+if (!root) {
+  throw new Error('Test runner: missing #test-root mount point')
+}
+mountTests(root, setup)
+
+function mountTests(host: HTMLElement, setup: TestsSetup): void {
+  let startTime = performance.now()
+  let totals = { passed: 0, failed: 0, skipped: 0, todo: 0 }
+
+  let container = el('div', { id: 'test-status', className: 'rt-container' })
+  host.appendChild(container)
+
+  let summary = el('div', { className: 'rt-summary' })
+  container.appendChild(summary)
+
+  let testsRow = summaryRow()
+  let passRow = summaryRow()
+  let failRow = summaryRow()
+  let skippedRow = summaryRow()
+  let todoRow = summaryRow()
+  let durationRow = summaryRow()
+  summary.append(testsRow.el, passRow.el, failRow.el)
+
+  let suitesContainer = el('div')
+  container.appendChild(suitesContainer)
+
+  function renderSummary(done: boolean) {
+    let total = totals.passed + totals.failed + totals.skipped + totals.todo
+    testsRow.text(`tests ${total}`)
+    passRow.text(`pass ${totals.passed}`)
+    failRow.text(`fail ${totals.failed}`)
+    if (totals.skipped > 0) {
+      if (!skippedRow.el.parentNode) summary.appendChild(skippedRow.el)
+      skippedRow.text(`skipped ${totals.skipped}`)
+    }
+    if (totals.todo > 0) {
+      if (!todoRow.el.parentNode) summary.appendChild(todoRow.el)
+      todoRow.text(`todo ${totals.todo}`)
+    }
+    if (done) {
+      if (!durationRow.el.parentNode) summary.appendChild(durationRow.el)
+      durationRow.text(`duration_ms ${(performance.now() - startTime).toFixed(5)}`)
+    }
+  }
+
+  function appendFileSuites(fileResults: FileResults) {
+    let suiteMap = new Map<string, TestResult[]>()
+    for (let test of fileResults.tests) {
+      let suite = test.suiteName || 'Tests'
+      if (!suiteMap.has(suite)) suiteMap.set(suite, [])
+      suiteMap.get(suite)!.push(test)
+    }
+    for (let [suiteName, tests] of suiteMap) {
+      suitesContainer.appendChild(buildSuite(suiteName, tests, setup.baseDir))
+    }
+  }
+
+  function appendRerunButton() {
+    let button = el('button', { className: 'rt-button', textContent: 'Re-run' })
+    button.type = 'button'
+    button.addEventListener('click', () => window.location.reload())
+    container.appendChild(button)
+  }
+
+  renderSummary(false)
+
+  void (async () => {
+    for (let testFile of setup.testPaths) {
+      let fileResults = await runInIframe(testFile)
+      await fetch('/file-results', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(fileResults),
+      })
+      totals.passed += fileResults.passed
+      totals.failed += fileResults.failed
+      totals.skipped += fileResults.skipped
+      totals.todo += fileResults.todo
+      appendFileSuites(fileResults)
+      renderSummary(false)
+    }
+    renderSummary(true)
+    appendRerunButton()
+    ;(window as unknown as { __testsDone?: boolean }).__testsDone = true
+  })()
+}
+
+function runInIframe(testFile: string): Promise<FileResults> {
+  return new Promise((resolve) => {
+    let iframe = document.createElement('iframe')
+    iframe.src = `/iframe?file=${encodeURIComponent(testFile)}`
+    // Make the iframe as big so we don't get unintentional scrolling in test UIs
+    let parentBody = iframe.contentWindow?.document.body
+    iframe.width = Math.max(parentBody?.scrollWidth ?? 0, 800).toString()
+    iframe.height = Math.max(Math.round((parentBody?.scrollHeight ?? 0) / 2), 400).toString()
+    document.body.appendChild(iframe)
+
+    function onMessage(event: MessageEvent) {
+      if (event.source !== iframe.contentWindow) return
+      window.removeEventListener('message', onMessage)
+      // Hide instead of remove so when coverage is enabled the iframe remains attached
+      // so V8 retains its scripts and Playwright can collect coverage at run end.
+      iframe.style.display = 'none'
+      if (event.data.type === 'test-results') {
+        let { passed, failed, skipped, todo, tests } = event.data.results as TestResults
+        resolve({
+          passed,
+          failed,
+          skipped,
+          todo,
+          tests: tests.map((t) => ({ ...t, filePath: testFile })),
+        })
+      } else {
+        let { message, stack } = event.data.error
+        resolve({
+          passed: 0,
+          failed: 1,
+          skipped: 0,
+          todo: 0,
+          tests: [
+            {
+              name: '',
+              suiteName: testFile,
+              filePath: testFile,
+              status: 'failed',
+              error: { message, stack },
+              duration: 0,
+            },
+          ],
+        })
+      }
+    }
+
+    window.addEventListener('message', onMessage)
+  })
+}
+
+function buildSuite(suiteName: string, tests: TestResult[], baseDir: string): HTMLElement {
+  let suiteFailed = tests.some((t) => t.status === 'failed')
+  let suiteAllSkipped = tests.every((t) => t.status === 'skipped')
+  let suiteAllTodo = tests.every((t) => t.status === 'todo')
+  let stateClass = suiteFailed
+    ? 'rt-failed'
+    : suiteAllSkipped
+      ? 'rt-muted'
+      : suiteAllTodo
+        ? 'rt-todo'
+        : 'rt-passed'
+  let icon = suiteFailed ? '✗' : suiteAllSkipped ? '↓' : suiteAllTodo ? '…' : '✓'
+  let suffix = suiteAllSkipped ? ' # skipped' : suiteAllTodo ? ' # todo' : ''
+
+  let details = el('details', { className: 'rt-suite-details' })
+  if (suiteFailed) details.open = true
+
+  let summary = el('summary', { className: `rt-suite-summary ${stateClass}` })
+  summary.appendChild(
+    el('span', { className: 'rt-suite-icon', textContent: `${icon} ${suiteName}${suffix}` }),
+  )
+  details.appendChild(summary)
+
+  let body = el('div', { className: 'rt-indent' })
+  for (let test of tests) {
+    let item = buildTestItem(test, baseDir)
+    if (item) body.appendChild(el('div', { className: 'rt-test-item' }, item))
+  }
+  details.appendChild(body)
+  return details
+}
+
+function buildTestItem(test: TestResult, baseDir: string): HTMLElement | null {
+  if (test.status === 'passed') {
+    let row = el('div', { className: 'rt-passed' })
+    row.append(`✓ ${test.name} `)
+    row.appendChild(
+      el('span', {
+        className: 'rt-test-duration',
+        textContent: `(${test.duration.toFixed(2)}ms)`,
+      }),
+    )
+    return row
+  }
+  if (test.status === 'failed') {
+    let row = el('div', { className: 'rt-failed' })
+    row.append(`✗ ${test.name} `)
+    row.appendChild(
+      el('span', {
+        className: 'rt-test-duration',
+        textContent: `(${test.duration.toFixed(2)}ms)`,
+      }),
+    )
+    if (test.error) {
+      let pre = el('pre', { className: 'rt-error-pre' })
+      pre.append(test.error.message)
+      if (test.error.stack) {
+        let stackDiv = el('div', { className: 'rt-error-stack' })
+        stackDiv.appendChild(buildStack(test.error.stack, baseDir))
+        pre.appendChild(stackDiv)
+      }
+      row.appendChild(pre)
+    }
+    return row
+  }
+  if (test.status === 'skipped' && test.name) {
+    return el('div', { className: 'rt-muted', textContent: `↓ ${test.name} # skipped` })
+  }
+  if (test.status === 'todo' && test.name) {
+    return el('div', { className: 'rt-todo', textContent: `… ${test.name} # todo` })
+  }
+  return null
+}
+
+function buildStack(stack: string, baseDir: string): DocumentFragment {
+  let frameLocRe = /([^():\s][^():]*\.[jt]sx?):(\d+):(\d+)/
+  let frag = document.createDocumentFragment()
+  for (let raw of stack.split('\n')) {
+    let isTestModule = raw.includes('/@test/')
+    let line = normalizeLine(raw)
+    let match = isTestModule ? frameLocRe.exec(line) : null
+    let div = document.createElement('div')
+    if (match) {
+      let [full, file, row, col] = match
+      let abs = `${baseDir}/${file}`
+      let href = `vscode://file/${abs}:${row}:${col}`
+      div.append(line.slice(0, match.index))
+      let a = el('a', { className: 'rt-stack-link', textContent: full })
+      a.href = href
+      div.appendChild(a)
+      div.append(line.slice(match.index + full.length))
+    } else {
+      div.textContent = line
+    }
+    frag.appendChild(div)
+  }
+  return frag
+}
+
+function summaryRow() {
+  let row = el('span', { className: 'rt-summary-row' })
+  let icon = el('span', { className: 'rt-info', textContent: 'ℹ' })
+  let textNode = document.createTextNode('')
+  row.append(icon, ' ', textNode)
+  return {
+    el: row,
+    text(s: string) {
+      textNode.data = ' ' + s
+    },
+  }
+}
+
+function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  props?: { id?: string; className?: string; textContent?: string },
+  ...children: Array<Node | string>
+): HTMLElementTagNameMap[K] {
+  let node = document.createElement(tag)
+  if (props?.id) node.id = props.id
+  if (props?.className) node.className = props.className
+  if (props?.textContent != null) node.textContent = props.textContent
+  if (children.length) node.append(...children)
+  return node
+}

package/src/app/client/iframe.ts

@@ -0,0 +1,18 @@
+import { runTests } from '../../lib/executor.ts'
+
+const params = new URLSearchParams(location.search)
+const testFile = params.get('file')!
+
+try {
+  await import(testFile)
+  let results = await runTests()
+  window.parent.postMessage({ type: 'test-results', results }, '*')
+} catch (error: any) {
+  window.parent.postMessage(
+    {
+      type: 'test-error',
+      error: { message: error?.message ?? String(error), stack: error?.stack },
+    },
+    '*',
+  )
+}