useUserOverlays.test.ts

/* eslint-disable no-magic-numbers */
import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
import { renderHook } from '@testing-library/react';
import { DEFAULT_ERROR } from '@/constants/errors';
import { overlayFixture, overlaysPageFixture } from '@/models/fixtures/overlaysFixture';
import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
import { apiPath } from '@/redux/apiPath';
import { HttpStatusCode } from 'axios';
import { act } from 'react-dom/test-utils';
import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
import { useUserOverlays } from './useUserOverlays';

const mockedAxiosNewClient = mockNetworkNewAPIResponse();

describe('useUserOverlays', () => {
  it('should not fetch user overlays on mount if login does not exist', async () => {
    const { Wrapper, store } = getReduxStoreWithActionsListener({
      user: {
        authenticated: false,
        loading: 'succeeded',
        error: DEFAULT_ERROR,
        login: null,
        role: 'user',
        userData: null,
      },
      overlays: OVERLAYS_INITIAL_STATE_MOCK,
    });

    const {
      result: {
        current: { userOverlaysList },
      },
    } = renderHook(
      () => useUserOverlays(OVERLAYS_INITIAL_STATE_MOCK.userOverlays.data || [], null),
      {
        wrapper: Wrapper,
      },
    );

    const actions = store.getActions();
    const firstAction = actions[0];

    expect(firstAction).toBeUndefined();
    expect(userOverlaysList).toEqual([]);
  });
  it('should store fetched user overlays to userOverlaysList state', () => {
    mockedAxiosNewClient
      .onGet(
        apiPath.getAllUserOverlaysByCreatorQuery({
          publicOverlay: false,
          creator: 'test',
        }),
      )
      .reply(HttpStatusCode.Ok, overlaysPageFixture);

    const { Wrapper } = getReduxStoreWithActionsListener({
      user: {
        authenticated: true,
        loading: 'succeeded',
        error: DEFAULT_ERROR,
        login: 'test',
        role: 'user',
        userData: null,
      },
      overlays: {
        ...OVERLAYS_INITIAL_STATE_MOCK,
        userOverlays: {
          data: overlaysPageFixture.content,
          loading: 'idle',
          error: DEFAULT_ERROR,
        },
      },
    });

    const {
      result: {
        current: { userOverlaysList },
      },
    } = renderHook(() => useUserOverlays(overlaysPageFixture.content, null), {
      wrapper: Wrapper,
    });

    expect(userOverlaysList).toEqual(overlaysPageFixture.content);
  });
  it('should move user overlay list item on order change', async () => {
    const FIRST_USER_OVERLAY = overlayFixture;
    const SECOND_USER_OVERLAY = overlayFixture;

    const overlays = [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY];
    const reversedOverlays = [SECOND_USER_OVERLAY, FIRST_USER_OVERLAY];

    const page = {
      ...overlaysPageFixture,
      data: overlays,
    };
    mockedAxiosNewClient
      .onGet(
        apiPath.getAllUserOverlaysByCreatorQuery({
          publicOverlay: false,
          creator: 'test',
        }),
      )
      .reply(HttpStatusCode.Ok, page);

    const { Wrapper } = getReduxStoreWithActionsListener({
      user: {
        authenticated: true,
        loading: 'succeeded',
        error: DEFAULT_ERROR,
        login: 'test',
        role: 'user',
        userData: null,
      },
      overlays: {
        ...OVERLAYS_INITIAL_STATE_MOCK,
        userOverlays: {
          data: overlays,
          loading: 'idle',
          error: DEFAULT_ERROR,
        },
      },
    });

    const {
      result: {
        current: { moveUserOverlayListItem, userOverlaysList },
      },
    } = renderHook(() => useUserOverlays(overlays, null), {
      wrapper: Wrapper,
    });

    await act(() => {
      moveUserOverlayListItem(0, 1);
    });

    expect(userOverlaysList).toEqual(reversedOverlays);
  });
  it('calls updateOverlays on calling updateUserOverlaysOrder', async () => {
    const FIRST_USER_OVERLAY = { ...overlayFixture, order: 1, id: 12 };
    const SECOND_USER_OVERLAY = { ...overlayFixture, order: 2, id: 92 };

    const page = {
      ...overlaysPageFixture,
      data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
    };

    mockedAxiosNewClient
      .onGet(
        apiPath.getAllUserOverlaysByCreatorQuery({
          publicOverlay: false,
          creator: 'test',
        }),
      )
      .reply(HttpStatusCode.Ok, page);

    const { Wrapper, store } = getReduxStoreWithActionsListener({
      user: {
        authenticated: true,
        loading: 'succeeded',
        error: DEFAULT_ERROR,
        login: 'test',
        role: 'user',
        userData: null,
      },
      overlays: {
        ...OVERLAYS_INITIAL_STATE_MOCK,
        userOverlays: {
          data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
          loading: 'idle',
          error: DEFAULT_ERROR,
        },
      },
    });

    const originalOverlays = [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY];

    const {
      result: {
        current: { moveUserOverlayListItem, updateUserOverlaysOrder },
      },
    } = renderHook(() => useUserOverlays(originalOverlays, null), {
      wrapper: Wrapper,
    });

    await act(() => {
      moveUserOverlayListItem(0, 1);
    });

    updateUserOverlaysOrder();

    const actions = store.getActions();

    const firstAction = actions[0];
    expect(firstAction.type).toBe('overlays/updateOverlays/pending');
  });
});