[Siteplan] e2e testing

.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
@@ -71,3 +73,32 @@ jobs:
       - name: Eslint
         run: cd web/textviewer && npm run lint
 
+  test-siteplan:
+    timeout-minutes: 60
+    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.1",
@@ -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,39 @@
+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'] }
+    }
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: '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)
   }