test: add tests for reaction/pin render module + map on click

src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitiesFeatures.ts

+import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types';
+import { ONE } from '@/constants/common';
+import { BioEntity } from '@/types/models';
+import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { Feature } from 'ol';
+import { getBioEntitySingleFeature } from './getBioEntitySingleFeature';
+
+export const getBioEntitiesFeatures = (
+  bioEntites: BioEntity[],
+  {
+    pointToProjection,
+    type,
+  }: {
+    pointToProjection: UsePointToProjectionResult;
+    type: PinType;
+  },
+): Feature[] => {
+  return bioEntites.map((bioEntity, index) =>
+    getBioEntitySingleFeature(bioEntity, {
+      pointToProjection,
+      type,
+      value: index + ONE,
+    }),
+  );
+};

src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntititesFeatures.test.ts

+import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
+import {
+  GetReduxWrapperUsingSliceReducer,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import Style from 'ol/style/Style';
+import { getBioEntitiesFeatures } from './getBioEntitiesFeatures';
+
+const getPointToProjection = (
+  wrapper: ReturnType<GetReduxWrapperUsingSliceReducer>['Wrapper'],
+): UsePointToProjectionResult => {
+  const { result: usePointToProjectionHook } = renderHook(() => usePointToProjection(), {
+    wrapper,
+  });
+
+  return usePointToProjectionHook.current;
+};
+
+describe('getBioEntitiesFeatures - subUtil', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const bioEntititesContent = bioEntitiesContentFixture;
+  const bioEntities = bioEntititesContent.map(({ bioEntity }) => bioEntity);
+  const pointToProjection = getPointToProjection(Wrapper);
+
+  const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna', 'none'];
+
+  it.each(pinTypes)('should return array of instances of Feature with Style type=%s', type => {
+    const result = getBioEntitiesFeatures(bioEntities, {
+      pointToProjection,
+      type,
+    });
+
+    result.forEach(resultElement => {
+      expect(resultElement).toBeInstanceOf(Feature);
+      expect(resultElement.getStyle()).toBeInstanceOf(Style);
+    });
+  });
+});

src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.test.ts

+import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types';
+import { PINS_COLORS } from '@/constants/canvas';
+import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
+import {
+  GetReduxWrapperUsingSliceReducer,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import Style from 'ol/style/Style';
+import { getBioEntitySingleFeature } from './getBioEntitySingleFeature';
+import * as getPinStyle from './getPinStyle';
+
+jest.mock('./getPinStyle', () => ({
+  __esModule: true,
+  ...jest.requireActual('./getPinStyle'),
+}));
+
+const getPinStyleSpy = jest.spyOn(getPinStyle, 'getPinStyle');
+
+const getPointToProjection = (
+  wrapper: ReturnType<GetReduxWrapperUsingSliceReducer>['Wrapper'],
+): UsePointToProjectionResult => {
+  const { result: usePointToProjectionHook } = renderHook(() => usePointToProjection(), {
+    wrapper,
+  });
+
+  return usePointToProjectionHook.current;
+};
+
+describe('getBioEntitySingleFeature - subUtil', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const { bioEntity } = bioEntityContentFixture;
+  const pointToProjection = getPointToProjection(Wrapper);
+
+  const value = 1448;
+  const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna', 'none'];
+
+  it.each(pinTypes)('should return instance of Feature with Style type=%s', type => {
+    const result = getBioEntitySingleFeature(bioEntity, {
+      pointToProjection,
+      type,
+      value,
+    });
+
+    expect(result).toBeInstanceOf(Feature);
+    expect(result.getStyle()).toBeInstanceOf(Style);
+  });
+
+  it.each(pinTypes)('should run getPinStyle with valid args for type=%s', async type => {
+    getBioEntitySingleFeature(bioEntity, {
+      pointToProjection,
+      type,
+      value,
+    });
+
+    expect(getPinStyleSpy).toHaveBeenCalledWith({
+      color: PINS_COLORS[type],
+      value,
+    });
+  });
+});

src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts

