@remix-run/test 0.0.0 → 0.2.0

package/dist/lib/watcher.js

@@ -0,0 +1,39 @@
+import * as fs from 'node:fs';
+function getFileModTime(file) {
+    try {
+        return fs.statSync(file).mtimeMs;
+    }
+    catch {
+        return 0;
+    }
+}
+export function createWatcher(onChange) {
+    let watchers = new Set();
+    let fileModTimes = new Map();
+    function update(files) {
+        for (let watcher of watchers) {
+            watcher.close();
+        }
+        watchers.clear();
+        for (let file of files) {
+            fileModTimes.set(file, getFileModTime(file));
+            watchers.add(fs.watch(file, () => {
+                // macOS FSEvents can fire multiple callbacks per save (e.g. write +
+                // metadata flush). Guard with mtime so only a real content change
+                // triggers a rerun instead of every duplicate event.
+                let mtime = getFileModTime(file);
+                if (mtime !== fileModTimes.get(file)) {
+                    fileModTimes.set(file, mtime);
+                    onChange(file);
+                }
+            }));
+        }
+    }
+    function close() {
+        for (let watcher of watchers) {
+            watcher.close();
+        }
+        watchers.clear();
+    }
+    return { update, close };
+}

package/dist/lib/worker-e2e.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=worker-e2e.d.ts.map

package/dist/lib/worker-e2e.d.ts.map

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

package/dist/lib/worker-e2e.js

@@ -0,0 +1,49 @@
+import { workerData, parentPort } from 'node:worker_threads';
+import { runTests } from "./executor.js";
+import { importModule } from "./import-module.js";
+import { getBrowserLauncher, getPlaywrightLaunchOptions, getPlaywrightPageOptions, } from "./playwright.js";
+try {
+    await importModule(workerData.file, import.meta);
+    let launcher = await getBrowserLauncher(workerData.playwrightUseOpts);
+    let opts = getPlaywrightLaunchOptions(workerData.playwrightUseOpts);
+    let browser = await launcher.launch(opts);
+    try {
+        let results = await runTests({
+            browser,
+            open: workerData.open,
+            playwrightPageOptions: getPlaywrightPageOptions(workerData.playwrightUseOpts),
+            coverage: workerData.coverage,
+        });
+        parentPort.postMessage(results);
+        if (workerData.open) {
+            console.log('\nBrowser is open. Press Ctrl+C to close.');
+            await new Promise((resolve) => browser.on('disconnected', () => resolve()));
+        }
+    }
+    finally {
+        await browser.close();
+    }
+    process.exit(0);
+}
+catch (e) {
+    let results = {
+        passed: 0,
+        failed: 1,
+        skipped: 0,
+        todo: 0,
+        tests: [
+            {
+                name: '',
+                suiteName: '',
+                status: 'failed',
+                duration: 0,
+                error: {
+                    message: e instanceof Error ? e.message : String(e),
+                    stack: e instanceof Error ? e.stack : undefined,
+                },
+            },
+        ],
+    };
+    parentPort.postMessage(results);
+    process.exit(0);
+}

package/dist/lib/worker.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=worker.d.ts.map

package/dist/lib/worker.d.ts.map

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

package/dist/lib/worker.js

@@ -0,0 +1,57 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import * as mod from 'node:module';
+import * as path from 'node:path';
+import { parentPort, workerData } from 'node:worker_threads';
+import { runTests } from "./executor.js";
+import { importModule } from "./import-module.js";
+import { IS_BUN } from "./runtime.js";
+import { IS_RUNNING_FROM_SRC } from "./config.js";
+try {
+    // When coverage is enabled in Node, we use a coverage-friendly TypeScript loader which
+    // replaces tsx's minified transformation with a non-minified esbuild transform
+    // so V8 coverage byte offsets align with readable source lines. This hook runs
+    // before the inherited tsx hook (hooks are LIFO), so it intercepts .ts imports and
+    // short-circuits before tsx transforms them.
+    if (workerData.coverage && !IS_BUN) {
+        // Ensure we load the right file whether we're running in the monorepo (TS) or
+        // from a published package (JS)
+        let ext = IS_RUNNING_FROM_SRC ? '.ts' : '.js';
+        mod.register(new URL(`./coverage-loader${ext}`, import.meta.url), import.meta.url);
+        await import(__rewriteRelativeImportExtension(workerData.file));
+    }
+    else {
+        await importModule(workerData.file, import.meta);
+    }
+    let results = await runTests();
+    parentPort.postMessage(results);
+    process.exit(0);
+}
+catch (e) {
+    let results = {
+        passed: 0,
+        failed: 1,
+        skipped: 0,
+        todo: 0,
+        tests: [
+            {
+                name: '',
+                suiteName: '',
+                status: 'failed',
+                duration: 0,
+                error: {
+                    message: e instanceof Error ? e.message : String(e),
+                    stack: e instanceof Error ? e.stack : undefined,
+                },
+            },
+        ],
+    };
+    parentPort.postMessage(results);
+    process.exit(0);
+}

