Recorder

.changeset/bumpy-feet-bow.md

@@ -0,0 +1,5 @@
+---
+"ui-test-visualizer": minor
+---
+
+Add "Record input as code" feature

.github/workflows/main.yml

@@ -84,5 +84,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - run: pnpm run build
+
       # Just run the "extension" tests to make sure the paths are detected correctly on Windows
       - run: pnpm run --filter ./packages/extension test

.vscode/launch.json

@@ -90,7 +90,7 @@
       "sourceMaps": true
     },
     {
-      "name": "Bun Test Runner Example",
+      "name": "Bun + React Example",
       "type": "extensionHost",
       "request": "launch",
       "args": [
@@ -100,6 +100,17 @@
       "outFiles": ["${workspaceFolder}/build-dev/**/*.js"],
       "sourceMaps": true
     },
+    {
+      "name": "Bun + Solid Example",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}/build-dev",
+        "${workspaceFolder}/examples/bun-solid"
+      ],
+      "outFiles": ["${workspaceFolder}/build-dev/**/*.js"],
+      "sourceMaps": true
+    },
     {
       "name": "All examples",
       "type": "extensionHost",

README.md

@@ -12,12 +12,41 @@ This is a VSCode extension: no code changes should be required to watch your UI
 
 - [Vitest](https://vitest.dev/) or [Jest v28+](https://jestjs.io/) or [Bun Test Runner](https://bun.com/docs/test/dom)
   - Your test framework is auto-detected by walking up the directories from your test file until it finds `vitest.config.{ts,js}`, `vite.config.{ts,js}`, `jest.config.{ts,js,json}`, or `bun.lock`
+  - The [Bun VSCode extension](https://marketplace.visualstudio.com/items?itemName=oven.bun-vscode) is required for Bun tests
 - [jsdom](https://github.com/jsdom/jsdom) or [happy-dom](https://github.com/capricorn86/happy-dom) test environment (what you're probably already using for UI in Vitest or Jest)
 
 ## Usage
 
+### Visualizing tests
+
 Click the "Visually Debug UI" button above your test. If there's no breakpoint in your test already, the extension will add one automatically. A side panel should open, and render your UI as you step through with the debugger.
 
+### Record Input as Code
+
+You can also write tests by recording your input as you interact with your UI.
+
+**Project Requirements:**
+- Test runner: Vitest, Jest, or Bun
+- Testing libraries:
+  - `@testing-library/react` or `@solidjs/testing-library`
+  - `@testing-library/user-event`
+
+Steps:
+
+- *Optional*: Generate a starter test file for a React or Solid component by right-clicking the component name in the editor (e.g. MyForm) and clicking "Create UI test".
+
+- Click the "Visually Debug UI" button to start your test
+
+- Click "Step Over" until you get your UI into the state where you want to generate new code.
+
+- Click the "Record input as code" button in the side panel, and you'll see the recorder panel appear.
+
+- Click your UI elements, or change text inputs, and the extension will generate code for you to use in your test.
+
+- Right+click to generate `expect` statements or other mouse events.
+
+- The generated code is inserted into your test file when the test is ended or restarted.
+
 ## UI Framework Compatibility
 
 Since this extension hooks into the DOM API directly, you should be able to use any DOM-based UI framework, including React, Solid, Angular, Vue, Svelte, jQuery, etc.
@@ -50,14 +79,14 @@ This extension could fail to auto-build your source CSS files, in which case you
   - Vitest:
     - Adds a `--require` argument to the Vitest command.
   - Jest:
-    - Adds a `--setupFiles` argument to the Jest command in addition to any setupFiles you've already defined in your config.
+    - Adds a `--setupFiles` argument to the Jest command in addition to any setupFiles defined in your config.
+  - Bun:
+    - Adds a `--preload` argument to the `bun test` command in addition to any preloads defined in your bunfig.toml.
 
 - **Replicates the test DOM into a real DOM**: The extension then replicates those method calls and their arguments in a VSCode WebView (the side panel), which renders your UI in a real Chromium DOM. This panel only shows a **replica** of the test DOM without your UI's Javascript, so you can't interact with it using the mouse or keyboard.
 
 ## Caveats
 
-- **Can be slow to run until your first breakpoint**: Because of the code inserted at startup for watching the DOM and optionally loading your styles, your test can be slightly slower to startup than when debugging your tests normally with other test extensions.
-
 - **Possible de-synchronization**: The visual DOM replica gets updated incrementally as your test runs, but accurate synchronization relies on this extension's code to correctly handle every possible DOM mutation that happens in your UI. The DOM replication code is pretty thorough, even accounting for weird cases involving nested Shadow DOMs and Web Component lifecycles, but it's still possible for the visual replica to get out of sync with your actual test DOM. If this happens, you can click the panel's Refresh button to re-sync it.
 
 ## Contributing / Extension Development

eslint.config.js

@@ -16,5 +16,6 @@ module.exports = config({
     // Convenient for this project
     'node/prefer-global/process': 'off',
     'antfu/no-import-node-modules-by-path': 'off',
+    'test/consistent-test-it': 'off',
   },
 })

examples/bun-react/bunfig.toml

@@ -1,6 +1,3 @@
-[serve.static]
-env = "BUN_PUBLIC_*"
-
 [install]
 linker = "isolated"
 

examples/bun-react/package.json

@@ -14,6 +14,6 @@
   "devDependencies": {
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
-    "@types/bun": "^1.3.0"
+    "bun-types": "^1.3.0"
   }
 }

examples/bun-react/src/Counter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 export function Counter() {
   const [count, setCount] = useState(0)
@@ -14,7 +14,7 @@ export function Counter() {
   return (
     <div>
       <h1>Counter</h1>
-      <p>Count: {count}</p>
+      <div>Count: {count}</div>
       <button onClick={increment}>Increment</button>
       <button onClick={decrement}>Decrement</button>
     </div>

examples/bun-react/test/basic.test.tsx

@@ -9,5 +9,5 @@ it('simple react testing library test', () => {
   fireEvent.click(screen.getByText('Increment'))
   fireEvent.click(screen.getByText('Decrement'))
 
-  expect(screen.getByText('Count: 1')).toBeTruthy()
+  expect(screen.getByText('Count: 1'))
 })

examples/bun-react/tsconfig.json

@@ -29,7 +29,9 @@
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
+    "noPropertyAccessFromIndexSignature": false,
+
+    "types": ["bun-types"]
   },
 
   "exclude": ["dist", "node_modules"]

examples/bun-solid/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

examples/bun-solid/README.md

@@ -0,0 +1,15 @@
+# bun-solid
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.0. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.