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();