feat(map): add render components and tests

Objective:

Create map rendering components, logic and unit tests

What has been done:

• map rendering utils
• map viewer component
• unit tests

What has not been done (intentionally):

• connection to the API service (size of the PR)
• unit tests for utils that will be connected to the API service, they are based on mocks only so tests won't serve their purpose

Additionally:

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