diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b0ead0466..4300efba55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to - ♿(frontend) improve header accessibility #1270 - ♿(frontend) improve accessibility for decorative images in editor #1282 - #1338 + - #1281 - ♻️(backend) fallback to email identifier when no name #1298 - 🐛(backend) allow ASCII characters in user sub field #1295 - ⚡️(frontend) improve fallback width calculation #1333 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts index 03ba135c43..5d8feab083 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts @@ -29,12 +29,7 @@ test.describe('Doc Export', () => { }) .click(); - await expect( - page - .locator('div') - .filter({ hasText: /^Download$/ }) - .first(), - ).toBeVisible(); + await expect(page.getByTestId('modal-export-title')).toBeVisible(); await expect( page.getByText('Download your document in a .docx or .pdf format.'), ).toBeVisible(); @@ -45,7 +40,7 @@ test.describe('Doc Export', () => { await expect( page.getByRole('button', { name: 'Close the modal' }), ).toBeVisible(); - await expect(page.getByRole('button', { name: 'Download' })).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); }); test('it exports the doc with pdf line break', async ({ @@ -136,23 +131,13 @@ test.describe('Doc Export', () => { await page.getByRole('combobox', { name: 'Format' }).click(); await page.getByRole('option', { name: 'Docx' }).click(); - await expect( - page.getByRole('button', { - name: 'Download', - exact: true, - }), - ).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${randomDoc}.docx`); }); - void page - .getByRole('button', { - name: 'Download', - exact: true, - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${randomDoc}.docx`); @@ -218,11 +203,7 @@ test.describe('Doc Export', () => { await new Promise((resolve) => setTimeout(resolve, 1000)); - await expect( - page.getByRole('button', { - name: 'Download', - }), - ).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); const responseCorsPromise = page.waitForResponse( (response) => @@ -233,11 +214,7 @@ test.describe('Doc Export', () => { return download.suggestedFilename().includes(`${randomDoc}.pdf`); }); - void page - .getByRole('button', { - name: 'Download', - }) - .click(); + void page.getByTestId('modal-download-button').click(); const responseCors = await responseCorsPromise; expect(responseCors.ok()).toBe(true); @@ -279,21 +256,13 @@ test.describe('Doc Export', () => { }) .click(); - await expect( - page.getByRole('button', { - name: 'Download', - }), - ).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${randomDoc}.pdf`); }); - void page - .getByRole('button', { - name: 'Download', - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`); @@ -329,23 +298,13 @@ test.describe('Doc Export', () => { }) .click(); - await expect( - page.getByRole('button', { - name: 'Download', - exact: true, - }), - ).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${randomDoc}.pdf`); }); - void page - .getByRole('button', { - name: 'Download', - exact: true, - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`); @@ -391,23 +350,13 @@ test.describe('Doc Export', () => { }) .click(); - await expect( - page.getByRole('button', { - name: 'Download', - exact: true, - }), - ).toBeVisible(); + await expect(page.getByTestId('modal-download-button')).toBeVisible(); const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${randomDoc}.pdf`); }); - void page - .getByRole('button', { - name: 'Download', - exact: true, - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${randomDoc}.pdf`); @@ -469,12 +418,7 @@ test.describe('Doc Export', () => { return download.suggestedFilename().includes(`${randomDocFrench}.pdf`); }); - void page - .getByRole('button', { - name: 'Télécharger', - exact: true, - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${randomDocFrench}.pdf`); @@ -536,12 +480,7 @@ test.describe('Doc Export', () => { }) .click(); - void page - .getByRole('button', { - name: 'Download', - exact: true, - }) - .click(); + void page.getByTestId('modal-download-button').click(); const download = await downloadPromise; expect(download.suggestedFilename()).toBe(`${docChild}.pdf`); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index bf65953fcd..76f02b7577 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts @@ -155,7 +155,9 @@ test.describe('Doc Header', () => { await page.getByRole('button', { name: 'Share' }).click(); - const shareModal = page.getByLabel('Share modal'); + const shareModal = page.getByRole('dialog', { + name: 'Share modal content', + }); await expect(shareModal).toBeVisible(); await expect(page.getByText('Share the document')).toBeVisible(); @@ -581,7 +583,10 @@ test.describe('Documents Header mobile', () => { await page.getByLabel('Open the document options').click(); await page.getByLabel('Share').click(); - await expect(page.getByLabel('Share modal')).toBeVisible(); + const shareModal = page.getByRole('dialog', { + name: 'Share modal content', + }); + await expect(shareModal).toBeVisible(); await page.getByRole('button', { name: 'close' }).click(); await expect(page.getByLabel('Share modal')).toBeHidden(); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts index 28f479f486..9465158c3f 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts @@ -72,6 +72,7 @@ test.describe('Home page', () => { await page.waitForLoadState('domcontentloaded'); // Wait a bit more for the responsive store to be initialized + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); // Check header content diff --git a/src/frontend/apps/impress/src/components/index.ts b/src/frontend/apps/impress/src/components/index.ts index cf076e9ff8..62c7567395 100644 --- a/src/frontend/apps/impress/src/components/index.ts +++ b/src/frontend/apps/impress/src/components/index.ts @@ -1,4 +1,4 @@ -export * from './AlertModal'; +export * from './modal/AlertModal'; export * from './Box'; export * from './BoxButton'; export * from './Card'; @@ -9,7 +9,7 @@ export * from './Icon'; export * from './InfiniteScroll'; export * from './Link'; export * from './Loading'; -export * from './SideModal'; +export * from './modal/SideModal'; export * from './separators'; export * from './Text'; export * from './TextErrors'; diff --git a/src/frontend/apps/impress/src/components/AlertModal.tsx b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx similarity index 95% rename from src/frontend/apps/impress/src/components/AlertModal.tsx rename to src/frontend/apps/impress/src/components/modal/AlertModal.tsx index 9b5913417d..ffee754cad 100644 --- a/src/frontend/apps/impress/src/components/AlertModal.tsx +++ b/src/frontend/apps/impress/src/components/modal/AlertModal.tsx @@ -2,8 +2,8 @@ import { Button, Modal, ModalSize } from '@openfun/cunningham-react'; import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; -import { Box } from './Box'; -import { Text } from './Text'; +import { Box } from '../Box'; +import { Text } from '../Text'; export type AlertModalProps = { description: ReactNode; diff --git a/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx b/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx new file mode 100644 index 0000000000..571af6bd0e --- /dev/null +++ b/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx @@ -0,0 +1,22 @@ +import { Button, type ButtonProps } from '@openfun/cunningham-react'; +import React from 'react'; + +import { Box } from '@/components'; + +const ButtonCloseModal = (props: ButtonProps) => { + return ( + @@ -155,9 +158,26 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { } size={ModalSize.MEDIUM} title={ - - {t('Download')} - + + + {t('Download')} + + onClose()} + disabled={isExporting} + /> + } > onClose()} rightActions={ <>