[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/src/App.vue

@@ -18,6 +18,7 @@ import Menubar from '@/components/toolbar/Menubar.vue'
 import Toolbar from '@/components/toolbar/Toolbar.vue'
 import axios from 'axios'
 import { Options, Vue } from 'vue-class-component'
+import SvgCatalogService from './service/SvgCatalogService'
 import { store } from './store'
 import Configuration from './util/Configuration'
 import PlanProToolboxTest from './util/PlanProToolboxTest'
@@ -48,7 +49,8 @@ import { ToolboxConfiguration } from './util/ToolboxConfiguration'
       .catch(() => {
         console.warn('Siteplan Font not available')
       })
-
+    // Wait until the svg catalog service is ready
+    await SvgCatalogService.getInstance().isReady()
     // Download the toolbox configuration
     await axios
       .get<ToolboxConfiguration>('/configuration.json')

web/siteplan/src/components/FeatureService.vue

@@ -116,7 +116,7 @@ export default class FeatureService extends Vue {
   unsubscribe: SubscribeOptions | undefined
   map: Map = store.state.map
   model: SiteplanModel | null = null
-  svgService: SvgService = new SvgService(axios)
+  svgService: SvgService = new SvgService()
   listFeature: ILageplanFeature[] = []
   inLODView = false
   collisionService = new CollisionService(this.map)

web/siteplan/src/components/SVG/Svg.vue

@@ -41,7 +41,6 @@ import SvgKatalog from './SvgKatalog.vue'
 import SvgSingleSignal from './SvgSingleSignal.vue'
 import SvgService from '@/service/SvgService'
 import SignalBruecker from './SignalBruecke.vue'
-import axios from 'axios'
 import { Options, Vue } from 'vue-class-component'
 import { ISvgElement } from '@/model/SvgElement'
 
@@ -75,7 +74,7 @@ import { ISvgElement } from '@/model/SvgElement'
   }
 })
 export default class Svg extends Vue {
-  svgService = new SvgService(axios)
+  svgService = new SvgService()
   mode = ''
   listSignalGroup = []
   mastList: ISvgElement[] | null | undefined = []

web/siteplan/src/feature/LageplanFeature.ts

@@ -13,7 +13,6 @@ import Configuration from '@/util/Configuration'
 import NamedFeatureLayer from '@/util/NamedFeatureLayer'
 import { compare } from '@/util/ObjectExtension'
 import SvgDraw from '@/util/SVG/Draw/SvgDraw'
-import axios from 'axios'
 import { Feature, Map as OlMap } from 'ol'
 import { Extent, getHeight, getWidth } from 'ol/extent'
 import Geometry from 'ol/geom/Geometry'
@@ -46,7 +45,7 @@ export interface ILageplanFeature {
 
 export default abstract class LageplanFeature<T extends SiteplanObject> implements ILageplanFeature {
   map: OlMap
-  svgService = new SvgService(axios)
+  svgService = new SvgService()
   constructor (map: OlMap) {
     this.map = map
   }

web/siteplan/src/service/SvgCatalogService.ts

@@ -39,11 +39,13 @@ import SignalSVGCatalog from '@/util/SVG/SVGCatalog/SignalSVGCatalog'
 import TrackCloseSVGCatalog from '@/util/SVG/SVGCatalog/TrackCloseSVGCatalog'
 import TrackLockSVGCatalog from '@/util/SVG/SVGCatalog/TrackLockSVGCatalog'
 import { AndereSignalGroup, HauptVorSignalGroup, OtherSVGCatalog, SVGMast } from '@/util/SVG/SvgEnum'
-import { AxiosStatic } from 'axios'
+import axios from 'axios'
 
 export default class SvgCatalogService {
+  private static INSTANCE = new SvgCatalogService()
+
+  private catalogLoaded: Promise<void>
   private catalog: Map<string, ISvgElement[]> = new Map<string, ISvgElement[]>()
-  private axios: AxiosStatic
   private signalSVGCatalog: SignalSVGCatalog[] = []
   private fmaComponentCatalog: FMAComponentCatalog
   private pzbCatalog: PZBCatalog
@@ -55,9 +57,8 @@ export default class SvgCatalogService {
   private lockKeyCatalog: LockKeySVGCatalog
   private othersCatalog: OthersSVGCatalog
   private cantCatalog: CantSVGCatalog
-  constructor (axios: AxiosStatic) {
-    this.axios = axios
-    this.loadSvgCatalog()
+  private constructor () {
+    this.catalogLoaded = this.loadSvgCatalog()
     this.registerSignalSVGCatalog()
 
     this.fmaComponentCatalog = new FMAComponentCatalog(this.catalog)
@@ -72,6 +73,14 @@ export default class SvgCatalogService {
     this.othersCatalog = new OthersSVGCatalog(this.catalog)
   }
 
+  public static getInstance () {
+    return SvgCatalogService.INSTANCE
+  }
+
+  public async isReady (): Promise<void> {
+    await this.catalogLoaded
+  }
+
   public getSignalSVGCatalog (): SignalSVGCatalog[] {
     return this.signalSVGCatalog
   }
@@ -116,20 +125,24 @@ export default class SvgCatalogService {
     }
   }
 
-  private loadSvgCatalog (): void {
+  private async loadSvgCatalog (): Promise<void> {
+    console.info('Start loading svg catalog...')
     const listSignalSvgFile = Object.assign({}, HauptVorSignalGroup, AndereSignalGroup, SVGMast)
+    const promises: Promise<void>[] = []
     for (const [, file] of Object.entries(listSignalSvgFile)) {
-      this.loadSvgFile(file)
+      promises.push(this.loadSvgFile(file))
     }
     const listOtherSvgFile = Object.assign({}, OtherSVGCatalog)
     for (const [, file] of Object.entries(listOtherSvgFile)) {
-      this.loadSvgFile(file)
+      promises.push(this.loadSvgFile(file))
     }
+    await Promise.all(promises)
+    console.info('Loading svg catalog finished.')
   }
 
-  private loadSvgFile (file: string): void {
+  private loadSvgFile (file: string): Promise<void> {
     const parser = new DOMParser()
-    this.axios.get(`/SvgKatalog/${file}.svg`).then(response => {
+    return axios.get(`/SvgKatalog/${file}.svg`).then(response => {
       const domXML = parser.parseFromString(response.data, 'image/svg+xml')
       const svgs = this.createSVGElements(domXML)
       this.catalog.set(file, svgs)