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

import { act, renderHook } from '@testing-library/react-hooks';
import gql from 'graphql-tag';
import { ProviderPyramid } from 'ProviderPyramid';
import React from 'react';
import { CartIdProvider } from '../components/Cart/CartIdContext';
import throwErrorInDev from '../helpers/throwErrorInDev';
import { useAddMultipleToCart } from './useAddMultipleToCart';

jest.mock('../helpers/throwErrorInDev', () => jest.fn());

const MOCK_QUERY = gql`
  query CartQuery {
    cart {
      id
      totalQuantity
    }
  }
`;

const MOCK_MUTATION = gql`
  mutation addMultipleToCart($items: [AddMultipleToCartInput]!) {
    addMultipleToCart(items: $items) {
      cart {
        id
        totalQuantity
      }
    }
  }
`;

const MOCK_PRODUCTS = [
  {
    articleNumber: 'boogie',
    quantity: 2
  },
  {
    articleNumber: 'woogie',
    quantity: 1
  }
];

describe('useAddMultipleToCart', () => {
  it('throws an error when no products or queries are passed in', () => {
    renderHook(() => useAddMultipleToCart(), {
      wrapper: ProviderPyramid
    });
    // With nothing
    expect(throwErrorInDev).toHaveBeenCalledTimes(1);

    jest.resetAllMocks();

    // With products
    renderHook(() => useAddMultipleToCart(MOCK_PRODUCTS), {
      wrapper: ProviderPyramid
    });
    expect(throwErrorInDev).toHaveBeenCalledTimes(0);
  });

  it('fires a mutation and updates the returned status booleans', async () => {
    const mocks = [
      {
        request: {
          query: MOCK_MUTATION,
          variables: {
            cartId: null,
            items: MOCK_PRODUCTS
          }
        },
        result: {
          data: {
            addMultipleToCart: { cart: { id: null, totalQuantity: 5 } }
          }
        }
      }
    ];
    const Providers = ({ children }) => (
      <ProviderPyramid apolloMocks={mocks}>{children}</ProviderPyramid>
    );

    const { result, waitForNextUpdate } = renderHook(
      () =>
        useAddMultipleToCart(MOCK_PRODUCTS, {
          addMultipleToCartMutation: MOCK_MUTATION,
          cartQuery: MOCK_QUERY
        }),
      { wrapper: Providers }
    );

    const [mutate, { called, loading }] = result.current;

    // Before mutation
    expect(called).toBe(false);
    expect(loading).toBe(false);

    act(() => mutate()).then(() => {
      // After mutation
      const [, { called, loading, error }] = result.current;
      expect(called).toBe(true);
      expect(loading).toBe(false);
      expect(error).toBe(false);
    });

    {
      // During mutation
      const [, { called, loading }] = result.current;

      expect(called).toBe(true);
      expect(loading).toBe(true);
    }

    await waitForNextUpdate();
  });

  it('handles partial failure', async () => {
    const FAIL_INDEX = 0;

    const mocks = [
      {
        request: {
          query: MOCK_MUTATION,
          variables: {
            cartId: null,
            items: MOCK_PRODUCTS
          }
        },
        result: {
          data: {
            addMultipleToCart: { cart: { id: 'dfgsdfg', totalQuantity: 5 } }
          },
          errors: [
            {
              extensions: {
                code: 'AddToCartFailed',
                data: { index: FAIL_INDEX }
              }
            }
          ]
        }
      },
      {
        request: {
          query: MOCK_QUERY,
          variables: { cartId: null }
        },
        result: {
          data: {
            cart: {
              id: null,
              totalQuantity: 1
            }
          }
        }
      }
    ];

    const Providers = ({ children }) => (
      <ProviderPyramid apolloMocks={mocks}>
        <CartIdProvider>{children}</CartIdProvider>
      </ProviderPyramid>
    );

    const { result } = renderHook(
      () =>
        useAddMultipleToCart(MOCK_PRODUCTS, {
          addMultipleToCartMutation: MOCK_MUTATION,
          cartQuery: MOCK_QUERY
        }),
      { wrapper: Providers }
    );

    const [mutate] = result.current;

    await act(() => mutate());

    const [, { failedItems, error }] = result.current;

    expect(failedItems.has(MOCK_PRODUCTS[FAIL_INDEX])).toBe(true);
    expect(failedItems.get(MOCK_PRODUCTS[FAIL_INDEX])).toBe('AddToCartFailed');
    expect(error).toBe(false);
  });
});