package/dist/test/coverage/fixture.d.ts

@@ -0,0 +1,5 @@
+export declare function add(a: number, b: number): number;
+export declare function classify(n: number): string;
+export declare function uncalledFunction(): string;
+export declare function greet(name?: string): string;
+//# sourceMappingURL=fixture.d.ts.map

package/dist/test/coverage/fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixture.d.ts","sourceRoot":"","sources":["../../../src/test/coverage/fixture.ts"],"names":[],"mappings":"AAKA,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAEhD;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ1C;AAGD,wBAAgB,gBAAgB,IAAI,MAAM,CAIzC;AAGD,wBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAK3C"}

package/dist/test/coverage/fixture.js

@@ -0,0 +1,32 @@
+// This file exists solely to validate coverage accuracy.
+// Each function has a known expected coverage profile based on
+// which paths the associated tests exercise.
+// Fully covered — both statements and the single branch
+export function add(a, b) {
+    return a + b;
+}
+// Partially covered — only the `n > 0` branch is tested
+export function classify(n) {
+    if (n > 0) {
+        return 'positive';
+    }
+    else if (n < 0) {
+        return 'negative';
+    }
+    else {
+        return 'zero';
+    }
+}
+// Never called — 0% across the board
+export function uncalledFunction() {
+    let result = 'never';
+    result += ' reached';
+    return result;
+}
+// Partially covered — only the truthy `name` branch is tested
+export function greet(name) {
+    if (name) {
+        return `Hello, ${name}!`;
+    }
+    return 'Hello, stranger!';
+}

package/dist/test/coverage/test-browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-browser.d.ts.map

package/dist/test/coverage/test-browser.d.ts.map

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

package/dist/test/coverage/test-browser.js

@@ -0,0 +1,24 @@
+import * as assert from '@remix-run/assert';
+import { describe, it } from "../../lib/framework.js";
+import { add, classify, greet } from "./fixture.js";
+// Expected coverage for coverage-fixture.ts (same as the server/e2e fixture
+// tests):
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//                     (the `n < 0` and `else` branches are uncovered)
+//   uncalledFunction — 0% across the board (never imported)
+//   greet           — function covered, but only the truthy `name` branch is hit
+//                     (the fallback `Hello, stranger!` line is uncovered)
+describe('browser coverage fixture', () => {
+    it('exercises some but not all code paths in the browser', () => {
+        assert.equal(add(2, 3), 5);
+        assert.equal(add(-1, 1), 0);
+        assert.equal(classify(42), 'positive');
+        assert.equal(classify(1), 'positive');
+        // deliberately NOT testing classify(-1) or classify(0)
+        assert.equal(greet('World'), 'Hello, World!');
+        // deliberately NOT testing greet() without an argument
+        // deliberately NOT importing or calling uncalledFunction
+    });
+});

package/dist/test/coverage/test-e2e.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-e2e.d.ts.map

package/dist/test/coverage/test-e2e.d.ts.map

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

package/dist/test/coverage/test-e2e.js

