feat(main map tab auto set id): set main map id automaticly, added missing tests to submaps drawer

.prettierrc

+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": ["twMerge"],
+  "tabWidth": 2
+}

prettier.config.js

@@ -9,4 +9,4 @@ const config = {
   tabWidth: 2,
 };
 
-module.exports = config; 
+module.exports = config;
\ No newline at end of file

src/components/FunctionalArea/MapNavigation/MapNavigation.component.test.tsx

+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { StoreType } from '@/redux/store';
+import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
+import { act, render, screen, within } from '@testing-library/react';
+import { MapNavigation } from './MapNavigation.component';
+
+const MAIN_MAP_ID = 5053;
+const HISTAMINE_MAP_ID = 5052;
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <MapNavigation />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
 describe('MapNavigation - component', () => {
-  it.skip('should render list of currently opened maps, main map should not have close button', () => {
-    expect(true).toBe(false);
+  it('should render list of currently opened maps, main map should not have close button', async () => {
+    renderComponent({
+      map: {
+        data: { ...initialMapDataFixture, openedMaps: openedMapsThreeSubmapsFixture },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+    });
+
+    const mainMapButton = screen.getByRole('button', { name: 'Main map' });
+    const mainMapCloseButton = await within(mainMapButton).queryByTestId('close-icon');
+    expect(mainMapButton).toBeInTheDocument();
+    expect(mainMapCloseButton).not.toBeInTheDocument();
+
+    const histamineMapButton = screen.getByRole('button', { name: 'Histamine signaling' });
+    const histamineMapCloseButton = await within(histamineMapButton).getByTestId('close-icon');
+    expect(histamineMapButton).toBeInTheDocument();
+    expect(histamineMapCloseButton).toBeInTheDocument();
+
+    const prknMapButton = screen.getByRole('button', { name: 'PRKN substrates' });
+    const prknMapCloseButton = await within(prknMapButton).getByTestId('close-icon');
+    expect(prknMapButton).toBeInTheDocument();
+    expect(prknMapCloseButton).toBeInTheDocument();
   });
-  it.skip('should close map tab when clicking on close button while', () => {
-    expect(true).toBe(false);
+
+  it('should close map tab when clicking on close button while', async () => {
+    const { store } = renderComponent({
+      map: {
+        data: {
+          ...initialMapDataFixture,
+          modelId: MAIN_MAP_ID,
+          openedMaps: openedMapsThreeSubmapsFixture,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+    });
+
+    const histamineMapButton = screen.getByRole('button', { name: 'Histamine signaling' });
+    const histamineMapCloseButton = await within(histamineMapButton).getByTestId('close-icon');
+    await act(() => {
+      histamineMapCloseButton.click();
+    });
+
+    const {
+      map: {
+        data: { modelId, openedMaps },
+      },
+    } = store.getState();
+
+    const isHistamineMapOpened = openedMaps.some(map => map.modelName === 'Histamine signaling');
+
+    expect(isHistamineMapOpened).toBe(false);
+    expect(modelId).toBe(MAIN_MAP_ID);
   });
-  it.skip('should close map and open main map if closed currently selected map', () => {
-    expect(true).toBe(false);
+
+  it('should close map and open main map if closed currently selected map', async () => {
+    const { store } = renderComponent({
+      map: {
+        data: {
+          ...initialMapDataFixture,
+          modelId: HISTAMINE_MAP_ID,
+          openedMaps: openedMapsThreeSubmapsFixture,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+      },
+    });
+
+    const histamineMapButton = screen.getByRole('button', { name: 'Histamine signaling' });
+    const histamineMapCloseButton = await within(histamineMapButton).getByTestId('close-icon');
+    await act(() => {
+      histamineMapCloseButton.click();
+    });
+
+    const {
+      map: {
+        data: { modelId, openedMaps },
+      },
+    } = store.getState();
+
+    const isHistamineMapOpened = openedMaps.some(map => map.modelName === 'Histamine signaling');
+
+    expect(isHistamineMapOpened).toBe(false);
+    expect(modelId).toBe(MAIN_MAP_ID);
   });
 });

src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.test.tsx

@@ -6,9 +6,12 @@ import { act, render, screen } from '@testing-library/react';
 import { StoreType } from '@/redux/store';
 import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
 import { openedDrawerSubmapsFixture } from '@/redux/drawer/drawerFixture';
-import { initialMapDataFixture } from '@/redux/map/map.fixtures';
+import { initialMapDataFixture, openedMapsThreeSubmapsFixture } from '@/redux/map/map.fixtures';
 import { SubmapsDrawer } from './SubmapsDrawer';
 
+const MAIN_MAP_ID = 5053;
+const HISTAMINE_MAP_ID = 5052;
+
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
@@ -62,7 +65,7 @@ describe('SubmapsDrawer - component', () => {
     // eslint-disable-next-line no-magic-numbers
     expect(modelId).toBe(0);
     expect(openedMaps).not.toContainEqual({
-      modelId: 5052,
+      modelId: HISTAMINE_MAP_ID,
       modelName: 'Histamine signaling',
       lastPosition: { x: 0, y: 0, z: 0 },
     });
@@ -77,17 +80,42 @@ describe('SubmapsDrawer - component', () => {
     } = store.getState().map;
 
     expect(newOpenedMaps).toContainEqual({
-      modelId: 5052,
+      modelId: HISTAMINE_MAP_ID,
       modelName: 'Histamine signaling',
       lastPosition: { x: 0, y: 0, z: 0 },
     });
-    // eslint-disable-next-line no-magic-numbers
-    expect(newModelId).toBe(5052);
+
+    expect(newModelId).toBe(HISTAMINE_MAP_ID);
   });
-  it.skip("should set map active if it's already opened", () => {
-    // const { store } = renderComponent({
-    //   models: { data: MODELS_MOCK_SHORT, loading: 'succeeded', error: { name: '', message: '' } },
-    //   map: { data: initialMapDataFixture, loading: 'succeeded', error: { name: '', message: '' } },
-    // });
+  it("should set map active if it's already opened", async () => {
+    const { store } = renderComponent({
+      models: { data: MODELS_MOCK_SHORT, loading: 'succeeded', error: { name: '', message: '' } },
+      map: {
+        data: {
+          ...initialMapDataFixture,
+          modelId: MAIN_MAP_ID,
+          openedMaps: openedMapsThreeSubmapsFixture,
+        },
+        loading: 'succeeded',
+        error: { name: '', message: '' },
+      },
+    });
+
+    const openHistamineMapButton = screen.getByTestId('Histamine signaling-open');
+    await act(() => {
+      openHistamineMapButton.click();
+    });
+
+    const {
+      map: {
+        data: { modelId, openedMaps },
+      },
+    } = store.getState();
+
+    const histamineMap = openedMaps.filter(map => map.modelName === 'Histamine signaling');
+
+    // eslint-disable-next-line no-magic-numbers
+    expect(histamineMap.length).toBe(1);
+    expect(modelId).toBe(HISTAMINE_MAP_ID);
   });
 });

src/redux/map/map.constants.ts

@@ -5,6 +5,7 @@ import {
   DEFAULT_MIN_ZOOM,
   DEFAULT_TILE_SIZE,
 } from '@/constants/map';
+import { Point } from '@/types/map';
 import { MapData } from './map.types';
 
 export const MAIN_MAP = 'Main map';
@@ -31,3 +32,4 @@ export const MAP_DATA_INITIAL_STATE: MapData = {
 };
 
 export const MIDDLEWARE_ALLOWED_ACTIONS: string[] = ['map/setMapData', 'map/initMapData'];
+export const DEFAULT_POSITION: Point = { x: 0, y: 0, z: 0 };

src/redux/map/map.fixtures.ts

-import { MapData } from './map.types';
+import { MapData, OppenedMap } from './map.types';
+
+export const openedMapsInitialValueFixture: OppenedMap[] = [
+  { modelId: 0, modelName: 'Main map', lastPosition: { x: 0, y: 0, z: 0 } },
+];
+
+export const openedMapsThreeSubmapsFixture: OppenedMap[] = [
+  { modelId: 5053, modelName: 'Main map', lastPosition: { x: 0, y: 0, z: 0 } },
+  { modelId: 5052, modelName: 'Histamine signaling', lastPosition: { x: 0, y: 0, z: 0 } },
+  { modelId: 5054, modelName: 'PRKN substrates', lastPosition: { x: 0, y: 0, z: 0 } },
+];
 
 export const initialMapDataFixture: MapData = {
   projectId: 'pdmap',
@@ -18,5 +28,5 @@ export const initialMapDataFixture: MapData = {
     minZoom: 2,
     maxZoom: 9,
   },
-  openedMaps: [{ modelId: 0, modelName: 'Main map', lastPosition: { x: 0, y: 0, z: 0 } }],
+  openedMaps: openedMapsInitialValueFixture,
 };

src/redux/map/map.thunks.test.ts

@@ -80,7 +80,11 @@ describe('map thunks', () => {
       });
 
       it('should return empty payload', () => {
-        expect(payload).toStrictEqual({});
+        expect(payload).toStrictEqual({
+          backgroundId: 0,
+          modelId: 0,
+          openedMaps: [{ modelId: 0, modelName: 'Main map', lastPosition: { x: 0, y: 0, z: 0 } }],
+        });
       });
     });
   });

src/redux/map/map.thunks.ts

+/* eslint-disable no-magic-numbers */
 import { PROJECT_ID } from '@/constants';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { backgroundsDataSelector } from '../backgrounds/background.selectors';
@@ -7,21 +8,20 @@ import { getModels } from '../models/models.thunks';
 import { getAllPublicOverlaysByProjectId } from '../overlays/overlays.thunks';
 import type { AppDispatch, RootState } from '../store';
 import { InitMapDataActionPayload } from './map.types';
+import { DEFAULT_POSITION, MAIN_MAP } from './map.constants';
 
 const getPayloadFromState = (state: RootState): InitMapDataActionPayload => {
   const FIRST = 0;
   const models = modelsDataSelector(state);
   const backgrounds = backgroundsDataSelector(state);
-  const modelId = models?.[FIRST]?.idObject;
-  const backgroundId = backgrounds?.[FIRST]?.id;
-
-  if (!modelId || !backgroundId) {
-    return {};
-  }
+  const modelId = models?.[FIRST]?.idObject || 0;
+  const backgroundId = backgrounds?.[FIRST]?.id || 0;
+  const openedMaps = [{ modelId, modelName: MAIN_MAP, lastPosition: DEFAULT_POSITION }];
 
   return {
     modelId,
     backgroundId,
+    openedMaps,
   };
 };
 

src/redux/map/map.types.ts

@@ -51,7 +51,11 @@ export type CloseMapActionPayload = Pick<OppenedMap, 'modelId'>;
 
 export type CloseMapAction = PayloadAction<CloseMapActionPayload>;
 
-export type InitMapDataActionPayload = { modelId: number; backgroundId: number } | object;
+export type InitMapDataActionPayload = {
+  modelId: number;
+  backgroundId: number;
+  openedMaps: OppenedMap[];
+};
 
 export type InitMapDataAction = PayloadAction<SetMapDataAction>;