diff --git a/app/soapbox/features/verification/__tests__/registration.test.tsx b/app/soapbox/features/verification/__tests__/registration.test.tsx index b408947f6..e706b71c0 100644 --- a/app/soapbox/features/verification/__tests__/registration.test.tsx +++ b/app/soapbox/features/verification/__tests__/registration.test.tsx @@ -41,7 +41,11 @@ describe('', () => { describe('with invalid data', () => { it('handles 422 errors', async() => { __stub(mock => { - mock.onPost('/api/v1/pepe/accounts').reply(422, {}); + mock.onPost('/api/v1/pepe/accounts').reply( + 422, { + error: 'user_taken', + }, + ); }); render(); @@ -55,6 +59,25 @@ describe('', () => { }); }); + it('handles 422 errors with messages', async() => { + __stub(mock => { + mock.onPost('/api/v1/pepe/accounts').reply( + 422, { + error: 'user_vip', + message: 'This username is unavailable.', + }, + ); + }); + + render(); + + await waitFor(() => { + fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} }); + }); + + expect(screen.getByTestId('toast')).toHaveTextContent(/this username is unavailable/i); + }); + it('handles generic errors', async() => { __stub(mock => { mock.onPost('/api/v1/pepe/accounts').reply(500, {}); diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx index d5acb1fb2..1c23018a3 100644 --- a/app/soapbox/features/verification/registration.tsx +++ b/app/soapbox/features/verification/registration.tsx @@ -58,9 +58,11 @@ const Registration = () => { intl.formatMessage(messages.success, { siteTitle: instance.title }), ); }) - .catch((error: AxiosError) => { - if (error?.response?.status === 422) { - toast.error(intl.formatMessage(messages.usernameTaken)); + .catch((errorResponse: AxiosError<{ error: string, message: string }>) => { + const error = errorResponse.response?.data?.error; + + if (error) { + toast.error(errorResponse.response?.data?.message || intl.formatMessage(messages.usernameTaken)); } else { toast.error(intl.formatMessage(messages.error)); }