@@ -0,0 +1,60 @@
+import * as assert from '@remix-run/assert';
+import { createTestServer } from '@remix-run/node-fetch-server/test';
+import * as fsp from 'node:fs/promises';
+import * as path from 'node:path';
+import { describe, it } from "../../lib/framework.js";
+import { transformTypeScript } from "../../lib/ts-transform.js";
+// Expected coverage for coverage/fixture.ts (same as the server fixture test):
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//   uncalledFunction — 0% across the board (never called)
+//   greet           — function covered, but only the truthy `name` branch is hit
+describe('e2e coverage fixture', () => {
+    it('exercises some but not all code paths in the browser', async (t) => {
+        // Compile the fixture TypeScript to browser-ready JS
+        let fixturePath = path.resolve(import.meta.dirname, './fixture.ts');
+        let fixtureSource = await fsp.readFile(fixturePath, 'utf-8');
+        let { code: fixtureJs } = await transformTypeScript(fixtureSource, fixturePath);
+        let handler = (req) => {
+            let url = new URL(req.url);
+            if (url.pathname === '/') {
+                return new Response([
+                    `<!doctype html>`,
+                    `<html>`,
+                    `<body>`,
+                    `  <div id="result"></div>`,
+                    `  <script type="module">`,
+                    `    import { add, classify, greet } from '/src/test/coverage/fixture.ts'`,
+                    `    // Exercise the same paths as the server fixture test:`,
+                    `    // - add: fully covered`,
+                    `    // - classify: only positive branch`,
+                    `    // - greet: only with a name`,
+                    `    // - uncalledFunction: never imported`,
+                    `    let results = [`,
+                    `      add(2, 3),`,
+                    `      add(-1, 1),`,
+                    `      classify(42),`,
+                    `      classify(1),`,
+                    `      greet('World'),`,
+                    `    ]`,
+                    `    document.getElementById('result').textContent = results.join(',')`,
+                    `  </script>`,
+                    `</body>`,
+                    `</html>`,
+                ].join('\n'), { headers: { 'Content-Type': 'text/html' } });
+            }
+            // Serve the compiled fixture at the path the import expects
+            if (url.pathname === '/src/test/coverage/fixture.ts') {
+                return new Response(fixtureJs, {
+                    headers: { 'Content-Type': 'application/javascript' },
+                });
+            }
+            return new Response('Not found', { status: 404 });
+        };
+        let page = await t.serve(await createTestServer(handler));
+        await page.goto('/');
+        let result = await page.locator('#result').textContent();
+        assert.equal(result, '5,0,positive,positive,Hello, World!');
+    });
+});

package/dist/test/coverage/test-unit.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-unit.d.ts.map

package/dist/test/coverage/test-unit.d.ts.map

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

package/dist/test/coverage/test-unit.js

@@ -0,0 +1,27 @@
+import * as assert from '@remix-run/assert';
+import { describe, it } from "../../lib/framework.js";
+import { add, classify, greet } from "./fixture.js";
+// Expected coverage for coverage-fixture.ts:
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//                     (the `n < 0` and `else` branches are uncovered)
+//   uncalledFunction — 0% across the board (never imported)
+//   greet           — function covered, but only the truthy `name` branch is hit
+//                     (the fallback `Hello, stranger!` line is uncovered)
+describe('coverage/fixture.ts', () => {
+    it('add returns the sum', () => {
+        assert.equal(add(2, 3), 5);
+        assert.equal(add(-1, 1), 0);
+    });
+    it('classify identifies positive numbers only', () => {
+        assert.equal(classify(42), 'positive');
+        assert.equal(classify(1), 'positive');
+        // deliberately NOT testing classify(-1) or classify(0)
+    });
+    // deliberately NOT importing or calling uncalledFunction
+    it('greet with a name only', () => {
+        assert.equal(greet('World'), 'Hello, World!');
+        // deliberately NOT testing greet() without an argument
+    });
+});

package/dist/test/framework.test.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=framework.test.browser.d.ts.map

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=framework.test.e2e.d.ts.map

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,14 +1,88 @@
 {
   "name": "@remix-run/test",
-  "version": "0.0.0",
-  "description": "Placeholder package for Remix CI/OIDC setup",
+  "version": "0.2.0",
+  "description": "A test framework for JavaScript and TypeScript projects",
+  "author": "Shopify Inc.",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/remix-run/remix.git",
     "directory": "packages/test"
   },
-  "publishConfig": {
-    "access": "public"
+  "homepage": "https://github.com/remix-run/remix/tree/main/packages/test#readme",
+  "files": [
+    "tsconfig.json",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "!src/**/*.test.*"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=24.3.0"
+  },
+  "bin": {
+    "remix-test": "./dist/cli-entry.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./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",
+    "v8-to-istanbul": "^9.3.0",
+    "@remix-run/terminal": "^0.1.0"
+  },
+  "peerDependencies": {
+    "playwright": "^1.59.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
+  "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.0",
+    "@remix-run/ui": "^0.1.0"
+  },
+  "keywords": [
+    "testing",
+    "browser",
+    "test",
+    "remix",
+    "component",
+    "playwright"
+  ],
+  "scripts": {
+    "build": "tsgo -p tsconfig.build.json",
+    "clean": "git clean -fdX",
+    "test": "node src/cli-entry.ts",
+    "test:bun": "bun --bun src/cli-entry.ts --type server",
+    "typecheck": "tsgo --noEmit"
   }
-}
+}