diff --git a/src/components/FunctionalArea/ContextMenu/ContextMenu.component.test.tsx b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.test.tsx new file mode 100644 index 0000000000000000000000000000000000000000..90661a29cff805007733f3ed98c0fa7950cd8b32 --- /dev/null +++ b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.test.tsx @@ -0,0 +1,186 @@ +/* eslint-disable no-magic-numbers */ +import { StoreType } from '@/redux/store'; +import { + InitialStoreState, + getReduxWrapperWithStore, +} from '@/utils/testing/getReduxWrapperWithStore'; +import { act, render, screen } from '@testing-library/react'; +import { CONTEXT_MENU_INITIAL_STATE } from '@/redux/contextMenu/contextMenu.constants'; +import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture'; +import { ContextMenu } from './ContextMenu.component'; + +const renderComponent = (initialStore?: InitialStoreState): { store: StoreType } => { + const { Wrapper, store } = getReduxWrapperWithStore(initialStore); + return ( + render( + <Wrapper> + <ContextMenu /> + </Wrapper>, + ), + { + store, + } + ); +}; + +describe('ContextMenu - Component', () => { + describe('when context menu is hidden', () => { + beforeEach(() => { + renderComponent({ + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: false, + coordinates: [], + uniprot: '', + }, + }); + }); + + it('should context menu has hidden class', () => { + expect(screen.getByTestId('context-modal')).toBeInTheDocument(); + expect(screen.getByTestId('context-modal')).toHaveClass('hidden'); + }); + }); + + describe('when context menu is shown', () => { + it('should display context menu', () => { + renderComponent({ + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: true, + coordinates: [0, 0], + uniprot: '', + }, + }); + + expect(screen.getByTestId('context-modal')).toBeInTheDocument(); + expect(screen.getByTestId('context-modal')).not.toHaveClass('hidden'); + }); + + it('should display proper text when uniprot is not provided', () => { + renderComponent({ + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: true, + coordinates: [0, 0], + uniprot: '', + }, + }); + expect(screen.getByTestId('open-molart')).toBeInTheDocument(); + expect(screen.getByTestId('open-molart')).toHaveClass('cursor-not-allowed'); + }); + + it('should display proper text when uniprot is not provided', () => { + renderComponent({ + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: true, + coordinates: [0, 0], + uniprot: '', + }, + }); + + const openMolartElement = screen.getByTestId('open-molart'); + + expect(openMolartElement).toBeInTheDocument(); + expect(openMolartElement).toHaveClass('cursor-not-allowed'); + expect(screen.getByText('no UnitProt ID available', { exact: false })).toBeInTheDocument(); + }); + + it('should display uniprot id as option if it is provided', () => { + renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: bioEntityContentFixture.bioEntity.id.toString(), + loading: 'succeeded', + error: { name: '', message: '' }, + data: [ + { + ...bioEntityContentFixture, + bioEntity: { + ...bioEntityContentFixture.bioEntity, + fullName: 'BioEntity Full Name', + references: [ + { + ...bioEntityContentFixture.bioEntity.references[0], + type: 'UNIPROT', + }, + ], + }, + }, + ], + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: true, + coordinates: [0, 0], + currentSelectedBioEntityId: bioEntityContentFixture.bioEntity.id, + }, + }); + + const openMolartElement = screen.getByTestId('open-molart'); + + expect(openMolartElement).toBeInTheDocument(); + expect(openMolartElement).not.toHaveClass('cursor-not-allowed'); + expect( + screen.getByText(bioEntityContentFixture.bioEntity.references[0].resource, { + exact: false, + }), + ).toBeInTheDocument(); + }); + + it('should open molart modal when clicking on uniprot', async () => { + const { store } = renderComponent({ + bioEntity: { + data: [ + { + searchQueryElement: bioEntityContentFixture.bioEntity.id.toString(), + loading: 'succeeded', + error: { name: '', message: '' }, + data: [ + { + ...bioEntityContentFixture, + bioEntity: { + ...bioEntityContentFixture.bioEntity, + fullName: 'BioEntity Full Name', + references: [ + { + ...bioEntityContentFixture.bioEntity.references[0], + type: 'UNIPROT', + }, + ], + }, + }, + ], + }, + ], + loading: 'succeeded', + error: { message: '', name: '' }, + }, + contextMenu: { + ...CONTEXT_MENU_INITIAL_STATE, + isOpen: true, + coordinates: [0, 0], + currentSelectedBioEntityId: bioEntityContentFixture.bioEntity.id, + }, + }); + + const openMolartElement = screen.getByTestId('open-molart'); + + await act(() => { + openMolartElement.click(); + }); + + const { contextMenu, modal } = store.getState(); + + expect(contextMenu.isOpen).toBe(false); + expect(modal.isOpen).toBe(true); + expect(modal.modalName).toBe('mol-art'); + }); + }); +}); diff --git a/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx index 9076c46c2b7f33b0dad3f4ef1a6a7019699daec7..0446bc33d5f3269e723113672e6d9876f1f12799 100644 --- a/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx +++ b/src/components/FunctionalArea/ContextMenu/ContextMenu.component.tsx @@ -37,6 +37,7 @@ export const ContextMenu = (): React.ReactNode => { left: `${coordinates[FIRST_ARRAY_ELEMENT]}px`, top: `${coordinates[SECOND_ARRAY_ELEMENT]}px`, }} + data-testid="context-modal" > <button className={twMerge( @@ -45,6 +46,7 @@ export const ContextMenu = (): React.ReactNode => { )} onClick={handleOpenMolArtClick} type="button" + data-testid="open-molart" > Open MolArt ({getUnitProtId()}) </button>