feat(search drawer: conten accordion): implemented content accordion with dummy data

jest.config.ts

@@ -26,6 +26,7 @@ const config = {
   coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   prettierPath: require.resolve('prettier-2'),
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package-lock.json

@@ -56,6 +56,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-junit": "^16.0.0",
+        "jest-watch-typeahead": "^2.2.2",
         "lint-staged": "^14.0.1",
         "prettier": "^3.0.3",
         "prettier-2": "npm:prettier@^2",
@@ -8087,6 +8088,130 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
       "dev": true
     },
+    "node_modules/jest-watch-typeahead": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-2.2.2.tgz",
+      "integrity": "sha512-+QgOFW4o5Xlgd6jGS5X37i08tuuXNW8X0CV9WNFi+3n8ExCIP+E1melYhvYLjv5fE6D0yyzk74vsSO8I6GqtvQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^6.0.0",
+        "chalk": "^5.2.0",
+        "jest-regex-util": "^29.0.0",
+        "jest-watcher": "^29.0.0",
+        "slash": "^5.0.0",
+        "string-length": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "jest": "^27.0.0 || ^28.0.0 || ^29.0.0"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/ansi-escapes": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
+      "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/char-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz",
+      "integrity": "sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/string-length": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
+      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
+      "dev": true,
+      "dependencies": {
+        "char-regex": "^2.0.0",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/jest-watch-typeahead/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/jest-watcher": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.7.0.tgz",

package.json

@@ -70,6 +70,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
+    "jest-watch-typeahead": "^2.2.2",
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",
     "prettier-2": "npm:prettier@^2",

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

-import { screen, fireEvent, type RenderResult } from '@testing-library/react';
-import { renderComponentWithProvider } from '@/utils/renderComponentWithProvider';
+import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
+import { DrawerState } from '@/redux/drawer/drawer.types';
+import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapper';
+import { screen, render, act, fireEvent } from '@testing-library/react';
+import drawerReducer, { openDrawer } from '@/redux/drawer/drawer.slice';
 import { Drawer } from './Drawer.component';
 
-const renderComponent = (): RenderResult => renderComponentWithProvider(<Drawer />);
+const renderComponent = (): { store: ToolkitStoreWithSingleSlice<DrawerState> } => {
+  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('drawer', drawerReducer);
+
+  return (
+    render(
+      <Wrapper>
+        <Drawer />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
 
 describe('Drawer - component', () => {
   it('should render Drawer', () => {
@@ -11,13 +27,42 @@ describe('Drawer - component', () => {
     expect(screen.getByRole('drawer')).toBeInTheDocument();
   });
 
-  it('should close Drawer', async () => {
+  it('should not display drawer when its not open', () => {
     renderComponent();
 
-    const button = screen.getByRole('close-drawer-button');
+    expect(screen.getByRole('drawer')).not.toHaveClass('translate-x-0');
+  });
+
+  describe('search drawer ', () => {
+    it('should open drawer and display search drawer content', async () => {
+      const { store } = renderComponent();
 
-    await fireEvent.click(button);
+      expect(screen.queryByTestId('search-drawer-content')).not.toBeInTheDocument();
 
-    expect(screen.getByRole('drawer')).not.toHaveClass('translate-x-0');
+      await act(() => {
+        store.dispatch(openDrawer('search'));
+      });
+
+      expect(screen.getByTestId('search-drawer-content')).toBeInTheDocument();
+    });
+
+    it('should close drawer after pressing close button', async () => {
+      const { store } = renderComponent();
+
+      await act(() => {
+        store.dispatch(openDrawer('search'));
+      });
+
+      expect(screen.getByTestId('search-drawer-content')).toBeInTheDocument();
+
+      const button = screen.getByRole('close-drawer-button');
+
+      await act(() => {
+        fireEvent.click(button);
+      });
+
+      expect(screen.getByRole('drawer')).not.toHaveClass('translate-x-0');
+      expect(screen.queryByTestId('search-drawer-content')).not.toBeInTheDocument();
+    });
   });
 });

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

+import dynamic from 'next/dynamic';
 import { twMerge } from 'tailwind-merge';
-import { IconButton } from '@/shared/IconButton';
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { closeDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { drawerDataSelector } from '@/redux/drawer/drawer.selectors';
-import {
-  CLOSE_BUTTON_ROLE,
-  DRAWER_ROLE,
-  SOURCE_FROM_DRAWER,
-} from '@/components/Map/Drawer/Drawer.constants';
+import { DRAWER_ROLE } from '@/components/Map/Drawer/Drawer.constants';
 
-export const Drawer = (): JSX.Element => {
-  const dispatch = useAppDispatch();
-  const drawerData = useAppSelector(drawerDataSelector);
-  const { open } = drawerData;
+const SearchDrawerContent = dynamic(
+  async () =>
+    import('@/components/Map/Drawer/SearchDrawerContent').then(
+      module => module.SearchDrawerContent,
+    ),
+  {
+    ssr: false,
+  },
+);
 
-  const handleCloseDrawer = (): void => {
-    // eslint-disable-next-line prefer-template
-    dispatch(closeDrawer(SOURCE_FROM_DRAWER));
-  };
+export const Drawer = (): JSX.Element => {
+  const { open, drawerName } = useAppSelector(drawerDataSelector);
 
   return (
     <div
@@ -28,19 +25,8 @@ export const Drawer = (): JSX.Element => {
       )}
       role={DRAWER_ROLE}
     >
-      <div className="flex items-center justify-between border-b border-b-divide px-6 py-8 text-xl">
-        <div>
-          <span className="font-normal">Search: </span>
-          <span className="font-semibold">NADH</span>
-        </div>
-        <IconButton
-          className="bg-white-pearl"
-          classNameIcon="fill-font-500"
-          icon="close"
-          role={CLOSE_BUTTON_ROLE}
-          onClick={handleCloseDrawer}
-        />
-      </div>
+      {open && drawerName === 'search' && <SearchDrawerContent />}
+      {/* other drawers comes here, should use dynamic import */}
     </div>
   );
 };

src/components/Map/Drawer/Drawer.constants.ts

 export const DRAWER_ROLE = 'drawer';
-export const CLOSE_BUTTON_ROLE = 'close-drawer-button';
 export const SOURCE_FROM_DRAWER = 'search';

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

+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemPanel,
+  AccordionItemHeading,
+} from '@/shared/Accordion';
+
+import { BioEntitiesSubmapItem } from '@/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem';
+
+export const BioEntitiesAccordion = (): JSX.Element => {
+  const entity = { mapName: 'main map', numberOfEntities: 21 };
+  return (
+    <Accordion allowZeroExpanded>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton>Content (2137)</AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel className="">
+          <BioEntitiesSubmapItem
+            mapName={entity.mapName}
+            numberOfEntities={entity.numberOfEntities}
+          />
+          <BioEntitiesSubmapItem
+            mapName={entity.mapName}
+            numberOfEntities={entity.numberOfEntities}
+          />
+          <BioEntitiesSubmapItem
+            mapName={entity.mapName}
+            numberOfEntities={entity.numberOfEntities}
+          />
+          <BioEntitiesSubmapItem
+            mapName={entity.mapName}
+            numberOfEntities={entity.numberOfEntities}
+          />
+        </AccordionItemPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};

src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx

+import { render, RenderResult, screen } from '@testing-library/react';
+import {
+  BioEntitiesSubmapItem,
+  BioEntitiesSubmapItemProps,
+} from './BioEntitiesSubmapItem.component';
+
+const renderComponent = ({ mapName, numberOfEntities }: BioEntitiesSubmapItemProps): RenderResult =>
+  render(<BioEntitiesSubmapItem mapName={mapName} numberOfEntities={numberOfEntities} />);
+
+describe('BioEntitiesSubmapItem - component', () => {
+  it('should display map name,number of elements, icon', () => {
+    renderComponent({ mapName: 'main map', numberOfEntities: 21 });
+
+    expect(screen.getByText('main map (21)')).toBeInTheDocument();
+  });
+});

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

+import { Icon } from '@/shared/Icon';
+
+export interface BioEntitiesSubmapItemProps {
+  mapName: string;
+  numberOfEntities: string | number;
+}
+
+export const BioEntitiesSubmapItem = ({
+  mapName,
+  numberOfEntities,
+}: BioEntitiesSubmapItemProps): JSX.Element => (
+  <div className="flex flex-row flex-nowrap justify-between pl-6 [&:not(:last-of-type)]:pb-4">
+    <p>
+      {mapName} ({numberOfEntities})
+    </p>
+    <Icon name="arrow" className="h-6 w-6 fill-font-500" />
+  </div>
+);

src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/index.ts

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

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

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

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

+import { BioEntitiesAccordion } from '@/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion';
+import { closeDrawer } from '@/redux/drawer/drawer.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { IconButton } from '@/shared/IconButton';
+
+export const CLOSE_BUTTON_ROLE = 'close-drawer-button';
+
+export const SearchDrawerContent = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+
+  const handleCloseDrawer = (): void => {
+    dispatch(closeDrawer());
+  };
+
+  return (
+    <div className="flex flex-col" data-testid="search-drawer-content">
+      <div className="flex items-center justify-between border-b border-b-divide px-6">
+        <div className=" py-8 text-xl">
+          <span className="font-normal">Search: </span>
+          <span className="font-semibold">NADH</span>
+        </div>
+        <IconButton
+          className="bg-white-pearl"
+          classNameIcon="fill-font-500"
+          icon="close"
+          role={CLOSE_BUTTON_ROLE}
+          onClick={handleCloseDrawer}
+        />
+      </div>
+      <div className="px-6">
+        <BioEntitiesAccordion />
+      </div>
+    </div>
+  );
+};

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

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

src/redux/drawer/drawer.reducers.test.ts

@@ -6,7 +6,7 @@ import type { DrawerState } from './drawer.types';
 
 const INITIAL_STATE: DrawerState = {
   open: false,
-  pathName: 'none',
+  drawerName: 'none',
 };
 
 type SliceReducerType = ToolkitStore<
@@ -38,20 +38,20 @@ describe('drawer reducer', () => {
 
   it('should update the store when you click a project info button on the nav bar', async () => {
     const { type } = await store.dispatch(openDrawer('project-info'));
-    const { open, pathName } = store.getState().drawer;
+    const { open, drawerName } = store.getState().drawer;
 
     expect(type).toBe('drawer/openDrawer');
     expect(open).toBe(true);
-    expect(pathName).toEqual('project-info');
+    expect(drawerName).toEqual('project-info');
   });
 
   it('should update the store when you click the close button on the drawer', async () => {
-    const { type } = await store.dispatch(closeDrawer('project-info'));
-    const { open, pathName } = store.getState().drawer;
+    const { type } = await store.dispatch(closeDrawer());
+    const { open, drawerName } = store.getState().drawer;
 
     expect(type).toBe('drawer/closeDrawer');
     expect(open).toBe(false);
-    expect(pathName).toEqual('project-info');
+    expect(drawerName).toEqual('none');
   });
 
   it.skip('should update the store when you type in the search', async () => {

src/redux/drawer/drawer.reducers.ts

@@ -4,10 +4,9 @@ import { PathName } from '@/types/pathName';
 
 export const openDrawerReducer = (state: DrawerState, action: PayloadAction<PathName>): void => {
   state.open = true;
-  state.pathName = action.payload;
+  state.drawerName = action.payload;
 };
 
-export const closeDrawerReducer = (state: DrawerState, action: PayloadAction<PathName>): void => {
+export const closeDrawerReducer = (state: DrawerState): void => {
   state.open = false;
-  state.pathName = action.payload;
 };

src/redux/drawer/drawer.slice.ts

@@ -4,7 +4,7 @@ import { openDrawerReducer, closeDrawerReducer } from './drawer.reducers';
 
 const initialState: DrawerState = {
   open: false,
-  pathName: 'none',
+  drawerName: 'none',
 };
 
 const drawerSlice = createSlice({

src/redux/drawer/drawer.types.ts

 export type DrawerState = {
   open: boolean;
-  pathName: 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
+  drawerName: 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
 };

src/shared/Accordion/Accordion.component.tsx

+import { twMerge } from 'tailwind-merge';
 import { Accordion as Ac } from 'react-accessible-accordion';
 import { DivAttributes } from 'react-accessible-accordion/dist/types/helpers/types';
 
@@ -9,6 +10,7 @@ type AccordionProps = Pick<DivAttributes, Exclude<keyof DivAttributes, 'onChange
   allowMultipleExpanded?: boolean;
   allowZeroExpanded?: boolean;
   onChange?(args: ID[]): void;
+  className?: string;
 };
 
 export const Accordion = ({
@@ -17,6 +19,7 @@ export const Accordion = ({
   allowMultipleExpanded,
   allowZeroExpanded,
   onChange,
+  className,
   ...rest
 }: AccordionProps): JSX.Element => (
   <Ac
@@ -24,6 +27,7 @@ export const Accordion = ({
     allowMultipleExpanded={allowMultipleExpanded}
     allowZeroExpanded={allowZeroExpanded}
     onChange={onChange}
+    className={twMerge('text-base', className)}
     {...rest}
   >
     {children}

src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx

 import { AccordionItemPanel as AIP } from 'react-accessible-accordion';
+import { twMerge } from 'tailwind-merge';
 
 interface AccordionItemPanelProps {
+  className?: string;
   children: React.ReactNode;
 }
 
-export const AccordionItemPanel = ({ children }: AccordionItemPanelProps): JSX.Element => (
-  <AIP className="pb-4">{children}</AIP>
+export const AccordionItemPanel = ({
+  className,
+  children,
+}: AccordionItemPanelProps): JSX.Element => (
+  <AIP className={twMerge('pb-4', className)}>{children}</AIP>
 );

src/utils/testing/getReduxWrapper.tsx

+import { Reducer } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import {
+  ToolkitStoreWithSingleSlice,
+  createStoreInstanceUsingSliceReducer,
+} from '../createStoreInstanceUsingSliceReducer';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+type GetReduxWrapperUsingSliceReducer = <StateType>(
+  name: string,
+  passedReducer: Reducer<StateType>,
+) => {
+  Wrapper: ({ children }: WrapperProps) => JSX.Element;
+  store: ToolkitStoreWithSingleSlice<StateType>;
+};
+
+export const getReduxWrapperUsingSliceReducer: GetReduxWrapperUsingSliceReducer = (
+  reducerName,
+  reducerInstance,
+) => {
+  const store = createStoreInstanceUsingSliceReducer(reducerName, reducerInstance);
+
+  const Wrapper = ({ children }: WrapperProps): JSX.Element => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { Wrapper, store };
+};