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: npm 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/assets/dfd.datadictionary

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="ASCII"?>
+<datadictionary:DataDictionary xmlns:datadictionary="http://dataflowanalysis.org/dfd/datadictionary" id="_VbeAIfULEfC48_Tb7aL1qA">
+  <labelTypes id="4h3wzk" entityName="Sensitivity">
+    <label id="zzvphn" entityName="Personal"/>
+    <label id="veaan9" entityName="Public"/>
+  </labelTypes>
+  <labelTypes id="gvia09" entityName="Location">
+    <label id="g10hr" entityName="EU"/>
+    <label id="5hnugm" entityName="nonEU"/>
+  </labelTypes>
+  <labelTypes id="84rllz" entityName="Encryption">
+    <label id="2r6xe6" entityName="Encrypted"/>
+  </labelTypes>
+  <behavior id="_VbeAK_ULEfC48_Tb7aL1qA" entityName="dfd"/>
+</datadictionary:DataDictionary>

frontend/webEditor/tests/assets/dfd.dataflowdiagram

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="ASCII"?>
+<dataflowdiagram:DataFlowDiagram xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dataflowdiagram="http://dataflowanalysis.org/dfd/dataflowdiagram" id="_VbeAIPULEfC48_Tb7aL1qA">
+  <nodes xsi:type="dataflowdiagram:External" id="1cdyzc" entityName="dfd">
+    <behavior href="dfd.datadictionary#_VbeAK_ULEfC48_Tb7aL1qA"/>
+  </nodes>
+</dataflowdiagram:DataFlowDiagram>

frontend/webEditor/tests/assets/dfd.json

@@ -0,0 +1,30 @@
+{
+    "canvasBounds": { "x": 0, "y": 0, "width": 1549, "height": 919 },
+    "scroll": { "x": -718.5708429602527, "y": -356.4018869430463 },
+    "zoom": 0.8135132245021809,
+    "position": { "x": 0, "y": 0 },
+    "size": { "width": -1, "height": -1 },
+    "features": {},
+    "type": "graph",
+    "id": "root",
+    "children": [
+        {
+            "position": { "x": 299.5, "y": 119 },
+            "size": { "width": -1, "height": -1 },
+            "strokeWidth": 0,
+            "selected": false,
+            "hoverFeedback": false,
+            "opacity": 1,
+            "text": "dfd",
+            "labels": [],
+            "ports": [],
+            "hideLabels": false,
+            "minimumWidth": 50,
+            "annotations": [],
+            "features": {},
+            "id": "1cdyzc",
+            "type": "node:input-output",
+            "children": []
+        }
+    ]
+}

frontend/webEditor/tests/assets/json.json

@@ -0,0 +1,30 @@
+{
+    "canvasBounds": { "x": 0, "y": 0, "width": 1549, "height": 919 },
+    "scroll": { "x": -718.5708429602527, "y": -356.4018869430463 },
+    "zoom": 0.8135132245021809,
+    "position": { "x": 0, "y": 0 },
+    "size": { "width": -1, "height": -1 },
+    "features": {},
+    "type": "graph",
+    "id": "root",
+    "children": [
+        {
+            "position": { "x": 299.5, "y": 119 },
+            "size": { "width": -1, "height": -1 },
+            "strokeWidth": 0,
+            "selected": false,
+            "hoverFeedback": false,
+            "opacity": 1,
+            "text": "json",
+            "labels": [],
+            "ports": [],
+            "hideLabels": false,
+            "minimumWidth": 50,
+            "annotations": [],
+            "features": {},
+            "id": "1cdyzc",
+            "type": "node:input-output",
+            "children": []
+        }
+    ]
+}

frontend/webEditor/tests/assets/palladio.json

@@ -0,0 +1,30 @@
+{
+    "canvasBounds": { "x": 0, "y": 0, "width": 1549, "height": 919 },
+    "scroll": { "x": -718.5708429602527, "y": -356.4018869430463 },
+    "zoom": 0.8135132245021809,
+    "position": { "x": 0, "y": 0 },
+    "size": { "width": -1, "height": -1 },
+    "features": {},
+    "type": "graph",
+    "id": "root",
+    "children": [
+        {
+            "position": { "x": 299.5, "y": 119 },
+            "size": { "width": -1, "height": -1 },
+            "strokeWidth": 0,
+            "selected": false,
+            "hoverFeedback": false,
+            "opacity": 1,
+            "text": "palladio",
+            "labels": [],
+            "ports": [],
+            "hideLabels": false,
+            "minimumWidth": 50,
+            "annotations": [],
+            "features": {},
+            "id": "1cdyzc",
+            "type": "node:input-output",
+            "children": []
+        }
+    ]
+}