fixup! 🥅(frontend) improve error catching in forms

CHANGELOG.md

@@ -16,7 +16,7 @@ and this project adheres to
 ### Fixed
 
 - 🐛(dimail) improve handling of dimail errors on failed mailbox creation #377
-- 🐛(frontend) fix mail domain addition submission #355
+- 🐛(frontend) fix add mail domain form submission #355
 
 ## [1.0.2] - 2024-08-30
 
@@ -29,10 +29,6 @@ and this project adheres to
 
 - 👽️(mailboxes) fix mailbox creation after dimail api improvement (#360)
 
-### Fixed
-
-- 🐛(frontend) user can submit form to add mail domain by pressing "Enter" key
-
 ## [1.0.1] - 2024-08-19
 
 ### Fixed

src/frontend/apps/desk/src/features/mail-domains/components/__tests__/ModalAddMailDomain.test.tsx

@@ -1,16 +1,9 @@
-import { ModalProvider } from '@openfun/cunningham-react';
-import {
- QueryClient,
- QueryClientProvider,
- useMutation,
-} from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import React from 'react';
 
-import { APIError } from '@/api';
-import { MailDomain } from '@/features/mail-domains';
+import { AppWrapper } from '@/tests/utils';
 
 import { ModalAddMailDomain } from '../ModalAddMailDomain';
 
@@ -21,36 +14,7 @@ jest.mock('next/navigation', () => ({
  })),
 }));
 
-const mockOnSuccess = jest.fn();
-jest.mock('../../api/useAddMailDomain', () => {
- const { addMailDomain } = jest.requireActual('../../api/useAddMailDomain');
-
- return {
- useAddMailDomain: jest.fn().mockImplementation(({ onError }) =>
- useMutation<MailDomain, APIError, string>({
- mutationFn: addMailDomain,
- onSuccess: mockOnSuccess,
- onError: (error) => onError(error),
- }),
- ),
- };
-});
-
 describe('ModalAddMailDomain', () => {
- const queryClient = new QueryClient();
-
- const renderModalAddMailDomain = () => {
- return render(
- <div className="c__app">
- <QueryClientProvider client={queryClient}>
- <ModalProvider>
- <ModalAddMailDomain />
- </ModalProvider>
- </QueryClientProvider>
- </div>,
- );
- };
-
  const getElements = () => ({
  modalElement: screen.getByText('Add your mail domain'),
  formTag: screen.getByTitle('Mail domain addition form'),
@@ -71,7 +35,7 @@ describe('ModalAddMailDomain', () => {
  });
 
  it('renders all the elements', () => {
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { modalElement, formTag, inputName, buttonCancel, buttonSubmit } =
  getElements();
@@ -85,7 +49,7 @@ describe('ModalAddMailDomain', () => {
  });
 
  it('should disable submit button when no field is filled', () => {
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { buttonSubmit } = getElements();
 
@@ -96,7 +60,8 @@ describe('ModalAddMailDomain', () => {
  fetchMock.mock(`end:mail-domains/`, 201);
 
  const user = userEvent.setup();
- renderModalAddMailDomain();
+
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName, buttonSubmit } = getElements();
 
@@ -115,11 +80,29 @@ describe('ModalAddMailDomain', () => {
  });
 
  it('submits the form when validation passes', async () => {
- fetchMock.mock(`end:mail-domains/`, { status: 201, body: {} });
+ fetchMock.mock(`end:mail-domains/`, {
+ status: 201,
+ body: {
+ name: 'domain.fr',
+ id: '456ac6ca-0402-4615-8005-69bc1efde43f',
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString(),
+ slug: 'domainfr',
+ status: 'enabled',
+ abilities: {
+ get: true,
+ patch: true,
+ put: true,
+ post: true,
+ delete: true,
+ manage_accesses: true,
+ },
+ },
+ });
 
  const user = userEvent.setup();
 
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName, buttonSubmit } = getElements();
 
@@ -137,15 +120,15 @@ describe('ModalAddMailDomain', () => {
  method: 'POST',
  });
 
- expect(mockOnSuccess).toHaveBeenCalled();
+ expect(mockPush).toHaveBeenCalledWith(`/mail-domains/domainfr`);
  });
 
  it('submits the form on key enter press', async () => {
  fetchMock.mock(`end:mail-domains/`, 201);
 
  const user = userEvent.setup();
 
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName } = getElements();
 
@@ -173,7 +156,7 @@ describe('ModalAddMailDomain', () => {
 
  const user = userEvent.setup();
 
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName, buttonSubmit } = getElements();
 
@@ -205,7 +188,7 @@ describe('ModalAddMailDomain', () => {
 
  const user = userEvent.setup();
 
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName, buttonSubmit } = getElements();
 
@@ -235,7 +218,7 @@ describe('ModalAddMailDomain', () => {
 
  const user = userEvent.setup();
 
- renderModalAddMailDomain();
+ render(<ModalAddMailDomain />, { wrapper: AppWrapper });
 
  const { inputName, buttonSubmit } = getElements();