Introduce tests

.github/workflows/playwright.yml

@@ -0,0 +1,36 @@
+name: Playwright Tests
+on:
+  workflow_dispatch:
+  push:
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+
+    - name: Install dependencies and build
+      working-directory: frontend/webEditor
+      run: |
+        npm install
+        npm run build
+
+    - name: Install Playwright Browsers
+      working-directory: frontend/webEditor
+      run: npx playwright install --with-deps
+
+    - name: Run Playwright tests
+      working-directory: frontend/webEditor
+      run: npx run test
+
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

frontend/webEditor/.gitignore

@@ -1,3 +1,10 @@
 node_modules
 dist
-src/helpUi/hash.json
+src/helpUi/hash.json
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

frontend/webEditor/package.json

@@ -11,6 +11,8 @@
         "@eslint/eslintrc": "^3.3.3",
         "@eslint/js": "^9.39.2",
         "@fortawesome/fontawesome-free": "^7.0.0",
+        "@playwright/test": "^1.57.0",
+        "@types/node": "^25.0.8",
         "@vscode/codicons": "^0.0.44",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
@@ -37,7 +39,8 @@
         "postprepare": "npm run fetch-hash",
         "prebuild": "npm run fetch-hash",
         "predev": "npm run fetch-hash",
-        "fetch-hash": "node ./scripts/fetchHash.js"
+        "fetch-hash": "node ./scripts/fetchHash.js",
+        "test": "playwright test"
     },
     "lint-staged": {
         "*.{html,css,ts,tsx,json}": [

frontend/webEditor/playwright.config.ts

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./tests",
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: "html",
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('')`. */
+        baseURL: "http://localhost:4173",
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry",
+        //headless: false,
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "firefox",
+            use: { ...devices["Desktop Firefox"] },
+        },
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        },
+        {
+            name: "webkit",
+            use: { ...devices["Desktop Safari"] },
+        },
+    ],
+    expect: {
+        toMatchSnapshot: {
+            maxDiffPixelRatio: 0.01,
+        },
+    },
+    /* Run local dev server before starting the tests */
+    webServer: {
+        command: "vite preview",
+        port: 4173,
+        reuseExistingServer: !process.env.CI,
+    },
+});

frontend/webEditor/tests/README.md

@@ -0,0 +1,2 @@
+## WebKit
+While most shortcuts use Meta key instead of Control, for opening the command palette Control needs to used, as Meta+Space is something else on MacOs and thus it would conflict. (idk its wierd)

frontend/webEditor/tests/commandPalette.spec.ts

@@ -0,0 +1,124 @@
+import test, { expect, Page } from "@playwright/test";
+import { init, pressKey } from "./utils";
+
+const COMMAND_PALETTE_ID = "#sprotty_command-palette";
+
+test("Test filter working", async ({ page }) => {
+    const LOAD = "Load";
+    const SAVE = "Save";
+    const LOAD_DEFAULT = "Load default diagram";
+    const FIT = "Fit to Screen";
+    const LAYOUT = "Layout diagram";
+
+    await init(page);
+    await openPalette(page);
+    await expectNames([LOAD, SAVE, LOAD_DEFAULT, FIT, LAYOUT], {
+        [LOAD]: ["JSON", "DFD and DD", "Palladio"],
+        [SAVE]: ["JSON", "DFD and DD"],
+        [LAYOUT]: ["Lines", "Wrapping Lines", "Circles"],
+    });
+
+    const input = page.locator(COMMAND_PALETTE_ID + " > input");
+
+    // test filter by parent category. should be case insensitive
+    await input.fill("Load");
+    await expectNames([LOAD, LOAD_DEFAULT], { [LOAD]: ["JSON", "DFD and DD", "Palladio"] });
+    await input.fill("load");
+    await expectNames([LOAD, LOAD_DEFAULT], { [LOAD]: ["JSON", "DFD and DD", "Palladio"] });
+
+    // test filter by child category. should be case insensitive
+    await input.fill("JSON");
+    await expectNames([LOAD, SAVE], { [LOAD]: ["JSON"], [SAVE]: ["JSON"] });
+    await input.fill("json");
+    await expectNames([LOAD, SAVE], { [LOAD]: ["JSON"], [SAVE]: ["JSON"] });
+
+    // test for something that appears in both (LAyout, PalLAdio)
+    await input.fill("LA");
+    await expectNames([LOAD, LAYOUT], { [LOAD]: ["Palladio"], [LAYOUT]: ["Lines", "Wrapping Lines", "Circles"] });
+
+    async function expectNames(names: string[], children?: Record<string, string[]>) {
+        const suggestions = page.locator(COMMAND_PALETTE_ID + " .command-palette-suggestions-holder > *");
+        expect(await suggestions.count(), names.join(", ")).toEqual(names.length);
+
+        for (let i = 0; i < names.length; i++) {
+            const suggestionName = await suggestions
+                .nth(i)
+                .locator(":scope > .command-palette-suggestion-label")
+                .innerText();
+            expect(suggestionName).toContain(names[i]);
+
+            if (children !== undefined && children[names[i]] !== undefined) {
+                const expectedChildren = children[names[i]]!;
+                const foundChildren = suggestions.nth(i).locator(":scope > .command-palette-suggestion-children > *");
+                expect(await foundChildren.count(), `Children of: ${names[i]}; ${expectedChildren.join(", ")}`).toEqual(
+                    expectedChildren.length,
+                );
+
+                for (let j = 0; j < expectedChildren.length; j++) {
+                    const childName = await foundChildren
+                        .nth(j)
+                        .locator(":scope > .command-palette-suggestion-label")
+                        .innerText();
+                    expect(childName).toContain(expectedChildren[j]);
+                }
+            }
+        }
+    }
+});
+
+// skipped due to bug when no file (will need files eventually, but no file should still be tested)
+test.skip("Test load", async ({ page }) => {
+    await init(page);
+
+    await testWithFileChooser(0, ["json"], false);
+    await testWithFileChooser(1, ["dataflowdiagram", "datadictionary"], true);
+    await testWithFileChooser(
+        2,
+        [
+            "pddc",
+            "allocation",
+            "allocation",
+            "nodecharacteristics",
+            "repository",
+            "resourceenvironment",
+            "system",
+            "usagemodel",
+        ],
+        true,
+    );
+
+    async function testWithFileChooser(childIndex: number, fileTypes: string[], multiple: boolean) {
+        await openPalette(page);
+        const [fileChooser] = await Promise.all([page.waitForEvent("filechooser"), select(page, 0, childIndex)]);
+        await select(page, 0, 0);
+        const acceptedTypes = (await fileChooser.element().getAttribute("accept")) ?? "";
+        expect(fileChooser.isMultiple()).toBe(multiple);
+        expect(acceptedTypes.split(",").length, `Found: ${acceptedTypes}, Expected: ${fileTypes.join(", ")}`).toBe(
+            fileTypes.length,
+        );
+        for (const fileType of fileTypes) {
+            expect(acceptedTypes).toContain(fileType);
+        }
+        fileChooser.setFiles([]);
+    }
+});
+
+async function openPalette(page: Page) {
+    await pressKey(page, "Control", "Space");
+    await page.waitForSelector(COMMAND_PALETTE_ID, { state: "visible" });
+}
+
+async function select(page: Page, parentIndex: number, childIndex?: number) {
+    // as we start with no selection we have to press down one extra time
+    for (let i = 0; i < parentIndex + 1; i++) {
+        await pressKey(page, "ArrowDown");
+    }
+    if (childIndex !== undefined) {
+        await pressKey(page, "ArrowRight");
+        for (let i = 0; i < childIndex; i++) {
+            await pressKey(page, "ArrowDown");
+        }
+    }
+    await page.waitForTimeout(500);
+    await pressKey(page, "Enter");
+}