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
new file mode 100644
index 0000000000000000000000000000000000000000..a03b5b4c2a7858b346e7aec1c24fe32307ad684e
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsList.component.test.tsx
@@ -0,0 +1,36 @@
+/* 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);
+
+ 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
new file mode 100644
index 0000000000000000000000000000000000000000..bd5270e6dd527d8a220a923a5c5507d16a97ee2f
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
@@ -0,0 +1,86 @@
+/* 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 || '';
+
+ expect(screen.getByText(bioEntityName, { exact: false })).toBeInTheDocument();
+ });
+ it('should display symbol of bio entity element', () => {
+ renderComponent(BIO_ENTITY.name, BIO_ENTITY);
+
+ const bioEntitySymbol = BIO_ENTITY.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();
+ });
+});
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 098abeeb3fd35d9161339421a9e6ae7282088353..c4322112939b40d33f621d1987ac07ce25420d34 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
@@ -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 || ``}
+ </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 || ``}
+ </span>
</p>
<p className="font-bold leading-6">
Synonyms: <span className="w-full font-normal">{pin.synonyms.join(', ')}</span>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
index a08c2d03588f126c9f2232f7851da1510b535333..e2567df73cefbf654370dc9e9eb9d93dfc11b13a 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
@@ -1,6 +1,6 @@
-// import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { MODELS_MOCK } from '@/models/mocks/modelsMock';
import { StoreType } from '@/redux/store';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { Accordion } from '@/shared/Accordion';
import {
InitialStoreState,
@@ -26,14 +26,21 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-describe.skip('BioEntitiesAccordion - component', () => {
+describe('BioEntitiesAccordion - component', () => {
it('should display loading indicator when bioEntity search is pending', () => {
renderComponent({
- // bioEntity: {
- // data: undefined,
- // loading: 'pending',
- // error: { name: '', message: '' },
- // },
+ bioEntity: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'pending',
+ error: { name: '', message: '' },
+ data: bioEntitiesContentFixture,
+ },
+ ],
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
models: {
data: [],
loading: 'pending',
@@ -46,11 +53,18 @@ describe.skip('BioEntitiesAccordion - component', () => {
it('should render list of maps with number of entities after succeeded bio entity search', () => {
renderComponent({
- // bioEntity: {
- // data: bioEntitiesContentFixture,
- // loading: 'succeeded',
- // error: { name: '', message: '' },
- // },
+ bioEntity: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: bioEntitiesContentFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
models: {
data: MODELS_MOCK,
loading: 'succeeded',
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
index bd7472d6dc441cf0d4dce7a4913ea5af04a3ebea..5fca44d875fb5454cc2d2c524cbf688bb5722850 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
@@ -1,12 +1,15 @@
-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,43 @@ 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: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ 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);
});
});
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 49d8fc3ba42c9f5ef32e2ef656cc7b4ba0e6a4a2..6d86982d9f34958be5144ab1cdba3185e67fce53 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
@@ -25,11 +25,12 @@ 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" />
+ <Icon name="arrow" className="h-6 w-6 fill-font-500" data-testid="arrow-icon" />
</button>
);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
index aa6f96359ec742fc0c886248c1c0b1d2b79eb37e..5e85e6ae53922e84d030d6384dc5b5350bf43b86 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx
@@ -1,11 +1,16 @@
import { act, render, screen } from '@testing-library/react';
+import { MODELS_MOCK } from '@/models/mocks/modelsMock';
import { StoreType } from '@/redux/store';
import {
InitialStoreState,
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { Accordion } from '@/shared/Accordion';
-import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
+import {
+ drawerSearchStepOneFixture,
+ drawerSearchChemicalsStepTwoFixture,
+} from '@/redux/drawer/drawerFixture';
+import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
import { ChemicalsAccordion } from './ChemicalsAccordion.component';
const SECOND_STEP = 2;
@@ -27,27 +32,56 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-describe.skip('DrugsAccordion - component', () => {
+describe('DrugsAccordion - component', () => {
it('should display drugs number after succesfull chemicals search', () => {
renderComponent({
- // chemicals: { data: chemicalsFixture, loading: 'succeeded', error: { name: '', message: '' } },
+ chemicals: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: chemicalsFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ models: {
+ data: MODELS_MOCK,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
});
+
expect(screen.getByText('Chemicals (4)')).toBeInTheDocument();
});
it('should display loading indicator while waiting for chemicals search response', () => {
renderComponent({
- chemicals: { data: [], loading: 'pending', error: { name: '', message: '' } },
+ chemicals: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'pending',
+ error: { name: '', message: '' },
+ data: chemicalsFixture,
+ },
+ ],
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
+ models: {
+ data: [],
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
});
+
expect(screen.getByText('Chemicals (Loading...)')).toBeInTheDocument();
});
it('should navigate user to chemical results list after clicking button', async () => {
const { store } = renderComponent({
- // chemicals: {
- // data: chemicalsFixture,
- // loading: 'succeeded',
- // error: { name: '', message: '' },
- // },
- drawer: drawerSearchStepOneFixture,
+ drawer: drawerSearchChemicalsStepTwoFixture,
});
const navigationButton = screen.getByTestId('accordion-item-button');
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
index f9300c239cd84087276b7b899bd7c40603a812dd..dfdbab89420af6132fbc965e055ad8ae0c617181 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/DrugsAccordion/DrugsAccordion.component.test.tsx
@@ -5,7 +5,11 @@ import {
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { act, render, screen } from '@testing-library/react';
-import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
+import {
+ drawerSearchStepOneFixture,
+ drawerSearchDrugsStepTwoFixture,
+} from '@/redux/drawer/drawerFixture';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
import { DrugsAccordion } from './DrugsAccordion.component';
const SECOND_STEP = 2;
@@ -27,27 +31,44 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-describe.skip('DrugsAccordion - component', () => {
+describe('DrugsAccordion - component', () => {
it('should display drugs number after succesfull drug search', () => {
renderComponent({
- // drugs: { data: drugsFixture, loading: 'succeeded', error: { name: '', message: '' } },
+ drugs: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: drugsFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
});
- // expect(screen.getByText('Drugs (4)')).toBeInTheDocument();
+ expect(screen.getByText('Drugs (4)')).toBeInTheDocument();
});
it('should display loading indicator while waiting for drug search response', () => {
renderComponent({
- drugs: { data: [], loading: 'pending', error: { name: '', message: '' } },
+ drugs: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'pending',
+ error: { name: '', message: '' },
+ data: drugsFixture,
+ },
+ ],
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
});
expect(screen.getByText('Drugs (Loading...)')).toBeInTheDocument();
});
- it('should navigate user to chemical results list after clicking button', async () => {
+ it('should navigate user to drugs results list after clicking button', async () => {
const { store } = renderComponent({
- // drugs: {
- // data: drugsFixture,
- // loading: 'succeeded',
- // error: { name: '', message: '' },
- // },
- drawer: drawerSearchStepOneFixture,
+ drawer: drawerSearchDrugsStepTwoFixture,
});
const navigationButton = screen.getByTestId('accordion-item-button');
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.test.tsx
index 79b186158eb07b3de7fda3ff7ad8bc81e0405550..5a535d5a6f75cb1920db5df6250b5d375b70b1f0 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.test.tsx
@@ -5,7 +5,11 @@ import {
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { Accordion } from '@/shared/Accordion';
-import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
+import {
+ drawerSearchStepOneFixture,
+ drawerSearchMirnaStepTwoFixture,
+} from '@/redux/drawer/drawerFixture';
+import { mirnasFixture } from '@/models/fixtures/mirnasFixture';
import { MirnaAccordion } from './MirnaAccordion.component';
const SECOND_STEP = 2;
@@ -27,14 +31,25 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-describe.skip('MirnaAccordion - component', () => {
- it('should display mirna number after succesfull chemicals search', () => {
+describe('MirnaAccordion - component', () => {
+ it('should display mirna number after succesfull mirna search', () => {
renderComponent({
- // mirnas: { data: mirnasFixture, loading: 'succeeded', error: { name: '', message: '' } },
+ mirnas: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: mirnasFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
});
expect(screen.getByText('MiRNA (4)')).toBeInTheDocument();
});
- it('should display loading indicator while waiting for chemicals search response', () => {
+ it('should display loading indicator while waiting for mirna search response', () => {
renderComponent({
mirnas: { data: [], loading: 'pending', error: { name: '', message: '' } },
});
@@ -42,12 +57,19 @@ describe.skip('MirnaAccordion - component', () => {
});
it('should navigate user to mirnas results list after clicking button', async () => {
const { store } = renderComponent({
- // mirnas: {
- // data: mirnasFixture,
- // loading: 'succeeded',
- // error: { name: '', message: '' },
- // },
- drawer: drawerSearchStepOneFixture,
+ mirnas: {
+ data: [
+ {
+ searchQueryElement: '',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: mirnasFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ drawer: drawerSearchMirnaStepTwoFixture,
});
const navigationButton = screen.getByTestId('accordion-item-button');
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
index db286ea51db4e64e2793283cb4c29ad8a9d77082..ff5de2f22965ec9b6ee3697fdca712939a9145e3 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx
@@ -41,7 +41,7 @@ const renderComponent = (
);
};
-describe.skip('AccordionsDetails - component', () => {
+describe('AccordionsDetails - component', () => {
it('should display name of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs');
@@ -49,12 +49,12 @@ describe.skip('AccordionsDetails - component', () => {
expect(screen.getByText(drugName, { exact: false })).toBeInTheDocument();
});
- it.skip('should display description of drug', () => {
+ it('should display description of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs');
- const drugDescription = drugsFixture[0].description;
+ const drugDescription = drugsFixture[0].description ? drugsFixture[0].description : '';
- expect(screen.getByText(drugDescription || '', { exact: false })).toBeInTheDocument();
+ expect(screen.getByTestId('details-description').textContent).toContain(drugDescription);
});
it('should display synonyms of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs');
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx
index 0613843ec07bb7763c233b88987ba15d9749a67f..c434cbfc67f8904a91770fb9280a69397c34d371 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx
+++ b/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>
@@ -32,7 +32,9 @@ export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): J
<AccordionItemHeading>
<AccordionItemButton>Description</AccordionItemButton>
</AccordionItemHeading>
- <AccordionItemPanel>{getEntityDescriptions(pinsList)}</AccordionItemPanel>
+ <AccordionItemPanel>
+ <div data-testid="details-description">{getEntityDescriptions(pinsList)}</div>
+ </AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
@@ -53,6 +55,6 @@ export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): J
<div>{getAdditionalInfo(pinsList, type)}</div>
</div>
)}
- </>
+ </div>
);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..485dd029cc1d98752dd57fad61745ee796dbc66d
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.test.tsx
@@ -0,0 +1,86 @@
+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();
+ });
+});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
index b3b3a7c5459476fdd50e1fdd4e1ba59da7000d59..e9fe54e58159ec73e0804a879e1f7ff12129e2c3 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx
+++ b/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} />
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
new file mode 100644
index 0000000000000000000000000000000000000000..2f6a4e50e53888a449898beb0ac8b3edec12a1e8
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.test.tsx
@@ -0,0 +1,101 @@
+/* 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 { 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';
+import { PinsListItem } from './PinsListItem.component';
+
+const DRUGS_PIN = {
+ name: drugsFixture[0].targets[0].name,
+ 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,
+ 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 for drugs', () => {
+ 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();
+ });
+ 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/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
index 7da6144305d4a6863969fd23cd87cd1e61f82353..233da1643e8d44e3fa2231b54938353d5b80b235 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/ResultsList.component.test.tsx
@@ -5,29 +5,38 @@ import {
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { StoreType } from '@/redux/store';
-// import { drugsFixture } from '@/models/fixtures/drugFixtures';
+import { drugsFixture } from '@/models/fixtures/drugFixtures';
import { ResultsList } from './ResultsList.component';
const INITIAL_STATE: InitialStoreState = {
- // search: {
- // searchValue: 'aspirin',
- // loading: 'idle',
- // },
- // drawer: {
- // isOpen: true,
- // drawerName: 'search',
- // searchDrawerState: {
- // currentStep: 2,
- // stepType: 'drugs',
- // selectedValue: undefined,
- // listOfBioEnitites: [],
- // },
- // },
- // drugs: {
- // data: drugsFixture,
- // loading: 'succeeded',
- // error: { name: '', message: '' },
- // },
+ search: {
+ searchValue: ['aspirin'],
+ loading: 'idle',
+ perfectMatch: false,
+ },
+ drawer: {
+ isOpen: true,
+ drawerName: 'search',
+ searchDrawerState: {
+ currentStep: 2,
+ stepType: 'drugs',
+ selectedValue: undefined,
+ listOfBioEnitites: [],
+ selectedSearchElement: 'aspirin',
+ },
+ },
+ drugs: {
+ data: [
+ {
+ searchQueryElement: 'aspirin',
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ data: drugsFixture,
+ },
+ ],
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
};
const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -45,19 +54,18 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
);
};
-describe.skip('ResultsList - component ', () => {
+describe('ResultsList - component ', () => {
it('should render results and navigation panel', () => {
renderComponent(INITIAL_STATE);
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);
diff --git a/src/redux/drawer/drawerFixture.ts b/src/redux/drawer/drawerFixture.ts
index 51874b0e54cd4c02f18e781b6477c729b4261072..c6c1c62d511a90ce59ca3d41c4a20f57ff58bf7b 100644
--- a/src/redux/drawer/drawerFixture.ts
+++ b/src/redux/drawer/drawerFixture.ts
@@ -47,3 +47,27 @@ export const drawerSearchDrugsStepTwoFixture: DrawerState = {
selectedSearchElement: '',
},
};
+
+export const drawerSearchChemicalsStepTwoFixture: DrawerState = {
+ isOpen: true,
+ drawerName: 'search',
+ searchDrawerState: {
+ currentStep: 2,
+ stepType: 'chemicals',
+ selectedValue: undefined,
+ listOfBioEnitites: [],
+ selectedSearchElement: '',
+ },
+};
+
+export const drawerSearchMirnaStepTwoFixture: DrawerState = {
+ isOpen: true,
+ drawerName: 'search',
+ searchDrawerState: {
+ currentStep: 2,
+ stepType: 'mirna',
+ selectedValue: undefined,
+ listOfBioEnitites: [],
+ selectedSearchElement: '',
+ },
+};
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index b683ed15a8d2d574411618f5f9b8486c41b8319f..a4b4ee63bf1c35658d6e35493e908c7c8689e0bf 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 d7bdc3edcc89dffe3ea2c66333aa6c6263826113..30dd16956326c4d3a77df7ba699c651e9747bedc 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" />