Skip to content
Snippets Groups Projects
Commit de9e8e0c authored by mateusz-winiarczyk's avatar mateusz-winiarczyk
Browse files

fix(search): left panel labels and layout (MIN-293)

parent 820e7160
No related branches found
No related tags found
2 merge requests!223reset the pin numbers before search results are fetch (so the results will be...,!162fix(search): left panel labels and layout (MIN-293)
Showing
with 72 additions and 56 deletions
...@@ -54,7 +54,7 @@ describe('DrugsAccordion - component', () => { ...@@ -54,7 +54,7 @@ describe('DrugsAccordion - component', () => {
}, },
}); });
expect(screen.getByText('Chemicals (4)')).toBeInTheDocument(); expect(screen.getByText('Small molecule targets (4)')).toBeInTheDocument();
}); });
it('should display loading indicator while waiting for chemicals search response', () => { it('should display loading indicator while waiting for chemicals search response', () => {
renderComponent({ renderComponent({
...@@ -77,7 +77,7 @@ describe('DrugsAccordion - component', () => { ...@@ -77,7 +77,7 @@ describe('DrugsAccordion - component', () => {
}, },
}); });
expect(screen.getByText('Chemicals (Loading...)')).toBeInTheDocument(); expect(screen.getByText('Small molecule targets (Loading...)')).toBeInTheDocument();
}); });
it('should navigate user to chemical results list after clicking button', async () => { it('should navigate user to chemical results list after clicking button', async () => {
const { store } = renderComponent({ const { store } = renderComponent({
......
...@@ -29,7 +29,7 @@ export const ChemicalsAccordion = (): JSX.Element => { ...@@ -29,7 +29,7 @@ export const ChemicalsAccordion = (): JSX.Element => {
onClick={onAccordionClick} onClick={onAccordionClick}
disabled={isPending || isChemicalsEmpty} disabled={isPending || isChemicalsEmpty}
> >
Chemicals Small molecule targets
{isPending && ' (Loading...)'} {isPending && ' (Loading...)'}
{isSucceeded && ` (${chemicalsNumber})`} {isSucceeded && ` (${chemicalsNumber})`}
</AccordionItemButton> </AccordionItemButton>
......
...@@ -47,7 +47,7 @@ describe('DrugsAccordion - component', () => { ...@@ -47,7 +47,7 @@ describe('DrugsAccordion - component', () => {
error: { name: '', message: '' }, error: { name: '', message: '' },
}, },
}); });
expect(screen.getByText('Drugs (4)')).toBeInTheDocument(); expect(screen.getByText('Drug targets (4)')).toBeInTheDocument();
}); });
it('should display loading indicator while waiting for drug search response', () => { it('should display loading indicator while waiting for drug search response', () => {
renderComponent({ renderComponent({
...@@ -64,7 +64,7 @@ describe('DrugsAccordion - component', () => { ...@@ -64,7 +64,7 @@ describe('DrugsAccordion - component', () => {
error: { name: '', message: '' }, error: { name: '', message: '' },
}, },
}); });
expect(screen.getByText('Drugs (Loading...)')).toBeInTheDocument(); expect(screen.getByText('Drug targets (Loading...)')).toBeInTheDocument();
}); });
it('should navigate user to drugs results list after clicking button', async () => { it('should navigate user to drugs results list after clicking button', async () => {
const { store } = renderComponent({ const { store } = renderComponent({
......
...@@ -26,7 +26,7 @@ export const DrugsAccordion = (): JSX.Element => { ...@@ -26,7 +26,7 @@ export const DrugsAccordion = (): JSX.Element => {
onClick={onAccordionClick} onClick={onAccordionClick}
disabled={isPending || isDrugsEmpty} disabled={isPending || isDrugsEmpty}
> >
Drugs Drug targets
{isPending && ' (Loading...)'} {isPending && ' (Loading...)'}
{isSucceeded && ` (${drugsNumber})`} {isSucceeded && ` (${drugsNumber})`}
</AccordionItemButton> </AccordionItemButton>
......
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
getReduxWrapperWithStore, getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore'; } from '@/utils/testing/getReduxWrapperWithStore';
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types'; import { PinItem } from '../PinsList/PinsList.types';
import { AccordionsDetails } from './AccordionsDetails.component'; import { AccordionsDetails } from './AccordionsDetails.component';
const DRUGS_PINS_LIST = drugsFixture.map(drug => ({ const DRUGS_PINS_LIST = drugsFixture.map(drug => ({
...@@ -24,7 +24,6 @@ const CHEMICALS_PINS_LIST = chemicalsFixture.map(chemical => ({ ...@@ -24,7 +24,6 @@ const CHEMICALS_PINS_LIST = chemicalsFixture.map(chemical => ({
const renderComponent = ( const renderComponent = (
pinsList: PinItem[], pinsList: PinItem[],
type: PinTypeWithNone,
initialStoreState: InitialStoreState = {}, initialStoreState: InitialStoreState = {},
): { store: StoreType } => { ): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState); const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
...@@ -32,7 +31,7 @@ const renderComponent = ( ...@@ -32,7 +31,7 @@ const renderComponent = (
return ( return (
render( render(
<Wrapper> <Wrapper>
<AccordionsDetails pinsList={pinsList} type={type} /> <AccordionsDetails pinsList={pinsList} />
</Wrapper>, </Wrapper>,
), ),
{ {
...@@ -43,21 +42,21 @@ const renderComponent = ( ...@@ -43,21 +42,21 @@ const renderComponent = (
describe('AccordionsDetails - component', () => { describe('AccordionsDetails - component', () => {
it('should display name of drug', () => { it('should display name of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs'); renderComponent(DRUGS_PINS_LIST);
const drugName = drugsFixture[0].name; const drugName = drugsFixture[0].name;
expect(screen.getByText(drugName, { exact: false })).toBeInTheDocument(); expect(screen.getByText(drugName, { exact: false })).toBeInTheDocument();
}); });
it('should display description of drug', () => { it('should display description of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs'); renderComponent(DRUGS_PINS_LIST);
const drugDescription = drugsFixture[0].description ? drugsFixture[0].description : ''; const drugDescription = drugsFixture[0].description ? drugsFixture[0].description : '';
expect(screen.getByTestId('details-description').textContent).toContain(drugDescription); expect(screen.getByTestId('details-description').textContent).toContain(drugDescription);
}); });
it('should display synonyms of drug', () => { it('should display synonyms of drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs'); renderComponent(DRUGS_PINS_LIST);
const firstDrugSynonym = drugsFixture[0].synonyms[0]; const firstDrugSynonym = drugsFixture[0].synonyms[0];
const secondDrugSynonym = drugsFixture[0].synonyms[1]; const secondDrugSynonym = drugsFixture[0].synonyms[1];
...@@ -65,15 +64,8 @@ describe('AccordionsDetails - component', () => { ...@@ -65,15 +64,8 @@ describe('AccordionsDetails - component', () => {
expect(screen.getByText(firstDrugSynonym, { exact: false })).toBeInTheDocument(); expect(screen.getByText(firstDrugSynonym, { exact: false })).toBeInTheDocument();
expect(screen.getByText(secondDrugSynonym, { exact: false })).toBeInTheDocument(); expect(screen.getByText(secondDrugSynonym, { exact: false })).toBeInTheDocument();
}); });
it('should display blood brain barrier for drug', () => {
renderComponent(DRUGS_PINS_LIST, 'drugs');
const drugAdditionalInfo = drugsFixture[0].bloodBrainBarrier;
expect(screen.getByText(drugAdditionalInfo, { exact: false })).toBeInTheDocument();
});
it('should display direct evidence publications for chemicals', () => { it('should display direct evidence publications for chemicals', () => {
renderComponent(CHEMICALS_PINS_LIST, 'chemicals'); renderComponent(CHEMICALS_PINS_LIST);
const chemicalsAdditionalInfo = chemicalsFixture[0].directEvidence const chemicalsAdditionalInfo = chemicalsFixture[0].directEvidence
? chemicalsFixture[0].directEvidence ? chemicalsFixture[0].directEvidence
......
...@@ -5,9 +5,8 @@ import { ...@@ -5,9 +5,8 @@ import {
AccordionItemHeading, AccordionItemHeading,
AccordionItemPanel, AccordionItemPanel,
} from '@/shared/Accordion'; } from '@/shared/Accordion';
import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types'; import { PinItem } from '../PinsList/PinsList.types';
import { import {
getAdditionalInfo,
getEntityDescriptions, getEntityDescriptions,
getEntityNames, getEntityNames,
getEntitySynonyms, getEntitySynonyms,
...@@ -15,46 +14,29 @@ import { ...@@ -15,46 +14,29 @@ import {
interface AccordionsDetailsProps { interface AccordionsDetailsProps {
pinsList: PinItem[]; pinsList: PinItem[];
type: PinTypeWithNone;
} }
export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): JSX.Element => { export const AccordionsDetails = ({ pinsList }: AccordionsDetailsProps): JSX.Element => {
return ( return (
<div data-testid="accordions-details"> <div data-testid="accordions-details" className="mb-4">
<div className="px-6 py-4">
<span className="font-semibold">Name:</span> {getEntityNames(pinsList)}
</div>
<Accordion allowZeroExpanded className="px-6"> <Accordion allowZeroExpanded className="px-6">
<AccordionItem> <AccordionItem>
<AccordionItemHeading> <AccordionItemHeading>
<AccordionItemButton className="capitalize">{type}</AccordionItemButton> <AccordionItemButton>Details</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>{getEntityNames(pinsList)}</AccordionItemPanel>
</AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>Description</AccordionItemButton>
</AccordionItemHeading> </AccordionItemHeading>
<AccordionItemPanel> <AccordionItemPanel>
<div data-testid="details-description">{getEntityDescriptions(pinsList)}</div> <div data-testid="details-description" className="mb-5">
<span className="font-semibold">Description:</span> {getEntityDescriptions(pinsList)}
</div>
<div>
<span className="font-semibold">Synonyms:</span> {getEntitySynonyms(pinsList)}
</div>
</AccordionItemPanel> </AccordionItemPanel>
</AccordionItem> </AccordionItem>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>Synonyms</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>{getEntitySynonyms(pinsList)}</AccordionItemPanel>
</AccordionItem>
</Accordion> </Accordion>
{type === 'drugs' && (
<div className="flex justify-between px-6 py-4 text-sm font-bold">
<div>Blood brain barrier</div>
<div>{getAdditionalInfo(pinsList, type)}</div>
</div>
)}
{type === 'chemicals' && (
<div className="flex justify-between px-6 py-4 text-sm">
<div className="font-bold">Direct Evidence Publications</div>
<div>{getAdditionalInfo(pinsList, type)}</div>
</div>
)}
</div> </div>
); );
}; };
...@@ -21,7 +21,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => { ...@@ -21,7 +21,7 @@ export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => {
return ( return (
<div className="h-[calc(100%-214px)] max-h-[calc(100%-214px)] overflow-auto"> <div className="h-[calc(100%-214px)] max-h-[calc(100%-214px)] overflow-auto">
<AccordionsDetails pinsList={pinsList} type={type} /> <AccordionsDetails pinsList={pinsList} />
<ul className="px-6 py-2" data-testid="pins-list"> <ul className="px-6 py-2" data-testid="pins-list">
{targetElements.map(({ target, element }) => ( {targetElements.map(({ target, element }) => (
<PinsListItem <PinsListItem
......
...@@ -67,7 +67,7 @@ describe('ResultsList - component ', () => { ...@@ -67,7 +67,7 @@ describe('ResultsList - component ', () => {
renderComponent(INITIAL_STATE); renderComponent(INITIAL_STATE);
const headingText = screen.getByTestId('drawer-heading-text'); const headingText = screen.getByTestId('drawer-heading-text');
expect(headingText.textContent).toBe('drugs'); expect(headingText.textContent).toBe('Drug targets');
const fristDrugName = drugsFixture[0].targets[0].name; const fristDrugName = drugsFixture[0].targets[0].name;
const secondDrugName = drugsFixture[0].targets[1].name; const secondDrugName = drugsFixture[0].targets[1].name;
......
...@@ -4,6 +4,7 @@ import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButto ...@@ -4,6 +4,7 @@ import { DrawerHeadingBackwardButton } from '@/shared/DrawerHeadingBackwardButto
import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { displayGroupedSearchResults } from '@/redux/drawer/drawer.slice'; import { displayGroupedSearchResults } from '@/redux/drawer/drawer.slice';
import { PinsList } from './PinsList'; import { PinsList } from './PinsList';
import { mapStepTypeToHeading } from './ResultsList.component.utils';
export const ResultsList = (): JSX.Element => { export const ResultsList = (): JSX.Element => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
...@@ -17,9 +18,7 @@ export const ResultsList = (): JSX.Element => { ...@@ -17,9 +18,7 @@ export const ResultsList = (): JSX.Element => {
return ( return (
<div className="h-full"> <div className="h-full">
<DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}> <DrawerHeadingBackwardButton backwardFunction={navigateToGroupedSearchResults}>
<span className="capitalize" data-testid="drawer-heading-text"> <span data-testid="drawer-heading-text">{mapStepTypeToHeading(stepType)}</span>
{stepType}
</span>
</DrawerHeadingBackwardButton> </DrawerHeadingBackwardButton>
{data && <PinsList pinsList={data} type={stepType} />} {data && <PinsList pinsList={data} type={stepType} />}
</div> </div>
......
import { mapStepTypeToHeading } from './ResultsList.component.utils';
describe('mapStepTypeToHeading - util', () => {
it('should return "Drug targets" for stepType "drugs"', () => {
const result = mapStepTypeToHeading('drugs');
expect(result).toBe('Drug targets');
});
it('should return "Small molecule targets" for stepType "chemicals"', () => {
const result = mapStepTypeToHeading('chemicals');
expect(result).toBe('Small molecule targets');
});
it('should return the input stepType for other values', () => {
const result = mapStepTypeToHeading('someOtherType');
expect(result).toBe('someOtherType');
});
it('should return the same string case-sensitive for stepType "drugs"', () => {
const result = mapStepTypeToHeading('Drugs');
expect(result).toBe('Drugs');
});
it('should return the same string case-sensitive for stepType "chemicals"', () => {
const result = mapStepTypeToHeading('Chemicals');
expect(result).toBe('Chemicals');
});
it('should return empty string for empty input', () => {
const result = mapStepTypeToHeading('');
expect(result).toBe('');
});
});
export const mapStepTypeToHeading = (stepType: string): string => {
switch (stepType) {
case 'drugs':
return 'Drug targets';
case 'chemicals':
return 'Small molecule targets';
default:
return stepType;
}
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment