Modal.component.test.tsx

import { MODAL_INITIAL_STATE } from '@/redux/modal/modal.constants';
import { modalSelector } from '@/redux/modal/modal.selector';
import { StoreType } from '@/redux/store';
import {
  InitialStoreState,
  getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { render, screen } from '@testing-library/react';
import { Modal } from './Modal.component';

const renderComponent = (initialStore?: InitialStoreState): { store: StoreType } => {
  const { Wrapper, store } = getReduxWrapperWithStore(initialStore);
  return (
    render(
      <Wrapper>
        <Modal />
      </Wrapper>,
    ),
    {
      store,
    }
  );
};

describe('Modal - Component', () => {
  describe('when modal is hidden', () => {
    beforeEach(() => {
      renderComponent({
        modal: {
          ...MODAL_INITIAL_STATE,
          isOpen: false,
          modalTitle: 'Modal Hidden Title',
        },
      });
    });

    it('should modal have hidden class', () => {
      const modalElement = screen.getByRole('modal');

      expect(modalElement).toBeInTheDocument();
      expect(modalElement).toHaveClass('hidden');
    });
  });

  describe('when modal is shown', () => {
    let store: StoreType;

    beforeEach(() => {
      const { store: newStore } = renderComponent({
        modal: {
          ...MODAL_INITIAL_STATE,
          isOpen: true,
          modalTitle: 'Modal Opened Title',
        },
      });

      store = newStore;
    });

    it('should modal NOT have hidden class', () => {
      const modalElement = screen.getByRole('modal');

      expect(modalElement).toBeInTheDocument();
      expect(modalElement).not.toHaveClass('hidden');
    });

    it('shows modal title', () => {
      expect(screen.getByText('Modal Opened Title', { exact: false })).toBeInTheDocument();
    });

    it('shows modal close button', () => {
      expect(screen.getByLabelText('close button')).toBeInTheDocument();
    });

    it('closes modal on close button click', () => {
      const closeButton = screen.getByLabelText('close button');

      closeButton.click();

      const { isOpen } = modalSelector(store.getState());

      expect(isOpen).toBeFalsy();
    });
  });
});