diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx index d8a4c6bf7..e791e5efd 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx @@ -181,7 +181,7 @@ export const FixEmailAddressPerson: React.FC = ({ }, }, update: (cache) => { - cache.evict({ id: `EmailAddress:${id}` }); + cache.evict({ id: `EmailAddress:${email.id}` }); cache.gc(); }, onCompleted: () => { diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx index c192e5bc2..c1d08e0e3 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.test.tsx @@ -1,9 +1,8 @@ import React from 'react'; -import { ApolloCache, InMemoryCache } from '@apollo/client'; import { ThemeProvider } from '@mui/material/styles'; -import { render, waitFor } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ApolloErgonoMockMap, ErgonoMockShape } from 'graphql-ergonomock'; +import { ApolloErgonoMockMap } from 'graphql-ergonomock'; import { SnackbarProvider } from 'notistack'; import TestRouter from '__tests__/util/TestRouter'; import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; @@ -13,10 +12,6 @@ import { EmailAddressesMutation } from './AddEmailAddress.generated'; import { FixEmailAddresses } from './FixEmailAddresses'; import { contactId, - contactOneEmailAddressNodes, - contactTwoEmailAddressNodes, - mockCacheWriteData, - mockCacheWriteDataContactTwo, mockInvalidEmailAddressesResponse, newEmail, } from './FixEmailAddressesMocks'; @@ -50,10 +45,9 @@ const defaultGraphQLMock = { interface ComponentsProps { mocks?: ApolloErgonoMockMap; - cache?: ApolloCache; } -const Components = ({ mocks = defaultGraphQLMock, cache }: ComponentsProps) => ( +const Components = ({ mocks = defaultGraphQLMock }: ComponentsProps) => ( @@ -62,7 +56,6 @@ const Components = ({ mocks = defaultGraphQLMock, cache }: ComponentsProps) => ( EmailAddresses: EmailAddressesMutation; }> mocks={mocks} - cache={cache} onCall={mutationSpy} > { }); it('change second email for second person to primary then delete it', async () => { - const { getByTestId, queryByTestId } = render(); + const { getByTestId, queryByTestId, getByText, getByRole } = render( + , + ); const star11 = await waitFor(() => getByTestId('starOutlineIcon-testid2-1'), @@ -168,11 +163,12 @@ describe('FixEmailAddresses-Home', () => { const delete11 = await waitFor(() => getByTestId('delete-testid2-1')); userEvent.click(delete11); - const deleteButton = await waitFor(() => - getByTestId('modal-delete-button'), + await waitFor(() => + getByText(`Are you sure you wish to delete this email address:`), ); - userEvent.click(deleteButton); + userEvent.click(getByRole('button', { name: 'Yes' })); + screen.logTestingPlaygroundURL(); await waitFor(() => { expect(queryByTestId('starIcon-testid2-1')).not.toBeInTheDocument(); expect(getByTestId('starIcon-testid2-0')).toBeInTheDocument(); @@ -226,133 +222,32 @@ describe('FixEmailAddresses-Home', () => { }); describe('Add email address - Testing cache', () => { - interface AddEmailAddressProps { - postSaveResponse: object; - emailAddressNodes: object[]; - elementToWaitFor: string; - textFieldIndex: number; - addButtonId: string; - cache: InMemoryCache; - } - - const addEmailAddress = async ({ - postSaveResponse, - emailAddressNodes, - elementToWaitFor, - textFieldIndex, - addButtonId, - cache, - }: AddEmailAddressProps) => { - let cardinality = 0; - jest.spyOn(cache, 'readQuery').mockReturnValue(postSaveResponse); - jest.spyOn(cache, 'writeQuery'); - - const updatePerson = { - person: { - emailAddresses: { - nodes: [ - ...emailAddressNodes, - { - email: newEmail.email, - }, - ], - }, - }, - } as ErgonoMockShape; - - const { getByTestId, getAllByLabelText } = render( - { - let queryResult; - if (cardinality === 0) { - queryResult = { - people: { - nodes: mockInvalidEmailAddressesResponse, - }, - }; - } else { - queryResult = postSaveResponse; - } - cardinality++; - return queryResult; - }, - EmailAddresses: { updatePerson }, - }} - cache={cache} - />, + it('should add an email address to the first person', async () => { + const { getAllByTestId, getByTestId, queryByTestId, getAllByRole } = + render(); + + const emailInput = await waitFor( + () => getAllByRole('textbox', { name: 'New Email Address' })[0], ); - await waitFor(() => { - expect(getByTestId(elementToWaitFor)).toBeInTheDocument(); - }); + const addButton = getAllByTestId('addButton-testid')[0]; + expect(queryByTestId('starOutlineIcon-testid-2')).not.toBeInTheDocument(); - const textFieldNew = - getAllByLabelText('New Email Address')[textFieldIndex]; - userEvent.type(textFieldNew, newEmail.email); - const addButton = getByTestId(addButtonId); + expect(addButton).toBeDisabled(); + userEvent.type(emailInput, 'test@cru.org'); + expect(addButton).not.toBeDisabled(); userEvent.click(addButton); - }; - - it('should add an email address to the first person', async () => { - const cache = new InMemoryCache(); - const postSaveResponse = { - people: { - nodes: [ - { - ...mockInvalidEmailAddressesResponse[0], - emailAddresses: { - nodes: [...contactOneEmailAddressNodes, newEmail], - }, - }, - { ...mockInvalidEmailAddressesResponse[1] }, - ], - }, - }; - await addEmailAddress({ - postSaveResponse, - emailAddressNodes: contactOneEmailAddressNodes, - elementToWaitFor: 'textfield-testid-0', - textFieldIndex: 0, - addButtonId: 'addButton-testid', - cache, - }); await waitFor(() => { - expect(cache.writeQuery).toHaveBeenLastCalledWith( - expect.objectContaining({ data: mockCacheWriteData }), - ); + expect(mockEnqueue).toHaveBeenCalledWith('Added email address', { + variant: 'success', + }); }); - }); - it('should add an email address to the second person', async () => { - const cache = new InMemoryCache(); - const postSaveResponse = { - people: { - nodes: [ - { ...mockInvalidEmailAddressesResponse[0] }, - { - ...mockInvalidEmailAddressesResponse[1], - emailAddresses: { - nodes: [...contactTwoEmailAddressNodes, newEmail], - }, - }, - ], - }, - }; - await addEmailAddress({ - postSaveResponse, - emailAddressNodes: contactTwoEmailAddressNodes, - elementToWaitFor: 'textfield-testid2-0', - textFieldIndex: 1, - addButtonId: 'addButton-testid2', - cache, - }); + await waitFor(() => + expect(getByTestId('starOutlineIcon-testid-2')).toBeInTheDocument(), + ); - await waitFor(() => { - expect(cache.writeQuery).toHaveBeenLastCalledWith( - expect.objectContaining({ data: mockCacheWriteDataContactTwo }), - ); - }); + screen.logTestingPlaygroundURL(); }); }); }); diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx index 48596e3e4..dcf8849b8 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx @@ -177,7 +177,7 @@ export const FixEmailAddresses: React.FC = ({ {t('Fix Email Addresses')} - {data.people.nodes.length > 0 && ( + {data.people.nodes.length && ( <> diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts b/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts index 040722f63..6ab77b75c 100644 --- a/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts +++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts @@ -77,65 +77,3 @@ export const mockInvalidEmailAddressesResponse: ErgonoMockShape[] = [ }, }, ]; - -export const mockCacheWriteData = { - people: { - nodes: [ - { - ...mockInvalidEmailAddressesResponse[0], - emailAddresses: { - nodes: [ - { - __typename: contactOneEmailAddressNodes[0].__typename, - email: contactOneEmailAddressNodes[0].email, - }, - { - __typename: contactOneEmailAddressNodes[1].__typename, - email: contactOneEmailAddressNodes[1].email, - }, - { - __typename: contactOneEmailAddressNodes[2].__typename, - email: contactOneEmailAddressNodes[2].email, - }, - { - __typename: newEmail.__typename, - email: newEmail.email, - }, - ], - }, - }, - { - ...mockInvalidEmailAddressesResponse[1], - }, - ], - }, -}; - -export const mockCacheWriteDataContactTwo = { - people: { - nodes: [ - { - ...mockInvalidEmailAddressesResponse[0], - }, - { - ...mockInvalidEmailAddressesResponse[1], - emailAddresses: { - nodes: [ - { - __typename: contactTwoEmailAddressNodes[0].__typename, - email: contactTwoEmailAddressNodes[0].email, - }, - { - __typename: contactTwoEmailAddressNodes[1].__typename, - email: contactTwoEmailAddressNodes[1].email, - }, - { - __typename: newEmail.__typename, - email: newEmail.email, - }, - ], - }, - }, - ], - }, -};