feat(chemicals,mirna accordion): added chemicals and mirna accordion

src/components/Map/Drawer/SearchDrawerContent/ChemicalsAccordion/ChemicalsAccordion.component.test.tsx

+import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture';
+import { Accordion } from '@/shared/Accordion';
+import { ChemicalsAccordion } from './ChemicalsAccordion.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <Accordion>
+          <ChemicalsAccordion />
+        </Accordion>
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('DrugsAccordion - component', () => {
+  it('should display drugs number after succesfull chemicals search', () => {
+    renderComponent({
+      chemicals: { data: chemicalsFixture, loading: 'succeeded', error: { name: '', message: '' } },
+    });
+    expect(screen.getByText('Chemicals (2)')).toBeInTheDocument();
+  });
+  it('should display loading indicator while waiting for chemicals search response', () => {
+    renderComponent({
+      chemicals: { data: [], loading: 'pending', error: { name: '', message: '' } },
+    });
+    expect(screen.getByText('Chemicals (Loading...)')).toBeInTheDocument();
+  });
+});

src/components/Map/Drawer/SearchDrawerContent/ChemicalsAccordion/ChemicalsAccordion.component.tsx

+import {
+  numberOfChemicalsSelector,
+  loadingChemicalsStatusSelector,
+} from '@/redux/chemicals/chemicals.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion';
+
+export const ChemicalsAccordion = (): JSX.Element => {
+  const chemicalsNumber = useAppSelector(numberOfChemicalsSelector);
+  const drugsState = useAppSelector(loadingChemicalsStatusSelector);
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton variant="non-expandable">
+          Chemicals
+          {drugsState === 'pending' && ' (Loading...)'}
+          {drugsState === 'succeeded' && ` (${chemicalsNumber})`}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+    </AccordionItem>
+  );
+};

src/components/Map/Drawer/SearchDrawerContent/ChemicalsAccordion/index.ts

+export { ChemicalsAccordion } from './ChemicalsAccordion.component';

src/components/Map/Drawer/SearchDrawerContent/MirnaAccordion/MirnaAccordion.component.test.tsx

+import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { mirnasFixture } from '@/models/fixtures/mirnasFixture';
+import { Accordion } from '@/shared/Accordion';
+import { MirnaAccordion } from './MirnaAccordion.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <Accordion>
+          <MirnaAccordion />
+        </Accordion>
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('DrugsAccordion - component', () => {
+  it('should display drugs number after succesfull chemicals search', () => {
+    renderComponent({
+      mirnas: { data: mirnasFixture, loading: 'succeeded', error: { name: '', message: '' } },
+    });
+    expect(screen.getByText('MiRNA (2)')).toBeInTheDocument();
+  });
+  it('should display loading indicator while waiting for chemicals search response', () => {
+    renderComponent({
+      mirnas: { data: [], loading: 'pending', error: { name: '', message: '' } },
+    });
+    expect(screen.getByText('MiRNA (Loading...)')).toBeInTheDocument();
+  });
+});

src/components/Map/Drawer/SearchDrawerContent/MirnaAccordion/MirnaAccordion.component.tsx

+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import {
+  numberOfMirnasSelector,
+  loadingMirnasStatusSelector,
+} from '@/redux/mirnas/mirnas.selectors';
+import { AccordionItem, AccordionItemHeading, AccordionItemButton } from '@/shared/Accordion';
+
+export const MirnaAccordion = (): JSX.Element => {
+  const mirnaNumber = useAppSelector(numberOfMirnasSelector);
+  const mirnaState = useAppSelector(loadingMirnasStatusSelector);
+
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>
+        <AccordionItemButton variant="non-expandable">
+          MiRNA
+          {mirnaState === 'pending' && ' (Loading...)'}
+          {mirnaState === 'succeeded' && ` (${mirnaNumber})`}
+        </AccordionItemButton>
+      </AccordionItemHeading>
+    </AccordionItem>
+  );
+};

src/components/Map/Drawer/SearchDrawerContent/MirnaAccordion/index.ts

+export { MirnaAccordion } from './MirnaAccordion.component';

src/components/Map/Drawer/SearchDrawerContent/SearchDrawerContent.component.tsx

 import { BioEntitiesAccordion } from '@/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion';
 import { DrugsAccordion } from '@/components/Map/Drawer/SearchDrawerContent/DrugsAccordion';
