Add unit and browser tests for network map layers, upgrade deck.gl to 9.3

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: CI
 on:
   push:
     branches:
-      - "main"
+      - 'main'
   pull_request:
 
 permissions: {}
@@ -29,6 +29,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     if: github.event.pull_request.head.repo.fork == false
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.0-noble
+      options: --user 1001
     steps:
       - name: Checkout sources
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
@@ -39,14 +42,40 @@ jobs:
         with:
           node-version: 24
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test:coverage
+
+      - name: Upload browser failure screenshots
+        if: failure() && !cancelled()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: browser-failure-screenshots-${{ github.run_id }}
+          retention-days: 7
+          if-no-files-found: ignore
+          path: |
+            packages/**/__screenshots__/**/*.png
+
+      - name: Licenses check
+        run: npm run licenses-check
+
       - name: Build
-        run: |
-          npm ci
-          npm run build:all
-          npm run licenses-check
-          npm run lint
-          npm run test:coverage
+        run: npm run build:all
 
+  sonar:
+    name: SonarCloud Scan
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.head.repo.fork == false
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        with:
+          persist-credentials: false
       - name: SonarCloud Scan
         uses: SonarSource/sonarqube-scan-action@1a6d90ebcb0e6a6b1d87e37ba693fe453195ae25 #v5.3.1
         env:

.github/workflows/fork-build-tests.yml

@@ -9,6 +9,9 @@ jobs:
   build:
     runs-on: ubuntu-latest
     if: github.event.pull_request.head.repo.fork == true
+    container:
+      image: mcr.microsoft.com/playwright:v1.61.0-noble
+      options: --user 1001
     steps:
       - name: Checkout sources
         uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
@@ -19,13 +22,30 @@ jobs:
         with:
           node-version: 24
 
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test:coverage
+
+      - name: Upload browser failure screenshots
+        if: failure() && !cancelled()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: browser-failure-screenshots-${{ github.event.pull_request.number }}
+          retention-days: 7
+          if-no-files-found: ignore
+          path: |
+            packages/**/__screenshots__/**/*.png
+
+      - name: Licenses check
+        run: npm run licenses-check
+
       - name: Build
-        run: |
-          npm ci
-          npm run licenses-check
-          npm run lint
-          npm run test:coverage
-          npm run build:all
+        run: npm run build:all
 
       - name: Save build artifacts and coverage report
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2

.gitignore

@@ -20,3 +20,4 @@
 
 # Vitest
 /coverage
+.vitest-attachments

README.md

@@ -107,6 +107,13 @@ To fix this, run this command from the app **after** running "npm install"
 
 (Optional) [Test your package from library dependent directory](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages#testing-your-package)
 
+## Testing
+
+- Full test suite: `npm run test`
+- Unit tests (fast): `npm run test:unit`
+- Browser visual screenshots (Vitest browser mode): `npm run test:browser`
+- Update screenshot baselines: `npm run test:browser -- -u`
+
 According to PowSyBl [branching and release strategy](https://github.com/powsybl/.github/blob/main/BRANCHING_RELEASE_STRATEGY.md), 
 if you want to publish a new release of powsybl-network-viewer in the 
 [NPM package registry](https://www.npmjs.com/package/@powsybl/powsybl-network-viewer), you need to follow the steps below:

demo/src/App.tsx

@@ -6,16 +6,19 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { useEffect, useRef } from 'react';
 import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import { useEffect, useRef } from 'react';
 import { IntlProvider } from 'react-intl';
 import { DEFAULT_INTL_CONFIG } from 'react-intl/src/utils';
-import { GeoData, type MapEquipment, MapEquipments, NetworkMap, type NetworkMapRef } from '../../src';
+import { type MapEquipment, NetworkMap, type NetworkMapRef } from '../../src';
+
+import {
+    createLargeGeoData,
+    createLargeNetwork,
+} from '../../packages/network-map-layers/src/testUtils/network-fixtures.test.utils';
 
-import sposdata from './map-viewer/data/spos.json';
-import lposdata from './map-viewer/data/lpos.json';
-import smapdata from './map-viewer/data/smap.json';
-import lmapdata from './map-viewer/data/lmap.json';
+const largeNetwork = createLargeNetwork();
+const largeGeoData = createLargeGeoData();
 
 // Called after a click (right mouse click) on some equipment (line or substation)
 function showEquipmentMenu(equipment: MapEquipment, x: number, y: number, type: string) {
@@ -35,13 +38,9 @@ export default function App() {
     });
 
     //declare data to be displayed: coordinates and network data
-    const geoData = new GeoData(new Map(), new Map());
-    geoData.setSubstationPositions(sposdata);
-    geoData.setLinePositions(lposdata);
+    const geoData = largeGeoData;
 
-    const mapEquipments = new MapEquipments();
-    mapEquipments.updateSubstations(smapdata, true);
-    mapEquipments.updateLines(lmapdata, true);
+    const mapEquipments = largeNetwork;
 
     useEffect(() => {
         const handleContextmenu = (e: MouseEvent) => {
@@ -54,7 +53,7 @@ export default function App() {
     }, []);
 
     const networkMapRef = useRef<NetworkMapRef>(null);
-    const filteredNominalVoltages = [380.0, 225.0, 110.0];
+    const filteredNominalVoltages = [400.0, 380.0, 225.0, 150.0, 110.0, 90.0, 45.0];
 
     return (
         <div className="App">
@@ -99,7 +98,7 @@ export default function App() {
                                     );
                                 }}
                                 mapLibrary={'cartonolabel'}
-                                mapTheme={'dark'}
+                                mapTheme={'light'}
                                 filteredNominalVoltages={filteredNominalVoltages}
                                 onDrawPolygonModeActive={(active) => {
                                     console.log('polygon drawing mode active: ', active ? 'active' : 'inactive');

demo/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../tsconfig.base.json",
     "compilerOptions": {
+        "rootDir": "..",
         "outDir": "./dist",
         "jsx": "react-jsx",
         "paths": {

eslint.config.js

@@ -58,7 +58,9 @@ export default defineConfig([
         extends: tsEslint.configs.recommendedTypeChecked,
         languageOptions: {
             parserOptions: {
-                projectService: true,
+                projectService: {
+                    allowDefaultProject: ['./setupBrowserTests.ts'],
+                },
                 tsconfigRootDir: import.meta.dirname,
             },
         },