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 b3b10bf68e3f0478792e5e0add36aa5559fb70b6..334fce860b2ba396d967c6af477f6273946cb28f 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 @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; import { StoreType } from '@/redux/store'; import { InitialStoreState, @@ -6,8 +6,11 @@ import { } from '@/utils/testing/getReduxWrapperWithStore'; import { mirnasFixture } from '@/models/fixtures/mirnasFixture'; import { Accordion } from '@/shared/Accordion'; +import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture'; import { MirnaAccordion } from './MirnaAccordion.component'; +const SECOND_STEP = 2; + const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => { const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState); @@ -38,4 +41,47 @@ describe('DrugsAccordion - component', () => { }); expect(screen.getByText('MiRNA (Loading...)')).toBeInTheDocument(); }); + 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, + }); + + const navigationButton = screen.getByTestId('accordion-item-button'); + await act(() => { + navigationButton.click(); + }); + + const { + drawer: { + searchDrawerState: { stepType, selectedValue, currentStep }, + }, + } = store.getState(); + + expect(stepType).toBe('mirna'); + expect(selectedValue).toBe(undefined); + expect(currentStep).toBe(SECOND_STEP); + }); + it('should disable navigation button when there is no mirnas', async () => { + renderComponent({ + mirnas: { data: [], loading: 'succeeded', error: { name: '', message: '' } }, + drawer: drawerSearchStepOneFixture, + }); + + const navigationButton = screen.getByTestId('accordion-item-button'); + expect(navigationButton).toBeDisabled(); + }); + it('should disable navigation button when waiting for api response', async () => { + renderComponent({ + mirnas: { data: [], loading: 'pending', error: { name: '', message: '' } }, + drawer: drawerSearchStepOneFixture, + }); + + const navigationButton = screen.getByTestId('accordion-item-button'); + expect(navigationButton).toBeDisabled(); + }); }); diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.tsx index e23bf05659a15086e88b15bdeeb3e3e83b0bcd6e..98c951235c52b64c9dfd9c52ee63058250524da5 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/MirnaAccordion/MirnaAccordion.component.tsx @@ -1,3 +1,6 @@ +import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common'; +import { displayMirnaList } from '@/redux/drawer/drawer.slice'; +import { useAppDispatch } from '@/redux/hooks/useAppDispatch'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { numberOfMirnasSelector, @@ -6,13 +9,23 @@ import { import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion'; export const MirnaAccordion = (): JSX.Element => { + const dispatch = useAppDispatch(); const mirnaNumber = useAppSelector(numberOfMirnasSelector); const mirnaState = useAppSelector(loadingMirnasStatusSelector); + const isPending = mirnaState === 'pending'; + + const onAccordionClick = (): void => { + dispatch(displayMirnaList()); + }; return ( <AccordionItem> <AccordionItemHeading> - <AccordionItemButton variant="non-expandable"> + <AccordionItemButton + variant="non-expandable" + onClick={onAccordionClick} + disabled={isPending || mirnaNumber === SIZE_OF_EMPTY_ARRAY} + > MiRNA {mirnaState === 'pending' && ' (Loading...)'} {mirnaState === 'succeeded' && ` (${mirnaNumber})`} diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts index 3647b782c68b69b4faf555674cef96edf5f46859..e68271b783561b56761808589cd2785eb126548f 100644 --- a/src/redux/drawer/drawer.reducers.ts +++ b/src/redux/drawer/drawer.reducers.ts @@ -34,6 +34,12 @@ export const displayChemicalsListReducer = (state: DrawerState): void => { state.searchDrawerState.stepType = 'chemicals'; }; +export const displayMirnaListReducer = (state: DrawerState): void => { + state.drawerName = 'search'; + state.searchDrawerState.currentStep = STEP.SECOND; + state.searchDrawerState.stepType = 'mirna'; +}; + export const displayGroupedSearchResultsReducer = (state: DrawerState): void => { state.searchDrawerState.currentStep = STEP.FIRST; state.searchDrawerState.stepType = 'none'; diff --git a/src/redux/drawer/drawer.slice.ts b/src/redux/drawer/drawer.slice.ts index 1139ccb68763457d99577c66acd07b54d9ee4655..3deb088ddb094612b0e6086781c88b26026d4f31 100644 --- a/src/redux/drawer/drawer.slice.ts +++ b/src/redux/drawer/drawer.slice.ts @@ -6,6 +6,7 @@ import { displayDrugsListReducer, displayEntityDetailsReducer, displayGroupedSearchResultsReducer, + displayMirnaListReducer, openDrawerReducer, openSearchDrawerReducer, } from './drawer.reducers'; @@ -29,6 +30,7 @@ const drawerSlice = createSlice({ closeDrawer: closeDrawerReducer, displayDrugsList: displayDrugsListReducer, displayChemicalsList: displayChemicalsListReducer, + displayMirnaList: displayMirnaListReducer, displayGroupedSearchResults: displayGroupedSearchResultsReducer, displayEntityDetails: displayEntityDetailsReducer, }, @@ -40,6 +42,7 @@ export const { closeDrawer, displayDrugsList, displayChemicalsList, + displayMirnaList, displayGroupedSearchResults, displayEntityDetails, } = drawerSlice.actions;