@jetshop/core/hooks/useCustomerOrders.test.js

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { MockLink } from 'apollo-link-mock';
import gql from 'graphql-tag';
import * as React from 'react';
import { ApolloProvider } from 'react-apollo';
import { render, wait, cleanup } from '@testing-library/react';
import useCustomerOrders from './useCustomerOrdersQuery';
import throwErrorInDev from '../helpers/throwErrorInDev';

jest.mock('../helpers/throwErrorInDev');

afterEach(cleanup);

const helloQuery = gql`
  query HelloQuery {
    customer {
      orderHeaders {
        result {
          id
        }
        totalResults
      }
    }
  }
`;

const notACustomerQuery = gql`
  query NotACustomerQuery {
    something
  }
`;

const HELLO_MOCKS = [
  {
    request: {
      query: helloQuery,
      variables: {}
    },
    result: {
      data: {
        customer: {
          orderHeaders: {
            totalResults: 2,
            result: [
              {
                id: 'an order'
              },
              {
                id: 'another order'
              }
            ]
          }
        }
      }
    }
  },
  {
    request: {
      query: notACustomerQuery,
      variables: {}
    },
    result: {
      data: {
        something: 'hello'
      }
    }
  }
];

function createClient(mocks) {
  return new ApolloClient({
    cache: new InMemoryCache({ addTypename: false }),
    link: new MockLink(mocks)
  });
}

describe('useCustomerOrders', () => {
  function setup({ collect, query }) {
    const client = createClient(HELLO_MOCKS);

    const utils = render(
      <ApolloProvider client={client}>
        <TestHarness query={query}>
          {resp => {
            collect && collect(resp);
            return null;
          }}
        </TestHarness>
      </ApolloProvider>
    );

    return utils;
  }

  it('passes through loading state from query', async () => {
    let loading;

    setup({
      collect: resp => {
        loading = resp.loading;
      }
    });

    expect(loading).toBeTruthy();

    await wait();

    expect(loading).toBeFalsy();
  });

  it('returns orders', async () => {
    let orders;

    setup({
      collect: resp => {
        orders = resp.orders;
      }
    });

    expect(orders).toMatchSnapshot('loading orders');
    expect(orders).toHaveLength(0);

    await wait();

    expect(orders).toMatchSnapshot('loaded orders');
    expect(orders).toHaveLength(2);
  });

  it('returns totalResult', async () => {
    let total;

    setup({
      collect: resp => {
        total = resp.totalOrders;
      }
    });

    expect(total).toBe(undefined);

    await wait();

    expect(total).toBe(2);
  });

  it('returns the entire query response', async () => {
    let response;

    setup({
      collect: resp => {
        response = resp.result;
      }
    });

    await wait();

    expect(response).toMatchSnapshot();
  });

  it('throws an error when the query is not a valid customer order query', async () => {
    setup({ query: notACustomerQuery });

    await wait();

    expect(throwErrorInDev).toHaveBeenLastCalledWith(true, expect.any(String));
  });
});

function TestHarness({ children, query }) {
  const resp = useCustomerOrders({
    query: query || helloQuery,
    variables: {}
  });

  return children(resp);
}