refactor(getoverlayfeatures): extraced helper functions to separate files, added tests

src/components/Map/MapViewer/utils/config/overlaysLayer/createOverlayGeometryFeature.test.ts

+import { createOverlayGeometryFeature } from './createOverlayGeometryFeature';
+
+describe('createOverlayGeometryFeature', () => {
+  it('should create a feature with the correct geometry and style', () => {
+    const xMin = 0;
+    const yMin = 0;
+    const xMax = 10;
+    const yMax = 10;
+    const colorHexString = '#FF0000';
+
+    const feature = createOverlayGeometryFeature([xMin, yMin, xMax, yMax], colorHexString);
+
+    expect(feature.getGeometry()!.getCoordinates()).toEqual([
+      [
+        [xMin, yMin],
+        [xMin, yMax],
+        [xMax, yMax],
+        [xMax, yMin],
+        [xMin, yMin],
+      ],
+    ]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - getStyle() is not typed
+    expect(feature.getStyle().getFill().getColor()).toEqual(colorHexString);
+  });
+
+  it('should create a feature with the correct geometry and style when using a different color', () => {
+    const xMin = -5;
+    const yMin = -5;
+    const xMax = 5;
+    const yMax = 5;
+    const colorHexString = '#00FF00';
+
+    const feature = createOverlayGeometryFeature([xMin, yMin, xMax, yMax], colorHexString);
+
+    expect(feature.getGeometry()!.getCoordinates()).toEqual([
+      [
+        [xMin, yMin],
+        [xMin, yMax],
+        [xMax, yMax],
+        [xMax, yMin],
+        [xMin, yMin],
+      ],
+    ]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - getStyle() is not typed
+    expect(feature.getStyle().getFill().getColor()).toEqual(colorHexString);
+  });
+});

src/components/Map/MapViewer/utils/config/overlaysLayer/createOverlayGeometryFeature.ts

+import { Fill, Style } from 'ol/style';
+import { fromExtent } from 'ol/geom/Polygon';
+import Feature from 'ol/Feature';
+import type Polygon from 'ol/geom/Polygon';
+
+export const createOverlayGeometryFeature = (
+  [xMin, yMin, xMax, yMax]: number[],
+  color: string,
+): Feature<Polygon> => {
+  const feature = new Feature({ geometry: fromExtent([xMin, yMin, xMax, yMax]) });
+  feature.setStyle(new Style({ fill: new Fill({ color }) }));
+  return feature;
+};

src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.test.ts

+import { OverlayBioEntityRender } from '@/types/OLrendering';
+import { getColorByAvailableProperties } from './getColorByAvailableProperties';
+
+describe('getColorByAvailableProperties', () => {
+  const ENTITY: OverlayBioEntityRender = {
+    id: 0,
+    modelId: 0,
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 0,
+    width: 0,
+    height: 0,
+    value: null,
+    overlayId: 0,
+    color: null,
+  };
+
+  const getHexTricolorGradientColorWithAlpha = jest.fn().mockReturnValue('#FFFFFF');
+  const defaultColor = '#000000';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return the result of getHexTricolorGradientColorWithAlpha if entity has a value equal to 0', () => {
+    const entity = { ...ENTITY, value: 0 };
+    const result = getColorByAvailableProperties(
+      entity,
+      getHexTricolorGradientColorWithAlpha,
+      defaultColor,
+    );
+
+    expect(result).toEqual('#FFFFFF');
+    expect(getHexTricolorGradientColorWithAlpha).toHaveBeenCalledWith(entity.value);
+  });
+
+  it('should return the result of getHexTricolorGradientColorWithAlpha if entity has a value', () => {
+    const entity = { ...ENTITY, value: -0.2137 };
+    const result = getColorByAvailableProperties(
+      entity,
+      getHexTricolorGradientColorWithAlpha,
+      defaultColor,
+    );
+
+    expect(result).toEqual('#FFFFFF');
+    expect(getHexTricolorGradientColorWithAlpha).toHaveBeenCalledWith(entity.value);
+  });
+
+  it('should return the result of convertDecimalToHex if entity has a color', () => {
+    const entity = { ...ENTITY, color: { rgb: -65536, alpha: 0 } }; // red  color
+
+    const result = getColorByAvailableProperties(
+      entity,
+      getHexTricolorGradientColorWithAlpha,
+      defaultColor,
+    );
+
+    expect(result).toEqual('#ff0000');
+    expect(getHexTricolorGradientColorWithAlpha).not.toHaveBeenCalled();
+  });
+
+  it('should return the default color if entity has neither a value nor a color', () => {
+    const result = getColorByAvailableProperties(
+      ENTITY,
+      getHexTricolorGradientColorWithAlpha,
+      defaultColor,
+    );
+
+    expect(result).toEqual('#000000');
+    expect(getHexTricolorGradientColorWithAlpha).not.toHaveBeenCalled();
+  });
+});