+import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types';
+import { PINS_COLORS } from '@/constants/canvas';
+import { BioEntity } from '@/types/models';
+import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { Feature } from 'ol';
+import { getPinFeature } from './getPinFeature';
+import { getPinStyle } from './getPinStyle';
+
+export const getBioEntitySingleFeature = (
+  bioEntity: BioEntity,
+  {
+    pointToProjection,
+    type,
+    value,
+  }: {
+    pointToProjection: UsePointToProjectionResult;
+    type: PinType;
+    value: number;
+  },
+): Feature => {
+  const feature = getPinFeature(bioEntity, pointToProjection);
+  const style = getPinStyle({
+    color: PINS_COLORS[type],
+    value,
+  });
+
+  feature.setStyle(style);
+  return feature;
+};

src/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature.test.ts

+import { HALF } from '@/constants/dividers';
+import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import { getPinFeature } from './getPinFeature';
+
+describe('getPinFeature - subUtil', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const { bioEntity } = bioEntityContentFixture;
+  const { result: usePointToProjectionHook } = renderHook(() => usePointToProjection(), {
+    wrapper: Wrapper,
+  });
+  const pointToProjection = usePointToProjectionHook.current;
+  const result = getPinFeature(bioEntity, pointToProjection);
+
+  it('should return instance of Feature', () => {
+    expect(result).toBeInstanceOf(Feature);
+  });
+
+  it('should return id as name', () => {
+    expect(result.get('name')).toBe(bioEntity.id);
+  });
+
+  it('should return point parsed with point to projection', () => {
+    const [x, y] = result.getGeometry()?.getExtent() || [];
+    const geometryPoint = pointToProjection({
+      x: bioEntity.x + bioEntity.width / HALF,
+      y: bioEntity.y + bioEntity.height / HALF,
+    });
+
+    expect([x, y]).toStrictEqual(geometryPoint);
+  });
+});

src/components/Map/MapViewer/utils/config/pinsLayer/getPinFeature.ts

+import { HALF } from '@/constants/dividers';
+import { BioEntity } from '@/types/models';
+import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+
+export const getPinFeature = (
+  { x, y, width, height, id }: BioEntity,
+  pointToProjection: UsePointToProjectionResult,
+): Feature => {
+  const point = {
+    x: x + width / HALF,
+    y: y + height / HALF,
+  };
+
+  return new Feature({
+    geometry: new Point(pointToProjection(point)),
+    name: id,
+  });
+};

src/components/Map/MapViewer/utils/config/pinsLayer/getPinStyle.test.ts

+import { PIN_SIZE } from '@/constants/canvas';
+import { ZERO } from '@/constants/common';
+import Style from 'ol/style/Style';
+import { getPinStyle } from './getPinStyle';
+
+describe('getPinStyle - subUtil', () => {
+  const input = {
+    color: '#000000',
+    value: 420,
+  };
+
+  const result = getPinStyle(input);
+
+  it('should return instance of Style', () => {
+    expect(result).toBeInstanceOf(Style);
+  });
+
+  it('should return image object with displacament of pin size height', () => {
+    const image = result.getImage();
+    expect(image.getDisplacement()).toStrictEqual([ZERO, PIN_SIZE.height]);
+  });
+
+  it('should return image of pin size', () => {
+    const image = result.getImage();
+    expect(image.getImageSize()).toStrictEqual([PIN_SIZE.width, PIN_SIZE.height]);
+  });
+});

src/components/Map/MapViewer/utils/config/pinsLayer/getPinStyle.ts

+import { PIN_SIZE } from '@/constants/canvas';
+import { ZERO } from '@/constants/common';
+import Icon from 'ol/style/Icon';
+import Style from 'ol/style/Style';
+import { getCanvasIcon } from '../getCanvasIcon';
+
+export const getPinStyle = ({ value, color }: { value: number; color: string }): Style =>
+  new Style({
+    image: new Icon({
+      displacement: [ZERO, PIN_SIZE.height],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'pixels',
+      img: getCanvasIcon({
+        color,
+        value,
+      }),
+    }),
+  });

src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.test.ts

