CookieBanner.component.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
import { CookieBannerState } from '@/redux/cookieBanner/cookieBanner.types';
import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
import cookieBannerReducer from '@/redux/cookieBanner/cookieBanner.slice';
import { act } from 'react-dom/test-utils';
import { CookieBanner } from './CookieBanner.component';
import {
  USER_ACCEPTED_COOKIES_COOKIE_NAME,
  USER_ACCEPTED_COOKIES_COOKIE_VALUE,
} from './CookieBanner.constants';

const renderComponent = (): { store: ToolkitStoreWithSingleSlice<CookieBannerState> } => {
  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('cookieBanner', cookieBannerReducer);

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

describe('CookieBanner component', () => {
  beforeEach(() => {
    localStorage.clear();
  });
  it('renders cookie banner correctly first time', () => {
    renderComponent();
    expect(localStorage.getItem).toHaveBeenCalledWith(USER_ACCEPTED_COOKIES_COOKIE_NAME);

    const button = screen.getByLabelText(/accept cookies/i);
    expect(button).toBeInTheDocument();
  });

  it('hides the banner after accepting cookies', () => {
    renderComponent();
    const button = screen.getByLabelText(/accept cookies/i);
    act(() => {
      button.click();
    });

    expect(button).not.toBeInTheDocument();
    expect(localStorage.setItem).toHaveBeenCalledWith(
      USER_ACCEPTED_COOKIES_COOKIE_NAME,
      USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED,
    );
  });

  it('does not render the cookies banner when cookies are accepted', () => {
    renderComponent();

    const button = screen.getByLabelText(/accept cookies/i);
    expect(button).toBeInTheDocument();

    act(() => {
      button.click();
    });

    renderComponent();

    expect(localStorage.getItem).toHaveBeenCalledWith(USER_ACCEPTED_COOKIES_COOKIE_NAME);
    expect(button).not.toBeInTheDocument();
  });
});