[Siteplan] e2e testing

.github/workflows/ci.yml

@@ -286,15 +286,15 @@ jobs:
         uses: eclipse-set/build/.github/actions/setup-java@main
 
       - name: Fetch SET
-        uses: actions/download-artifact@v8
+        uses: actions/download-artifact@v7
         with:
           name: eclipse-set-snapshot-${{github.run_number}}
           path: ${{ env.TEST_APPLICATION_DIR }}
 
       - name: Fetch m2 Deploy
         # For main or tag build, the m2 packages can be taken directly from github m2package
         if: github.ref != 'refs/heads/main' && !startsWith(github.ref, 'refs/tags/')
-        uses: actions/download-artifact@v8
+        uses: actions/download-artifact@v7
         with:
           name: set-m2deploy-${{github.run_number}}
           path: ${{ env.DEPLOY_DIR }}
@@ -330,7 +330,7 @@ jobs:
 
       - name: Upload csv files
         if: failure() && steps.test-steps.outcome == 'failure'
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v6
         with:
           name: table-csv-${{github.run_number}}
           path: ${{ github.workspace}}/java/bundles/org.eclipse.set.swtbot/target/classes/diff/**/*.csv
@@ -359,7 +359,7 @@ jobs:
 
       - name: Fetch table csv
         if: needs.swtbot.result == 'failure'
-        uses: actions/download-artifact@v8
+        uses: actions/download-artifact@v7
         with:
           name: table-csv-${{github.run_number}}
           path: ${{ env.DIFF_DIR }}
@@ -375,7 +375,7 @@ jobs:
 
       - name: Upload Diff-File
         if: needs.swtbot.result == 'failure'
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v6
         with:
           name: table-diff-files-${{github.run_number}}
           path: ${{ env.DIFF_DIR }}/diff-md

.github/workflows/quality.yml

@@ -51,10 +51,12 @@ jobs:
           node-version: 20
 
       - name: Install dependencies
-        run: cd web/siteplan && npm install
+        run: npm ci
+        working-directory: web/siteplan
 
       - name: Eslint
-        run: cd web/siteplan && npm run lint
+        run: npm run lint
+        working-directory: web/siteplan
 
   lint-textviewer:
     runs-on: ubuntu-latest

.github/workflows/test.yml

@@ -0,0 +1,44 @@
+# This workflow will build the main SET application and publish it to GitHub Packages
+name: Test
+
+on:
+  pull_request:
+    paths:
+      - '**/java/**'
+      - 'web/siteplan/**'
+      - 'web/textviewer/**'
+  push:
+    tags:
+      - 'v**'
+    branches:
+      - 'release/**'
+      - 'main'
+
+jobs:
+  test-siteplan:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: web/siteplan
+
+      - name: Install Playwright Browsers
+        run: npm exec playwright install --with-deps
+        working-directory: web/siteplan
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        working-directory: web/siteplan
+
+      - uses: actions/upload-artifact@v6
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: web/siteplan/playwright-report/
+          retention-days: 1

web/siteplan/.gitignore

@@ -2,4 +2,12 @@ dist/
 public/siteplan.json
 public/font
 .vscode
-.env
+.env
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

web/siteplan/package.json

@@ -7,7 +7,8 @@
     "serve": "vite --port 8080",
     "build": "vite build --mode development",
     "build-prod": "vite build --mode production",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@turf/boolean-disjoint": "^7.3.3",
@@ -26,6 +27,7 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@stylistic/eslint-plugin": "5.7.0",
     "@types/geojson": "^7946.0.15",
     "@typescript-eslint/eslint-plugin": "^8.53.0",

web/siteplan/playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * 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,
+  /* 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',
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: 'http://localhost:8080',
+
+    trace: process.env.CI ? 'retain-on-failure' : 'on',
+    video: process.env.CI ? 'retain-on-failure' : 'on'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ],
+
+  /* In CI use production build otherwise running
+  local dev server before starting the tests */
+  webServer: {
+    command: process.env.CI ? 'npm run build-prod && npm exec vite preview -- --port 8080' : 'npm run serve',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI
+  }
+})

web/siteplan/public/main.css

@@ -13,17 +13,16 @@
 
 .rotate-control-container {
   top: 1.25em;
+  transform: scaleY(2);
 }
 
 .rotate-control-button {
-  font-size: 2.3em;
-  width: 0.65em;
-  transform: scaleY(-2);
+  transform: scaleY(-1);
 }
 
 .rotate-control-container.rotate-control-right {
   left: 3.9em;
-  transform: scaleX(-1);
+  transform: scaleY(2) scaleX(-1);
 }
 
 .rotate-control-container.rotate-control-left {

web/siteplan/src/util/Controls/CenterMainRouteControl.ts

@@ -55,6 +55,7 @@ export default class CenterMainRouteControl extends Control {
     this.view = view
     button.addEventListener('click', () => {
       this.centerView()
+      button.blur()
     }, false)
   }
 

web/siteplan/src/util/Controls/ExtentControl.ts

@@ -52,6 +52,7 @@ export default class ExtentControl extends Control {
     this.view.set(ExtentControl.EXTENT_CONTROL_KEY, this)
     button.addEventListener('click', () => {
       this.fit()
+      button.blur()
     }, false)
   }
 

web/siteplan/src/util/Controls/RotateViewControl.ts

@@ -49,6 +49,7 @@ export default class RotateViewControl extends Control {
     this.view = view
     button.addEventListener('click', () => {
       this.onClick()
+      button.blur()
     }, false)
   }