test: add submap download tests (full)

src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.test.tsx

 import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
 import { backgroundsFixture } from '@/models/fixtures/backgroundsFixture';
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
 import { modelsFixture } from '@/models/fixtures/modelsFixture';
+import {
+  CONFIGURATION_FORMATS_MOCK,
+  CONFIGURATION_FORMATS_TYPES_MOCK,
+} from '@/models/mocks/configurationFormatsMock';
 import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
 import { RootState, StoreType } from '@/redux/store';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
-import { render } from '@testing-library/react';
+import { act, render, renderHook, screen } from '@testing-library/react';
 import { DownloadSubmap } from './DownloadSubmap.component';
+import { GetSubmapDownloadUrl, useGetSubmapDownloadUrl } from './utils/useGetSubmapDownloadUrl';
 
 const VALID_MODEL_ID = 5052;
 const VALID_BACKGROUND_ID = 53;
@@ -46,8 +52,35 @@ const getState = (): RootState => ({
       },
     ],
   },
+  configuration: {
+    ...INITIAL_STORE_STATE_MOCK.configuration,
+    main: {
+      ...INITIAL_STORE_STATE_MOCK.configuration.main,
+      data: {
+        ...configurationFixture,
+        modelFormats: CONFIGURATION_FORMATS_MOCK,
+      },
+    },
+  },
 });
 
+const toggleListByButtonClick = (): void => {
+  const button = screen.getByTestId('download-submap-button');
+  act(() => {
+    button.click();
+  });
+};
+
+const getUtilGetSubmapDownloadUrl = (): GetSubmapDownloadUrl => {
+  const { Wrapper } = getReduxWrapperWithStore(getState());
+
+  const {
+    result: { current: getSubmapDownloadUrl },
+  } = renderHook(() => useGetSubmapDownloadUrl(), { wrapper: Wrapper });
+
+  return getSubmapDownloadUrl;
+};
+
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
@@ -64,20 +97,53 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
 };
 
 describe('DownloadSubmap - component', () => {
-  describe('button', () => {
-    it.skip('should render download button', () => {
-      renderComponent(getState());
-      //   const button = screen.getByRole('button');
-      //   expect(button).toBeInTheDocument();
-    });
+  it('should render download button', () => {
+    renderComponent(getState());
+    const button = screen.getByTestId('download-submap-button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should open list on button click', () => {
+    renderComponent(getState());
+    toggleListByButtonClick();
+
+    const list = screen.getByTestId('download-submap-list');
+    expect(list).not.toHaveClass('hidden');
+  });
+
+  it('should close list on button click twice', () => {
+    renderComponent(getState());
+    const list = screen.getByTestId('download-submap-list');
 
-    it('should open list on button click', () => {});
+    // list should be opened
+    toggleListByButtonClick();
+    expect(list).not.toHaveClass('hidden');
 
-    it('should close list on button click twice', () => {});
+    // list should be closed
+    toggleListByButtonClick();
+    expect(list).toHaveClass('hidden');
   });
 
-  describe('list', () => {
-    it('should not show list when closed', () => {});
-    it('should render list elements with href and names when opened', () => {});
+  it('should not show list when closed (default state)', () => {
+    renderComponent(getState());
+    const list = screen.getByTestId('download-submap-list');
+    expect(list).toHaveClass('hidden');
+  });
+
+  it('should render list elements with href and names when opened', () => {
+    const getSubmapDownloadUrl = getUtilGetSubmapDownloadUrl();
+    renderComponent(getState());
+    const list = screen.getByTestId('download-submap-list');
+
+    const validHrefs = CONFIGURATION_FORMATS_MOCK.map(({ handler }) =>
+      getSubmapDownloadUrl({ handler }),
+    );
+    const validNames = CONFIGURATION_FORMATS_TYPES_MOCK;
+    const allAnchors = [...list.getElementsByTagName('a')];
+
+    allAnchors.forEach(anchor => {
+      expect(validHrefs.includes(anchor.href)).toBeTruthy();
+      expect(validNames.includes(anchor.innerText)).toBeTruthy();
+    });
   });
 });

src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx

@@ -16,10 +16,16 @@ export const DownloadSubmap = (): JSX.Element => {
 
   return (
     <div className="relative">
-      <Button role="button" variantStyles="ghost" className="mr-4" {...getToggleButtonProps()}>
+      <Button
+        data-testid="download-submap-button"
+        variantStyles="ghost"
+        className="mr-4"
+        {...getToggleButtonProps()}
+      >
         Download
       </Button>
       <ul
+        data-testid="download-submap-list"
         className={`absolute left-[-50%] z-10 max-h-80 w-48 overflow-scroll rounded-sm border bg-white p-0 ps-0 ${
           !isOpen && 'hidden'
         }`}

src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/utils/useGetSubmapDownloadUrl.ts

@@ -4,7 +4,7 @@ import { mapDataSizeSelector } from '@/redux/map/map.selectors';
 import { currentModelSelector } from '@/redux/models/models.selectors';
 import { useSelector } from 'react-redux';
 
-type GetSubmapDownloadUrl = ({ handler }: { handler: string }) => string;
+export type GetSubmapDownloadUrl = ({ handler }: { handler: string }) => string;
 
 export const useGetSubmapDownloadUrl = (): GetSubmapDownloadUrl => {
   const model = useSelector(currentModelSelector);

src/models/fixtures/configurationFixture.ts

+import { ZOD_SEED } from '@/constants';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFixture } from 'zod-fixture';
+import { configurationSchema } from '../configurationSchema';
+
+export const configurationFixture = createFixture(configurationSchema, {
+  seed: ZOD_SEED,
+  array: { min: 1, max: 1 },
+});

src/models/mocks/configurationFormatsMock.ts

 import { ConfigurationFormatSchema } from '@/types/models';
 
 export const CONFIGURATION_FORMATS_TYPES_MOCK: string[] = [
-  'PNG image',
-  'PDF',
-  'SVG image',
   'CellDesigner SBML',
   'SBGN-ML',
   'SBML',
   'GPML',
 ];
 
-export const CONFIGURATION_FORMATS_COLOURS_MOCK: ConfigurationFormatSchema[] = [
-  {
-    name: 'PNG image',
-    handler: 'lcsb.mapviewer.converter.graphics.PngImageGenerator',
-    extension: 'png',
-  },
-  {
-    name: 'PDF',
-    handler: 'lcsb.mapviewer.converter.graphics.PdfImageGenerator',
-    extension: 'pdf',
-  },
-  {
-    name: 'SVG image',
-    handler: 'lcsb.mapviewer.converter.graphics.SvgImageGenerator',
-    extension: 'svg',
-  },
+export const CONFIGURATION_FORMATS_MOCK: ConfigurationFormatSchema[] = [
   {
     name: 'CellDesigner SBML',
     handler: 'lcsb.mapviewer.converter.model.celldesigner.CellDesignerXmlParser',