diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx new file mode 100644 index 0000000000000000000000000000000000000000..64308bbfcfc98bbf3151d8ae1820afc4cf3529d9 --- /dev/null +++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.test.tsx @@ -0,0 +1,181 @@ +/* eslint-disable no-magic-numbers */ +import { + InitialStoreState, + getReduxWrapperWithStore, +} from '@/utils/testing/getReduxWrapperWithStore'; +import { render, screen } from '@testing-library/react'; +import { DRAWER_INITIAL_STATE } from '@/redux/drawer/drawer.constants'; +import { StoreType } from '@/redux/store'; +import { + bioEntitiesContentFixture, + bioEntityContentFixture, +} from '@/models/fixtures/bioEntityContentsFixture'; +import { FIRST_ARRAY_ELEMENT } from '@/constants/common'; +import { BioEntityDrawer } from './BioEntityDrawer.component'; + +const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => { + const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState); + + return ( + render( + <Wrapper> + <BioEntityDrawer /> + </Wrapper>, + ), + { + store, + } + ); +}; + +describe('BioEntityDrawer - component', () => { + beforeEach(() => { + jest.resetAllMocks(); + jest.clearAllMocks(); + }); + + describe("when there's NO matching bioEntity", () => { + beforeEach(() => + renderComponent({ + bioEntity: { + data: [], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + drawer: DRAWER_INITIAL_STATE, + }), + ); + + it('should not show drawer content', () => { + expect(screen.queryByText('Compartment:')).toBeNull(); + expect(screen.queryByText('Full name:')).toBeNull(); + expect(screen.queryByText('Annotations:')).toBeNull(); + expect(screen.queryByText('Source:')).toBeNull(); + }); + }); + describe('when there IS a matching bioEntity', () => { + const { bioEntity } = bioEntitiesContentFixture[FIRST_ARRAY_ELEMENT]; + + it('should show drawer header', () => { + renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: '', + loading: 'succeeded', + error: { name: '', message: '' }, + data: bioEntitiesContentFixture, + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + drawer: { + ...DRAWER_INITIAL_STATE, + bioEntityDrawerState: { + bioentityId: bioEntity.id, + }, + }, + }); + + expect(screen.getByText(bioEntity.stringType, { exact: false })).toBeInTheDocument(); + expect(screen.getByText(bioEntity.name, { exact: false })).toBeInTheDocument(); + }); + + it('should show drawer bioEntity full name', () => { + renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: '', + loading: 'succeeded', + error: { name: '', message: '' }, + data: [ + { + ...bioEntityContentFixture, + bioEntity: { + ...bioEntityContentFixture.bioEntity, + fullName: 'BioEntity Full Name', + }, + }, + ], + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + drawer: { + ...DRAWER_INITIAL_STATE, + bioEntityDrawerState: { + bioentityId: bioEntityContentFixture.bioEntity.id, + }, + }, + }); + + expect(screen.getByText('Full name:', { exact: false })).toBeInTheDocument(); + expect(screen.getByText('BioEntity Full Name', { exact: false })).toBeInTheDocument(); + }); + + it("should not show drawer bioEntity full name if it doesn't exists", () => { + renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: '', + loading: 'succeeded', + error: { name: '', message: '' }, + data: [ + { + ...bioEntityContentFixture, + bioEntity: { + ...bioEntityContentFixture.bioEntity, + fullName: null, + }, + }, + ], + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + drawer: { + ...DRAWER_INITIAL_STATE, + bioEntityDrawerState: { + bioentityId: bioEntityContentFixture.bioEntity.id, + }, + }, + }); + + expect(screen.queryByText('Full name:')).toBeNull(); + }); + + it('should show list of annotations ', () => { + renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: '', + loading: 'succeeded', + error: { name: '', message: '' }, + data: bioEntitiesContentFixture, + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + drawer: { + ...DRAWER_INITIAL_STATE, + bioEntityDrawerState: { + bioentityId: bioEntity.id, + }, + }, + }); + + expect(screen.getByText('Annotations:')).toBeInTheDocument(); + expect(screen.getByText(bioEntity.references[0].type, { exact: false })).toBeInTheDocument(); + expect( + screen.getByText(bioEntity.references[0].resource, { exact: false }), + ).toBeInTheDocument(); + }); + }); +}); diff --git a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx index a0368e2b3a3b0403b6956eae991e3fd58012c759..98b0c7bfa08413e9469876df4b55a825cface7ef 100644 --- a/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx +++ b/src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx @@ -1,5 +1,4 @@ import { DrawerHeading } from '@/shared/DrawerHeading'; -// import { bioEnititiesResultListSelector } from '@/redux/drawer/drawer.selectors'; import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { searchedFromMapBioEntityElement } from '@/redux/bioEntity/bioEntity.selectors'; import { Icon } from '@/shared/Icon'; @@ -12,7 +11,7 @@ export const BioEntityDrawer = (): React.ReactNode => { } return ( - <div className="h-full max-h-full" data-testid="reaction-drawer"> + <div className="h-full max-h-full" data-testid="bioentity-drawer"> <DrawerHeading title={ <> @@ -25,9 +24,11 @@ export const BioEntityDrawer = (): React.ReactNode => { <div className="text-sm font-normal"> Compartment: <b className="font-semibold">{bioEntityData.compartment}</b> </div> - <div className="text-sm font-normal"> - Full name: <b className="font-semibold">{bioEntityData.fullName}</b> - </div> + {bioEntityData.fullName && ( + <div className="text-sm font-normal"> + Full name: <b className="font-semibold">{bioEntityData.fullName}</b> + </div> + )} <h3 className="font-semibold">Annotations:</h3> {bioEntityData.references.map(reference => { return ( diff --git a/src/components/Map/Drawer/Drawer.component.test.tsx b/src/components/Map/Drawer/Drawer.component.test.tsx index a0cbbdfc2e08e3a39b9b1cd658d5e895f0e811c3..fb4be23d8760e48608e43a944bc35515b5d6d739 100644 --- a/src/components/Map/Drawer/Drawer.component.test.tsx +++ b/src/components/Map/Drawer/Drawer.component.test.tsx @@ -1,6 +1,7 @@ import { FIRST_ARRAY_ELEMENT } from '@/constants/common'; import { reactionsFixture } from '@/models/fixtures/reactionFixture'; import { + openBioEntityDrawerById, openReactionDrawerById, openSearchDrawerWithSelectedTab, openSubmapsDrawer, @@ -13,6 +14,7 @@ import { } from '@/utils/testing/getReduxWrapperWithStore'; import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import type {} from 'redux-thunk/extend-redux'; +import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture'; import { Drawer } from './Drawer.component'; const renderComponent = (initialStore?: InitialStoreState): { store: StoreType } => { @@ -109,4 +111,33 @@ describe('Drawer - component', () => { await waitFor(() => expect(screen.getByTestId('reaction-drawer')).toBeInTheDocument()); }); }); + + describe('bioEntity drawer', () => { + it.skip('should open drawer and display bioEntity', async () => { + const { id } = bioEntitiesContentFixture[FIRST_ARRAY_ELEMENT].bioEntity; + + const { store } = renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: '', + loading: 'succeeded', + error: { name: '', message: '' }, + data: bioEntitiesContentFixture, + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + }); + + expect(screen.queryByTestId('bioentity-drawer')).not.toBeInTheDocument(); + + await act(() => { + store.dispatch(openBioEntityDrawerById(id)); + }); + + await waitFor(() => expect(screen.getByTestId('bioentity-drawer')).toBeInTheDocument()); + }); + }); });