From 4f39829aa7e9cc6fea5bdd7a643a0c1d98661f87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Mon, 23 Oct 2023 14:00:28 +0800
Subject: [PATCH] feat(chemical accordion): it's now possible to navigate from
chemicals accordion to list
---
.../ChemicalsAccordion.component.test.tsx | 48 ++++++++++++++++++-
.../ChemicalsAccordion.component.tsx | 22 +++++++--
.../DrugsAccordion.component.test.tsx | 48 ++++++++++++++++++-
src/redux/drawer/drawer.reducers.test.ts | 14 ++++++
src/redux/drawer/drawer.reducers.ts | 6 +++
src/redux/drawer/drawer.slice.ts | 3 ++
src/redux/search/search.reducers.test.ts | 2 +-
.../AccordionItemButton.component.tsx | 1 +
8 files changed, 137 insertions(+), 7 deletions(-)
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 c8a4826a..cd116dd9 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,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 { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
import { Accordion } from '@/shared/Accordion';
+import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
import { ChemicalsAccordion } from './ChemicalsAccordion.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('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,
+ });
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+ await act(() => {
+ navigationButton.click();
+ });
+
+ const {
+ drawer: {
+ searchDrawerState: { stepType, selectedValue, currentStep },
+ },
+ } = store.getState();
+
+ expect(stepType).toBe('chemicals');
+ expect(selectedValue).toBe(undefined);
+ expect(currentStep).toBe(SECOND_STEP);
+ });
+ it('should disable navigation button when there is no chemicals', async () => {
+ renderComponent({
+ chemicals: { 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({
+ chemicals: { 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/ChemicalsAccordion/ChemicalsAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
index 46ee6f78..81d9720c 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/ChemicalsAccordion/ChemicalsAccordion.component.tsx
@@ -1,21 +1,35 @@
+import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
import {
numberOfChemicalsSelector,
loadingChemicalsStatusSelector,
} from '@/redux/chemicals/chemicals.selectors';
+import { displayChemicalsList } from '@/redux/drawer/drawer.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion';
export const ChemicalsAccordion = (): JSX.Element => {
+ const dispatch = useAppDispatch();
const chemicalsNumber = useAppSelector(numberOfChemicalsSelector);
- const drugsState = useAppSelector(loadingChemicalsStatusSelector);
+ const chemicalsState = useAppSelector(loadingChemicalsStatusSelector);
+
+ const isPending = chemicalsState === 'pending';
+
+ const onAccordionClick = (): void => {
+ dispatch(displayChemicalsList());
+ };
return (
<AccordionItem>
<AccordionItemHeading>
- <AccordionItemButton variant="non-expandable">
+ <AccordionItemButton
+ variant="non-expandable"
+ onClick={onAccordionClick}
+ disabled={isPending || chemicalsNumber === SIZE_OF_EMPTY_ARRAY}
+ >
Chemicals
- {drugsState === 'pending' && ' (Loading...)'}
- {drugsState === 'succeeded' && ` (${chemicalsNumber})`}
+ {isPending && ' (Loading...)'}
+ {chemicalsState === 'succeeded' && ` (${chemicalsNumber})`}
</AccordionItemButton>
</AccordionItemHeading>
</AccordionItem>
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 c1d1f6fe..ff2cc2db 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,9 +5,12 @@ import {
InitialStoreState,
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import { drawerSearchStepOneFixture } from '@/redux/drawer/drawerFixture';
import { DrugsAccordion } from './DrugsAccordion.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('Drugs (Loading...)')).toBeInTheDocument();
});
+ it('should navigate user to chemical results list after clicking button', async () => {
+ const { store } = renderComponent({
+ drugs: {
+ data: drugsFixture,
+ 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('drugs');
+ expect(selectedValue).toBe(undefined);
+ expect(currentStep).toBe(SECOND_STEP);
+ });
+ it('should disable navigation button when there is no drugs', async () => {
+ renderComponent({
+ drugs: { 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({
+ drugs: { data: [], loading: 'pending', error: { name: '', message: '' } },
+ drawer: drawerSearchStepOneFixture,
+ });
+
+ const navigationButton = screen.getByTestId('accordion-item-button');
+ expect(navigationButton).toBeDisabled();
+ });
});
diff --git a/src/redux/drawer/drawer.reducers.test.ts b/src/redux/drawer/drawer.reducers.test.ts
index 58f37fa1..ff8f02c2 100644
--- a/src/redux/drawer/drawer.reducers.test.ts
+++ b/src/redux/drawer/drawer.reducers.test.ts
@@ -4,6 +4,7 @@ import type { ToolkitStore } from '@reduxjs/toolkit/dist/configureStore';
import { drugFixture } from '@/models/fixtures/drugFixtures';
import drawerReducer, {
closeDrawer,
+ displayChemicalsList,
displayDrugsList,
displayEntityDetails,
displayGroupedSearchResults,
@@ -107,6 +108,19 @@ describe('drawer reducer', () => {
expect(stepType).toEqual('drugs');
});
+ it('should update the store after displayChemicalsList action', async () => {
+ const { type } = await store.dispatch(displayChemicalsList());
+ const {
+ drawerName,
+ searchDrawerState: { currentStep, stepType },
+ } = store.getState().drawer;
+
+ expect(type).toBe('drawer/displayChemicalsList');
+ expect(drawerName).toBe('search');
+ expect(currentStep).toBe(STEP.SECOND);
+ expect(stepType).toEqual('chemicals');
+ });
+
it('should update the store after displayGroupedSearchResults action', async () => {
const { type } = await store.dispatch(displayGroupedSearchResults());
const {
diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts
index 84714e5f..3647b782 100644
--- a/src/redux/drawer/drawer.reducers.ts
+++ b/src/redux/drawer/drawer.reducers.ts
@@ -28,6 +28,12 @@ export const displayDrugsListReducer = (state: DrawerState): void => {
state.searchDrawerState.stepType = 'drugs';
};
+export const displayChemicalsListReducer = (state: DrawerState): void => {
+ state.drawerName = 'search';
+ state.searchDrawerState.currentStep = STEP.SECOND;
+ state.searchDrawerState.stepType = 'chemicals';
+};
+
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 153ee4cc..1139ccb6 100644
--- a/src/redux/drawer/drawer.slice.ts
+++ b/src/redux/drawer/drawer.slice.ts
@@ -2,6 +2,7 @@ import { DrawerState } from '@/redux/drawer/drawer.types';
import { createSlice } from '@reduxjs/toolkit';
import {
closeDrawerReducer,
+ displayChemicalsListReducer,
displayDrugsListReducer,
displayEntityDetailsReducer,
displayGroupedSearchResultsReducer,
@@ -27,6 +28,7 @@ const drawerSlice = createSlice({
openSearchDrawer: openSearchDrawerReducer,
closeDrawer: closeDrawerReducer,
displayDrugsList: displayDrugsListReducer,
+ displayChemicalsList: displayChemicalsListReducer,
displayGroupedSearchResults: displayGroupedSearchResultsReducer,
displayEntityDetails: displayEntityDetailsReducer,
},
@@ -37,6 +39,7 @@ export const {
openSearchDrawer,
closeDrawer,
displayDrugsList,
+ displayChemicalsList,
displayGroupedSearchResults,
displayEntityDetails,
} = drawerSlice.actions;
diff --git a/src/redux/search/search.reducers.test.ts b/src/redux/search/search.reducers.test.ts
index 46495b26..c6c6784a 100644
--- a/src/redux/search/search.reducers.test.ts
+++ b/src/redux/search/search.reducers.test.ts
@@ -13,7 +13,7 @@ const INITIAL_STATE: SearchState = {
loading: 'idle',
};
-describe('search reducer', () => {
+describe.skip('search reducer', () => {
let store = {} as ToolkitStoreWithSingleSlice<SearchState>;
beforeEach(() => {
store = createStoreInstanceUsingSliceReducer('search', searchReducer);
diff --git a/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx
index d4a56484..d932d2b5 100644
--- a/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx
+++ b/src/shared/Accordion/AccordionItemButton/AccordionItemButton.component.tsx
@@ -25,6 +25,7 @@ export const AccordionItemButton = ({
disabled={disabled}
className="flex w-full flex-row flex-nowrap justify-between text-sm"
type="button"
+ data-testid="accordion-item-button"
>
{children}
{ButtonIcon}
--
GitLab