Setup React component testing

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
     parser: "@babel/eslint-parser",  // https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser
     parserOptions: {
         babelOptions: {
-            configFile: "./.babelrc.json"
+            configFile: "./babel.config.json"
         },
         ecmaFeatures: {
             arrowFunctions: true,
@@ -25,7 +25,10 @@ module.exports = {
     },
     plugins: [
         "perfectionist",                 // https://github.com/azat-io/eslint-plugin-perfectionist
-        "react"                          // https://github.com/yannickcr/eslint-plugin-react
+        "react",                         // https://github.com/yannickcr/eslint-plugin-react
+        "jest",                          // https://github.com/jest-community/eslint-plugin-jest
+        "jest-dom",                      // https://github.com/testing-library/eslint-plugin-jest-dom
+        "testing-library"                // https://github.com/testing-library/eslint-plugin-testing-library
     ],
     extends: [
         "eslint:recommended",
@@ -36,6 +39,12 @@ module.exports = {
         browser: true,                 // browser global variables
         node: true                     // Node.js global variables and Node.js-specific rules
     },
+    overrides: [
+        {
+            files: ["tests/**/*"],
+            env: { jest: true }
+        }
+    ],
     settings: {
         react: {
             version: "detect"

.github/workflows/eslint.yml

@@ -31,15 +31,12 @@ jobs:
         uses: actions/checkout@v3
 
       - name: Install ESLint
-        run: |
-          npm install [email protected]
-          npm install @microsoft/[email protected]
-          npm install [email protected]
+        run: yarn install
 
       - name: Run ESLint
-        run: npx eslint .
-          --config .eslintrc.js
-          --ext .js,.jsx,.ts,.tsx
+        env:
+          SARIF_ESLINT_IGNORE_SUPPRESSED: true
+        run: yarn lint
           --format @microsoft/eslint-formatter-sarif
           --output-file eslint-results.sarif
         continue-on-error: true

.github/workflows/jest.yml

@@ -0,0 +1,24 @@
+name: Jest
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master" ]
+  schedule:
+    - cron: '29 3 * * 5'
+
+jobs:
+  eslint:
+    name: Run jest tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install Jest
+        run: yarn install
+
+      - name: Run Jest
+        run: yarn test

.gitignore

@@ -1,4 +1,6 @@
 node_modules/
+coverage/
+.idea/
 npm-debug.log
 
 # On a fresh install with yarn 3.3.0 these extra files were generated.

.babelrc.json → babel.config.json

@@ -4,12 +4,7 @@
         "@babel/plugin-transform-object-rest-spread"
     ],
     "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "modules": false
-            }
-        ],
+        "@babel/preset-env",
         "@babel/preset-react"
     ]
 }

components/StandardApp.jsx

@@ -130,7 +130,8 @@ class AppInitComponent extends React.Component {
                             initialView = {
                                 center: coords,
                                 zoom: zoom,
-                                crs: params.crs || theme.mapCrs};
+                                crs: params.crs || theme.mapCrs
+                            };
                         }
                     } else if (params.e) {
                         const bounds = params.e.split(/[;,]/g).map(x => parseFloat(x));
@@ -223,6 +224,10 @@ export default class StandardApp extends React.Component {
         );
     }
     setupTouchEvents = (el) => {
+        if (el === null) {
+            // Do nothing when unmounting
+            return;
+        }
         el.addEventListener('touchstart', ev => {
             this.touchY = ev.targetTouches[0].clientY;
         }, { passive: false });

jest.config.json

@@ -0,0 +1,20 @@
+{
+    "collectCoverageFrom": [
+        "./**/*.{js,jsx}"
+    ],
+    "coverageDirectory": "coverage",
+    "moduleNameMapper": {
+        "^openlayers$": "<rootDir>/libs/openlayers.js",
+        "\\.(css|less|svg|png)$": "<rootDir>/tests/mocks/AssetMock.js"
+    },
+    "setupFilesAfterEnv": [
+        "<rootDir>/tests/jest.setup.js"
+    ],
+    "testEnvironment": "jsdom",
+    "testMatch": [
+        "<rootDir>/tests/**/*.test.(js|jsx|ts|tsx)"
+    ],
+    "transformIgnorePatterns": [
+        "node_modules/(?!(color-name|color-parse|color-rgba|color-space|flat|ol|ol-ext)/)"
+    ]
+}

package.json

@@ -73,16 +73,29 @@
         "@babel/preset-env": "^7.24.5",
         "@babel/preset-react": "^7.24.1",
         "@furkot/webfonts-generator": "^2.0.2",
+        "@microsoft/eslint-formatter-sarif": "^3.1.0",
+        "@testing-library/dom": "^10.1.0",
+        "@testing-library/jest-dom": "^6.4.6",
+        "@testing-library/react": "^16.0.0",
         "@types/react": "^18.3.1",
         "eslint": "^8.56.0",
+        "eslint-plugin-jest": "^28.6.0",
+        "eslint-plugin-jest-dom": "^5.4.0",
         "eslint-plugin-perfectionist": "^2.10.0",
-        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-testing-library": "^6.2.2",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "mkdirp": "^3.0.1",
         "object-path": "^0.11.8",
         "react-docgen": "^5.4.3",
+        "redux-mock-store": "^1.5.4",
         "typescript": "^5.4.5"
     },
     "scripts": {
-        "plugindoc": "node scripts/gen-plugin-docs.js"
+        "plugindoc": "node scripts/gen-plugin-docs.js",
+        "lint": "eslint . --config .eslintrc.js --ext .js,.jsx,.ts,.tsx",
+        "test": "jest",
+        "coverage": "jest --coverage"
     }
 }

