studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🥅(frontend) improve error catching in forms

Browse Source 
- rename CreateMailboxForm into ModalCreateMailbox,
and useCreateMailDomain into useAddMailDomain
- use useAPIError hook in ModalCreateMailbox.tsx and ModalAddMailDomain
- update translations and tests (include removal of e2e test able
to be asserted by component tests)
This commit is contained in:
daproclaima
2024-09-04 23:23:13 +02:00
committed by Sebastien Nobour
parent 25898bbb64
commit e4aed82ff2
13 changed files with 737 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/frontend/apps/e2e/__tests__/app-desk/mail-domain-create-mailbox.spec.ts
View File

@@ -314,157 +314,4 @@ test.describe('Mail domain create mailbox', () => {
page.getByRole('button', { name: 'Create a mailbox' }),
).not.toBeInViewport();
});
test('checks client invalidation messages are displayed and no mailbox creation request is sent when fields are not properly filled', async ({
page,
}) => {
let isCreateMailboxRequestSent = false;
page.on(
'request',
(request) =>
(isCreateMailboxRequestSent =
request.url().includes('/mail-domains/domainfr/mailboxes/') &&
request.method() === 'POST'),
);
void interceptCommonApiRequests(page);
await navigateToMailboxCreationFormForMailDomainFr(page);
const inputFirstName = page.getByLabel('First name');
const inputLastName = page.getByLabel('Last name');
const inputLocalPart = page.getByLabel('Email address prefix');
const inputSecondaryEmailAddress = page.getByLabel(
'Secondary email address',
);
const textInvalidLocalPart = page.getByText(
'It must not contain spaces, accents or special characters (except "." or "-"). E.g.: jean.dupont',
);
const textInvalidSecondaryEmailAddress = page.getByText(
'Please enter a valid email address.\nE.g. : jean.dupont@mail.fr',
);
await inputFirstName.fill(' ');
await inputFirstName.clear();
await expect(page.getByText('Please enter your first name')).toBeVisible();
await inputLastName.fill(' ');
await inputLastName.clear();
await expect(page.getByText('Please enter your last name')).toBeVisible();
await inputLocalPart.fill('wrong@');
await expect(textInvalidLocalPart).toBeVisible();
await inputSecondaryEmailAddress.fill('uncomplete@mail');
await expect(textInvalidSecondaryEmailAddress).toBeVisible();
await inputLocalPart.clear();
await inputLocalPart.fill('wrong ');
await expect(textInvalidLocalPart).toBeVisible();
await inputLocalPart.clear();
await expect(
page.getByText('You must have minimum 1 character'),
).toBeVisible();
await page.getByRole('button', { name: 'Create the mailbox' }).click();
expect(isCreateMailboxRequestSent).toBeFalsy();
});
test('checks field invalidation messages are displayed when sending already existing local_part data in mail domain to api', async ({
page,
}) => {
const interceptRequests = (page: Page) => {
void interceptCommonApiRequests(page);
void page.route(
'**/api/v1.0/mail-domains/domainfr/mailboxes/',
(route) => {
if (route.request().method() === 'POST') {
void route.fulfill({
status: 400,
json: {
local_part: [
'Mailbox with this Local_part and Domain already exists.',
],
},
});
}
},
{ times: 1 },
);
};
void interceptRequests(page);
await navigateToMailboxCreationFormForMailDomainFr(page);
const inputFirstName = page.getByLabel('First name');
const inputLastName = page.getByLabel('Last name');
const inputLocalPart = page.getByLabel('Email address prefix');
const inputSecondaryEmailAddress = page.getByLabel(
'Secondary email address',
);
const submitButton = page.getByRole('button', {
name: 'Create the mailbox',
});
const textAlreadyUsedLocalPart = page.getByText(
'This email prefix is already used.',
);
await inputFirstName.fill('John');
await inputLastName.fill('Doe');
await inputLocalPart.fill('john.already');
await inputSecondaryEmailAddress.fill('john.already@mail.com');
await submitButton.click();
await expect(textAlreadyUsedLocalPart).toBeVisible();
});
test('checks unknown api error causes are displayed above form when they are not related with invalid field', async ({
page,
}) => {
const interceptRequests = async (page: Page) => {
void interceptCommonApiRequests(page);
await page.route(
'**/api/v1.0/mail-domains/domainfr/mailboxes/',
async (route) => {
if (route.request().method() === 'POST') {
await route.fulfill({
status: 500,
json: {
unknown_error: ['Unknown error from server'],
},
});
}
},
{ times: 1 },
);
};
void interceptRequests(page);
await navigateToMailboxCreationFormForMailDomainFr(page);
const inputFirstName = page.getByLabel('First name');
const inputLastName = page.getByLabel('Last name');
const inputLocalPart = page.getByLabel('Email address prefix');
const inputSecondaryEmailAddress = page.getByLabel(
'Secondary email address',
);
await inputFirstName.fill('John');
await inputLastName.fill('Doe');
await inputLocalPart.fill('john.doe');
await inputSecondaryEmailAddress.fill('john.do@mail.fr');
await page.getByRole('button', { name: 'Create the mailbox' }).click();
await expect(page.getByText('Unknown error from server')).toBeVisible();
});
});

