From ced9d6f3f2cc0a85ae55ef8999f733e1aee7962f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Fri, 6 Oct 2023 15:28:44 +0800
Subject: [PATCH] feat(search drawer: conten accordion): implemented content
accordion with dummy data
---
jest.config.ts | 1 +
package-lock.json | 125 ++++++++++++++++++
package.json | 1 +
.../Map/Drawer/Drawer.component.test.tsx | 59 ++++++++-
.../Map/Drawer/Drawer.component.tsx | 44 +++---
src/components/Map/Drawer/Drawer.constants.ts | 1 -
.../BioEntitiesAccordion.component.tsx | 40 ++++++
.../BioEntitiesSubmapItem.component.test.tsx | 16 +++
.../BioEntitiesSubmapItem.component.tsx | 18 +++
.../BioEntitiesSubmapItem/index.ts | 1 +
.../BioEntitiesAccordion/index.ts | 1 +
.../SearchDrawerContent.component.tsx | 35 +++++
.../Map/Drawer/SearchDrawerContent/index.ts | 1 +
src/redux/drawer/drawer.reducers.test.ts | 12 +-
src/redux/drawer/drawer.reducers.ts | 5 +-
src/redux/drawer/drawer.slice.ts | 2 +-
src/redux/drawer/drawer.types.ts | 2 +-
src/shared/Accordion/Accordion.component.tsx | 4 +
.../AccordionItemPanel.component.tsx | 9 +-
src/utils/testing/getReduxWrapper.tsx | 31 +++++
20 files changed, 358 insertions(+), 50 deletions(-)
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/index.ts
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/index.ts
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/SearchDrawerContent.component.tsx
create mode 100644 src/components/Map/Drawer/SearchDrawerContent/index.ts
create mode 100644 src/utils/testing/getReduxWrapper.tsx
diff --git a/jest.config.ts b/jest.config.ts
index 610effde..9dcd2674 100644
--- a/jest.config.ts
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 998d2ae1..6dfd0fd8 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9cc8f727..a7feaab5 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Map/Drawer/Drawer.component.test.tsx b/src/components/Map/Drawer/Drawer.component.test.tsx
index 20426d94..67031c15 100644
--- a/src/components/Map/Drawer/Drawer.component.test.tsx
+++ b/src/components/Map/Drawer/Drawer.component.test.tsx
@@ -1,8 +1,24 @@
-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();
+ });
});
});
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
index 47ee77aa..4e692262 100644
--- a/src/components/Map/Drawer/Drawer.component.tsx
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -1,24 +1,21 @@
+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>
);
};
diff --git a/src/components/Map/Drawer/Drawer.constants.ts b/src/components/Map/Drawer/Drawer.constants.ts
index 3e3ce70f..3439102b 100644
--- a/src/components/Map/Drawer/Drawer.constants.ts
+++ b/src/components/Map/Drawer/Drawer.constants.ts
@@ -1,3 +1,2 @@
export const DRAWER_ROLE = 'drawer';
-export const CLOSE_BUTTON_ROLE = 'close-drawer-button';
export const SOURCE_FROM_DRAWER = 'search';
diff --git a/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
new file mode 100644
index 00000000..ff006e6b
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
@@ -0,0 +1,40 @@
+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>
+ );
+};
diff --git a/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
new file mode 100644
index 00000000..48c8a2eb
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.test.tsx
@@ -0,0 +1,16 @@
+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();
+ });
+});
diff --git a/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
new file mode 100644
index 00000000..8ee1caed
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
@@ -0,0 +1,18 @@
+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>
+);
diff --git a/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/index.ts b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/index.ts
new file mode 100644
index 00000000..2c5c4cc1
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/BioEntitiesSubmapItem/index.ts
@@ -0,0 +1 @@
+export { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem.component';
diff --git a/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/index.ts b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/index.ts
new file mode 100644
index 00000000..9a28e240
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/BioEntitiesAccordion/index.ts
@@ -0,0 +1 @@
+export { BioEntitiesAccordion } from './BioEntitiesAccordion.component';
diff --git a/src/components/Map/Drawer/SearchDrawerContent/SearchDrawerContent.component.tsx b/src/components/Map/Drawer/SearchDrawerContent/SearchDrawerContent.component.tsx
new file mode 100644
index 00000000..ad1b350c
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/SearchDrawerContent.component.tsx
@@ -0,0 +1,35 @@
+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>
+ );
+};
diff --git a/src/components/Map/Drawer/SearchDrawerContent/index.ts b/src/components/Map/Drawer/SearchDrawerContent/index.ts
new file mode 100644
index 00000000..72074d52
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerContent/index.ts
@@ -0,0 +1 @@
+export { SearchDrawerContent } from './SearchDrawerContent.component';
diff --git a/src/redux/drawer/drawer.reducers.test.ts b/src/redux/drawer/drawer.reducers.test.ts
index fb360a4f..7701a180 100644
--- a/src/redux/drawer/drawer.reducers.test.ts
+++ b/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 () => {
diff --git a/src/redux/drawer/drawer.reducers.ts b/src/redux/drawer/drawer.reducers.ts
index 5cc9f02b..47b8ef6d 100644
--- a/src/redux/drawer/drawer.reducers.ts
+++ b/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;
};
diff --git a/src/redux/drawer/drawer.slice.ts b/src/redux/drawer/drawer.slice.ts
index 42e426de..4c71fda1 100644
--- a/src/redux/drawer/drawer.slice.ts
+++ b/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({
diff --git a/src/redux/drawer/drawer.types.ts b/src/redux/drawer/drawer.types.ts
index b299eaa1..a0ad70b8 100644
--- a/src/redux/drawer/drawer.types.ts
+++ b/src/redux/drawer/drawer.types.ts
@@ -1,4 +1,4 @@
export type DrawerState = {
open: boolean;
- pathName: 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
+ drawerName: 'none' | 'search' | 'project-info' | 'plugins' | 'export' | 'legend';
};
diff --git a/src/shared/Accordion/Accordion.component.tsx b/src/shared/Accordion/Accordion.component.tsx
index f0de2a3e..c02c53d6 100644
--- a/src/shared/Accordion/Accordion.component.tsx
+++ b/src/shared/Accordion/Accordion.component.tsx
@@ -1,3 +1,4 @@
+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}
diff --git a/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx b/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx
index d0ef686d..439ba6d8 100644
--- a/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx
+++ b/src/shared/Accordion/AccordionItemPanel/AccordionItemPanel.component.tsx
@@ -1,9 +1,14 @@
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>
);
diff --git a/src/utils/testing/getReduxWrapper.tsx b/src/utils/testing/getReduxWrapper.tsx
new file mode 100644
index 00000000..302eb784
--- /dev/null
+++ b/src/utils/testing/getReduxWrapper.tsx
@@ -0,0 +1,31 @@
+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 };
+};
--
GitLab