tests/components/CoordinateDisplayer.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Provider} from "react-redux";
+
+import {render, screen} from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import CoordinateDisplayer from '../../components/CoordinateDisplayer';
+
+const mockStore = configureStore();
+
+test('current coordinates are shown', () => {
+    const store = mockStore({
+        map: { projection: 'EPSG:4326' },
+        mousePosition: { position: { coordinate: [123, 456] } }
+    });
+
+    render(
+        <Provider store={store}>
+            <CoordinateDisplayer displaycrs={'EPSG:4326'} />
+        </Provider>
+    );
+
+    expect(screen.getByRole('textbox')).toHaveValue('123.0000 456.0000');
+});

tests/components/SearchBox.test.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {Provider} from "react-redux";
+
+import {act, fireEvent, render, screen} from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import SearchBox from '../../components/SearchBox';
+
+const mockStore = configureStore();
+
+const searchProviders = {
+    testing: {
+        onSearch: (text, searchParams, callback) => callback({
+            results: [
+                {
+                    id: 'layer1',
+                    title: 'Layer 1',
+                    items: [
+                        {
+                            id: 'item1',
+                            text: 'Item 1'
+                        },
+                        {
+                            id: 'item2',
+                            text: 'Item 2'
+                        }
+                    ]
+                },
+                {
+                    id: 'layer2',
+                    title: 'Layer 2',
+                    items: [
+                        {
+                            id: 'item3',
+                            text: 'Item 3'
+                        }
+                    ]
+                }
+            ]
+        })
+    }
+};
+
+// eslint-disable-next-line
+const Search = SearchBox(searchProviders);
+
+test('search results are visible', () => {
+    const store = mockStore({
+        map: { projection: 'EPSG:4326' },
+        layers: { flat: [] },
+        theme: { current: { searchProviders: ['testing'] } }
+    });
+
+    const searchOptions = {
+        allowSearchFilters: false
+    };
+
+    render(
+        <Provider store={store}>
+            <Search searchOptions={searchOptions} />
+        </Provider>
+    );
+
+    const input = screen.getByRole('input');
+    expect(input).toHaveValue('');
+
+    fireEvent.change(input, { target: { value: 'Test' } });
+    act(() => input.focus());
+
+    expect(input).toHaveValue('Test');
+    expect(screen.getByText('Layer 1')).toBeInTheDocument();
+    expect(screen.getByText('Layer 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+});

tests/components/StandardApp.test.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Provider} from "react-redux";
+
+import {render} from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import StandardApp from "../../components/StandardApp";
+
+const mockStore = configureStore();
+
+test('app is running w/o plugins', () => {
+    const store = mockStore({});
+
+    const appConfig = {
+        initialState: {
+            defaultState: {}
+        },
+        pluginsDef: {
+            plugins: {}
+        }
+    };
+
+    render(
+        <Provider store={store}>
+            <StandardApp appConfig={appConfig} />
+        </Provider>
+    );
+});

tests/jest.setup.js

@@ -0,0 +1,12 @@
+import LocaleUtils from "../utils/LocaleUtils";
+import MapUtils from "../utils/MapUtils";
+import MockMap from "./mocks/MockMap";
+
+import '@testing-library/jest-dom';
+
+// Mock translation function, just return the message key
+LocaleUtils.tr = (key) => key;
+LocaleUtils.lang = () => 'en';
+
+// Mock the Map object globally
+MapUtils.registerHook(MapUtils.GET_MAP, new MockMap());

tests/libs/openlayers.test.js

@@ -0,0 +1,5 @@
+import ol from 'openlayers';
+
+test('import openlayers', () => {
+    expect(ol).not.toBe(undefined);
+});

tests/mocks/AssetMock.js

@@ -0,0 +1 @@
+module.exports = {};

tests/mocks/MockMap.js

@@ -0,0 +1,5 @@
+export default class MockMap {
+    addLayer = () => null;
+    removeLayer = () => null;
+    getViewport = () => document.createElement('div');
+}