useWithFetch.test.tsx

/**
 * @jest-environment jsdom
 */

import { renderHook } from '@testing-library/react-hooks';
import React from 'react';
import fetchMock from 'jest-fetch-mock';
import { mockAlekClient } from 'modules/mockdata';
import { Client } from 'modules/typescript';
import 'modules/config/src/globals';
import useWithFetch from 'modules/with-fetch/src/useWithFetch';

import TestEnvProvider from './TestEnvProvider';

// require('./useWithFetchTestSetup');
const CACHE_EXPIRATION_TIME = 5000;
describe('Gets AlekClientHeavy three times. First one from API call. Second one from cache. Third one after cache has expired, so from API call again.', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });
  test('Gets the AlekClientHeavy mockdata from useWithFetch', async () => {
    const wrapper = ({ children }: { children: React.ReactChildren }) => (
      <TestEnvProvider>{children}</TestEnvProvider>
    );

    fetchMock.mockResponses(
      // [JSON.stringify('error getting initial data'), { status: 500 }],
      [JSON.stringify([mockAlekClient]), { status: 200 }],
    );

    const UWFAlekHeavyClientHook = () =>
      useWithFetch<Client>(
        'Trainer/GetHeavyClientsById',
        'heavyAlekClientWFDataProp',
        {
          opts: {
            query: {
              clientId: 1,
            },
          },
          cacheExpirationDuration: CACHE_EXPIRATION_TIME,
        },
      );

    const { result, waitForValueToChange } = renderHook(
      UWFAlekHeavyClientHook,
      {
        wrapper,
      },
    );

    await waitForValueToChange(
      () => result.current.heavyAlekClientWFDataProp.data,
    );

    const { heavyAlekClientWFDataProp } = result.current;

    const alekClientHeavy = heavyAlekClientWFDataProp.data[0];

    expect(heavyAlekClientWFDataProp.fromCache).toEqual(false);
    expect(heavyAlekClientWFDataProp.isDataLoading).toEqual(false);
    expect(alekClientHeavy).toEqual(mockAlekClient);

    // NOW BEGIN PULL FROM CACHE
    const hookResults = renderHook(UWFAlekHeavyClientHook, {
      wrapper,
    });

    const cachedResult = hookResults.result;
    const cachedResultWait = hookResults.waitForValueToChange;

    await cachedResultWait(() => {
      return cachedResult.current.heavyAlekClientWFDataPropFromCache.fromCache;
    });
    const { heavyAlekClientWFDataPropFromCache } = cachedResult.current;

    expect(heavyAlekClientWFDataPropFromCache.fromCache).toEqual(true);
    expect(heavyAlekClientWFDataPropFromCache.isDataLoading).toEqual(false);
    expect(heavyAlekClientWFDataPropFromCache.data[0]).toEqual(mockAlekClient);

    // Wait for the cache to expire
    await new Promise((resolve) =>
      setTimeout(resolve, CACHE_EXPIRATION_TIME + 10),
    );

    const cacheExpired = renderHook(UWFAlekHeavyClientHook, {
      wrapper,
    });

    const cacheExpiredCacheResult = cacheExpired.result;
    const cacheExpiredCacheWait = cacheExpired.waitForValueToChange;

    expect(
      cacheExpiredCacheResult.current.heavyAlekClientWFDataPropCacheExpired
        .isDataLoading,
    ).toEqual(true);

    await cacheExpiredCacheWait(
      () =>
        cacheExpiredCacheResult.current.heavyAlekClientWFDataPropCacheExpired
          .fromCache,
    );

    const {
      heavyAlekClientWFDataPropCacheExpired,
    } = cacheExpiredCacheResult.current;

    const alekClientHeavyCacheExpired =
      heavyAlekClientWFDataPropCacheExpired.data[0];

    expect(heavyAlekClientWFDataPropCacheExpired.fromCache).toEqual(true);
    expect(heavyAlekClientWFDataPropCacheExpired.isDataLoading).toEqual(false);
    expect(alekClientHeavyCacheExpired).toEqual(mockAlekClient);
  });
});