📱mobile responsive

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 - ✨(frontend) Activate versions feature #240
 - ✨(frontend) one-click document creation #275
 - ✨(frontend) edit title inline #275
+- 📱(frontend) mobile responsive #304
 - 🌐(frontend) Update translation #308
 
 ## Changed

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -113,13 +113,14 @@ export const goToGridDoc = async (
   const header = page.locator('header').first();
   await header.locator('h2').getByText('Docs').click();
 
-  const datagrid = page
-    .getByLabel('Datagrid of the documents page 1')
-    .getByRole('table');
+  const datagrid = page.getByLabel('Datagrid of the documents page 1');
+  const datagridTable = datagrid.getByRole('table');
 
-  await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+  await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+    timeout: 10000,
+  });
 
-  const rows = datagrid.getByRole('row');
+  const rows = datagridTable.getByRole('row');
   const row = title
     ? rows.filter({
         hasText: title,
@@ -132,7 +133,7 @@ export const goToGridDoc = async (
 
   expect(docTitle).toBeDefined();
 
-  await docTitleCell.click();
+  await row.getByRole('link').first().click();
 
   return docTitle as string;
 };

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

@@ -18,12 +18,13 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const datagrid = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const datagridTable = datagrid.getByRole('table');
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden();
-    await expect(datagrid.getByText(docTitle)).toBeVisible({
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 10000,
+    });
+    await expect(datagridTable.getByText(docTitle)).toBeVisible({
       timeout: 5000,
     });
   });

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

@@ -117,7 +117,9 @@ test.describe('Documents Grid', () => {
           .getByRole('cell')
           .nth(cellNumber);
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
 
         // Initial state
         await expect(docNameRow1).toHaveText(/.*/);
@@ -134,7 +136,9 @@ test.describe('Documents Grid', () => {
         const responseOrderingAsc = await responsePromiseOrderingAsc;
         expect(responseOrderingAsc.ok()).toBeTruthy();
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
 
         await expect(docNameRow1).toHaveText(/.*/);
         await expect(docNameRow2).toHaveText(/.*/);
@@ -155,7 +159,9 @@ test.describe('Documents Grid', () => {
         const responseOrderingDesc = await responsePromiseOrderingDesc;
         expect(responseOrderingDesc.ok()).toBeTruthy();
 
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+          timeout: 10000,
+        });
 
         await expect(docNameRow1).toHaveText(/.*/);
         await expect(docNameRow2).toHaveText(/.*/);
@@ -244,3 +250,87 @@ test.describe('Documents Grid', () => {
     await expect(datagrid.getByText(docName!)).toBeHidden();
   });
 });
+
+test.describe('Documents Grid mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('it checks the grid when mobile', async ({ page }) => {
+    await page.route('**/documents/**', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET') && request.url().includes('page=')) {
+        await route.fulfill({
+          json: {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [
+              {
+                id: 'b7fd9d9b-0642-4b4f-8617-ce50f69519ed',
+                title: 'My mocked document',
+                accesses: [
+                  {
+                    id: '8c1e047a-24e7-4a80-942b-8e9c7ab43e1f',
+                    user: {
+                      id: '7380f42f-02eb-4ad5-b8f0-037a0e66066d',
+                      email: 'test@test.test',
+                      full_name: 'John Doe',
+                      short_name: 'John',
+                    },
+                    team: '',
+                    role: 'owner',
+                    abilities: {
+                      destroy: false,
+                      update: false,
+                      partial_update: false,
+                      retrieve: true,
+                      set_role_to: [],
+                    },
+                  },
+                ],
+                abilities: {
+                  attachment_upload: true,
+                  destroy: true,
+                  link_configuration: true,
+                  manage_accesses: true,
+                  partial_update: true,
+                  retrieve: true,
+                  update: true,
+                  versions_destroy: true,
+                  versions_list: true,
+                  versions_retrieve: true,
+                },
+                link_role: 'reader',
+                link_reach: 'public',
+                created_at: '2024-10-07T13:02:41.085298Z',
+                updated_at: '2024-10-07T13:30:21.829690Z',
+              },
+            ],
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    const datagrid = page.getByLabel('Datagrid of the documents page 1');
+    const tableDatagrid = datagrid.getByRole('table');
+
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 10000,
+    });
+
+    const rows = tableDatagrid.getByRole('row');
+    const row = rows.filter({
+      hasText: 'My mocked document',
+    });
+
+    await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
+    await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
+  });
+});

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

@@ -385,3 +385,35 @@ test.describe('Doc Header', () => {
     ).toBeHidden();
   });
 });
