Apollo Hooks Mutation Test

changeStatus.js

import gql from "graphql-tag";
import { get } from "lodash";
import { useCallback } from "react";
import { useMutation } from "react-apollo-hooks";
import { GET_LEAD_HEADER } from "./getLeadHeader";

const CHANGE_STATUS = gql`
  mutation changeStatus($id: ID!, $status: String!) {
    changeStatus(id: $id, status: $status) {
      id
      success
      update {
        status
      }
    }
  }
`;

export default function useChangeStatus(contactId) {
  if (!contactId) throw new Error("ContactId not defined");
  const changeStatus = useMutation(CHANGE_STATUS, {
    update: (proxy, mutationResult) => {
      const status = get(mutationResult, "data.changeStatus.update.status", []);
      console.log("Updating Optimistically the Status for", contactId, status);
      const queryRes = proxy.readQuery({
        query: GET_LEAD_HEADER,
        variables: {
          id: contactId
        }
      });
      queryRes.getLeadById.Status = status;
      proxy.writeQuery({
        query: GET_LEAD_HEADER,
        variables: {
          id: contactId
        },
        data: queryRes
      });
    }
  });

  const action = useCallback(
    status =>
      changeStatus({
        variables: { status, id: contactId },
        optimisticResponse: {
          __typename: "Mutation",
          changeStatus: {
            __typename: "ChangeStatusMutationResult",
            id: contactId,
            success: true,
            optimistic: true,
            update: {
              __typename: "ChangeStatusUpdate",
              status
            }
          }
        }
      }),
    [changeStatus, contactId]
  );
  return action;
}

changeStatus.spec.js

import MockContainer from "../../../apollo/mocked/mock-container";
import { renderHook, act } from "react-hooks-testing-library";
import useChangeStatus from "../change-status";
import useLeadHeader from "../getLeadHeader";

function useWithLeadHeader() {
  const lead = useLeadHeader("catalana");
  const changeStatus = useChangeStatus("catalana");
  return {
    lead,
    changeStatus
  };
}

async function loadWithLeadHeader() {
  const { result, waitForNextUpdate, rerender } = renderHook(
    () => useWithLeadHeader(),
    {
      wrapper: MockContainer
    }
  );
  //   Suspense prevents the hook from returning here
  //   expect(result.current.lead.loading).toBeTruthy();
  //   expect(result.current.lead.error).not.toBeTruthy();
  await waitForNextUpdate();
  expect(result.current.lead.loading).toBe(false);
  expect(result.current.lead.error).toBeFalsy();

  return { result, waitForNextUpdate, rerender };
}


it("Updates Status in Other Query", async () => {
  const { result, waitForNextUpdate, rerender } = await loadWithLeadHeader();
  const {
    data: { getLeadById }
  } = result.current.lead;
  expect(getLeadById).toHaveProperty("Status", "Open - Not Contacted");
  act(async () => {
    const { changeStatus } = result.current;
    await changeStatus("Working - Contacted");
  });
  await waitForNextUpdate();
  expect(getLeadById).toHaveProperty("Status", "Working - Contacted");
});

getLeadHeader.js

import gql from "graphql-tag";
import { useQuery } from "react-apollo-hooks";

export const GET_LEAD_HEADER = gql`
  query getLeadById($id: ID!) {
    getLeadById(id: $id) {
      Id
      Status
    }
  }
`;

export default function useLeadHeader(contactId) {
  return useQuery(GET_LEAD_HEADER, {
    variables: { id: contactId },
    suspend: true
  });
}