From 5d2768ec510283478321b58fa7f2c3ee73fa2c5a Mon Sep 17 00:00:00 2001
From: Mateusz Bolewski <mateusz.bolewski@appunite.com>
Date: Tue, 28 Nov 2023 09:24:34 +0100
Subject: [PATCH] test(search): code review fixes
---
.../BioEntitiesPinsList.component.test.tsx | 8 +----
...BioEntitiesPinsListItem.component.test.tsx | 8 ++---
.../BioEntitiesPinsListItem.component.tsx | 4 +--
.../BioEntitiesSubmapItem.component.tsx | 4 +--
.../PinsListItem.component.test.tsx | 31 ++++++++++++++++++-
src/shared/Icon/Icon.component.tsx | 4 +--
src/shared/Icon/Icons/ArrowIcon.tsx | 3 +-
7 files changed, 40 insertions(+), 22 deletions(-)
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
index 92cf953c..a03b5b4c 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
+++ b/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);
});
});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
index b433c8a4..bd5270e6 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
+++ b/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();
});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx
index 5dc3a64d..c4322112 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.tsx
+++ b/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">
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
index e06c0f1b..6d86982d 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
+++ b/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>
);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx
index 9ec0cf24..2f6a4e50 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx
+++ b/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();
+ });
});
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index b683ed15..a4b4ee63 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/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';
diff --git a/src/shared/Icon/Icons/ArrowIcon.tsx b/src/shared/Icon/Icons/ArrowIcon.tsx
index d7bdc3ed..30dd1695 100644
--- a/src/shared/Icon/Icons/ArrowIcon.tsx
+++ b/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" />
--
GitLab