test(search): added missing tests for search flow

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx

+/* eslint-disable no-magic-numbers */
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { StoreType } from '@/redux/store';
+import { BioEntityContent } from '@/types/models';
+import { BioEntitiesPinsList } from './BioEntitiesPinsList.component';
+
+const renderComponent = (
+  bioEnititesPins: BioEntityContent[],
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <BioEntitiesPinsList bioEnititesPins={bioEnititesPins} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('BioEntitiesPinsList - component ', () => {
+  it('should display list of bio entites elements', () => {
+    renderComponent(bioEntitiesContentFixture);
+
+    const bioEntityName = bioEntitiesContentFixture[1].bioEntity.fullName
+      ? bioEntitiesContentFixture[1].bioEntity.fullName
+      : '';
+
+    // First element in fixture has empty name
+    expect(screen.getAllByTestId('bio-entity-name')[0].textContent).toHaveLength(0);
+    expect(screen.getByText(bioEntityName, { exact: false })).toBeInTheDocument();
+  });
+});

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx

+/* eslint-disable no-magic-numbers */
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { StoreType } from '@/redux/store';
+import { BioEntity } from '@/types/models';
+import { BioEntitiesPinsListItem } from './BioEntitiesPinsListItem.component';
+
+const BIO_ENTITY = bioEntitiesContentFixture[2].bioEntity;
+
+const renderComponent = (
+  name: string,
+  pin: BioEntity,
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <BioEntitiesPinsListItem name={name} pin={pin} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('BioEntitiesPinsList - component ', () => {
+  it('should display name of bio entity element', () => {
+    renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+    const bioEntityName = bioEntitiesContentFixture[2].bioEntity.fullName
+      ? bioEntitiesContentFixture[2].bioEntity.fullName
+      : '';
+
+    expect(screen.getByText(bioEntityName, { exact: false })).toBeInTheDocument();
+  });
+  it('should display symbol of bio entity element', () => {
+    renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+    const bioEntitySymbol = bioEntitiesContentFixture[2].bioEntity.symbol
+      ? bioEntitiesContentFixture[2].bioEntity.symbol
+      : '';
+
+    expect(screen.getByText(bioEntitySymbol, { exact: false })).toBeInTheDocument();
+  });
+  it('should display empty string when symbol does not exist', () => {
+    renderComponent(
+      bioEntitiesContentFixture[1].bioEntity.name,
+      bioEntitiesContentFixture[1].bioEntity,
+    );
+
+    expect(screen.getAllByTestId('bio-entity-symbol')[0].textContent).toHaveLength(0);
+  });
+  it('should display string type of bio entity element', () => {
+    renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+    const bioEntityStringType = bioEntitiesContentFixture[2].bioEntity.stringType;
+
+    expect(screen.getByText(bioEntityStringType, { exact: false })).toBeInTheDocument();
+  });
+  it('should display synonyms of bio entity element', () => {
+    renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+    const firstBioEntitySynonym = bioEntitiesContentFixture[2].bioEntity.synonyms[0];
+    const secondBioEntitySynonym = bioEntitiesContentFixture[2].bioEntity.synonyms[1];
+
+    expect(screen.getByText(firstBioEntitySynonym, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondBioEntitySynonym, { exact: false })).toBeInTheDocument();
+  });
+  it('should display list of references for pin', () => {
+    renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+    const firstPinReferenceType = bioEntitiesContentFixture[2].bioEntity.references[0].type;
+    const firstPinReferenceResource = bioEntitiesContentFixture[2].bioEntity.references[0].resource;
+    const secondPinReferenceType = bioEntitiesContentFixture[2].bioEntity.references[1].type;
+    const secondPinReferenceResource =
+      bioEntitiesContentFixture[2].bioEntity.references[1].resource;
+
+    expect(screen.getByText(firstPinReferenceType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(firstPinReferenceResource, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinReferenceType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinReferenceResource, { exact: false })).toBeInTheDocument();
+  });
+});

src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx

@@ -21,10 +21,16 @@ export const BioEntitiesPinsListItem = ({
         </p>
       </div>
       <p className="font-bold leading-6">
-        Full name: <span className="w-full font-normal">{pin.fullName}</span>
+        Full name:{' '}
+        <span className="w-full font-normal" data-testid="bio-entity-name">
+          {pin.fullName ? pin.fullName : ``}
+        </span>
       </p>
       <p className="font-bold leading-6">
-        Symbol: <span className="w-full font-normal">{pin.symbol}</span>
+        Symbol:{' '}
+        <span className="w-full font-normal" data-testid="bio-entity-symbol">
+          {pin.symbol ? pin.symbol : ``}
+        </span>
       </p>
       <p className="font-bold leading-6">
         Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span>

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx

-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { StoreType } from '@/redux/store';
 import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
 import {
   InitialStoreState,
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
+import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
 import { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem.component';
 
+const SECOND_STEP = 2;
+
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
@@ -27,9 +30,36 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
 };
 
 describe('BioEntitiesSubmapItem - component', () => {
-  it('should display map name,number of elements, icon', () => {
+  it('should display map name, number of elements, icon', () => {
     renderComponent();
 
     expect(screen.getByText('main map (21)')).toBeInTheDocument();
+    expect(screen.getByTestId('arrow-icon')).toBeInTheDocument();
+  });
+  it('should navigate user to bio enitites results list after clicking button', async () => {
+    const { store } = renderComponent({
+      bioEntity: {
+        data: bioEntitiesContentFixture,
+        loading: 'succeeded',
+        error: { name: '', message: '' },
+      },
+      drawer: drawerSearchStepOneFixture,
+    });
+
+    const navigationButton = screen.getByTestId('bio-entites-submap-button');
+    await act(() => {
+      navigationButton.click();
+    });
+
+    const {
+      drawer: {
+        searchDrawerState: { stepType, selectedValue, currentStep, listOfBioEnitites },
+      },
+    } = store.getState();
+
+    expect(stepType).toBe('bioEntity');
+    expect(selectedValue).toBe(undefined);
+    expect(currentStep).toBe(SECOND_STEP);
+    expect(listOfBioEnitites).toBe(bioEntitiesContentFixture);
   });
 });

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx

@@ -25,11 +25,14 @@ export const BioEntitiesSubmapItem = ({
       onClick={onSubmapClick}
       type="button"
       className="flex flex-row flex-nowrap items-center justify-between pl-6 [&:not(:last-of-type)]:pb-4"
+      data-testid="bio-entites-submap-button"
     >
       <p className="text-sm font-normal">
         {mapName} ({numberOfEntities})
       </p>
-      <Icon name="arrow" className="h-6 w-6 fill-font-500" />
+      <div data-testid="arrow-icon">
+        <Icon name="arrow" className="h-6 w-6 fill-font-500" />
+      </div>
     </button>
   );
 };

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx

@@ -20,7 +20,7 @@ interface AccordionsDetailsProps {
 
 export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): JSX.Element => {
   return (
-    <>
+    <div data-testid="accordions-details">
       <Accordion allowZeroExpanded className="px-6">
         <AccordionItem>
           <AccordionItemHeading>
@@ -53,6 +53,6 @@ export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): J
           <div>{getAdditionalInfo(pinsList, type)}</div>
         </div>
       )}
-    </>
+    </div>
   );
 };

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.test.tsx

+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
+import { mirnasFixture } from '@/models/fixtures/mirnasFixture';
+import { StoreType } from '@/redux/store';
+import { PinItem, PinType } from './PinsList.types';
+import { PinsList } from './PinsList.component';
+
+const DRUGS_PINS_LIST = drugsFixture.map(drug => ({
+  id: drug.id,
+  name: drug.name,
+  data: drug,
+}));
+
+const CHEMICALS_PINS_LIST = chemicalsFixture.map(chemical => ({
+  id: chemical.id.id,
+  name: chemical.name,
+  data: chemical,
+}));
+
+const MIRNA_PINS_LIST = mirnasFixture.map(mirna => ({
+  id: mirna.id,
+  name: mirna.name,
+  data: mirna,
+}));
+
+const renderComponent = (
+  pinsList: PinItem[],
+  type: PinType,
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <PinsList pinsList={pinsList} type={type} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('PinsList - component ', () => {
+  it('should display list of drug targets', () => {
+    renderComponent(DRUGS_PINS_LIST, 'drugs');
+
+    expect(screen.getByTestId('pins-list')).toBeInTheDocument();
+  });
+  it('should display drug details when drug is searched', () => {
+    renderComponent(DRUGS_PINS_LIST, 'drugs');
+
+    expect(screen.getByTestId('accordions-details')).toBeInTheDocument();
+  });
+  it('should display list of chemicals targets', () => {
+    renderComponent(CHEMICALS_PINS_LIST, 'chemicals');
+
+    expect(screen.getByTestId('pins-list')).toBeInTheDocument();
+  });
+  it('should display chemicals details when chemical is searched', () => {
+    renderComponent(CHEMICALS_PINS_LIST, 'chemicals');
+
+    expect(screen.getByTestId('accordions-details')).toBeInTheDocument();
+  });
+  it('should display list of mirnas targets', () => {
+    renderComponent(MIRNA_PINS_LIST, 'mirna');
+
+    expect(screen.getByTestId('pins-list')).toBeInTheDocument();
+  });
+  it('should not display list of bio enities when bioEntity is searched', () => {
+    renderComponent([], 'bioEntity');
+
+    expect(screen.queryByTestId('pins-list')).toBeNull();
+  });
+  it('should not display list of pins when none is searched', () => {
+    renderComponent([], 'none');
+
+    expect(screen.queryByTestId('pins-list')).toBeNull();
+  });
+});

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx

@@ -14,7 +14,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
       return (
         <div className="h-[calc(100vh-198px)] overflow-auto">
           <AccordionsDetails pinsList={pinsList} type={type} />
-          <ul className="px-6 py-2">
+          <ul className="px-6 py-2" data-testid="pins-list">
             {pinsList.map(result => {
               return result.data.targets.map(pin => (
                 <PinsListItem key={pin.name} name={pin.name} type={type} pin={pin} />
@@ -29,7 +29,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
       return (
         <div className="h-[calc(100vh-198px)] overflow-auto">
           <AccordionsDetails pinsList={pinsList} type={type} />
-          <ul className="px-6 py-2">
+          <ul className="px-6 py-2" data-testid="pins-list">
             {pinsList.map(result => {
               return result.data.targets.map(pin => (
                 <PinsListItem key={pin.name} name={pin.name} type={type} pin={pin} />
@@ -40,7 +40,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
       );
     case 'mirna':
       return (
-        <ul className="h-[calc(100vh-198px)] overflow-auto px-6 py-2">
+        <ul className="h-[calc(100vh-198px)] overflow-auto px-6 py-2" data-testid="pins-list">
           {pinsList.map(result => {
             return result.data.targets.map(pin => (
               <PinsListItem key={pin.name} name={pin.name} type={type} pin={pin} />

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx

+/* eslint-disable no-magic-numbers */
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { StoreType } from '@/redux/store';
+import { PinDetailsItem } from '@/types/models';
+import { PinType } from '../PinsList.types';
+import { PinsListItem } from './PinsListItem.component';
+
+const DRUGS_PIN = {
+  name: drugsFixture[0].targets[0].name,
+  pin: drugsFixture[0].targets[0],
+};
+
+const renderComponent = (
+  name: string,
+  pin: PinDetailsItem,
+  type: PinType,
+  initialStoreState: InitialStoreState = {},
+): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <PinsListItem name={name} type={type} pin={pin} />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('PinsListItem - component ', () => {
+  it('should display full name of pin', () => {
+    renderComponent(DRUGS_PIN.name, DRUGS_PIN.pin, 'drugs');
+
+    const drugName = drugsFixture[0].targets[0].name;
+
+    expect(screen.getByText(drugName)).toBeInTheDocument();
+  });
+  it('should display list of elements for pin', () => {
+    renderComponent(DRUGS_PIN.name, DRUGS_PIN.pin, 'drugs');
+
+    const firstPinElementType = drugsFixture[0].targets[0].targetParticipants[0].type;
+    const firstPinElementResource = drugsFixture[0].targets[0].targetParticipants[0].resource;
+    const secondPinElementType = drugsFixture[0].targets[0].targetParticipants[1].type;
+    const secondPinElementResource = drugsFixture[0].targets[0].targetParticipants[1].resource;
+
+    expect(screen.getByText(firstPinElementType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(firstPinElementResource, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinElementType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinElementResource, { exact: false })).toBeInTheDocument();
+  });
+  it('should display list of references for pin', () => {
+    renderComponent(DRUGS_PIN.name, DRUGS_PIN.pin, 'drugs');
+
+    const firstPinReferenceType = drugsFixture[0].targets[0].references[0].type;
+    const firstPinReferenceResource = drugsFixture[0].targets[0].references[0].resource;
+    const secondPinReferenceType = drugsFixture[0].targets[0].references[1].type;
+    const secondPinReferenceResource = drugsFixture[0].targets[0].references[1].resource;
+
+    expect(screen.getByText(firstPinReferenceType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(firstPinReferenceResource, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinReferenceType, { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(secondPinReferenceResource, { exact: false })).toBeInTheDocument();
+  });
+});

src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx

@@ -52,12 +52,11 @@ describe('ResultsList - component ', () => {
     expect(screen.getByText('drugs:')).toBeInTheDocument();
     expect(screen.getByText('aspirin')).toBeInTheDocument();
 
-    // These tests will be uncommented when list of drugs will be ready
-    // const fristDrugName = drugsFixture[0].name;
-    // const secondDrugName = drugsFixture[1].name;
+    const fristDrugName = drugsFixture[0].targets[0].name;
+    const secondDrugName = drugsFixture[0].targets[1].name;
 
-    // expect(screen.getByText(fristDrugName)).toBeInTheDocument();
-    // expect(screen.getByText(secondDrugName)).toBeInTheDocument();
+    expect(screen.getByText(fristDrugName)).toBeInTheDocument();
+    expect(screen.getByText(secondDrugName)).toBeInTheDocument();
   });
   it('should navigate to grouped search results after backward button click', async () => {
     const { store } = renderComponent(INITIAL_STATE);