136
src/frontend/apps/e2e/__tests__/app-desk/mail-domains-add.spec.ts
View File

@@ -132,142 +132,6 @@ test.describe('Add Mail Domains', () => {
).toBeVisible();
});
test('checks form submits at "Enter" key press', async ({ page }) => {
void page.route('**/api/v1.0/mail-domains/', (route) => {
if (route.request().method() === 'POST') {
void route.fulfill({
json: {
id: '2ebcfcfb-1dfa-4ed1-8e4a-554c63307b7c',
name: 'enter.fr',
slug: 'enterfr',
status: 'pending',
abilities: {
get: true,
patch: true,
put: true,
post: true,
delete: true,
manage_accesses: true,
},
created_at: '2024-08-21T10:55:21.081994Z',
updated_at: '2024-08-21T10:55:21.082109Z',
},
});
} else {
void route.continue();
}
});
await page.goto('/mail-domains/');
const { linkIndexPageAddDomain, inputName } = getElements(page);
await linkIndexPageAddDomain.click();
await inputName.fill('enter.fr');
await page.keyboard.press('Enter');
await expect(page).toHaveURL(`/mail-domains/enterfr/`);
});
test('checks error when duplicate mail domain name', async ({
page,
browserName,
}) => {
await page.goto('/mail-domains/');
const { linkIndexPageAddDomain, inputName, buttonSubmit } =
getElements(page);
const mailDomainName = randomName('duplicate.fr', browserName, 1)[0];
const mailDomainSlug = mailDomainName.replace('.', '');
await linkIndexPageAddDomain.click();
await inputName.fill(mailDomainName);
await buttonSubmit.click();
await expect(page).toHaveURL(`/mail-domains\/${mailDomainSlug}\/`);
await linkIndexPageAddDomain.click();
await inputName.fill(mailDomainName);
await buttonSubmit.click();
await expect(page).toHaveURL(/mail-domains\//);
await expect(
page.getByText(
'This mail domain is already used. Please, choose another one.',
),
).toBeVisible();
await expect(inputName).toBeFocused();
});
test('checks error when duplicate mail domain slug', async ({
page,
browserName,
}) => {
await page.goto('/mail-domains/');
const { linkIndexPageAddDomain, inputName, buttonSubmit } =
getElements(page);
const mailDomainSlug = randomName('duplicate', browserName, 1)[0];
await linkIndexPageAddDomain.click();
await inputName.fill(mailDomainSlug);
await buttonSubmit.click();
await expect(page).toHaveURL(`/mail-domains\/${mailDomainSlug}\/`);
await linkIndexPageAddDomain.click();
await inputName.fill(mailDomainSlug);
await buttonSubmit.click();
await expect(page).toHaveURL(/mail-domains\//);
await expect(
page.getByText(
'This mail domain is already used. Please, choose another one.',
),
).toBeVisible();
await expect(inputName).toBeFocused();
});
test('checks unknown api error causes are displayed', async ({ page }) => {
await page.route(
'**/api/v1.0/mail-domains/',
async (route) => {
if (route.request().method() === 'POST') {
await route.fulfill({
status: 500,
json: {
unknown_error: ['Unknown error from server'],
},
});
}
},
{ times: 1 },
);
await page.goto('/mail-domains/');
const { linkIndexPageAddDomain, inputName, buttonSubmit } =
getElements(page);
await linkIndexPageAddDomain.click();
await inputName.fill('server-error.fr');
await buttonSubmit.click();
await expect(page).toHaveURL(/mail-domains\//);
await expect(
page.getByText(
'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.',
),
).toBeVisible();
await expect(inputName).toBeFocused();
});
test('checks 404 on mail-domains/[slug] page', async ({ page }) => {
await page.goto('/mail-domains/unknown-domain');