databag/net/web/test/Person.test.tsx

import React, { useState, useEffect, useContext } from 'react';
import {render, act, screen, waitFor, fireEvent} from '@testing-library/react'
import { CardContext, CardContextProvider } from 'context/CardContext';
import { SettingsContextProvider } from 'context/SettingsContext';
import { useContact } from 'session/contact/useContact.hook';
import * as fetchUtil from 'api/fetchUtil';

let contactHook;
let cardContext;
function ContactView() {
  const [name, setName] = useState();
  const [status, setStatus] = useState();
  const { state, actions } = useContact('01ab23');
  const [renderCount, setRenderCount] = useState(0);
  const card = useContext(CardContext);
  cardContext = card;
  contactHook = actions;

  useEffect(() => {
    const rendered = [];
    setName(state.name);
    setStatus(state.status);
    setRenderCount(renderCount + 1);
  }, [state]);

  return (
    //@ts-ignore
    <div count={renderCount}>
      <div data-testid="name">{ name }</div>
      <div data-testid="status">{ status }</div>
    </div>
  );
}

function ContactTestApp() {
  return (
    <CardContextProvider>
      <SettingsContextProvider>
        <ContactView />
      </SettingsContextProvider>
    </CardContextProvider>
  );
}

let fetchCards;
let fetchProfile;
let fetchDetail;
const realFetchWithTimeout = fetchUtil.fetchWithTimeout;
const realFetchWithCustomTimeout = fetchUtil.fetchWithCustomTimeout;
beforeEach(() => {
  fetchCards = [];
  fetchDetail = {};
  fetchProfile = {};

  const mockFetch = jest.fn().mockImplementation((url, options) => {

    if (url.startsWith('/contact/cards?agent')) {
      return Promise.resolve({
        json: () => Promise.resolve(fetchCards)
      });
    }
    else if (url.startsWith('/contact/cards/000a/profile?agent')) {
      return Promise.resolve({
        json: () => Promise.resolve(fetchProfile)
      });
    }
    else if (url.startsWith('/contact/cards/000a/detail?agent')) {
      return Promise.resolve({
        json: () => Promise.resolve(fetchDetail)
      });
    }
    else {
      return Promise.resolve({
        json: () => Promise.resolve([])
      });
    }
  });
  //@ts-ignore
  fetchUtil.fetchWithTimeout = mockFetch;
  //@ts-ignore
  fetchUtil.fetchWithCustomTimeout = mockFetch;
});

afterEach(() => {
  //@ts-ignore
  fetchUtil.fetchWithTimeout = realFetchWithTimeout;
  //@ts-ignore
  fetchUtil.fetchWithCustomTimeout = realFetchWithCustomTimeout;
});

test('update contact name', async () => {

  render(<ContactTestApp />);

  await waitFor(async () => {
    expect(cardContext).not.toBe(null);
    expect(contactHook).not.toBe(null);
  });

  fetchCards = [{
    id: '000a',
    revision: 1,
    data: {
      detailRevision: 2,
      profileRevision: 3,
      notifiedProfile: 3,
      notifiedArticle: 5,
      notifiedChannel: 6,
      notifiedView: 7,
      cardDetail: { status: 'connected', statusUpdate: 136, token: '01ab', },
      cardProfile: { guid: '01ab23', handle: 'test1', name: 'tester', imageSet: false,
        seal: 'abc', version: '1.1.1', node: 'test.org' },
    },
  }];

  await act(async () => {
    cardContext.actions.setToken('abc123');
    cardContext.actions.setRevision(1);
  });

  await waitFor(async () => {
    expect(screen.getByTestId('name').textContent).toBe('tester');
    expect(screen.getByTestId('status').textContent).toBe('connected');
  });

  fetchCards = [{
    id: '000a',
    revision: 2,
    data: {
      detailRevision: 2,
      profileRevision: 4,
      notifiedProfile: 3,
      notifiedArticle: 5,
      notifiedChannel: 6,
      notifiedView: 7,
    },
  }];

  fetchProfile = { guid: '01ab23', handle: 'test1', name: 'tested', imageSet: false,
        seal: 'abc', version: '1.1.1', node: 'test.org' },

  await act(async () => {
    cardContext.actions.setRevision(2);
  });

  await waitFor(async () => {
    expect(screen.getByTestId('name').textContent).toBe('tested');
    expect(screen.getByTestId('status').textContent).toBe('connected');
  });

  fetchCards = [{
    id: '000a',
    revision: 2,
    data: {
      detailRevision: 3,
      profileRevision: 4,
      notifiedProfile: 3,
      notifiedArticle: 5,
      notifiedChannel: 6,
      notifiedView: 7,
    },
  }];

  fetchDetail = { status: 'confirmed', statusUpdate: 137 },

  await act(async () => {
    cardContext.actions.setRevision(3);
  });

  await waitFor(async () => {
    expect(screen.getByTestId('name').textContent).toBe('tested');
    expect(screen.getByTestId('status').textContent).toBe('connected');
  });

  fetchCards = [{
    id: '000a',
    revision: 3,
    data: {
      detailRevision: 3,
      profileRevision: 4,
      notifiedProfile: 3,
      notifiedArticle: 5,
      notifiedChannel: 6,
      notifiedView: 7,
    },
  }];

  fetchDetail = { status: 'confirmed', statusUpdate: 137 },

  await act(async () => {
    cardContext.actions.setRevision(4);
  });

  await waitFor(async () => {
    expect(screen.getByTestId('name').textContent).toBe('tested');
    expect(screen.getByTestId('status').textContent).toBe('confirmed');
  });

  fetchCards = [{
    id: '000a',
    revision: 4,
  }];

  await act(async () => {
    cardContext.actions.setRevision(5);
  });

  await waitFor(async () => {
    expect(screen.getByTestId('name').textContent).toBe('');
    expect(screen.getByTestId('status').textContent).toBe('');
  });


});