feat(submaps tabs): open submap on click

Description

In this PR I introduced changes to SubmapsDrawer and MapNavigation. Idea is to allow user switch easily between submaps.

Things done:

• open submap from drawer
• allow switch between the maps (tabs in top navigation)

More details about functionality

• If map is not opened yet -> open it and set as currently active
• If map is already opened -> set it as currently active
• To set map as active it modifies current modelId in map reducer

Things not done

• Maps don't currently remember last position set by user

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('should render list of currently opened maps, main map should not have close button', async () => {
+    renderComponent({
+      map: {
+        data: { ...initialMapDataFixture },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+        openedMaps: openedMapsThreeSubmapsFixture,
+      },
+    });
+
+    const mainMapButton = screen.getByRole('button', { name: 'Main map' });
+    expect(mainMapButton).toBeInTheDocument();
+
+    const histamineMapButton = screen.getByRole('button', { name: 'Histamine signaling' });
+    expect(histamineMapButton).toBeInTheDocument();
+
+    const prknMapButton = screen.getByRole('button', { name: 'PRKN substrates' });
+    expect(prknMapButton).toBeInTheDocument();
+  });
+
+  it('all maps should have close button expect main map', async () => {
+    renderComponent({
+      map: {
+        data: { ...initialMapDataFixture },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+        openedMaps: openedMapsThreeSubmapsFixture,
+      },
+    });
+
+    const mainMapButton = screen.getByRole('button', { name: 'Main map' });
+    const mainMapCloseButton = await within(mainMapButton).queryByTestId('close-icon');
+    expect(mainMapCloseButton).not.toBeInTheDocument();
+
+    const histamineMapButton = screen.getByRole('button', { name: 'Histamine signaling' });
+    const histamineMapCloseButton = await within(histamineMapButton).getByTestId('close-icon');
+    expect(histamineMapCloseButton).toBeInTheDocument();
+
+    const prknMapButton = screen.getByRole('button', { name: 'PRKN substrates' });
+    const prknMapCloseButton = await within(prknMapButton).getByTestId('close-icon');
+    expect(prknMapCloseButton).toBeInTheDocument();
+  });
+
+  it('should close map tab when clicking on close button while', async () => {
+    const { store } = renderComponent({
+      map: {
+        data: {
+          ...initialMapDataFixture,
+          modelId: MAIN_MAP_ID,
+        },
+        loading: 'succeeded',
+        error: { message: '', name: '' },
+        openedMaps: openedMapsThreeSubmapsFixture,
+      },
+    });
+
+    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('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);
+  });
+});

[Adrian Orłów]

closing map is tested but opening isn't

[Tadeusz Miesiąc]

Yes, thats true ;) This component does not allow to open maps. It only let's you switch between them and close them. Opening maps is handled in SubMapsDrawer