src/components/Map/MapViewer/utils/config/overlaysLayer/getColorByAvailableProperties.ts

+import { ZERO } from '@/constants/common';
+import type { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
+import { OverlayBioEntityRender } from '@/types/OLrendering';
+import { convertDecimalToHex } from '@/utils/convert/convertDecimalToHex';
+
+export const getColorByAvailableProperties = (
+  entity: OverlayBioEntityRender,
+  getHexTricolorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha,
+  defaultColor: string,
+): string => {
+  if (typeof entity.value === 'number') {
+    return getHexTricolorGradientColorWithAlpha(entity.value || ZERO);
+  }
+  if (entity.color) {
+    return convertDecimalToHex(entity.color.rgb);
+  }
+  return defaultColor;
+};

src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts

-import { ZERO } from '@/constants/common';
 import type { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
 import { OverlayBioEntityRender } from '@/types/OLrendering';
-import { convertDecimalToHex } from '@/utils/convert/convertDecimalToHex';
 import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
-import Feature from 'ol/Feature';
-import Polygon, { fromExtent } from 'ol/geom/Polygon';
-import { Fill, Style } from 'ol/style';
-
-export const createOverlayGeometryFeature = (
-  [xMin, yMin, xMax, yMax]: number[],
-  color: string,
-): Feature<Polygon> => {
-  const feature = new Feature({ geometry: fromExtent([xMin, yMin, xMax, yMax]) });
-  feature.setStyle(new Style({ fill: new Fill({ color }) }));
-  return feature;
-};
+import type Feature from 'ol/Feature';
+import type Polygon from 'ol/geom/Polygon';
+import { createOverlayGeometryFeature } from './createOverlayGeometryFeature';
+import { getColorByAvailableProperties } from './getColorByAvailableProperties';
 
 type GetOverlayFeaturesProps = {
   bioEntities: OverlayBioEntityRender[];
@@ -23,20 +13,6 @@ type GetOverlayFeaturesProps = {
   defaultColor: string;
 };
 
-export const getColorByAvailableProperties = (
-  entity: OverlayBioEntityRender,
-  getHexTricolorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha,
-  defaultColor: string,
-): string => {
-  if (entity.value) {
-    return getHexTricolorGradientColorWithAlpha(entity.value || ZERO);
-  }
-  if (entity.color) {
-    return convertDecimalToHex(entity.color.rgb);
-  }
-  return defaultColor;
-};
-
 export const getOverlayFeatures = ({
   bioEntities,
   pointToProjection,

src/constants/backgrounds.ts

+export const EMPTY_BACKGROUND_NAME = 'Empty';

src/redux/backgrounds/background.selectors.ts

 import { createSelector } from '@reduxjs/toolkit';
+import { EMPTY_BACKGROUND_NAME } from '@/constants/backgrounds';
 import { mapDataSelector } from '../map/map.selectors';
 import { rootSelector } from '../root/root.selectors';
 
@@ -37,8 +38,6 @@ export const currentBackgroundImagePathSelector = createSelector(
   image => (image ? image.path : ''),
 );
 
-const EMPTY_BACKGROUND_NAME = 'Empty';
-
 export const emptyBackgroundIdSelector = createSelector(backgroundsDataSelector, backgrounds => {
   const emptyBackground = backgrounds?.find(
     background => background.name === EMPTY_BACKGROUND_NAME,