Drawer.component.test.tsx

import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
import { DrawerState } from '@/redux/drawer/drawer.types';
import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
import { screen, render, act, fireEvent } from '@testing-library/react';
import drawerReducer, { openDrawer } from '@/redux/drawer/drawer.slice';
import { Drawer } from './Drawer.component';

const renderComponent = (): { store: ToolkitStoreWithSingleSlice<DrawerState> } => {
  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('drawer', drawerReducer);

  return (
    render(
      <Wrapper>
        <Drawer />
      </Wrapper>,
    ),
    {
      store,
    }
  );
};

describe('Drawer - component', () => {
  it('should render Drawer', () => {
    renderComponent();

    expect(screen.getByRole('drawer')).toBeInTheDocument();
  });

  it('should not display drawer when its not open', () => {
    renderComponent();

    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();

      expect(screen.queryByTestId('search-drawer-content')).not.toBeInTheDocument();

      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();
    });
  });
});