-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🥅(frontend) catch mailbox creation errors
- display error message for error 500 and 400 for missing mail domain secret and force focus on first name form field when api error is caught - update related e2e test, component tests and translations - rename CreateMailboxForm.tsx into FormCreateMailbox.tsx **Attention** Writing e2e tests to assert this behavior checking both the frontend and the backend is complex. So for the moment, the requests interceptions are kept. To write proper tests, it takes to use a mail domain already enabled and with a valid secret, which are actions performed manually on Django Admin. To test these behaviors manually, it takes to use a mail domain with an empty secret for the error 400, and a invalid secret for the error 500.
- Loading branch information
1 parent
5362f13
commit 70c7c87
Showing
14 changed files
with
489 additions
and
181 deletions.
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
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
149 changes: 149 additions & 0 deletions
149
...end/apps/desk/src/features/mail-domains/components/__tests__/useAddMailDomainApiError.tsx
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 |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { renderHook } from '@testing-library/react'; | ||
| import { UseFormReturn } from 'react-hook-form'; | ||
|
|
||
| import { APIError } from '@/api'; | ||
| import { useAddMailDomainApiError } from '@/features/mail-domains/components/useAddMailDomainApiError'; | ||
|
|
||
| jest.mock('react-i18next', () => ({ | ||
| useTranslation: () => ({ | ||
| t: (key: string) => key, | ||
| }), | ||
| })); | ||
|
|
||
| describe('useAddMailDomainApiError', () => { | ||
| const setErrorMock = jest.fn(); | ||
| const setFocusMock = jest.fn(); | ||
|
|
||
| const methodsMock: Partial<UseFormReturn<{ name: string }>> = { | ||
| setError: setErrorMock, | ||
| setFocus: setFocusMock, | ||
| }; | ||
|
|
||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('should set the correct error message when the mail domain already exists', () => { | ||
| const error = { | ||
| cause: ['Mail domain with this name already exists.'], | ||
| status: 400, | ||
| } as APIError; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(setErrorMock).toHaveBeenCalledWith('name', { | ||
| type: 'manual', | ||
| message: 'This mail domain is already used. Please, choose another one.', | ||
| }); | ||
|
|
||
| expect(result.current).toHaveLength(0); | ||
| }); | ||
|
|
||
| it('should handle multiple causes and set the correct error message', () => { | ||
| const error = { | ||
| cause: ['Mail domain with this name already exists.', 'Other error'], | ||
| status: 400, | ||
| } as APIError; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(setErrorMock).toHaveBeenCalledWith('name', { | ||
| type: 'manual', | ||
| message: 'This mail domain is already used. Please, choose another one.', | ||
| }); | ||
|
|
||
| expect(result.current).toEqual(['Other error']); | ||
| }); | ||
|
|
||
| it('should prepend server error message when the status is 500', () => { | ||
| const error = { | ||
| cause: ['Some other error'], | ||
| status: 500, | ||
| } as APIError; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| 'Your request cannot be processed because the server is experiencing an error. If the problem persists, please contact our support to resolve the issue: suiteterritoriale@anct.gouv.fr', | ||
| 'Some other error', | ||
| ]); | ||
| }); | ||
|
|
||
| it('should handle cases with no specific cause and only server error', () => { | ||
| const error = { | ||
| status: 500, | ||
| } as APIError; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| 'Your request cannot be processed because the server is experiencing an error. If the problem persists, please contact our support to resolve the issue: suiteterritoriale@anct.gouv.fr', | ||
| ]); | ||
| }); | ||
|
|
||
| it('should focus on the name field if there are error causes', () => { | ||
| const error = { | ||
| cause: ['Some other error'], | ||
| status: 400, | ||
| } as APIError; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(setFocusMock).toHaveBeenCalledWith('name'); | ||
| expect(result.current).toEqual(['Some other error']); | ||
| }); | ||
|
|
||
| it('should prepend server error message when the error is a html debbuging document', () => { | ||
| const error = {} as APIError<unknown>; | ||
|
|
||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(result.current).toEqual([ | ||
| 'Your request cannot be processed because the server is experiencing an error. If the problem persists, ' + | ||
| 'please contact our support to resolve the issue: suiteterritoriale@anct.gouv.fr', | ||
| ]); | ||
| }); | ||
|
|
||
| it('should do nothing if no error is passed', () => { | ||
| const { result } = renderHook(() => | ||
| useAddMailDomainApiError({ | ||
| error: null, | ||
| methods: methodsMock as UseFormReturn<{ name: string }>, | ||
| }), | ||
| ); | ||
|
|
||
| expect(result.current).toHaveLength(0); | ||
| expect(setErrorMock).not.toHaveBeenCalled(); | ||
| expect(setFocusMock).not.toHaveBeenCalled(); | ||
| }); | ||
| }); |
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
Oops, something went wrong.