webui: Add aria snapshot testing
diff --git a/webui/Makefile b/webui/Makefile
index 2ce27f5..58c3373 100644
--- a/webui/Makefile
+++ b/webui/Makefile
@@ -9,7 +9,10 @@
# TypeScript type checking
# Note: The actual esbuild bundling happens in esbuild.go
check:
- npx tsc --noEmit
+ npm test
+
+update-snapshots:
+ npm run update-snapshots
clean:
rm -rf node_modules
diff --git a/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-basic.aria.yml b/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-basic.aria.yml
new file mode 100644
index 0000000..439bc19
--- /dev/null
+++ b/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-basic.aria.yml
@@ -0,0 +1,54 @@
+- heading "sketch" [level=1]
+- heading "Add a line to dummy.txt and commit the change" [level=2]
+- link "Logs"
+- link "Download"
+- text: "/MacBook-Pro-9\\.local \\/Users\\/pokey\\/src\\/spaghetti Origin: git@github\\.com:pokey\\/spaghetti\\.git Commit: a6c5a08a Msgs: \\d+ Input tokens: \\d+ Output tokens: \\d+ Cost: \\$\\d+\\.\\d+/"
+- button "💬"
+- button "±"
+- button "📈"
+- button "💻"
+- button "Stop"
+- checkbox "Poll" [checked]
+- text: /Poll Invalid response from server - not connected U user Apr \d+, \d+, \d+:\d+:\d+ AM/
+- button "Copy"
+- paragraph: add a line to dummy.txt. Doesn't matter what it is and don't bother running tests it's just a dummy repo. Please commit afterward
+- text: "/A agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: I'll help you add a line to dummy.txt and commit the change. Let me first check if this file exists and create it if needed.
+- text: "/I've set the title of this sketch to \"Add a line to dummy\\.txt and commit the change\" agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- group: /\+ bash 🖥️ ls -la [\d,.]+[hmsp]+ elapsed/
+- text: "/agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: I see that dummy.txt already exists. Let me add a new line to it.
+- group: "/\\+ patch \\/Users\\/pokey\\/src\\/spaghetti\\/dummy\\.txt: 1 edit [\\d,.]+[hmsp]+ elapsed/"
+- text: "/agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: "Now let me commit this change:"
+- group: "/\\+ bash 🖥️ GIT_AUTHOR_NAME=\"Pokey Rule\" GIT_AUTHOR_EMAIL=\"\\d+\\+pokey@users\\.noreply\\.github\\.com\" git add dummy\\.txt && git commit -m \"Add a new line to dummy\\.txt\" -m \"Co-Authored-By: sketch\" -m \"Add a line to dummy\\.txt\\. Doesn't matter what it is and don't bother running tests it's just a dummy repo\\.\" [\\d,.]+[hmsp]+ elapsed/"
+- text: /C commit Apr \d+, \d+, \d+:\d+:\d+ AM/
+- button "Copy"
+- text: 1 new commit detected 898178a0 Add a new line to dummy.txt
+- button "View Diff"
+- text: "/A agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- group: /\+ done ❌ codereview tool has not been run for commit 898178a0c6681ce2b641cbe8994c22ed8bbb7dd7 [\d,.]+[hmsp]+ elapsed/
+- text: "/agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: "Let me run a code review as required:"
+- group: /\+ codereview ✔️ [\d,.]+[hmsp]+ elapsed/
+- text: "/agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: "Now let me try the done call again:"
+- group: /\+ done [\d,.]+[hmsp]+ elapsed/
+- text: "/agent Apr \\d+, \\d+, \\d+:\\d+:\\d+ AM \\([\\d,.]+[hmsp]+\\) In: \\d+ Out: \\d+ \\(\\$\\d+\\.\\d+\\)/"
+- button "Copy"
+- paragraph: "I've completed your request:"
+- list:
+ - listitem: 'Added a new line to dummy.txt: "Adding a new dummy line here - requested change"'
+ - listitem: Created a git commit with the change using the specified author information
+ - listitem: 'Included "Co-Authored-By: sketch" in the commit message as required'
+- paragraph: The change has been successfully committed to the repository. Is there anything else you'd like me to help with?
+- text: End of Turn
+- textbox "Type your message here and press Enter to send..."
+- button "Send"
diff --git a/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-empty.aria.yml b/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-empty.aria.yml
new file mode 100644
index 0000000..474e5a3
--- /dev/null
+++ b/webui/__snapshots__/web-components/sketch-app-shell.test.ts-snapshots/sketch-app-shell-empty.aria.yml
@@ -0,0 +1,14 @@
+- heading "sketch" [level=1]
+- heading [level=2]
+- link "Logs"
+- link "Download"
+- text: "/MacBook-Pro-9\\.local \\/Users\\/pokey\\/src\\/sketch Origin: git@github\\.com:boldsoftware\\/sketch\\.git Commit: 08e2cf2e Msgs: 0 Input tokens: 0 Output tokens: 0 Cost: \\$\\d+\\.\\d+/"
+- button "💬"
+- button "±"
+- button "📈"
+- button "💻"
+- button "Stop"
+- checkbox "Poll" [checked]
+- text: Poll Invalid response from server - not connected
+- textbox "Type your message here and press Enter to send..."
+- button "Send"
diff --git a/webui/package.json b/webui/package.json
index a126955..462e44d 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -17,7 +17,9 @@
"gentypes": "go run ../../cmd/go2ts -o src/types.ts",
"build": "go run ../../cmd/go2ts -o src/types.ts && tsc",
"watch": "tsc --watch",
- "test": "tsc && playwright test -c playwright-ct.config.ts"
+ "test": "tsc && npm run test:playwright",
+ "test:playwright": "playwright test -c playwright-ct.config.ts",
+ "update-snapshots": "npm run test:playwright -- --update-snapshots"
},
"dependencies": {
"@xterm/addon-fit": "^0.10.0",
diff --git a/webui/readme.md b/webui/readme.md
index 49ca0e8..d037c4c 100644
--- a/webui/readme.md
+++ b/webui/readme.md
@@ -20,7 +20,7 @@
# Install dependencies
make install
-# Type checking only
+# Run tests
make check
```
@@ -33,7 +33,14 @@
```
This will launch a local web server that serves the demo pages for the web components. You can edit the TypeScript files, and the changes will be reflected in real-time.
-p
+
+### Snapshot tests
+
+We use aria snapshot tests to verify the rendering of our components. To update snapshots, run:
+
+```bash
+make update-snapshots
+```
#### VSCode
diff --git a/webui/src/web-components/sketch-app-shell.test.ts b/webui/src/web-components/sketch-app-shell.test.ts
index 0b3ae6a..6c1d1d6 100644
--- a/webui/src/web-components/sketch-app-shell.test.ts
+++ b/webui/src/web-components/sketch-app-shell.test.ts
@@ -34,6 +34,10 @@
// Default view should be chat view
await expect(component.locator(".chat-view.view-active")).toBeVisible();
+
+ await expect(component).toMatchAriaSnapshot({
+ name: "sketch-app-shell-basic.aria.yml",
+ });
});
const emptyState = {
@@ -85,4 +89,8 @@
await expect(component.locator("sketch-container-status")).toBeVisible();
await expect(component.locator("sketch-chat-input")).toBeVisible();
await expect(component.locator("sketch-view-mode-select")).toBeVisible();
+
+ await expect(component).toMatchAriaSnapshot({
+ name: "sketch-app-shell-empty.aria.yml",
+ });
});