ResultsList.component.test.tsx

/* eslint-disable no-magic-numbers */
import { act, render, screen } from '@testing-library/react';
import {
  InitialStoreState,
  getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { StoreType } from '@/redux/store';
import { drugsFixture } from '@/models/fixtures/drugFixtures';
import { ResultsList } from './ResultsList.component';

const INITIAL_STATE: InitialStoreState = {
  search: {
    searchValue: 'aspirin',
    loading: 'idle',
  },
  drawer: {
    isOpen: true,
    drawerName: 'search',
    searchDrawerState: {
      currentStep: 2,
      stepType: 'drugs',
      selectedValue: undefined,
    },
  },
  drugs: {
    data: drugsFixture,
    loading: 'succeeded',
    error: { name: '', message: '' },
  },
};

const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);

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

describe('ResultsList - component ', () => {
  it('should render results and navigation panel', () => {
    renderComponent(INITIAL_STATE);

    expect(screen.getByText('drugs:')).toBeInTheDocument();
    expect(screen.getByText('aspirin')).toBeInTheDocument();

    // These tests will be uncommented when list of drugs will be ready
    // const fristDrugName = drugsFixture[0].name;
    // const secondDrugName = drugsFixture[1].name;

    // expect(screen.getByText(fristDrugName)).toBeInTheDocument();
    // expect(screen.getByText(secondDrugName)).toBeInTheDocument();
  });
  it('should navigate to grouped search results after backward button click', async () => {
    const { store } = renderComponent(INITIAL_STATE);

    const {
      drawer: {
        searchDrawerState: { currentStep, stepType },
      },
    } = store.getState();

    expect(currentStep).toBe(2);
    expect(stepType).toBe('drugs');

    const backwardButton = screen.getByRole('close-drawer-button');
    await act(() => {
      backwardButton.click();
    });

    const {
      drawer: {
        searchDrawerState: { currentStep: updatedStep, stepType: updatedStepType },
      },
    } = store.getState();

    expect(updatedStep).toBe(1);
    expect(updatedStepType).toBe('none');
  });
});