✅(e2e) add test for accessible html export from export modal

checks generated zip contains html and embedded media files

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -16,6 +16,8 @@ and this project adheres to
 - ⚡️(sw) stop to cache external resources likes videos #1655
 - 💥(frontend) upgrade to ui-kit v2
 - ⚡️(frontend) improve perf on upload and table of contents #1662
+- ⚡️Enhance/html copy to download #1669
+
 
 ### Fixed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -31,7 +31,7 @@ test.describe('Doc Export', () => {
 
     await expect(page.getByTestId('modal-export-title')).toBeVisible();
     await expect(
-      page.getByText('Download your document in a .docx, .odt or .pdf format.'),
+      page.getByText(/Download your document in a \.docx, \.odt.*format\./i),
     ).toBeVisible();
     await expect(
       page.getByRole('combobox', { name: 'Template' }),
@@ -187,6 +187,64 @@ test.describe('Doc Export', () => {
     expect(download.suggestedFilename()).toBe(`${randomDoc}.odt`);
   });
 
+  test('it exports the doc to html zip', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-editor-html-zip',
+      browserName,
+      1,
+    );
+
+    await verifyDocName(page, randomDoc);
+
+    // Add some content and at least one image so that the ZIP contains media files.
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello HTML ZIP');
+
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Resizable image with caption').click();
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByText('Upload image').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
+
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
+
+    await expect(image).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Export the document',
+      })
+      .click();
+
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'HTML' }).click();
+
+    await expect(page.getByTestId('doc-export-download-button')).toBeVisible();
+
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes(`${randomDoc}.zip`);
+    });
+
+    void page.getByTestId('doc-export-download-button').click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe(`${randomDoc}.zip`);
+
+    const zipBuffer = await cs.toBuffer(await download.createReadStream());
+
+    // ZIP files start with "PK\x03\x04"
+    expect(zipBuffer.length).toBeGreaterThan(4);
+    expect(zipBuffer[0]).toBe(0x50);
+    expect(zipBuffer[1]).toBe(0x4b);
+  });
+
   /**
    * This test tell us that the export to pdf is working with images
    * but it does not tell us if the images are being displayed correctly

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -408,7 +408,10 @@ test.describe('Doc Header', () => {
     expect(clipboardContent.trim()).toBe('# Hello World');
   });
 
-  test('It checks the copy as HTML button', async ({ page, browserName }) => {
+  test('It no longer shows the copy as HTML button', async ({
+    page,
+    browserName,
+  }) => {
     test.skip(
       browserName === 'webkit',
       'navigator.clipboard is not working with webkit and playwright',
@@ -429,17 +432,16 @@ test.describe('Doc Header', () => {
     const docFirstBlockContent = docFirstBlock.locator('h1');
     await expect(docFirstBlockContent).toHaveText('Hello World');
 
-    // Copy content to clipboard
+    // Open document options menu
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Copy as HTML' }).click();
-    await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
-    // Test that clipboard is in HTML format
-    const handle = await page.evaluateHandle(() =>
-      navigator.clipboard.readText(),
+    // We should no longer see "Copy as HTML" in the menu
+    await expect(
+      page.getByRole('menuitem', { name: 'Copy as Markdown' }),
+    ).toBeVisible();
+    await expect(page.getByRole('menu').getByText('Copy as HTML')).toHaveCount(
+      0,
     );
-    const clipboardContent = await handle.jsonValue();
-    expect(clipboardContent.trim()).toBe(`<h1>Hello World</h1><p></p>`);
   });
 
   test('it checks the copy link button', async ({ page, browserName }) => {

src/frontend/apps/impress/src/features/docs/doc-export/__tests__/ExportMIT.test.tsx

@@ -16,12 +16,12 @@ describe('useModuleExport', () => {
     const Export = await import('@/features/docs/doc-export/');
 
     expect(Export.default).toBeUndefined();
-  }, 10000);
+  }, 60000);
 
   it('should load modules when NEXT_PUBLIC_PUBLISH_AS_MIT is false', async () => {
     process.env.NEXT_PUBLIC_PUBLISH_AS_MIT = 'false';
     const Export = await import('@/features/docs/doc-export/');
 
     expect(Export.default).toHaveProperty('ModalExport');
-  });
+  }, 60000);
 });

src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBox.spec.tsx

@@ -1,34 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { beforeEach, describe, expect, vi } from 'vitest';
 
-import { AbstractAnalytic, Analytics } from '@/libs';
 import { AppWrapper } from '@/tests/utils';
 
 import { DocToolBox } from '../components/DocToolBox';
 
-let flag = true;
-class TestAnalytic extends AbstractAnalytic {
-  public constructor() {
-    super();
-  }
-
-  public Provider() {
-    return <Fragment />;
-  }
-
-  public trackEvent() {}
-
-  public isFeatureFlagActivated(flagName: string): boolean {
-    if (flagName === 'CopyAsHTML') {
-      return flag;
-    }
-
-    return true;
-  }
-}
-
 vi.mock('next/router', async () => ({
   ...(await vi.importActual('next/router')),
   useRouter: () => ({
@@ -45,42 +23,21 @@ const doc = {
 };
 
 beforeEach(() => {
-  Analytics.clearAnalytics();
   process.env.NEXT_PUBLIC_PUBLISH_AS_MIT = 'false';
 });
 
-describe('DocToolBox "Copy as HTML" option', () => {
-  test('renders "Copy as HTML" option when feature flag is enabled', async () => {
-    new TestAnalytic();
-
+describe('DocToolBox options', () => {
+  test('shows "Copy as Markdown" option and no longer shows "Copy as HTML"', async () => {
     render(<DocToolBox doc={doc as any} />, {
       wrapper: AppWrapper,
     });
+
     const optionsButton = await screen.findByLabelText(
       'Open the document options',
     );
     await userEvent.click(optionsButton);
-    expect(await screen.findByText('Copy as HTML')).toBeInTheDocument();
-  });
 
-  test('does not render "Copy as HTML" option when feature flag is disabled', async () => {
-    flag = false;
-    new TestAnalytic();
-
-    render(<DocToolBox doc={doc as any} />, {
-      wrapper: AppWrapper,
-    });
-    const optionsButton = screen.getByLabelText('Open the document options');
-    await userEvent.click(optionsButton);
+    expect(await screen.findByText('Copy as Markdown')).toBeInTheDocument();
     expect(screen.queryByText('Copy as HTML')).not.toBeInTheDocument();
   });
-
-  test('render "Copy as HTML" option when we did not add analytics', async () => {
-    render(<DocToolBox doc={doc as any} />, {
-      wrapper: AppWrapper,
-    });
-    const optionsButton = screen.getByLabelText('Open the document options');
-    await userEvent.click(optionsButton);
-    expect(screen.getByText('Copy as HTML')).toBeInTheDocument();
-  });
 });

src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocToolBoxLicence.spec.tsx

@@ -42,12 +42,13 @@ describe('DocToolBox - Licence', () => {
     });
     const optionsButton = await screen.findByLabelText('Export the document');
     await userEvent.click(optionsButton);
+
+    // Wait for the export modal to be visible, then assert on its content text.
+    await screen.findByTestId('modal-export-title');
     expect(
-      await screen.findByText(
-        'Download your document in a .docx, .odt or .pdf format.',
-      ),
+      screen.getByText(/Download your document in a .docx, .odt.*format\./i),
     ).toBeInTheDocument();
-  }, 10000);
+  }, 60000);
 
   test('The export button is not rendered when MIT version is activated', async () => {
     process.env.NEXT_PUBLIC_PUBLISH_AS_MIT = 'true';