+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import VectorLayer from 'ol/layer/Vector';
+import { useOlMapPinsLayer } from './useOlMapPinsLayer';
+
+describe('useOlMapPinsLayer - util', () => {
+  const { Wrapper } = getReduxWrapperWithStore();
+
+  it('should return VectorLayer', () => {
+    const { result } = renderHook(() => useOlMapPinsLayer(), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current).toBeInstanceOf(VectorLayer);
+    expect(result.current.getSourceState()).toBe('ready');
+  });
+});

src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts → src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts

 /* eslint-disable no-magic-numbers */
-import { PIN_SIZE } from '@/constants/canvas';
 import { allBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
-import { BioEntity } from '@/types/models';
-import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
-import { Feature } from 'ol';
-import { Point as OlPoint } from 'ol/geom';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
 import BaseLayer from 'ol/layer/Base';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import Icon from 'ol/style/Icon';
-import Style from 'ol/style/Style';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { getCanvasIcon } from './getCanvasIcon';
-
-const getPinFeature = (
-  { x, y, width, height, name }: BioEntity,
-  pointToProjection: UsePointToProjectionResult,
-): Feature => {
-  const point = {
-    x: x + width / 2,
-    y: y + height / 2,
-  };
-
-  return new Feature({
-    geometry: new OlPoint(pointToProjection(point)),
-    name,
-  });
-};
-
-const getPinStyle = ({ value, color }: { value: number; color: string }): Style =>
-  new Style({
-    image: new Icon({
-      displacement: [0, PIN_SIZE.height],
-      anchorXUnits: 'fraction',
-      anchorYUnits: 'pixels',
-      img: getCanvasIcon({
-        color,
-        value,
-      }),
-    }),
-  });
+import { getBioEntitiesFeatures } from './getBioEntitiesFeatures';
 
 export const useOlMapPinsLayer = (): BaseLayer => {
   const pointToProjection = usePointToProjection();
-  const bioEntites = useSelector(allBioEntitesSelectorOfCurrentMap);
+  const contentBioEntites = useSelector(allBioEntitesSelectorOfCurrentMap);
 
   const bioEntityFeatures = useMemo(
     () =>
-      bioEntites.map(({ bioEntity }, index) => {
-        const feature = getPinFeature(bioEntity, pointToProjection);
-        const style = getPinStyle({
-          color: '#106AD7',
-          value: index + 1,
-        });
-
-        feature.setStyle(style);
-        return feature;
-      }),
-    [bioEntites, pointToProjection],
+      [getBioEntitiesFeatures(contentBioEntites, { pointToProjection, type: 'bioEntity' })].flat(),
+    [contentBioEntites, pointToProjection],
   );
 
   const vectorSource = useMemo(() => {

src/components/Map/MapViewer/utils/config/reactionsLayer/getLineFeature.test.ts

+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { LinePoint } from '@/types/reactions';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
+import {
+  GetReduxWrapperUsingSliceReducer,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import { Feature } from 'ol';
+import { LineString } from 'ol/geom';
+import { getLineFeature } from './getLineFeature';
+
+const getPointToProjection = (
+  wrapper: ReturnType<GetReduxWrapperUsingSliceReducer>['Wrapper'],
+): UsePointToProjectionResult => {
+  const { result: usePointToProjectionHook } = renderHook(() => usePointToProjection(), {
+    wrapper,
+  });
+
+  return usePointToProjectionHook.current;
+};
+
+describe('getLineFeature', () => {
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+  });
+  const pointToProjection = getPointToProjection(Wrapper);
+
+  const linePoints: LinePoint = [
+    {
+      x: 16,
+      y: 32,
+    },
+    {
+      x: 54,
+      y: 16,
+    },
+  ];
+
+  it('should return valid Feature object', () => {
+    const result = getLineFeature(linePoints, pointToProjection);
+
+    expect(result).toBeInstanceOf(Feature);
+  });
+
+  it('should return valid Feature object with LineString geometry', () => {
+    const result = getLineFeature(linePoints, pointToProjection);
+    const geometry = result.getGeometry();
+
+    expect(geometry).toBeInstanceOf(LineString);
+    // eslint-disable-next-line no-magic-numbers
+    expect(geometry?.getExtent()).toStrictEqual([Infinity, -238107693, Infinity, -238107693]);
+  });
+});

src/components/Map/MapViewer/utils/config/reactionsLayer/getLineFeature.ts

+import { LinePoint } from '@/types/reactions';
+import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
+import { Feature } from 'ol';
+import { LineString } from 'ol/geom';
+
+export const getLineFeature = (
+  linePoints: LinePoint,
+  pointToProjection: UsePointToProjectionResult,
+): Feature => {
+  const points = linePoints.map(pointToProjection);
+
+  return new Feature({
+    geometry: new LineString(points),
+  });
+};

src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.test.ts

+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { renderHook } from '@testing-library/react';
+import VectorLayer from 'ol/layer/Vector';
+import Style from 'ol/style/Style';
+import { useOlMapReactionsLayer } from './useOlMapReactionsLayer';
+
+describe('useOlMapReactionsLayer - util', () => {
+  const { Wrapper } = getReduxWrapperWithStore();
+
+  it('should return VectorLayer', () => {
+    const { result } = renderHook(() => useOlMapReactionsLayer(), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current).toBeInstanceOf(VectorLayer);
+    expect(result.current.getSourceState()).toBe('ready');
+  });
+
+  it('should return VectorLayer with valid Style', () => {
+    const { result } = renderHook(() => useOlMapReactionsLayer(), {
+      wrapper: Wrapper,
+    });
+
+    const vectorLayer = result.current;
+    const style = vectorLayer.getStyle();
+
+    expect(style).not.toBeInstanceOf(Array);
+    expect((style as Style).getFill()).toEqual({ color_: '#00AAFF' });
+    expect((style as Style).getStroke()).toMatchObject({ color_: '#00AAFF', width_: 6 });
+  });
+});

src/components/Map/MapViewer/utils/config/reactionsLayer/useOlMapReactionsLayer.ts

+/* eslint-disable no-magic-numbers */
+import { LINE_COLOR, LINE_WIDTH } from '@/constants/canvas';
+import { allReactionsSelectorOfCurrentMap } from '@/redux/reactions/reactions.selector';
+import { Reaction } from '@/types/models';
+import { LinePoint } from '@/types/reactions';
+import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import Geometry from 'ol/geom/Geometry';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
+import Style from 'ol/style/Style';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { getLineFeature } from './getLineFeature';
+
+const getReactionsLines = (reactions: Reaction[]): LinePoint[] =>
+  reactions.map(({ lines }) => lines.map(({ start, end }): LinePoint => [start, end])).flat();
+
+export const useOlMapReactionsLayer = (): VectorLayer<VectorSource<Geometry>> => {
+  const pointToProjection = usePointToProjection();
+  const reactions = useSelector(allReactionsSelectorOfCurrentMap);
+  const reactionsLines = getReactionsLines(reactions);
+
+  const reactionsLinesFeatures = useMemo(
+    () => reactionsLines.map(linePoint => getLineFeature(linePoint, pointToProjection)),
+    [reactionsLines, pointToProjection],
+  );
+
+  const vectorSource = useMemo(() => {
+    return new VectorSource({
+      features: [...reactionsLinesFeatures],
+    });
+  }, [reactionsLinesFeatures]);
+
+  const reactionsLayer = useMemo(
+    () =>
+      new VectorLayer({
+        source: vectorSource,
+        style: new Style({
+          fill: new Fill({ color: LINE_COLOR }),
+          stroke: new Stroke({ color: LINE_COLOR, width: LINE_WIDTH }),
+        }),
+      }),
+    [vectorSource],
+  );
+
+  return reactionsLayer;
+};

src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts

 /* eslint-disable no-magic-numbers */
+import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
 import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from '@/redux/map/map.constants';
-import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { initialMapStateFixture } from '@/redux/map/map.fixtures';
-import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { renderHook, waitFor } from '@testing-library/react';
 import { Map } from 'ol';
 import BaseLayer from 'ol/layer/Base';
 import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 import React from 'react';
-import { useOlMapLayers } from './useOlMapLayers';
 import { useOlMap } from '../useOlMap';
+import { useOlMapLayers } from './useOlMapLayers';
 
 const useRefValue = {
   current: null,
@@ -98,17 +98,24 @@ describe('useOlMapLayers - util', () => {
     return result.current;
   };
 
-  it('should return valid TileLayer instance', () => {
+  it('should return valid TileLayer instance [1]', () => {
     const result = getRenderedHookResults();
 
     expect(result[0]).toBeInstanceOf(TileLayer);
     expect(result[0].getSourceState()).toBe('ready');
   });
 
-  it('should return valid VectorLayer instance', () => {
+  it('should return valid VectorLayer instance [2]', () => {
     const result = getRenderedHookResults();
 
     expect(result[1]).toBeInstanceOf(VectorLayer);
     expect(result[1].getSourceState()).toBe('ready');
   });
+
+  it('should return valid VectorLayer instance [3]', () => {
+    const result = getRenderedHookResults();
+
+    expect(result[2]).toBeInstanceOf(VectorLayer);
+    expect(result[2].getSourceState()).toBe('ready');
+  });
 });

src/components/Map/MapViewer/utils/config/useOlMapLayers.ts

 /* eslint-disable no-magic-numbers */
 import { useEffect } from 'react';
 import { MapConfig, MapInstance } from '../../MapViewer.types';
-import { useOlMapPinsLayer } from './useOlMapPinsLayer';
+import { useOlMapPinsLayer } from './pinsLayer/useOlMapPinsLayer';
+import { useOlMapReactionsLayer } from './reactionsLayer/useOlMapReactionsLayer';
 import { useOlMapTileLayer } from './useOlMapTileLayer';
 
 interface UseOlMapLayersInput {
@@ -11,14 +12,15 @@ interface UseOlMapLayersInput {
 export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig['layers'] => {
   const tileLayer = useOlMapTileLayer();
   const pinsLayer = useOlMapPinsLayer();
+  const reactionsLayer = useOlMapReactionsLayer();
 
   useEffect(() => {
     if (!mapInstance) {
       return;
     }
 
-    mapInstance.setLayers([tileLayer, pinsLayer]);
-  }, [tileLayer, pinsLayer, mapInstance]);
+    mapInstance.setLayers([tileLayer, reactionsLayer, pinsLayer]);
+  }, [reactionsLayer, tileLayer, pinsLayer, mapInstance]);
 
-  return [tileLayer, pinsLayer];
+  return [tileLayer, pinsLayer, reactionsLayer];
 };

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getSearchResults.test.ts

+/* eslint-disable no-magic-numbers */
+import {
+  ELEMENT_SEARCH_RESULT_MOCK_ALIAS,
+  ELEMENT_SEARCH_RESULT_MOCK_REACTION,
+} from '@/models/mocks/elementSearchResultMock';
+import { apiPath } from '@/redux/apiPath';
+import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { HttpStatusCode } from 'axios';
+import { getSearchResults } from './getSearchResults';
+
+const mockedAxiosOldClient = mockNetworkResponse();
+
+describe('getSearchResults - util', () => {
+  describe('when results type is ALIAS', () => {
+    const { modelId } = ELEMENT_SEARCH_RESULT_MOCK_ALIAS;
+    const mapSize = {
+      width: 270,
+      height: 270,
+      tileSize: 256,
+      minZoom: 2,
+      maxZoom: 9,
+    };
+    const coordinate = [270, 270];
+    const point = { x: 540.0072763538013, y: 539.9927236461986 };
+
+    beforeAll(() => {
+      mockedAxiosOldClient
+        .onGet(apiPath.getSingleBioEntityContentsStringWithCoordinates(point, modelId))
+        .reply(HttpStatusCode.Ok, [ELEMENT_SEARCH_RESULT_MOCK_ALIAS]);
+    });
+
+    it('returns valid array of objects', async () => {
+      const result = await getSearchResults({
+        coordinate,
+        mapSize,
+        modelId,
+      });
+
+      expect(result).toEqual([ELEMENT_SEARCH_RESULT_MOCK_ALIAS]);
+    });
+  });
+
+  describe('when results type is REACTION', () => {
+    const { modelId } = ELEMENT_SEARCH_RESULT_MOCK_REACTION;
+    const mapSize = {
+      width: 270,
+      height: 270,
+      tileSize: 256,
+      minZoom: 2,
+      maxZoom: 9,
+    };
+    const coordinate = [270, 270];
+    const point = { x: 540.0072763538013, y: 539.9927236461986 };
+
+    beforeAll(() => {
+      mockedAxiosOldClient
+        .onGet(apiPath.getSingleBioEntityContentsStringWithCoordinates(point, modelId))
+        .reply(HttpStatusCode.Ok, [ELEMENT_SEARCH_RESULT_MOCK_REACTION]);
+    });
+
+    it('returns valid array of objects', async () => {
+      const result = await getSearchResults({
+        coordinate,
+        mapSize,
+        modelId,
+      });
+
+      expect(result).toEqual([ELEMENT_SEARCH_RESULT_MOCK_REACTION]);
+    });
+  });
+
+  describe('when results type is invalid', () => {
+    const { modelId } = ELEMENT_SEARCH_RESULT_MOCK_ALIAS;
+    const mapSize = {
+      width: 270,
+      height: 270,
+      tileSize: 256,
+      minZoom: 2,
+      maxZoom: 9,
+    };
+    const coordinate = [270, 270];
+    const point = { x: 540.0072763538013, y: 539.9927236461986 };
+
+    beforeAll(() => {
+      mockedAxiosOldClient
+        .onGet(apiPath.getSingleBioEntityContentsStringWithCoordinates(point, modelId))
+        .reply(HttpStatusCode.Ok, {
+          invalidObject: true,
+        });
+    });
+
+    it('should return undefined', async () => {
+      const result = await getSearchResults({
+        coordinate,
+        mapSize,
+        modelId,
+      });
+
+      expect(result).toEqual(undefined);
+    });
+  });
+});

src/components/Map/MapViewer/utils/listeners/mapSingleClick/getSearchResults.ts

+import { MapSize } from '@/redux/map/map.types';
+import { ElementSearchResult } from '@/types/models';
+import { latLngToPoint } from '@/utils/map/latLngToPoint';
+import { getElementsByPoint } from '@/utils/search/getElementsByCoordinates';
+import { Coordinate } from 'ol/coordinate';
+import { toLonLat } from 'ol/proj';
+
+interface GetSearchResultsInput {
+  coordinate: Coordinate;
+  mapSize: MapSize;
+  modelId: number;
+}
+
+export const getSearchResults = async ({
+  coordinate,
+  mapSize,
+  modelId,
+}: GetSearchResultsInput): Promise<ElementSearchResult[] | undefined> => {
+  const [lng, lat] = toLonLat(coordinate);
+  const point = latLngToPoint([lat, lng], mapSize);
+  return getElementsByPoint({ point, currentModelId: modelId });
+};

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts

+import { FIRST, SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { ELEMENT_SEARCH_RESULT_MOCK_ALIAS } from '@/models/mocks/elementSearchResultMock';
+import { apiPath } from '@/redux/apiPath';
+import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { waitFor } from '@testing-library/react';
+import { HttpStatusCode } from 'axios';
+import { handleAliasResults } from './handleAliasResults';
+
+const mockedAxiosOldClient = mockNetworkResponse();
+
+describe('handleAliasResults - util', () => {
+  const { store } = getReduxStoreWithActionsListener();
+  const { dispatch } = store;
+
+  mockedAxiosOldClient
+    .onGet(
+      apiPath.getBioEntityContentsStringWithQuery({
+        searchQuery: ELEMENT_SEARCH_RESULT_MOCK_ALIAS.id.toString(),
+        isPerfectMatch: true,
+      }),
+    )
+    .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+  beforeAll(async () => {
+    handleAliasResults(dispatch)(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
+  });
+
+  it('should run getBioEntityAction', async () => {
+    await waitFor(() => {
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
+      expect(actions[FIRST].type).toEqual('project/getMultiBioEntity/pending');
+    });
+  });
+});

src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.ts

+import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
+import { AppDispatch } from '@/redux/store';
+import { ElementSearchResult } from '@/types/models';
+
+/* prettier-ignore */
+export const handleAliasResults =
+  (dispatch: AppDispatch) =>
+    async ({ id }: ElementSearchResult): Promise<void> => {
+      dispatch(
+        getMultiBioEntity({
+          searchQueries: [id.toString()],
+          isPerfectMatch: true
+        }),
+      );
+    };