feat(map): improve hook and tests of useOlMap

src/components/Map/MapViewer/utils/useOlMap.test.ts

+import mapSlice, { setMapData } from '@/redux/map/map.slice';
+import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
+import { renderHook, waitFor } from '@testing-library/react';
+import { Map } from 'ol';
+import React from 'react';
+import { useOlMap } from './useOlMap';
+
+const useRefValue = {
+  current: null,
+};
+
+Object.defineProperty(useRefValue, 'current', {
+  get: jest.fn(() => ({
+    innerHTML: '',
+    appendChild: jest.fn(),
+    addEventListener: jest.fn(),
+    getRootNode: jest.fn(),
+  })),
+  set: jest.fn(() => ({
+    innerHTML: '',
+    appendChild: jest.fn(),
+    addEventListener: jest.fn(),
+    getRootNode: jest.fn(),
+  })),
+});
+
+jest.spyOn(React, 'useRef').mockReturnValue(useRefValue);
+
+describe('useOlMap - util', () => {
+  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('map', mapSlice);
+
+  describe('when initializing', () => {
+    it('should set map instance', async () => {
+      const dummyElement = document.createElement('div');
+      const { result } = renderHook(() => useOlMap({ target: dummyElement }), { wrapper: Wrapper });
+      await waitFor(() => expect(result.current.mapInstance).toBeInstanceOf(Map));
+    });
+
+    it('should render content inside the target element', async () => {
+      const FIRST_NODE = 0;
+      const dummyElement = document.createElement('div');
+      renderHook(() => useOlMap({ target: dummyElement }), { wrapper: Wrapper });
+
+      expect(dummyElement.childNodes[FIRST_NODE]).toHaveClass('ol-viewport');
+    });
+  });
+
+  describe('when initialized', () => {
+    it('should modify view of the map instance on position config change', async () => {
+      const dummyElement = document.createElement('div');
+      const { result } = renderHook(() => useOlMap({ target: dummyElement }), { wrapper: Wrapper });
+      const setViewSpy = jest.spyOn(result.current.mapInstance as Map, 'setView');
+      const CALLED_ONCE = 1;
+
+      store.dispatch(
+        setMapData({
+          position: {
+            x: 0,
+            y: 0,
+          },
+        }),
+      );
+
+      await waitFor(() => expect(setViewSpy).toBeCalledTimes(CALLED_ONCE));
+    });
+
+    it('should modify layers of the map instance on size config change', async () => {
+      const dummyElement = document.createElement('div');
+      const { result } = renderHook(() => useOlMap({ target: dummyElement }), { wrapper: Wrapper });
+      const setLayersSpy = jest.spyOn(result.current.mapInstance as Map, 'setLayers');
+      const CALLED_ONCE = 1;
+
+      store.dispatch(
+        setMapData({
+          size: {
+            maxZoom: 10,
+            minZoom: 2,
+            tileSize: 256,
+            width: 1000,
+            height: 1000,
+          },
+        }),
+      );
+
+      await waitFor(() => expect(setLayersSpy).toBeCalledTimes(CALLED_ONCE));
+    });
+  });
+});

src/components/Map/MapViewer/utils/useOlMap.ts

 import Map from 'ol/Map';
-import { MutableRefObject, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useState } from 'react';
 import { MapInstance } from '../MapViewer.types';
 import { useOlMapConfig } from './useOlMapConfig';
 import { useOlMapInit } from './useOlMapInit';
 
+interface UseOlMapInput {
+  target?: HTMLElement;
+}
 interface UseOlMapOutput {
   mapRef: MutableRefObject<null | HTMLDivElement>;
   mapInstance: MapInstance;
 }
 
-type UseOlMap = () => UseOlMapOutput;
+type UseOlMap = (input?: UseOlMapInput) => UseOlMapOutput;
 
-export const useOlMap: UseOlMap = () => {
-  const mapRef = useRef<null | HTMLDivElement>(null);
+export const useOlMap: UseOlMap = ({ target } = {}) => {
+  const mapRef = React.useRef<null | HTMLDivElement>(null);
   const [mapInstance, setMapInstance] = useState<MapInstance>(undefined);
   const mapConfig = useOlMapConfig();
   useOlMapInit();
@@ -24,11 +27,11 @@ export const useOlMap: UseOlMap = () => {
     }
 
     const map = new Map({
-      target: mapRef.current,
+      target: target || mapRef.current,
     });
 
-    setMapInstance(map);
-  }, []);
+    setMapInstance(currentMap => currentMap || map);
+  }, [target]);
 
   useEffect(() => {
     if (!mapInstance) {