Tune test extension 🛠

- Separate refresh button which does not rerun the test
- Shows stdout and stderr of commands in the preview

5 files changed, 80 insertions, 27 deletions

diff --git a/tools/test-helper/README.md b/tools/test-helper/README.md
index d99aa496..d3092d0d 100644
--- a/tools/test-helper/README.md
+++ b/tools/test-helper/README.md
@@ -4,7 +4,8 @@ This is a small VS Code extension that helps with managing Typst's test suite.
 When installed, three new buttons appear in the menubar for all `.typ` files in
 the `tests` folder.
 
-- Open test output: Opens the output and reference images of a test to the side.
-- Refresh test output: Re-runs the test and reloads the preview.
-- Approve test output: Copies the output into the reference folder and optimizes
+- Open: Opens the output and reference images of a test to the side.
+- Refresh: Refreshes the preview.
+- Rerun: Re-runs the test.
+- Approve: Copies the output into the reference folder and optimizes
   it with `oxipng`.
diff --git a/tools/test-helper/extension.js b/tools/test-helper/extension.js
index 775b2894..e5325bed 100644
--- a/tools/test-helper/extension.js
+++ b/tools/test-helper/extension.js
@@ -4,7 +4,7 @@ const cp = require('child_process')
 function activate(context) {
     let panel = null
 
-    function refreshPanel() {
+    function refreshPanel(stdout, stderr) {
         const uri = vscode.window.activeTextEditor.document.uri
         const { pngPath, refPath } = getPaths(uri)
 
@@ -13,11 +13,15 @@ function activate(context) {
             const pngSrc = panel.webview.asWebviewUri(pngPath)
             const refSrc = panel.webview.asWebviewUri(refPath)
             panel.webview.html = ''
-            panel.webview.html = getWebviewContent(pngSrc, refSrc)
+
+            // Make refresh notable.
+            setTimeout(() => {
+                panel.webview.html = getWebviewContent(pngSrc, refSrc, stdout, stderr)
+            }, 50)
         }
     }
 
-    const openCmd = vscode.commands.registerCommand("ShortcutMenuBar.openTestOutput", () => {
+    const openCmd = vscode.commands.registerCommand("ShortcutMenuBar.testOpen", () => {
         panel = vscode.window.createWebviewPanel(
             'testOutput',
             'Test output',
@@ -25,10 +29,14 @@ function activate(context) {
             {}
         )
 
-        refreshPanel()
+        refreshPanel("", "")
+    })
+
+    const refreshCmd = vscode.commands.registerCommand("ShortcutMenuBar.testRefresh", () => {
+        refreshPanel("", "")
     })
 
-    const refreshCmd = vscode.commands.registerCommand("ShortcutMenuBar.refreshTestOutput", () => {
+    const rerunCmd = vscode.commands.registerCommand("ShortcutMenuBar.testRerun", () => {
         const uri = vscode.window.activeTextEditor.document.uri
         const components = uri.fsPath.split('tests')
         const dir = components[0]
@@ -37,29 +45,27 @@ function activate(context) {
         cp.exec(
             `cargo test --manifest-path ${dir}/Cargo.toml --test typeset ${subPath}`,
             (err, stdout, stderr) => {
-                console.log(stdout)
-                console.log(stderr)
-                refreshPanel()
+                console.log('Ran tests')
+                refreshPanel(stdout, stderr)
             }
         )
     })
 
-    const approveCmd = vscode.commands.registerCommand("ShortcutMenuBar.approveTestOutput", () => {
+    const approveCmd = vscode.commands.registerCommand("ShortcutMenuBar.testApprove", () => {
         const uri = vscode.window.activeTextEditor.document.uri
         const { pngPath, refPath } = getPaths(uri)
 
         vscode.workspace.fs.copy(pngPath, refPath, { overwrite: true }).then(() => {
             console.log('Copied to reference file')
             cp.exec(`oxipng -o max -a ${refPath.fsPath}`, (err, stdout, stderr) => {
-                console.log(stdout)
-                console.log(stderr)
-                refreshPanel()
+                refreshPanel(stdout, stderr)
             })
         })
     })
 
     context.subscriptions.push(openCmd)
     context.subscriptions.push(refreshCmd)
+    context.subscriptions.push(rerunCmd)
     context.subscriptions.push(approveCmd)
 }
 
@@ -75,7 +81,7 @@ function getPaths(uri) {
     return { pngPath, refPath }
 }
 
-function getWebviewContent(pngSrc, refSrc) {
+function getWebviewContent(pngSrc, refSrc, stdout, stderr) {
     return `
     <!DOCTYPE html>
     <html lang="en">
@@ -95,6 +101,9 @@ function getWebviewContent(pngSrc, refSrc) {
             max-height: 40vh;
             object-fit: contain;
         }
+        pre {
+            font-family: var(--vscode-editor-font-family);
+        }
         </style>
     </head>
     <body>
@@ -103,6 +112,12 @@ function getWebviewContent(pngSrc, refSrc) {
 
         <h1>Reference image</h1>
         <img src="${refSrc}"/>
+
+        <h1>Standard output</h1>
+        <pre>${stdout}</pre>
+
+        <h1>Standard error</h1>
+        <pre>${stderr}</pre>
     </body>
     </html>
     `
diff --git a/tools/test-helper/images/rerun-dark.svg b/tools/test-helper/images/rerun-dark.svg
new file mode 100644
index 00000000..7a916fb4
--- /dev/null
+++ b/tools/test-helper/images/rerun-dark.svg
@@ -0,0 +1,11 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M2.86017 4.931C2.9279 4.931 2.99563 4.94109 3.06336 4.96128C3.13465 4.9781 3.20238 5.00333 3.26655 5.03697C3.33072 5.06725 3.39132 5.10426 3.44835 5.14799C3.50539 5.18836 3.55529 5.23378 3.59807 5.28424C3.80126 5.11267 3.99554 4.93436 4.1809 4.74933C4.36627 4.56429 4.5552 4.38094 4.7477 4.19927C4.6871 4.13871 4.63184 4.0832 4.58194 4.03274C4.5356 3.98228 4.49638 3.93013 4.4643 3.8763C4.43222 3.82247 4.40726 3.7636 4.38944 3.69968C4.37162 3.63576 4.36271 3.56006 4.36271 3.47259C4.36271 3.27074 4.40192 3.08234 4.48034 2.9074C4.56233 2.72909 4.68888 2.62784 4.8279 2.5C4.96693 2.36879 5.05426 2.3607 5.23963 2.28669C5.42856 2.20931 5.62997 2.14034 5.84385 2.14034C5.8795 2.14034 5.98109 2.01418 6.031 1.994C6.08091 1.97045 6.12903 1.94185 6.17537 1.90821C6.22171 1.87457 6.26093 1.83924 6.29301 1.80224C6.32866 1.76187 6.34648 1.72318 6.34648 1.68617C6.34648 1.67608 6.33757 1.66935 6.31975 1.66598C6.30549 1.66262 6.29479 1.66094 6.28766 1.66094C5.66383 1.66094 5.07387 1.77196 4.51777 1.994C3.96524 2.21268 3.46083 2.52051 3.00454 2.91749L2.89225 2.81151C2.85304 2.77114 2.80492 2.75096 2.74788 2.75096C2.69441 2.75096 2.64985 2.76778 2.6142 2.80142C2.58569 2.82834 2.53934 2.86871 2.47518 2.92253C2.41458 2.97636 2.3522 3.03356 2.28803 3.09411C2.22743 3.1513 2.17396 3.2085 2.12762 3.26569C2.08128 3.32288 2.0581 3.3683 2.0581 3.40194C2.0581 3.45913 2.08128 3.50792 2.12762 3.54829C2.17396 3.58529 2.21674 3.6223 2.25595 3.65931C2.21674 3.70641 2.18644 3.76192 2.16505 3.82584C2.14366 3.88976 2.12405 3.95536 2.10623 4.02265C2.08841 4.08993 2.07058 4.15554 2.05276 4.21946C2.03493 4.28338 2.01176 4.34057 1.98325 4.39103C1.95473 4.4415 1.91552 4.48355 1.86561 4.51719C1.8157 4.54747 1.75154 4.56261 1.67311 4.56261L1.28812 4.56261C1.17762 4.6669 1.06354 4.76951 0.945908 4.87044C0.831836 4.97137 0.726677 5.07902 0.630429 5.19341C0.562699 5.27415 0.528834 5.36162 0.528834 5.45582C0.528834 5.50629 0.535963 5.55002 0.550222 5.58703C0.568046 5.62067 0.596564 5.656 0.635776 5.693C0.678553 5.73337 0.728459 5.78384 0.785495 5.84439L0.967296 6.02606C1.03146 6.08662 1.09384 6.14381 1.15444 6.19764C1.21505 6.25147 1.26852 6.29352 1.31486 6.3238C1.34338 6.34062 1.37546 6.35408 1.41111 6.36417C1.44675 6.3709 1.48062 6.37426 1.5127 6.37426C1.55191 6.37426 1.59469 6.36754 1.64103 6.35408C1.69094 6.34062 1.73015 6.32044 1.75867 6.29352L2.4431 5.64758L2.4431 5.47096C2.4431 5.39695 2.44666 5.3263 2.45379 5.25901C2.46092 5.19173 2.47696 5.13453 2.50191 5.08744C2.53043 5.04034 2.57321 5.00333 2.63024 4.97641C2.68728 4.94614 2.76392 4.931 2.86017 4.931Z" fill="#EAEAEA"/>
+<path d="M10.2873 11.4509C10.3942 11.4509 10.4851 11.4156 10.56 11.345L11.1696 10.7697C11.2444 10.699 11.2819 10.6149 11.2819 10.5174C11.2819 10.4164 11.2444 10.3306 11.1696 10.26L7.82228 7.10095C7.7902 7.07067 7.74029 7.04207 7.67256 7.01516C7.60483 6.98488 7.53175 6.9546 7.45333 6.92432L7.22875 6.83349C7.15389 6.80321 7.09508 6.77125 7.0523 6.73761C6.91684 6.63331 6.79029 6.52061 6.67265 6.3995C6.55502 6.27502 6.43382 6.15391 6.30905 6.03616L4.8279 4.63831L4.05792 5.35994L5.54442 6.76284C5.66918 6.88059 5.79573 6.99497 5.92406 7.10599C6.05595 7.21701 6.17716 7.33644 6.28766 7.46428C6.32688 7.50802 6.36074 7.56521 6.38926 7.63586C6.42134 7.70315 6.45164 7.77211 6.48016 7.84276C6.51224 7.91341 6.54254 7.9807 6.57106 8.04462C6.60314 8.10518 6.63701 8.15228 6.67265 8.18592L10.0146 11.345C10.0895 11.4156 10.1804 11.4509 10.2873 11.4509Z" fill="#EAEAEA"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/tools/test-helper/images/rerun-light.svg b/tools/test-helper/images/rerun-light.svg
new file mode 100644
index 00000000..b4d5e092
--- /dev/null
+++ b/tools/test-helper/images/rerun-light.svg
@@ -0,0 +1,11 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M2.86017 4.931C2.9279 4.931 2.99563 4.94109 3.06336 4.96128C3.13465 4.9781 3.20238 5.00333 3.26655 5.03697C3.33072 5.06725 3.39132 5.10426 3.44835 5.14799C3.50539 5.18836 3.55529 5.23378 3.59807 5.28424C3.80126 5.11267 3.99554 4.93436 4.1809 4.74933C4.36627 4.56429 4.5552 4.38094 4.7477 4.19927C4.6871 4.13871 4.63184 4.0832 4.58194 4.03274C4.5356 3.98228 4.49638 3.93013 4.4643 3.8763C4.43222 3.82247 4.40726 3.7636 4.38944 3.69968C4.37162 3.63576 4.36271 3.56006 4.36271 3.47259C4.36271 3.27074 4.40192 3.08234 4.48034 2.9074C4.56233 2.72909 4.68888 2.62784 4.8279 2.5C4.96693 2.36879 5.05426 2.3607 5.23963 2.28669C5.42856 2.20931 5.62997 2.14034 5.84385 2.14034C5.8795 2.14034 5.98109 2.01418 6.031 1.994C6.08091 1.97045 6.12903 1.94185 6.17537 1.90821C6.22171 1.87457 6.26093 1.83924 6.29301 1.80224C6.32866 1.76187 6.34648 1.72318 6.34648 1.68617C6.34648 1.67608 6.33757 1.66935 6.31975 1.66598C6.30549 1.66262 6.29479 1.66094 6.28766 1.66094C5.66383 1.66094 5.07387 1.77196 4.51777 1.994C3.96524 2.21268 3.46083 2.52051 3.00454 2.91749L2.89225 2.81151C2.85304 2.77114 2.80492 2.75096 2.74788 2.75096C2.69441 2.75096 2.64985 2.76778 2.6142 2.80142C2.58569 2.82834 2.53934 2.86871 2.47518 2.92253C2.41458 2.97636 2.3522 3.03356 2.28803 3.09411C2.22743 3.1513 2.17396 3.2085 2.12762 3.26569C2.08128 3.32288 2.0581 3.3683 2.0581 3.40194C2.0581 3.45913 2.08128 3.50792 2.12762 3.54829C2.17396 3.58529 2.21674 3.6223 2.25595 3.65931C2.21674 3.70641 2.18644 3.76192 2.16505 3.82584C2.14366 3.88976 2.12405 3.95536 2.10623 4.02265C2.08841 4.08993 2.07058 4.15554 2.05276 4.21946C2.03493 4.28338 2.01176 4.34057 1.98325 4.39103C1.95473 4.4415 1.91552 4.48355 1.86561 4.51719C1.8157 4.54747 1.75154 4.56261 1.67311 4.56261L1.28812 4.56261C1.17762 4.6669 1.06354 4.76951 0.945908 4.87044C0.831836 4.97137 0.726677 5.07902 0.630429 5.19341C0.562699 5.27415 0.528834 5.36162 0.528834 5.45582C0.528834 5.50629 0.535963 5.55002 0.550222 5.58703C0.568046 5.62067 0.596564 5.656 0.635776 5.693C0.678553 5.73337 0.728459 5.78384 0.785495 5.84439L0.967296 6.02606C1.03146 6.08662 1.09384 6.14381 1.15444 6.19764C1.21505 6.25147 1.26852 6.29352 1.31486 6.3238C1.34338 6.34062 1.37546 6.35408 1.41111 6.36417C1.44675 6.3709 1.48062 6.37426 1.5127 6.37426C1.55191 6.37426 1.59469 6.36754 1.64103 6.35408C1.69094 6.34062 1.73015 6.32044 1.75867 6.29352L2.4431 5.64758L2.4431 5.47096C2.4431 5.39695 2.44666 5.3263 2.45379 5.25901C2.46092 5.19173 2.47696 5.13453 2.50191 5.08744C2.53043 5.04034 2.57321 5.00333 2.63024 4.97641C2.68728 4.94614 2.76392 4.931 2.86017 4.931Z" fill="#5A5A5A"/>
+<path d="M10.2873 11.4509C10.3942 11.4509 10.4851 11.4156 10.56 11.345L11.1696 10.7697C11.2444 10.699 11.2819 10.6149 11.2819 10.5174C11.2819 10.4164 11.2444 10.3306 11.1696 10.26L7.82228 7.10095C7.7902 7.07067 7.74029 7.04207 7.67256 7.01516C7.60483 6.98488 7.53175 6.9546 7.45333 6.92432L7.22875 6.83349C7.15389 6.80321 7.09508 6.77125 7.0523 6.73761C6.91684 6.63331 6.79029 6.52061 6.67265 6.3995C6.55502 6.27502 6.43382 6.15391 6.30905 6.03616L4.8279 4.63831L4.05792 5.35994L5.54442 6.76284C5.66918 6.88059 5.79573 6.99497 5.92406 7.10599C6.05595 7.21701 6.17716 7.33644 6.28766 7.46428C6.32688 7.50802 6.36074 7.56521 6.38926 7.63586C6.42134 7.70315 6.45164 7.77211 6.48016 7.84276C6.51224 7.91341 6.54254 7.9807 6.57106 8.04462C6.60314 8.10518 6.63701 8.15228 6.67265 8.18592L10.0146 11.345C10.0895 11.4156 10.1804 11.4509 10.2873 11.4509Z" fill="#5A5A5A"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/tools/test-helper/package.json b/tools/test-helper/package.json
index 55065838..157df0cb 100644
--- a/tools/test-helper/package.json
+++ b/tools/test-helper/package.json
@@ -10,15 +10,16 @@
     "Other"
   ],
   "activationEvents": [
-    "onCommand:ShortcutMenuBar.openTestOutput",
-    "onCommand:ShortcutMenuBar.approveTestOutput",
-    "onCommand:ShortcutMenuBar.refreshTestOutput"
+    "onCommand:ShortcutMenuBar.testOpen",
+    "onCommand:ShortcutMenuBar.testRefresh",
+    "onCommand:ShortcutMenuBar.testRerun",
+    "onCommand:ShortcutMenuBar.testApprove"
   ],
   "main": "./extension.js",
   "contributes": {
     "commands": [
       {
-        "command": "ShortcutMenuBar.openTestOutput",
+        "command": "ShortcutMenuBar.testOpen",
         "title": "Open test output",
         "category": "ShortcutMenuBar",
         "icon": {
@@ -27,8 +28,8 @@
         }
       },
       {
-        "command": "ShortcutMenuBar.refreshTestOutput",
-        "title": "Refresh test output",
+        "command": "ShortcutMenuBar.testRefresh",
+        "title": "Refresh preview",
         "category": "ShortcutMenuBar",
         "icon": {
           "light": "images/refresh-light.svg",
@@ -36,8 +37,17 @@
         }
       },
       {
-        "command": "ShortcutMenuBar.approveTestOutput",
-        "title": "Approve test output",
+        "command": "ShortcutMenuBar.testRerun",
+        "title": "Rerun test",
+        "category": "ShortcutMenuBar",
+        "icon": {
+          "light": "images/rerun-light.svg",
+          "dark": "images/rerun-dark.svg"
+        }
+      },
+      {
+        "command": "ShortcutMenuBar.testApprove",
+        "title": "Approve output",
         "category": "ShortcutMenuBar",
         "icon": {
           "light": "images/approve-light.svg",
@@ -49,17 +59,22 @@
       "editor/title": [
         {
           "when": "resourceExtname == .typ && resourcePath =~ /.*tests.*/",
-          "command": "ShortcutMenuBar.openTestOutput",
+          "command": "ShortcutMenuBar.testOpen",
           "group": "navigation@0"
         },
         {
           "when": "resourceExtname == .typ && resourcePath =~ /.*tests.*/",
-          "command": "ShortcutMenuBar.refreshTestOutput",
+          "command": "ShortcutMenuBar.testRefresh",
+          "group": "navigation@1"
+        },
+        {
+          "when": "resourceExtname == .typ && resourcePath =~ /.*tests.*/",
+          "command": "ShortcutMenuBar.testRerun",
           "group": "navigation@2"
         },
         {
           "when": "resourceExtname == .typ && resourcePath =~ /.*tests.*/",
-          "command": "ShortcutMenuBar.approveTestOutput",
+          "command": "ShortcutMenuBar.testApprove",
           "group": "navigation@3"
         }
       ]