Add basic tests for some components

Author: BenediktSeidlSWM

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 });

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 new-cap
+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

@@ -1 +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/mocks/MockMap.js

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