diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f5bb720d..61e61fbcd 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/__tests__/ModalAddMailDomain.test.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/__tests__/ModalAddMailDomain.test.tsx index dbe1f523a..6aaa89258 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/__tests__/ModalAddMailDomain.test.tsx +++ b/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({ - mutationFn: addMailDomain, - onSuccess: mockOnSuccess, - onError: (error) => onError(error), - }), - ), - }; -}); - describe('ModalAddMailDomain', () => { - const queryClient = new QueryClient(); - - const renderModalAddMailDomain = () => { - return render( -
- - - - - -
, - ); - }; - 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(, { 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(, { wrapper: AppWrapper }); const { buttonSubmit } = getElements(); @@ -96,7 +60,8 @@ describe('ModalAddMailDomain', () => { fetchMock.mock(`end:mail-domains/`, 201); const user = userEvent.setup(); - renderModalAddMailDomain(); + + render(, { 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(, { wrapper: AppWrapper }); const { inputName, buttonSubmit } = getElements(); @@ -137,7 +120,7 @@ describe('ModalAddMailDomain', () => { method: 'POST', }); - expect(mockOnSuccess).toHaveBeenCalled(); + expect(mockPush).toHaveBeenCalledWith(`/mail-domains/domainfr`); }); it('submits the form on key enter press', async () => { @@ -145,7 +128,7 @@ describe('ModalAddMailDomain', () => { const user = userEvent.setup(); - renderModalAddMailDomain(); + render(, { wrapper: AppWrapper }); const { inputName } = getElements(); @@ -173,7 +156,7 @@ describe('ModalAddMailDomain', () => { const user = userEvent.setup(); - renderModalAddMailDomain(); + render(, { wrapper: AppWrapper }); const { inputName, buttonSubmit } = getElements(); @@ -205,7 +188,7 @@ describe('ModalAddMailDomain', () => { const user = userEvent.setup(); - renderModalAddMailDomain(); + render(, { wrapper: AppWrapper }); const { inputName, buttonSubmit } = getElements(); @@ -235,7 +218,7 @@ describe('ModalAddMailDomain', () => { const user = userEvent.setup(); - renderModalAddMailDomain(); + render(, { wrapper: AppWrapper }); const { inputName, buttonSubmit } = getElements();