diff --git a/package-lock.json b/package-lock.json
index dabf49dce6380c53f944390a58b1d5a32e3ba10b..8ac4a5d8aac76245502f5711c51d7396a93512f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
"@commitlint/config-conventional": "^17.7.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.5",
"@types/react-redux": "^7.1.26",
"@types/redux-mock-store": "^1.0.6",
@@ -2150,6 +2151,19 @@
"react-dom": "^18.0.0"
}
},
+ "node_modules/@testing-library/user-event": {
+ "version": "14.5.2",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+ "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=12",
+ "npm": ">=6"
+ },
+ "peerDependencies": {
+ "@testing-library/dom": ">=7.21.4"
+ }
+ },
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -15495,6 +15509,13 @@
"@types/react-dom": "^18.0.0"
}
},
+ "@testing-library/user-event": {
+ "version": "14.5.2",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+ "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+ "dev": true,
+ "requires": {}
+ },
"@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4fb3ac58884eefadf31d01b6ad6a9b331d450875..cc4afb15ce32397ce7e992b86c1b14c1fe6fd3d8 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
"@commitlint/config-conventional": "^17.7.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.5",
"@types/react-redux": "^7.1.26",
"@types/redux-mock-store": "^1.0.6",
diff --git a/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.test.tsx
index 3dbf93cc7cfd7ab12ea05f1d0a3da12208e7c17d..7d514e917e452c4c0f64e81846c12e3e65a7ba35 100644
--- a/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.test.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.test.tsx
@@ -8,6 +8,8 @@ const options = [
{ id: '3', label: 'Option 3' },
];
+const currentOptions = [{ id: '2', label: 'Option 2' }];
+
describe('CheckboxFilter - component', () => {
it('should render CheckboxFilter properly', () => {
render(<CheckboxFilter options={options} currentOptions={[]} />);
@@ -37,6 +39,23 @@ describe('CheckboxFilter - component', () => {
expect(onCheckedChange).toHaveBeenCalledWith([{ id: '1', label: 'Option 1' }]);
});
+ it('should handle radio value change', async () => {
+ const onCheckedChange = jest.fn();
+ render(
+ <CheckboxFilter
+ currentOptions={[]}
+ type="radio"
+ options={options}
+ onCheckedChange={onCheckedChange}
+ />,
+ );
+ const checkbox = screen.getByLabelText('Option 1');
+
+ fireEvent.click(checkbox);
+
+ expect(onCheckedChange).toHaveBeenCalledWith([{ id: '1', label: 'Option 1' }]);
+ });
+
it('should call onFilterChange when searching new term', async () => {
const onFilterChange = jest.fn();
render(
@@ -79,6 +98,28 @@ describe('CheckboxFilter - component', () => {
{ id: '2', label: 'Option 2' },
]);
});
+
+ it('should handle multiple change of radio selection', () => {
+ const onCheckedChange = jest.fn();
+ render(
+ <CheckboxFilter
+ currentOptions={[]}
+ options={options}
+ onCheckedChange={onCheckedChange}
+ type="radio"
+ />,
+ );
+
+ const checkbox1 = screen.getByLabelText('Option 1');
+ const checkbox2 = screen.getByLabelText('Option 2');
+
+ fireEvent.click(checkbox1);
+ expect(onCheckedChange).toHaveBeenCalledWith([{ id: '1', label: 'Option 1' }]);
+
+ fireEvent.click(checkbox2);
+ expect(onCheckedChange).toHaveBeenCalledWith([{ id: '2', label: 'Option 2' }]);
+ });
+
it('should handle unchecking a checkbox', () => {
const onCheckedChange = jest.fn();
render(
@@ -113,4 +154,15 @@ describe('CheckboxFilter - component', () => {
expect(checkboxLabel).toBeInTheDocument();
});
});
+
+ it('should set checked param based on currentOptions prop', async () => {
+ render(<CheckboxFilter options={options} currentOptions={currentOptions} />);
+ const option1: HTMLInputElement = screen.getByLabelText('Option 1');
+ const option2: HTMLInputElement = screen.getByLabelText('Option 2');
+ const option3: HTMLInputElement = screen.getByLabelText('Option 3');
+
+ expect(option1.checked).toBe(false);
+ expect(option2.checked).toBe(true);
+ expect(option3.checked).toBe(false);
+ });
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
index 00c556b71ce7fd73f07b0c106c4af87d8c92b32b..a07ae4c58f7b2fa3ec8ef4f652c1d4c9dbca075b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
@@ -1,3 +1,6 @@
+import { ExportContextType } from './ExportCompound.types';
+import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
+
export const ANNOTATIONS_TYPE = {
ELEMENTS: 'Elements',
NETWORK: 'Network',
@@ -43,3 +46,23 @@ export const NETWORK_COLUMNS = [
'modelId',
'mapName',
];
+
+export const EXPORT_CONTEXT_DEFAULT_VALUE: ExportContextType = {
+ setAnnotations: () => {},
+ setIncludedCompartmentPathways: () => {},
+ setExcludedCompartmentPathways: () => {},
+ setModels: () => {},
+ setImageSize: () => {},
+ setImageFormats: () => {},
+ handleDownloadElements: () => {},
+ handleDownloadNetwork: () => {},
+ handleDownloadGraphics: () => {},
+ data: {
+ annotations: [],
+ includedCompartmentPathways: [],
+ excludedCompartmentPathways: [],
+ models: [],
+ imageFormats: [],
+ imageSize: DEFAULT_IMAGE_SIZE,
+ },
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
index 846ad0bd75479b8b90cb69ffe20eda73a719f72c..86f005f09d4dbf9e8ec5643e825c6c0cf33f0486 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
@@ -1,44 +1,5 @@
import { createContext } from 'react';
-import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
-import { DEFAULT_IMAGE_SIZE } from './ImageSize/ImageSize.constants';
-import { ImageSize } from './ImageSize/ImageSize.types';
+import { EXPORT_CONTEXT_DEFAULT_VALUE } from './ExportCompound.constant';
+import { ExportContextType } from './ExportCompound.types';
-export type ExportContextType = {
- setAnnotations: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
- setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- handleDownloadElements: () => void;
- handleDownloadNetwork: () => void;
- handleDownloadGraphics: () => void;
- data: {
- annotations: CheckboxItem[];
- includedCompartmentPathways: CheckboxItem[];
- excludedCompartmentPathways: CheckboxItem[];
- models: CheckboxItem[];
- imageSize: ImageSize;
- imageFormats: CheckboxItem[];
- };
-};
-
-export const ExportContext = createContext<ExportContextType>({
- setAnnotations: () => {},
- setIncludedCompartmentPathways: () => {},
- setExcludedCompartmentPathways: () => {},
- setModels: () => {},
- setImageSize: () => {},
- setImageFormats: () => {},
- handleDownloadElements: () => {},
- handleDownloadNetwork: () => {},
- handleDownloadGraphics: () => {},
- data: {
- annotations: [],
- includedCompartmentPathways: [],
- excludedCompartmentPathways: [],
- models: [],
- imageFormats: [],
- imageSize: DEFAULT_IMAGE_SIZE,
- },
-});
+export const ExportContext = createContext<ExportContextType>(EXPORT_CONTEXT_DEFAULT_VALUE);
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b6e70397e6d6edb1ca1a5220aebb814c3518ff4e
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.types.ts
@@ -0,0 +1,22 @@
+import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.types';
+import { ImageSize } from './ImageSize/ImageSize.types';
+
+export type ExportContextType = {
+ setAnnotations: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+ setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+ setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+ setModels: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+ setImageSize: React.Dispatch<React.SetStateAction<ImageSize>>;
+ setImageFormats: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
+ handleDownloadElements: () => void;
+ handleDownloadNetwork: () => void;
+ handleDownloadGraphics: () => void;
+ data: {
+ annotations: CheckboxItem[];
+ includedCompartmentPathways: CheckboxItem[];
+ excludedCompartmentPathways: CheckboxItem[];
+ models: CheckboxItem[];
+ imageSize: ImageSize;
+ imageFormats: CheckboxItem[];
+ };
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8c6df3921c6a70d96caeb543b922cd4e6de6ac8
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.test.tsx
@@ -0,0 +1,131 @@
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
+import {
+ CONFIGURATION_IMAGE_FORMATS_MOCK,
+ CONFIGURATION_IMAGE_FORMATS_TYPES_MOCK,
+} from '@/models/mocks/configurationFormatsMock';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { ImageFormat } from './ImageFormat.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <ImageFormat />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('ImageFormat - component', () => {
+ it('should display formats checkboxes when fetching data is successful', async () => {
+ renderComponent({
+ configuration: {
+ ...INITIAL_STORE_STATE_MOCK.configuration,
+ main: {
+ ...INITIAL_STORE_STATE_MOCK.configuration.main,
+ data: {
+ ...configurationFixture,
+ imageFormats: CONFIGURATION_IMAGE_FORMATS_MOCK,
+ },
+ },
+ },
+ });
+
+ expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+
+ act(() => {
+ navigationButton.click();
+ });
+
+ expect(screen.getByText('Image format')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('checkbox-filter')).toBeInTheDocument();
+
+ CONFIGURATION_IMAGE_FORMATS_TYPES_MOCK.map(formatName =>
+ expect(screen.getByLabelText(formatName)).toBeInTheDocument(),
+ );
+ });
+ });
+
+ it('should not display formats checkboxes when fetching data fails', async () => {
+ renderComponent({
+ configuration: {
+ ...INITIAL_STORE_STATE_MOCK.configuration,
+ main: {
+ ...INITIAL_STORE_STATE_MOCK.configuration.main,
+ loading: 'failed',
+ },
+ },
+ });
+
+ expect(screen.getByText('Image format')).toBeInTheDocument();
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+
+ act(() => {
+ navigationButton.click();
+ });
+
+ expect(screen.queryByTestId('checkbox-filter')).not.toBeInTheDocument();
+ });
+
+ it('should not display formats checkboxes when fetched data is empty', async () => {
+ renderComponent({
+ configuration: {
+ ...INITIAL_STORE_STATE_MOCK.configuration,
+ main: {
+ ...INITIAL_STORE_STATE_MOCK.configuration.main,
+ data: {
+ ...configurationFixture,
+ modelFormats: [],
+ imageFormats: [],
+ },
+ },
+ },
+ });
+
+ expect(screen.getByText('Image format')).toBeInTheDocument();
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+
+ act(() => {
+ navigationButton.click();
+ });
+
+ expect(screen.queryByTestId('checkbox-filter')).not.toBeInTheDocument();
+ });
+
+ it('should display loading message when fetching data is pending', async () => {
+ renderComponent({
+ configuration: {
+ ...INITIAL_STORE_STATE_MOCK.configuration,
+ main: {
+ ...INITIAL_STORE_STATE_MOCK.configuration.main,
+ loading: 'pending',
+ },
+ },
+ });
+
+ expect(screen.getByText('Image format')).toBeInTheDocument();
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+
+ act(() => {
+ navigationButton.click();
+ });
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx
index 8c988053dbeb3f99c7902db64143253a90f433e0..48ab881789d2445fc5f67e5f6a7ffc6c0b7c85e1 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageFormat/ImageFormat.component.tsx
@@ -1,5 +1,8 @@
import { ZERO } from '@/constants/common';
-import { imageHandlersSelector } from '@/redux/configuration/configuration.selectors';
+import {
+ imageHandlersSelector,
+ loadingConfigurationMainSelector,
+} from '@/redux/configuration/configuration.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { useContext } from 'react';
import { CheckboxFilter } from '../../CheckboxFilter';
@@ -10,17 +13,20 @@ export const ImageFormat = (): React.ReactNode => {
const { setImageFormats, data } = useContext(ExportContext);
const currentImageFormats = data.imageFormats;
const imageHandlers = useAppSelector(imageHandlersSelector);
- const isPending = Object.keys(imageHandlers).length === ZERO;
+ const loadingConfigurationMain = useAppSelector(loadingConfigurationMainSelector);
+ const isPending = loadingConfigurationMain === 'pending';
- const mappedElementAnnotations = Object.entries(imageHandlers).map(([name, handler]) => ({
- id: handler,
- label: name,
- }));
+ const mappedElementAnnotations = Object.entries(imageHandlers)
+ .filter(([, handler]) => Boolean(handler))
+ .map(([name, handler]) => ({
+ id: handler,
+ label: name,
+ }));
return (
<CollapsibleSection title="Image format">
{isPending && <p>Loading...</p>}
- {!isPending && mappedElementAnnotations && (
+ {!isPending && mappedElementAnnotations.length > ZERO && (
<CheckboxFilter
options={mappedElementAnnotations}
currentOptions={currentImageFormats}
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8affdcd88d2778baffcfd7932cb46c13b3784dc7
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.test.tsx
@@ -0,0 +1,151 @@
+/* eslint-disable no-magic-numbers */
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Export } from '../ExportCompound.component';
+import { ImageSize } from './ImageSize.component';
+import { ImageSize as ImageSizeType } from './ImageSize.types';
+
+const renderComponent = (initialStore?: InitialStoreState): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStore);
+
+ return (
+ render(
+ <Wrapper>
+ <Export>
+ <ImageSize />
+ </Export>
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('ImageSize - component', () => {
+ describe('width input', () => {
+ it('renders input with valid value', () => {
+ renderComponent();
+
+ const widthInput: HTMLInputElement = screen.getByLabelText('export graphics width input');
+ expect(widthInput).toBeInTheDocument();
+ expect(widthInput.value).toBe('600');
+ });
+
+ // MAX_WIDTH 600
+ // MAX_HEIGHT 200
+ const widthCases: [number, ImageSizeType][] = [
+ [
+ // default
+ 600,
+ {
+ width: 600,
+ height: 200,
+ },
+ ],
+ [
+ // aspect ratio test
+ 100,
+ {
+ width: 100,
+ height: 33,
+ },
+ ],
+ [
+ // transform to integer
+ 120.2137,
+ {
+ width: 120,
+ height: 40,
+ },
+ ],
+ [
+ // max width
+ 997,
+ {
+ width: 600,
+ height: 200,
+ },
+ ],
+ ];
+
+ it.each(widthCases)(
+ 'handles input events by setting correct values',
+ async (newWidth, newImageSize) => {
+ renderComponent();
+
+ const widthInput: HTMLInputElement = screen.getByLabelText('export graphics width input');
+ const heightInput: HTMLInputElement = screen.getByLabelText('export graphics height input');
+
+ fireEvent.change(widthInput, { target: { value: `${newWidth}` } });
+
+ expect(widthInput).toHaveValue(newImageSize.width);
+ expect(heightInput).toHaveValue(newImageSize.height);
+ },
+ );
+ });
+
+ describe('height input', () => {
+ it('renders input', () => {
+ renderComponent();
+
+ const heightInput: HTMLInputElement = screen.getByLabelText('export graphics height input');
+ expect(heightInput).toBeInTheDocument();
+ expect(heightInput.value).toBe('200');
+ });
+
+ // MAX_WIDTH 600
+ // MAX_HEIGHT 200
+ const heightCases: [number, ImageSizeType][] = [
+ [
+ // default
+ 200,
+ {
+ width: 600,
+ height: 200,
+ },
+ ],
+ [
+ // aspect ratio test
+ 100,
+ {
+ width: 300,
+ height: 100,
+ },
+ ],
+ [
+ // transform to integer
+ 120.2137,
+ {
+ width: 361,
+ height: 120,
+ },
+ ],
+ [
+ // max height
+ 997,
+ {
+ width: 600,
+ height: 200,
+ },
+ ],
+ ];
+
+ it.each(heightCases)(
+ 'handles input events by setting correct values',
+ async (newHeight, newImageSize) => {
+ renderComponent();
+
+ const widthInput: HTMLInputElement = screen.getByLabelText('export graphics width input');
+ const heightInput: HTMLInputElement = screen.getByLabelText('export graphics height input');
+
+ fireEvent.change(heightInput, { target: { value: `${newHeight}` } });
+
+ expect(widthInput).toHaveValue(newImageSize.width);
+ expect(heightInput).toHaveValue(newImageSize.height);
+ },
+ );
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.tsx
index e2af54768e645d64245cfe6963be62319c79f5d9..1a66c44e45e0895fb78380222618fa74666cb59b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.component.tsx
@@ -14,7 +14,10 @@ export const ImageSize = (): React.ReactNode => {
name="width"
value={width}
type="number"
- onChange={(e): void => handleChangeWidth(Number(e.target.value))}
+ aria-label="export graphics width input"
+ onChange={(e): void => {
+ handleChangeWidth(Number(e.target.value));
+ }}
/>
</label>
<label className="flex h-9 items-center gap-4">
@@ -24,6 +27,7 @@ export const ImageSize = (): React.ReactNode => {
name="height"
value={height}
type="number"
+ aria-label="export graphics height input"
onChange={(e): void => handleChangeHeight(Number(e.target.value))}
/>
</label>
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.constants.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.constants.ts
index bb098477e3855aa0af21b664cc642afe69f2cb40..c60ea1d751868d12d199b243da2087c828975739 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.constants.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/ImageSize.constants.ts
@@ -1,4 +1,3 @@
-import { ONE } from '@/constants/common';
import { ImageSize, ModelAspectRatios } from './ImageSize.types';
export const DEFAULT_IMAGE_WIDTH = 600;
@@ -10,6 +9,6 @@ export const DEFAULT_IMAGE_SIZE: ImageSize = {
};
export const DEFAULT_MODEL_ASPECT_RATIOS: ModelAspectRatios = {
- vertical: ONE,
- horizontal: ONE,
+ vertical: DEFAULT_IMAGE_HEIGHT / DEFAULT_IMAGE_WIDTH,
+ horizontal: DEFAULT_IMAGE_WIDTH / DEFAULT_IMAGE_HEIGHT,
};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useExportGraphicsSelectedModel.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useExportGraphicsSelectedModel.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..20ac3edf4839feec27757384638b0323ad8d4ace
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useExportGraphicsSelectedModel.test.tsx
@@ -0,0 +1,98 @@
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { renderHook } from '@testing-library/react';
+import { EXPORT_CONTEXT_DEFAULT_VALUE } from '../../ExportCompound.constant';
+import { getExportContextWithReduxWrapper } from '../../utils/getExportContextWithReduxWrapper';
+import { useExportGraphicsSelectedModel } from './useExportGraphicsSelectedModel';
+
+describe('useExportGraphicsSelectedModel - util', () => {
+ describe('when current selected models is empty', () => {
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [],
+ },
+ },
+ {
+ models: {
+ data: [],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const { result } = renderHook(() => useExportGraphicsSelectedModel(), {
+ wrapper: Wrapper,
+ });
+
+ it('should return undefined', () => {
+ expect(result.current).toBeUndefined();
+ });
+ });
+
+ describe('when current selected models has one element', () => {
+ describe('when redux models has selected model', () => {
+ const selectedModel = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [
+ {
+ id: selectedModel.idObject.toString(),
+ label: selectedModel.name,
+ },
+ ],
+ },
+ },
+ {
+ models: {
+ data: MODELS_MOCK_SHORT,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const { result } = renderHook(() => useExportGraphicsSelectedModel(), {
+ wrapper: Wrapper,
+ });
+
+ it('should return valid model from redux', () => {
+ expect(result.current).toEqual(selectedModel);
+ });
+ });
+
+ describe('when redux models has not selected model', () => {
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [],
+ },
+ },
+ {
+ models: {
+ data: MODELS_MOCK_SHORT,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const { result } = renderHook(() => useExportGraphicsSelectedModel(), {
+ wrapper: Wrapper,
+ });
+
+ it('should return undefined', () => {
+ expect(result.current).toBeUndefined();
+ });
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a182496ec28a34e4a70556cf03a87ac885a16b83
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.test.ts
@@ -0,0 +1,230 @@
+/* eslint-disable no-magic-numbers */
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { renderHook } from '@testing-library/react';
+import { EXPORT_CONTEXT_DEFAULT_VALUE } from '../../ExportCompound.constant';
+import { getExportContextWithReduxWrapper } from '../../utils/getExportContextWithReduxWrapper';
+import { DEFAULT_IMAGE_SIZE } from '../ImageSize.constants';
+import { ImageSize } from '../ImageSize.types';
+import { useImageSize } from './useImageSize';
+
+describe('useImageSize - hook', () => {
+ describe('when there is no selected model', () => {
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [],
+ },
+ },
+ {
+ models: {
+ data: [],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const { result } = renderHook(() => useImageSize(), {
+ wrapper: Wrapper,
+ });
+
+ it('should should return default image size', () => {
+ const { width, height } = result.current || {};
+ expect({ width, height }).toEqual(DEFAULT_IMAGE_SIZE);
+ });
+ });
+
+ describe('when there is a selected model', () => {
+ const selectedModel = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+ const setImageSize = jest.fn();
+
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ setImageSize,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [
+ {
+ id: selectedModel.idObject.toString(),
+ label: selectedModel.name,
+ },
+ ],
+ imageSize: DEFAULT_IMAGE_SIZE,
+ },
+ },
+ {
+ models: {
+ data: MODELS_MOCK_SHORT,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ renderHook(() => useImageSize(), {
+ wrapper: Wrapper,
+ });
+
+ it('should should set size of selected model', () => {
+ expect(setImageSize).toHaveBeenCalledWith({
+ width: 26779,
+ height: 13503,
+ });
+ });
+ });
+
+ describe('when always', () => {
+ describe('handleChangeHeight', () => {
+ const selectedModel = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+ const setImageSize = jest.fn();
+
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ setImageSize,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [
+ {
+ id: selectedModel.idObject.toString(),
+ label: selectedModel.name,
+ },
+ ],
+ imageSize: DEFAULT_IMAGE_SIZE,
+ },
+ },
+ {
+ models: {
+ data: MODELS_MOCK_SHORT,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const {
+ result: {
+ current: { handleChangeHeight },
+ },
+ } = renderHook(() => useImageSize(), {
+ wrapper: Wrapper,
+ });
+
+ // MAX_WIDTH 26779.25
+ // MAX_HEIGHT 13503.0
+
+ const heightCases: [number, ImageSize][] = [
+ [
+ // aspect ratio test
+ 1000,
+ {
+ width: 1983,
+ height: 1000,
+ },
+ ],
+ [
+ // transform to integer
+ 997.2137,
+ {
+ width: 1978,
+ height: 997,
+ },
+ ],
+ [
+ // max height
+ 26779000,
+ {
+ width: 26779,
+ height: 13503,
+ },
+ ],
+ ];
+
+ it.each(heightCases)(
+ 'should set valid height and width values',
+ (newHeight, newImageSize) => {
+ handleChangeHeight(newHeight);
+
+ expect(setImageSize).toHaveBeenLastCalledWith(newImageSize);
+ },
+ );
+ });
+
+ describe('handleChangeWidth', () => {
+ const selectedModel = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+ const setImageSize = jest.fn();
+
+ const { Wrapper } = getExportContextWithReduxWrapper(
+ {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE,
+ setImageSize,
+ data: {
+ ...EXPORT_CONTEXT_DEFAULT_VALUE.data,
+ models: [
+ {
+ id: selectedModel.idObject.toString(),
+ label: selectedModel.name,
+ },
+ ],
+ imageSize: DEFAULT_IMAGE_SIZE,
+ },
+ },
+ {
+ models: {
+ data: MODELS_MOCK_SHORT,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ },
+ );
+
+ const {
+ result: {
+ current: { handleChangeWidth },
+ },
+ } = renderHook(() => useImageSize(), {
+ wrapper: Wrapper,
+ });
+
+ // MAX_WIDTH 26779.25
+ // MAX_HEIGHT 13503.0
+
+ const widthCases: [number, ImageSize][] = [
+ [
+ // aspect ratio test
+ 1000,
+ {
+ width: 1000,
+ height: 504,
+ },
+ ],
+ [
+ // transform to integer
+ 997.2137,
+ {
+ width: 997,
+ height: 503,
+ },
+ ],
+ [
+ // max width
+ 26779000,
+ {
+ width: 26779,
+ height: 13503,
+ },
+ ],
+ ];
+
+ it.each(widthCases)('should set valid height and width values', (newWidth, newImageSize) => {
+ handleChangeWidth(newWidth);
+
+ expect(setImageSize).toHaveBeenLastCalledWith(newImageSize);
+ });
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
index 97adb25e73c3e9984dfcdd182db38a081c4df3a0..da0c0c561ef0b583dc705d236970d867b98f909b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useImageSize.ts
@@ -1,10 +1,11 @@
-import { ZERO } from '@/constants/common';
import { MapModel } from '@/types/models';
+import { numberToInt } from '@/utils/number/numberToInt';
import { useCallback, useContext, useEffect } from 'react';
import { ExportContext } from '../../ExportCompound.context';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '../ImageSize.constants';
import { ImageSize } from '../ImageSize.types';
import { useExportGraphicsSelectedModel } from './useExportGraphicsSelectedModel';
-import { useModelAspectRatios } from './useModelAspectRatios';
+import { getModelAspectRatios } from './useModelAspectRatios';
interface UseImageSizeResults {
handleChangeWidth(width: number): void;
@@ -15,53 +16,59 @@ interface UseImageSizeResults {
export const useImageSize = (): UseImageSizeResults => {
const selectedModel = useExportGraphicsSelectedModel();
- const aspectRatios = useModelAspectRatios(selectedModel);
+ const aspectRatios = getModelAspectRatios(selectedModel);
const { data, setImageSize } = useContext(ExportContext);
const { imageSize } = data;
+ const maxWidth = selectedModel?.width || DEFAULT_IMAGE_WIDTH;
+ const maxHeight = selectedModel?.height || DEFAULT_IMAGE_HEIGHT;
- const handleChangeImageSize = useCallback(
- (newImageSize: Partial<ImageSize>): void => {
- setImageSize((currentImageSize: ImageSize): ImageSize => {
- const { width, height }: ImageSize = {
- ...currentImageSize,
- ...newImageSize,
- };
+ const getNormalizedImageSize = useCallback(
+ (newImageSize: ImageSize): ImageSize => {
+ const newWidth = newImageSize.width;
+ const newHeight = newImageSize.height;
- return {
- width: Number(width.toFixed(ZERO)),
- height: Number(height.toFixed(ZERO)),
- };
- });
+ const widthMinMax = Math.min(maxWidth, newWidth);
+ const heightMinMax = Math.min(maxHeight, newHeight);
+
+ const widthInt = numberToInt(widthMinMax);
+ const heightInt = numberToInt(heightMinMax);
+
+ return {
+ width: widthInt,
+ height: heightInt,
+ };
},
- [setImageSize],
+ [maxWidth, maxHeight],
);
const setDefaultModelImageSize = useCallback(
(model: MapModel): void => {
- handleChangeImageSize({
+ const newImageSize = getNormalizedImageSize({
width: model.width,
height: model.height,
});
+
+ setImageSize(newImageSize);
},
- [handleChangeImageSize],
+ [getNormalizedImageSize, setImageSize],
);
- const handleChangeWidth = (newWidth: number): void => {
- const width = Math.min(selectedModel?.width || newWidth, newWidth);
-
- handleChangeImageSize({
+ const handleChangeWidth = (width: number): void => {
+ const newImageSize = getNormalizedImageSize({
width,
height: width / aspectRatios.horizontal,
});
- };
- const handleChangeHeight = (newHeight: number): void => {
- const height = Math.min(selectedModel?.height || newHeight, newHeight);
+ setImageSize(newImageSize);
+ };
- handleChangeImageSize({
+ const handleChangeHeight = (height: number): void => {
+ const newImageSize = getNormalizedImageSize({
height,
width: height / aspectRatios.vertical,
});
+
+ setImageSize(newImageSize);
};
useEffect(() => {
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42468de1d2911fb6f17ccca659874d892eaf7ab3
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.test.ts
@@ -0,0 +1,45 @@
+import { MapModel } from '@/types/models';
+import { DEFAULT_MODEL_ASPECT_RATIOS } from '../ImageSize.constants';
+import { ModelAspectRatios } from '../ImageSize.types';
+import { getModelAspectRatios } from './useModelAspectRatios';
+
+describe('useModelAspectRatios - hook', () => {
+ describe('when model is not present', () => {
+ const model = undefined;
+
+ it('should return default model aspect ratio', () => {
+ const result = getModelAspectRatios(model);
+ expect(result).toEqual(DEFAULT_MODEL_ASPECT_RATIOS);
+ });
+ });
+
+ describe('when model is present', () => {
+ const modelCases: [Pick<MapModel, 'width' | 'height'>, ModelAspectRatios][] = [
+ [
+ {
+ width: 1000,
+ height: 500,
+ },
+ {
+ vertical: 0.5,
+ horizontal: 2,
+ },
+ ],
+ [
+ {
+ width: 4200,
+ height: 420,
+ },
+ {
+ vertical: 0.1,
+ horizontal: 10,
+ },
+ ],
+ ];
+
+ it.each(modelCases)('should return valid model aspect ratio', (model, expectedResult) => {
+ const result = getModelAspectRatios(model);
+ expect(result).toEqual(expectedResult);
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.ts
index 55ecb40b3c17a3c12cf775f10b51ccac70e33250..c4f23862eac2349a5f2e74ca217e03a06806d320 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ImageSize/utils/useModelAspectRatios.ts
@@ -2,7 +2,7 @@ import { MapModel } from '@/types/models';
import { DEFAULT_MODEL_ASPECT_RATIOS } from '../ImageSize.constants';
import { ModelAspectRatios } from '../ImageSize.types';
-export const useModelAspectRatios = (
+export const getModelAspectRatios = (
model: Pick<MapModel, 'width' | 'height'> | undefined,
): ModelAspectRatios => {
if (!model) {
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getExportContextWithReduxWrapper.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getExportContextWithReduxWrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d84ad2413c15fac273dbc6995b2dade33ad7928
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getExportContextWithReduxWrapper.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable react/no-multi-comp */
+import { StoreType } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { EXPORT_CONTEXT_DEFAULT_VALUE } from '../ExportCompound.constant';
+import { ExportContext } from '../ExportCompound.context';
+import { ExportContextType } from '../ExportCompound.types';
+
+interface WrapperProps {
+ children: React.ReactNode;
+}
+
+export type ComponentWrapper = ({ children }: WrapperProps) => JSX.Element;
+
+export type GetExportContextWithReduxWrapper = (
+ contextValue?: ExportContextType,
+ initialState?: InitialStoreState,
+) => {
+ Wrapper: ComponentWrapper;
+ store: StoreType;
+};
+
+export const getExportContextWithReduxWrapper: GetExportContextWithReduxWrapper = (
+ contextValue,
+ initialState,
+) => {
+ const { Wrapper: ReduxWrapper, store } = getReduxWrapperWithStore(initialState);
+
+ const ContextWrapper: ComponentWrapper = ({ children }) => {
+ return (
+ <ExportContext.Provider value={contextValue || EXPORT_CONTEXT_DEFAULT_VALUE}>
+ {children}
+ </ExportContext.Provider>
+ );
+ };
+
+ const ContextWrapperWithRedux: ComponentWrapper = ({ children }) => {
+ return (
+ <ReduxWrapper>
+ <ContextWrapper>{children}</ContextWrapper>
+ </ReduxWrapper>
+ );
+ };
+
+ return { Wrapper: ContextWrapperWithRedux, store };
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e6c4db9026bd78b950223fa64e5b3afe5161606
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.test.ts
@@ -0,0 +1,42 @@
+import { BASE_API_URL, PROJECT_ID } from '@/constants';
+import { GetGraphicsDownloadUrlProps, getGraphicsDownloadUrl } from './getGraphicsDownloadUrl';
+
+describe('getGraphicsDownloadUrl - util', () => {
+ const cases: [GetGraphicsDownloadUrlProps, string | undefined][] = [
+ [{}, undefined],
+ [
+ {
+ backgroundId: 50,
+ },
+ undefined,
+ ],
+ [
+ {
+ backgroundId: 50,
+ modelId: '30',
+ },
+ undefined,
+ ],
+ [
+ {
+ backgroundId: 50,
+ modelId: '30',
+ handler: 'any.handler.image',
+ },
+ undefined,
+ ],
+ [
+ {
+ backgroundId: 50,
+ modelId: '30',
+ handler: 'any.handler.image',
+ zoom: 7,
+ },
+ `${BASE_API_URL}/projects/${PROJECT_ID}/models/30:downloadImage?backgroundOverlayId=50&handlerClass=any.handler.image&zoomLevel=7`,
+ ],
+ ];
+
+ it.each(cases)('should return valid result', (input, result) => {
+ expect(getGraphicsDownloadUrl(input)).toBe(result);
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.ts
index b1ba06740d4e7342eb6c574dbb183c6cbf5c34bb..c4020e9899f75685c7b732db23dd246077d433e7 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getGraphicsDownloadUrl.ts
@@ -1,6 +1,6 @@
import { BASE_API_URL, PROJECT_ID } from '@/constants';
-interface GetGraphicsDownloadUrlProps {
+export interface GetGraphicsDownloadUrlProps {
backgroundId?: number;
modelId?: string;
handler?: string;
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getModelExportZoom.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getModelExportZoom.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..247ce802c96c25153d55fce4fc07a4eea5bbc431
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getModelExportZoom.test.ts
@@ -0,0 +1,45 @@
+/* eslint-disable no-magic-numbers */
+import { FIRST_ARRAY_ELEMENT, ZERO } from '@/constants/common';
+import { MODELS_MOCK_SHORT } from '@/models/mocks/modelsMock';
+import { getModelExportZoom } from './getModelExportZoom';
+
+describe('getModelExportZoom - util', () => {
+ describe('when there is no model', () => {
+ const model = undefined;
+ const exportWidth = 100;
+
+ it('should return return zero', () => {
+ expect(getModelExportZoom(exportWidth, model)).toBe(ZERO);
+ });
+ });
+
+ // Math.log2 of zero is -Infty
+ describe('when model width is zero', () => {
+ const model = {
+ ...MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT],
+ width: 0,
+ };
+ const exportWidth = 100;
+
+ it('should return return zero', () => {
+ expect(getModelExportZoom(exportWidth, model)).toBe(ZERO);
+ });
+ });
+
+ describe('when model is present and model width > ZERO', () => {
+ const model = MODELS_MOCK_SHORT[FIRST_ARRAY_ELEMENT];
+
+ // MAX_WIDTH 26779.25
+ // [zoom, width]
+ const cases: [number, number][] = [
+ [2, 100], // MIN ZOOM
+ [2.7142, 420],
+ [4.5391, 1488],
+ [9, 80000000], // MAX ZOOM
+ ];
+
+ it.each(cases)('should return export zoom=%s for width=%s', (zoom, width) => {
+ expect(getModelExportZoom(width, model)).toBeCloseTo(zoom);
+ });
+ });
+});
diff --git a/src/models/mocks/configurationFormatsMock.ts b/src/models/mocks/configurationFormatsMock.ts
index 8d6d4e8afa75491a2fcafee702da4320a633f1b9..34ec36a2e7bc287f63d45eef763b1c0b22c21637 100644
--- a/src/models/mocks/configurationFormatsMock.ts
+++ b/src/models/mocks/configurationFormatsMock.ts
@@ -29,3 +29,23 @@ export const CONFIGURATION_FORMATS_MOCK: ConfigurationFormatSchema[] = [
extension: 'gpml',
},
];
+
+export const CONFIGURATION_IMAGE_FORMATS_TYPES_MOCK: string[] = ['PNG image', 'PDF', 'SVG image'];
+
+export const CONFIGURATION_IMAGE_FORMATS_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',
+ },
+];
diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts
index 1df70472f77fcf701c08cad25c4a1c3e9c6e498c..69942398eb86b9b0306a75b377c84c0ef515b9f7 100644
--- a/src/redux/configuration/configuration.selectors.ts
+++ b/src/redux/configuration/configuration.selectors.ts
@@ -126,3 +126,8 @@ export const miramiTypesSelector = createSelector(
configurationMainSelector,
state => state?.miriamTypes,
);
+
+export const loadingConfigurationMainSelector = createSelector(
+ configurationSelector,
+ state => state?.main?.loading,
+);
diff --git a/src/utils/number/numberToInt.ts b/src/utils/number/numberToInt.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f69af1eb0c8e689a64419ae2efa3367ba9e19cc
--- /dev/null
+++ b/src/utils/number/numberToInt.ts
@@ -0,0 +1,10 @@
+import { ZERO } from '@/constants/common';
+
+export const numberToInt = (num: number): number => {
+ // zero or NaN
+ if (!num) {
+ return ZERO;
+ }
+
+ return Number(num.toFixed(ZERO));
+};