Increase test coverage

jest.config.cjs

@@ -21,7 +21,7 @@ module.exports = {
   ],
   transformIgnorePatterns: [
     'node_modules/(?!(ol|@camptocamp/inkmap|@terrestris/*[a-z]*-util|d3-selection|color-*[a-z]*)|(rc-*[a-z]*)|' +
-    'filter-obj|query-string|decode-uri-component|split-on-first|shpjs/|rbush|quickselect|geostyler-openlayers-parser|' +
+    'filter-obj|query-string|decode-uri-component|split-on-first|shpjs/|rbush|quickselect|geostyler-openlayers-parser|ol-mapbox-style|pbf|' +
     'geostyler-style|geotiff|quick-lru|quickselect|jsts)'
   ],
   setupFiles: [
@@ -36,7 +36,12 @@ module.exports = {
   },
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',
-    '!src/**/*example*.*'
+    '!src/**/*example*.*',
+    '!src/**/*.d.ts',
+    '!src/index.ts',
+    '!src/Context/MapContext/MapContext.tsx', // only a placeholder
+    '!src/Hook/useDropTargetMap.ts', // only a placeholder
+    '!src/Hook/useMap.ts' // only a placeholder
   ],
   coverageDirectory: '<rootDir>/coverage',
   testEnvironment: 'jsdom',

src/BackgroundLayerChooser/BackgroundLayerChooser.spec.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM'
+// import TileWMS from 'ol/source/TileWMS';
+
+import {
+  renderInMapContext
+} from '@terrestris/react-util/dist/Util/rtlTestUtils';
+
+import BackgroundLayerChooser from './BackgroundLayerChooser';
+import { act, fireEvent, waitFor } from '@testing-library/react';
+
+describe('<BackGroundLayerChooser />', () => {
+
+  let map: Map;
+  let layers: TileLayer[];
+
+  function createLayers() {
+    return [
+      new TileLayer({
+        source: new OSM(),
+        properties: {
+          name: 'OSM',
+          isBackgroundLayer: true
+        }
+      }),
+      new TileLayer({
+        source: new OSM(),
+        properties: {
+          name: 'OSM2',
+          isBackgroundLayer: true
+        }
+      })
+    ];
+  }
+
+  beforeEach(() => {
+    layers = createLayers();
+    map = new Map({
+      view: new View({
+        center: [0, 0],
+        zoom: 1
+      }),
+      layers
+    });
+  });
+
+
+  describe('#Basics', () => {
+    it('is defined', () => {
+      expect(BackgroundLayerChooser).not.toBeUndefined();
+    });
+
+    it('can be rendered', () => {
+      const { container } = renderInMapContext(
+        map,
+        <BackgroundLayerChooser
+          layers={layers}
+          allowEmptyBackground={true}
+        />
+      );
+      expect(container.querySelector('.bg-layer-chooser')).toBeInTheDocument();
+    });
+  });
+
+  it('shows layer cards when button is clicked', async () => {
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={true}
+      />
+    );
+    const btn = container.querySelector('.change-bg-btn');
+    await act(async () => {
+      btn && fireEvent.click(btn);
+    });
+    await waitFor(() => {
+      expect(container.querySelector('.layer-cards')).toBeInTheDocument();
+      expect(container.querySelectorAll('.layer-preview').length).toBeGreaterThan(0);
+    });
+  });
+
+  it('calls titleRenderer for each layer', async () => {
+    const titleRenderer = jest.fn(l => <span>Layer: {l.get('name')}</span>);
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={true}
+        titleRenderer={titleRenderer}
+      />
+    );
+    const btn = container.querySelector('.change-bg-btn');
+    await act(async () => {
+      btn && fireEvent.click(btn);
+    });
+    await waitFor(() => {
+      expect(titleRenderer).toHaveBeenCalled();
+    });
+  });
+
+  it('shows no background option and selects it', async () => {
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={true}
+        noBackgroundTitle="None"
+      />
+    );
+    const btn = container.querySelector('.change-bg-btn');
+    await act(async () => {
+      btn && fireEvent.click(btn);
+    });
+    const noBg = await waitFor(() => container.querySelector('.no-background'));
+    expect(noBg).toBeInTheDocument();
+    await act(async () => {
+      noBg && fireEvent.click(noBg);
+    });
+    await waitFor(() => {
+      expect(container.querySelector('.bg-preview .layer-title')?.textContent).toBe('None');
+    });
+  });
+
+  it('selects a background layer when preview is clicked', async () => {
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={true}
+      />
+    );
+    const btn = container.querySelector('.change-bg-btn');
+    await act(async () => {
+      btn && fireEvent.click(btn);
+    });
+    const previews = await waitFor(() => container.querySelectorAll('.layer-preview'));
+    expect(previews.length).toBeGreaterThan(0);
+    await act(async () => {
+      previews[0] && fireEvent.click(previews[0]);
+    });
+    await waitFor(() => {
+      expect(container.querySelector('.bg-preview .layer-title')?.textContent).toBe('OSM');
+    });
+  });
+
+  it('respects initiallySelectedLayer prop', async () => {
+    // Do not set allowEmptyBackground, so 'No Background' is not selected
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={false}
+        initiallySelectedLayer={layers[1]}
+      />
+    );
+    await waitFor(() => {
+      expect(container.querySelector('.bg-preview .layer-title')?.textContent).toBe('OSM2');
+    });
+  });
+
+  it('filters layers using backgroundLayerFilter', async () => {
+    const filter = (l: any) => l.get('name') === 'OSM2';
+    const { container } = renderInMapContext(
+      map,
+      <BackgroundLayerChooser
+        layers={layers}
+        allowEmptyBackground={false}
+        backgroundLayerFilter={filter}
+      />
+    );
+    const btn = container.querySelector('.change-bg-btn');
+    await act(async () => {
+      btn && fireEvent.click(btn);
+    });
+    await waitFor(() => {
+      // Only OSM2 should be present
+      const previews = container.querySelectorAll('.layer-preview');
+      expect(previews.length).toBe(1);
+      const title = (previews[0] as Element).querySelector('.layer-title')?.textContent;
+      expect(title).toBe('OSM2');
+    });
+  });
+
+});

src/BackgroundLayerChooser/BackgroundLayerChooser.tsx

@@ -115,9 +115,10 @@ export const BackgroundLayerChooser: React.FC<BackgroundLayerChooserProps> = ({
   }, [map, layerOptionsVisible]);
 
   useEffect(() => {
-    const activeLayerCand = layers.find(l => l.getVisible());
-
-    if (!initiallySelectedLayer) {
+    if (initiallySelectedLayer) {
+      setSelectedLayer(initiallySelectedLayer);
+    } else {
+      const activeLayerCand = layers.find(l => l.getVisible());
       setSelectedLayer(activeLayerCand as OlLayer);
     }
   }, [initiallySelectedLayer, layers]);
@@ -227,7 +228,7 @@ export const BackgroundLayerChooser: React.FC<BackgroundLayerChooserProps> = ({
         layerOptionsVisible && (
           <div className="layer-cards">
             {
-              layers.map(layer => (
+              layers.filter(backgroundLayerFilter).map(layer => (
                 <BackgroundLayerPreview
                   key={getUid(layer)}
                   activeLayer={selectedLayer}