Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cleaning up code, Adding more testing around adding a new email and i…
…mproving some UX with snackBar.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,8 +4,8 @@ import { ThemeProvider } from '@mui/material/styles'; | |
| import { render, waitFor } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { ApolloErgonoMockMap, ErgonoMockShape } from 'graphql-ergonomock'; | ||
| import { SnackbarProvider } from 'notistack'; | ||
| import TestRouter from '__tests__/util/TestRouter'; | ||
| import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; | ||
| import { GetInvalidEmailAddressesQuery } from 'src/components/Tool/FixEmailAddresses/FixEmailAddresses.generated'; | ||
| import theme from '../../../theme'; | ||
|
|
@@ -21,43 +21,58 @@ import { | |
| newEmail, | ||
| } from './FixEmailAddressesMocks'; | ||
|
|
||
| const accountListId = 'accountListId'; | ||
| const router = { | ||
| query: { accountListId }, | ||
| isReady: true, | ||
| }; | ||
|
|
||
| const setContactFocus = jest.fn(); | ||
| const mutationSpy = jest.fn(); | ||
| const mockEnqueue = jest.fn(); | ||
|
|
||
| jest.mock('notistack', () => ({ | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| ...jest.requireActual('notistack'), | ||
| useSnackbar: () => { | ||
| return { | ||
| enqueueSnackbar: mockEnqueue, | ||
| }; | ||
| }, | ||
| })); | ||
|
|
||
| const defaultGraphQLMock = { | ||
| GetInvalidEmailAddresses: { | ||
| people: { nodes: mockInvalidEmailAddressesResponse }, | ||
| }, | ||
| }; | ||
|
|
||
| interface ComponentsProps { | ||
| mocks?: ApolloErgonoMockMap; | ||
| cache?: ApolloCache<object>; | ||
| } | ||
|
|
||
| const Components = ({ mocks = defaultGraphQLMock, cache }: ComponentsProps) => ( | ||
| <SnackbarProvider> | ||
| <ThemeProvider theme={theme}> | ||
| <TestRouter router={router}> | ||
| <GqlMockedProvider<{ | ||
| GetInvalidEmailAddresses: GetInvalidEmailAddressesQuery; | ||
| EmailAddresses: EmailAddressesMutation; | ||
| }> | ||
| mocks={mocks} | ||
| cache={cache} | ||
| onCall={mutationSpy} | ||
| > | ||
| <FixEmailAddresses | ||
| accountListId={accountListId} | ||
| setContactFocus={setContactFocus} | ||
| /> | ||
| </GqlMockedProvider> | ||
| </TestRouter> | ||
| </ThemeProvider> | ||
| </SnackbarProvider> | ||
| ); | ||
|
|
||
| describe('FixEmailAddresses-Home', () => { | ||
|
|
@@ -92,6 +107,39 @@ describe('FixEmailAddresses-Home', () => { | |
| expect(getByTestId('starOutlineIcon-testid-0')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should add an new email address, firing a GraphQL mutation and resetting the form', async () => { | ||
| const { getByTestId, getAllByLabelText } = render(<Components />); | ||
| await waitFor(() => { | ||
| expect(getByTestId('textfield-testid-0')).toBeInTheDocument(); | ||
| }); | ||
| const textFieldNew = getAllByLabelText('New Email Address')[0]; | ||
| userEvent.type(textFieldNew, newEmail.email); | ||
| const addButton = getByTestId('addButton-testid'); | ||
| expect(textFieldNew).toHaveValue(newEmail.email); | ||
|
|
||
| userEvent.click(addButton); | ||
|
|
||
| await waitFor(() => | ||
| expect(mockEnqueue).toHaveBeenCalledWith('Added email address', { | ||
| variant: 'success', | ||
| }), | ||
| ); | ||
|
|
||
| expect(mutationSpy.mock.calls[1][0].operation.operationName).toEqual( | ||
| 'EmailAddresses', | ||
| ); | ||
| expect(mutationSpy.mock.calls[1][0].operation.variables).toEqual({ | ||
| input: { | ||
| accountListId: accountListId, | ||
| attributes: { | ||
| id: 'testid', | ||
| emailAddresses: [{ email: newEmail.email }], | ||
| }, | ||
| }, | ||
| }); | ||
| expect(textFieldNew).toHaveValue(''); | ||
| }); | ||
|
|
||
| //TODO: Fix during MPDX-7936 | ||
| it.skip('delete third email from first person', async () => { | ||
| const { getByTestId, queryByTestId } = render(<Components />); | ||
|
|
@@ -124,7 +172,53 @@ describe('FixEmailAddresses-Home', () => { | |
| expect(getByTestId('starIcon-testid2-0')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render no contacts with no data', async () => { | ||
| const { getByText, getByTestId } = render( | ||
| <Components | ||
| mocks={{ | ||
| GetInvalidEmailAddresses: { | ||
| people: { nodes: [] }, | ||
| }, | ||
| }} | ||
| />, | ||
| ); | ||
| await waitFor(() => | ||
| expect(getByTestId('fixEmailAddresses-null-state')).toBeInTheDocument(), | ||
| ); | ||
| expect( | ||
| getByText('No people with email addresses need attention'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should modify first email of first contact', async () => { | ||
| const { getByTestId } = render(<Components />); | ||
| await waitFor(() => { | ||
| expect(getByTestId('textfield-testid-0')).toBeInTheDocument(); | ||
| }); | ||
| const firstInput = getByTestId('textfield-testid-0'); | ||
|
|
||
| expect(firstInput).toHaveValue('[email protected]'); | ||
| userEvent.type(firstInput, '123'); | ||
| expect(firstInput).toHaveValue('[email protected]'); | ||
| }); | ||
|
|
||
| describe('setContactFocus()', () => { | ||
| it('should open up contact details', async () => { | ||
| const { getByText, queryByTestId } = render(<Components />); | ||
| await waitFor(() => | ||
| expect(queryByTestId('loading')).not.toBeInTheDocument(), | ||
| ); | ||
| expect(setContactFocus).not.toHaveBeenCalled(); | ||
|
|
||
| const contactName = getByText('Test Contact'); | ||
|
|
||
| expect(contactName).toBeInTheDocument(); | ||
| userEvent.click(contactName); | ||
| expect(setContactFocus).toHaveBeenCalledWith(contactId); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Add email address - Testing cache', () => { | ||
| interface AddEmailAddressProps { | ||
| postSaveResponse: object; | ||
| emailAddressNodes: object[]; | ||
|
|
@@ -254,50 +348,4 @@ describe('FixEmailAddresses-Home', () => { | |
| }); | ||
| }); | ||
| }); | ||
| }); | ||