diff --git a/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx index 1dfdf365a4f01fe8a1ef1ecba56dee2045c99d57..4fddb0e309317922694a548ab88f3ecb5422d23a 100644 --- a/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx +++ b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx @@ -1,9 +1,17 @@ -import { StoreType } from '@/redux/store'; -import { render, screen } from '@testing-library/react'; +import { FIRST_ARRAY_ELEMENT } from '@/constants/common'; +import { + BACKGROUNDS_MOCK, + BACKGROUND_INITIAL_STATE_MOCK, +} from '@/redux/backgrounds/background.mock'; +import { initialMapStateFixture } from '@/redux/map/map.fixtures'; +import { AppDispatch, RootState, StoreType } from '@/redux/store'; +import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener'; import { InitialStoreState, getReduxWrapperWithStore, } from '@/utils/testing/getReduxWrapperWithStore'; +import { render, screen } from '@testing-library/react'; +import { MockStoreEnhanced } from 'redux-mock-store'; import { MapAdditionalOptions } from './MapAdditionalOptions.component'; const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => { @@ -21,9 +29,47 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St ); }; +const renderComponentWithActionListener = ( + initialStoreState: InitialStoreState = {}, +): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => { + const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState); + + return ( + render( + <Wrapper> + <MapAdditionalOptions /> + </Wrapper>, + ), + { + store, + } + ); +}; + describe('MapAdditionalOptions - component', () => { it('should display background selector', () => { renderComponent(); expect(screen.getByTestId('background-selector')).toBeInTheDocument(); }); + + it('should render browse overview images button', () => { + renderComponent(); + expect(screen.getByText('Browse overview images')).toBeInTheDocument(); + }); + + it('should open overview image modal on button click', () => { + const { store } = renderComponentWithActionListener({ + map: initialMapStateFixture, + backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK }, + }); + + const overviewImageButton = screen.getByText('Browse overview images'); + overviewImageButton.click(); + + const actions = store.getActions(); + expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({ + payload: undefined, + type: 'modal/openOverviewImagesModal', + }); + }); });