test(search): code review fixes

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

@@ -31,12 +31,6 @@ 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();
+    expect(screen.getAllByTestId('bio-entity-name')).toHaveLength(10);
   });
 });

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

@@ -34,18 +34,14 @@ 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
-      : '';
+    const bioEntityName = 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
-      : '';
+    const bioEntitySymbol = BIO_ENTITY.symbol || '';
 
     expect(screen.getByText(bioEntitySymbol, { exact: false })).toBeInTheDocument();
   });

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

@@ -23,13 +23,13 @@ export const BioEntitiesPinsListItem = ({
       <p className="font-bold leading-6">
         Full name:{' '}
         <span className="w-full font-normal" data-testid="bio-entity-name">
-          {pin.fullName ? pin.fullName : ``}
+          {pin.fullName || ``}
         </span>
       </p>
       <p className="font-bold leading-6">
         Symbol:{' '}
         <span className="w-full font-normal" data-testid="bio-entity-symbol">
-          {pin.symbol ? pin.symbol : ``}
+          {pin.symbol || ``}
         </span>
       </p>
       <p className="font-bold leading-6">

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

@@ -30,9 +30,7 @@ export const BioEntitiesSubmapItem = ({
       <p className="text-sm font-normal">
         {mapName} ({numberOfEntities})
       </p>
-      <div data-testid="arrow-icon">
-        <Icon name="arrow" className="h-6 w-6 fill-font-500" />
-      </div>
+      <Icon name="arrow" className="h-6 w-6 fill-font-500" data-testid="arrow-icon" />
     </button>
   );
 };

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

@@ -5,6 +5,8 @@ import {
   getReduxWrapperWithStore,
 } from '@/utils/testing/getReduxWrapperWithStore';
 import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
 import { StoreType } from '@/redux/store';
 import { PinDetailsItem } from '@/types/models';
 import { PinType } from '../PinsList.types';
@@ -15,6 +17,11 @@ const DRUGS_PIN = {
   pin: drugsFixture[0].targets[0],
 };
 
+const CHEMICALS_PIN = {
+  name: chemicalsFixture[0].targets[0].name,
+  pin: chemicalsFixture[0].targets[0],
+};
+
 const renderComponent = (
   name: string,
   pin: PinDetailsItem,
@@ -43,7 +50,7 @@ describe('PinsListItem - component ', () => {
 
     expect(screen.getByText(drugName)).toBeInTheDocument();
   });
-  it('should display list of elements for pin', () => {
+  it('should display list of elements for pin for drugs', () => {
     renderComponent(DRUGS_PIN.name, DRUGS_PIN.pin, 'drugs');
 
     const firstPinElementType = drugsFixture[0].targets[0].targetParticipants[0].type;
@@ -69,4 +76,26 @@ describe('PinsListItem - component ', () => {
     expect(screen.getByText(secondPinReferenceType, { exact: false })).toBeInTheDocument();
     expect(screen.getByText(secondPinReferenceResource, { exact: false })).toBeInTheDocument();
   });
+  it('should display list of elements for pin for chemicals', () => {
+    renderComponent(CHEMICALS_PIN.name, CHEMICALS_PIN.pin, 'drugs');
+
+    const firstPinElementType = chemicalsFixture[0].targets[0].targetParticipants[0].type;
+    const firstPinElementResource = chemicalsFixture[0].targets[0].targetParticipants[0].resource;
+    const secondPinElementType = chemicalsFixture[0].targets[0].targetParticipants[1].type;
+    const secondPinElementResource = chemicalsFixture[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 not display list of elements for pin for bioentities', () => {
+    renderComponent(CHEMICALS_PIN.name, CHEMICALS_PIN.pin, 'drugs');
+
+    const bioEntityName = bioEntitiesContentFixture[2].bioEntity.fullName
+      ? bioEntitiesContentFixture[2].bioEntity.fullName
+      : '';
+
+    expect(screen.queryByText(bioEntityName, { exact: false })).not.toBeInTheDocument();
+  });
 });

src/shared/Icon/Icon.component.tsx

@@ -39,13 +39,13 @@ const icons = {
   close: CloseIcon,
 } as const;
 
-export const Icon = ({ name, className = '' }: IconProps): JSX.Element => {
+export const Icon = ({ name, className = '', ...rest }: IconProps): JSX.Element => {
   if (typeof name === 'undefined') {
     throw new Error('Icon component must have a name of icon!');
   }
   const IconComponent = icons[name];
 
-  return <IconComponent className={className} />;
+  return <IconComponent className={className} {...rest} />;
 };
 
 Icon.displayName = 'Icon';

src/shared/Icon/Icons/ArrowIcon.tsx

@@ -2,7 +2,7 @@ interface ArrowIconProps {
   className?: string;
 }
 
-export const ArrowIcon = ({ className }: ArrowIconProps): JSX.Element => (
+export const ArrowIcon = ({ className, ...rest }: ArrowIconProps): JSX.Element => (
   <svg
     width="14"
     height="14"
@@ -10,6 +10,7 @@ export const ArrowIcon = ({ className }: ArrowIconProps): JSX.Element => (
     fill="none"
     className={className}
     xmlns="http://www.w3.org/2000/svg"
+    {...rest}
   >
     <g clipPath="url(#clip0_2014_6288)">
       <path d="M9.91683 7L5.8335 10.5V3.5L9.91683 7Z" />