+
+test.describe('Documents Header mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('it checks the close button on Share modal', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: true, // Means owner
+        link_configuration: true,
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        manage_accesses: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    await expect(page.getByLabel('Share modal')).toBeVisible();
+    await page.getByRole('button', { name: 'close' }).click();
+    await expect(page.getByLabel('Share modal')).toBeHidden();
+  });
+});

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

@@ -8,6 +8,8 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Doc Table Content', () => {
   test('it checks the doc table content', async ({ page, browserName }) => {
+    test.setTimeout(60000);
+
     const [randomDoc] = await createDoc(
       page,
       'doc-table-content',
@@ -37,7 +39,7 @@ test.describe('Doc Table Content', () => {
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
-    for (let i = 0; i < 5; i++) {
+    for (let i = 0; i < 10; i++) {
       await page.keyboard.press('Enter');
     }
 
@@ -48,7 +50,7 @@ test.describe('Doc Table Content', () => {
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
-    for (let i = 0; i < 5; i++) {
+    for (let i = 0; i < 10; i++) {
       await page.keyboard.press('Enter');
     }
 
@@ -61,11 +63,11 @@ test.describe('Doc Table Content', () => {
     const another = panel.getByText('Another World');
 
     await expect(hello).toBeVisible();
-    await expect(hello).toHaveCSS('font-size', /19/);
+    await expect(hello).toHaveCSS('font-size', /17/);
     await expect(hello).toHaveAttribute('aria-selected', 'true');
 
     await expect(superW).toBeVisible();
-    await expect(superW).toHaveCSS('font-size', /16/);
+    await expect(superW).toHaveCSS('font-size', /14/);
     await expect(superW).toHaveAttribute('aria-selected', 'false');
 
     await expect(another).toBeVisible();

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

@@ -23,7 +23,9 @@ test.describe('Doc Visibility', () => {
       .getByLabel('Datagrid of the documents page 1')
       .getByRole('table');
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden();
+    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
+      timeout: 10000,
+    });
 
     await expect(datagrid.getByText(docTitle)).toBeVisible();
 

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

@@ -10,8 +10,6 @@ test.describe('Header', () => {
   test('checks all the elements are visible', async ({ page }) => {
     const header = page.locator('header').first();
 
-    await expect(header.getByAltText('Gouvernement Logo')).toBeVisible();
-
     await expect(header.getByAltText('Docs Logo')).toBeVisible();
     await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
       'color',
@@ -67,6 +65,42 @@ test.describe('Header', () => {
   });
 });
 
+test.describe('Header mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('it checks the header when mobile', async ({ page }) => {
+    const header = page.locator('header').first();
+
+    await expect(
+      header.getByRole('button', {
+        name: 'Les services de La Suite numérique',
+      }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Logout',
+      }),
+    ).toBeHidden();
+
+    await expect(page.getByAltText('Language Icon')).toBeHidden();
+
+    await header.getByLabel('Open the header menu').click();
+
+    await expect(
+      page.getByRole('button', {
+        name: 'Logout',
+      }),
+    ).toBeVisible();
+
+    await expect(page.getByAltText('Language Icon')).toBeVisible();
+  });
+});
+
 test.describe('Header: Log out', () => {
   test.use({ storageState: { cookies: [], origins: [] } });