feat: add webview with ability to change settings in runtime

.github/workflows/ci.yml

@@ -10,12 +10,9 @@ jobs:
     test:
         strategy:
             matrix:
-                # TODO: return windows-latest
-                os: [ubuntu-latest, macos-latest]
+                # TODO: return windows-latest, ubuntu-latest
+                os: [macos-latest]
                 node-version: [20.x]
-                include:
-                    - os: ubuntu-latest
-                      node-version: 18.x
                 vscodeVersion:
                     - stable
 

.gitignore

@@ -7,4 +7,4 @@ vscode.d.ts
 samples/**/.*
 .wdio*
 .tmp
-tests/e2e/screens-on-fail
+tests/e2e/**/screens-on-fail

media/settings-view/main.css

@@ -0,0 +1,51 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.section__header {
+    font-size: 11px;
+    margin: 10px 0 3px 8px;
+    font-weight: 700;
+    color: var(--vscode-editor-inlineValuesForeground);
+    text-transform: uppercase;
+}
+
+.section__list {
+    display: flex;
+    flex-direction: column;
+}
+
+.section__list-item {
+    height: 22px;
+    line-height: 22px;
+    padding-right: 2px;
+    padding-left: 8px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    white-space: nowrap;
+    flex: 0;
+    cursor: pointer;
+}
+
+.section__list-item:hover {
+    background-color: #e8e8e8;
+}
+
+body[data-vscode-theme-kind="vscode-dark"] .section__list-item:hover {
+    background-color: #2a2d2e;
+}
+
+label {
+    display: flex;
+    align-items: center;
+    cursor: inherit;
+    flex: auto;
+}
+
+input[type="checkbox"] {
+    margin-right: 4px;
+    cursor: pointer;
+}

media/settings-view/main.js

@@ -0,0 +1,44 @@
+// This script will be run within the webview itself
+// It cannot access the main VS Code APIs directly.
+(function () {
+    // eslint-disable-next-line no-undef
+    const vscode = acquireVsCodeApi();
+    listenSettingsCheckbox();
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener("message", event => {
+        const { method, params } = event.data;
+
+        if (method === "updateSettings") {
+            for (const [key, value] of Object.entries(params.settings)) {
+                // eslint-disable-next-line no-undef
+                const input = document.querySelector(".section_type_settings input[settingName=" + key + "]");
+
+                if (!input) {
+                    continue;
+                }
+
+                if (typeof value === "boolean") {
+                    input.checked = value;
+                } else {
+                    input.value = value;
+                }
+            }
+        }
+    });
+
+    function listenSettingsCheckbox() {
+        // eslint-disable-next-line no-undef
+        for (const checkbox of document.querySelectorAll(".section_type_settings input[type=checkbox]")) {
+            checkbox.addEventListener("change", function (event) {
+                vscode.postMessage({
+                    method: "toggleSettingsCheckbox",
+                    params: {
+                        settingName: event.target.getAttribute("settingName"),
+                        value: this.checked,
+                    },
+                });
+            });
+        }
+    }
+})();

package.json

@@ -29,6 +29,15 @@
       "key": "ctrl+shift+8",
       "mac": "cmd+shift+8",
       "when": "editorTextFocus && editorLangId =~ /(javascript|typescript)/"
+    },
+    "views": {
+      "test": [
+        {
+          "type": "webview",
+          "id": "tpn.settingsView",
+          "name": "Testplane"
+        }
+      ]
     }
   },
   "repository": {
@@ -41,7 +50,9 @@
     "build": "tsup --minify --clean",
     "watch": "tsup --watch --sourcemap",
     "test": "npm run lint && npm run test-e2e",
-    "test-e2e": "wdio run ./tests/e2e/wdio.conf.ts",
+    "test-e2e": "npm run test-e2e:basic && npm run test-e2e:settings-view",
+    "test-e2e:basic": "wdio run ./tests/e2e/basic/wdio.conf.ts",
+    "test-e2e:settings-view": "wdio run ./tests/e2e/settings-view/wdio.conf.ts",
     "eslint": "eslint src --ext ts --cache",
     "lint": "eslint --cache . && prettier --check .",
     "reformat": "eslint --fix . && prettier --write .",

samples/basic/testplane.config.ts

@@ -5,6 +5,10 @@ export default {
     httpTimeout: 60000,
     testTimeout: 90000,
     resetCursor: false,
+    takeScreenshotOnFails: {
+        testFail: false,
+        assertViewFail: false,
+    },
     sets: {
         desktop: {
             files: ["tests/**/*.testplane.ts"],