+import { ChemicalsAccordion } from '@/components/Map/Drawer/SearchDrawerContent/ChemicalsAccordion';
+import { MirnaAccordion } from '@/components/Map/Drawer/SearchDrawerContent/MirnaAccordion';
 import { closeDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { IconButton } from '@/shared/IconButton';
@@ -33,6 +35,8 @@ export const SearchDrawerContent = (): JSX.Element => {
         <Accordion allowZeroExpanded>
           <BioEntitiesAccordion />
           <DrugsAccordion />
+          <ChemicalsAccordion />
+          <MirnaAccordion />
         </Accordion>
       </div>
     </div>

src/redux/chemicals/chemicals.selectors.ts

 import { rootSelector } from '@/redux/root/root.selectors';
 import { createSelector } from '@reduxjs/toolkit';
 
+const SIZE_OF_EMPTY_ARRAY = 0;
+
 export const chemicalsSelector = createSelector(rootSelector, state => state.chemicals);
 
 export const loadingChemicalsStatusSelector = createSelector(
   chemicalsSelector,
   state => state.loading,
 );
+
+export const numberOfChemicalsSelector = createSelector(chemicalsSelector, state =>
+  state.data ? state.data.length : SIZE_OF_EMPTY_ARRAY,
+);

src/redux/mirnas/mirnas.selectors.ts

 import { rootSelector } from '@/redux/root/root.selectors';
 import { createSelector } from '@reduxjs/toolkit';
 
+const SIZE_OF_EMPTY_ARRAY = 0;
+
 export const mirnasSelector = createSelector(rootSelector, state => state.mirnas);
 
 export const loadingMirnasStatusSelector = createSelector(mirnasSelector, state => state.loading);
+export const numberOfMirnasSelector = createSelector(mirnasSelector, state =>
+  state.data ? state.data.length : SIZE_OF_EMPTY_ARRAY,
+);

src/redux/store.ts

@@ -27,4 +27,3 @@ export type StoreType = typeof store;
 export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch;
-export type StoreType = typeof store;

src/shared/DrawerHeadingBackwardButton/DrawerHeadingBackwardButton.component.test.tsx

 import { StoreType } from '@/redux/store';
-import { InitialStoreState, getReduxWrapperWithStore } from '@/utils/getReduxWrapperWithStore';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
 import { DrawerHeadingBackwardButton } from './DrawerHeadingBackwardButton.component';
 
@@ -53,13 +56,13 @@ describe('DrawerHeadingBackwardButton - component', () => {
 
   it('should call class drawer on close button click', () => {
     const { store } = renderComponent('Title', 'value', {
-      drawer: { open: true, drawerName: 'search' },
+      drawer: { isOpen: true, drawerName: 'search' },
     });
-    expect(store.getState().drawer.open).toBe(true);
+    expect(store.getState().drawer.isOpen).toBe(true);
 
     const closeButton = screen.getByRole('close-drawer-button');
     closeButton.click();
 
-    expect(store.getState().drawer.open).toBe(false);
+    expect(store.getState().drawer.isOpen).toBe(false);
   });
 });

src/utils/getReduxWrapperWithStore.tsx

-import { RootState, StoreType } from '@/redux/store';
-import { configureStore } from '@reduxjs/toolkit';
-import { Provider } from 'react-redux';
-import bioEntityContentsReducer from '@/redux/bioEntityContents/bioEntityContents.slice';
-import chemicalsReducer from '@/redux/chemicals/chemicals.slice';
-import drawerReducer from '@/redux/drawer/drawer.slice';
-import drugsReducer from '@/redux/drugs/drugs.slice';
-import mirnasReducer from '@/redux/mirnas/mirnas.slice';
-import projectReducer from '@/redux/project/project.slice';
-import searchReducer from '@/redux/search/search.slice';
-import modelsReducer from '@/redux/models/models.slice';
-
-interface WrapperProps {
-  children: React.ReactNode;
-}
-
-export type InitialStoreState = Partial<RootState>;
-
-type GetReduxWrapperUsingSliceReducer = (initialState?: InitialStoreState) => {
-  Wrapper: ({ children }: WrapperProps) => JSX.Element;
-  store: StoreType;
-};
-
-export const getReduxWrapperWithStore: GetReduxWrapperUsingSliceReducer = (
-  preloadedState: InitialStoreState = {},
-) => {
-  const testStore = configureStore({
-    reducer: {
-      search: searchReducer,
-      project: projectReducer,
-      drugs: drugsReducer,
-      mirnas: mirnasReducer,
-      chemicals: chemicalsReducer,
-      bioEntityContents: bioEntityContentsReducer,
-      drawer: drawerReducer,
-      models: modelsReducer,
-    },
-    preloadedState,
-  });
-
-  const Wrapper = ({ children }: WrapperProps): JSX.Element => (
-    <Provider store={testStore}>{children}</Provider>
-  );
-
-  return { Wrapper, store: testStore };
-};

src/utils/testing/getReduxWrapperWithStore.tsx

-import { store } from '@/redux/store';
+import { RootState, StoreType } from '@/redux/store';
 import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import bioEntityContentsReducer from '@/redux/bioEntityContents/bioEntityContents.slice';
@@ -8,31 +8,17 @@ import drugsReducer from '@/redux/drugs/drugs.slice';
 import mirnasReducer from '@/redux/mirnas/mirnas.slice';
 import projectReducer from '@/redux/project/project.slice';
 import searchReducer from '@/redux/search/search.slice';
-import { SearchState } from '@/redux/search/search.types';
-import { ProjectState } from '@/redux/project/project.types';
-import { DrugsState } from '@/redux/drugs/drugs.types';
-import { MirnasState } from '@/redux/mirnas/mirnas.types';
-import { ChemicalsState } from '@/redux/chemicals/chemicals.types';
-import { BioEntityContentsState } from '@/redux/bioEntityContents/bioEntityContents.types';
-import { DrawerState } from '@/redux/drawer/drawer.types';
+import modelsReducer from '@/redux/models/models.slice';
 
 interface WrapperProps {
   children: React.ReactNode;
 }
 
-export type InitialStoreState = {
-  search?: SearchState;
-  project?: ProjectState;
-  drugs?: DrugsState;
-  mirnas?: MirnasState;
-  chemicals?: ChemicalsState;
-  bioEntityContents?: BioEntityContentsState;
-  drawer?: DrawerState;
-};
+export type InitialStoreState = Partial<RootState>;
 
 type GetReduxWrapperUsingSliceReducer = (initialState?: InitialStoreState) => {
   Wrapper: ({ children }: WrapperProps) => JSX.Element;
-  store: typeof store;
+  store: StoreType;
 };
 
 export const getReduxWrapperWithStore: GetReduxWrapperUsingSliceReducer = (
@@ -47,6 +33,7 @@ export const getReduxWrapperWithStore: GetReduxWrapperUsingSliceReducer = (
       chemicals: chemicalsReducer,
       bioEntityContents: bioEntityContentsReducer,
       drawer: drawerReducer,
+      models: modelsReducer,
     },
     preloadedState,
   });