🏗️(e2e) cleaning and more consistant naming

Clean up e2e tests by removing unused utils
and renaming some files for consistency.

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -1,6 +1,6 @@
 import { FullConfig, FullProject, chromium, expect } from '@playwright/test';
 
-import { keyCloakSignIn } from './common';
+import { keyCloakSignIn } from './utils-common';
 
 const saveStorageState = async (
   browserConfig: FullProject<unknown, unknown>,

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

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { CONFIG, createDoc, overrideConfig } from './common';
+import { CONFIG, createDoc, overrideConfig } from './utils-common';
 
 test.describe('Config', () => {
   test('it checks that sentry is trying to init from config endpoint', async ({

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

@@ -6,7 +6,7 @@ import {
   keyCloakSignIn,
   randomName,
   verifyDocName,
-} from './common';
+} from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -9,8 +9,8 @@ import {
   mockedDocument,
   overrideConfig,
   verifyDocName,
-} from './common';
+} from './utils-common';
-import { createRootSubPage } from './sub-pages-utils';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test';
 import cs from 'convert-stream';
 import pdf from 'pdf-parse';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc, verifyDocName } from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, mockedListDocs } from './common';
+import { createDoc, mockedListDocs } from './utils-common';
 
 test.describe('Doc grid dnd', () => {
   test('it creates a doc', async ({ page, browserName }) => {

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, getGridRow } from './common';
+import { createDoc, getGridRow } from './utils-common';
 
 type SmallDoc = {
   id: string;

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

@@ -4,12 +4,11 @@ import {
   createDoc,
   getGridRow,
   goToGridDoc,
-  mockedAccesses,
   mockedDocument,
-  mockedInvitations,
   verifyDocName,
-} from './common';
+} from './utils-common';
-import { createRootSubPage } from './sub-pages-utils';
+import { mockedAccesses, mockedInvitations } from './utils-share';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -1,8 +1,8 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc, verifyDocName } from './utils-common';
-import { updateShareLink } from './share-utils';
+import { updateShareLink } from './utils-share';
-import { createRootSubPage } from './sub-pages-utils';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Inherited share accesses', () => {
   test('it checks inherited accesses', async ({ page, browserName }) => {

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

@@ -6,8 +6,8 @@ import {
   keyCloakSignIn,
   randomName,
   verifyDocName,
-} from './common';
+} from './utils-common';
-import { createRootSubPage } from './sub-pages-utils';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Document create member', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
-import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
+import { createDoc, goToGridDoc, verifyDocName } from './utils-common';
+import { addNewMember } from './utils-share';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -8,7 +8,7 @@ import {
   keyCloakSignIn,
   mockedDocument,
   verifyDocName,
-} from './common';
+} from './utils-common';
 
 test.describe('Doc Routing', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, randomName, verifyDocName } from './common';
+import { createDoc, randomName, verifyDocName } from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc, verifyDocName } from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -2,15 +2,15 @@
 import { expect, test } from '@playwright/test';
 
 import {
-  addNewMember,
   createDoc,
   expectLoginPage,
   keyCloakSignIn,
   randomName,
   updateDocTitle,
   verifyDocName,
-} from './common';
+} from './utils-common';
-import { clickOnAddRootSubPage, createRootSubPage } from './sub-pages-utils';
+import { addNewMember } from './utils-share';
+import { clickOnAddRootSubPage, createRootSubPage } from './utils-sub-pages';
 
 test.describe('Doc Tree', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -5,7 +5,7 @@ import {
   goToGridDoc,
   mockedDocument,
   verifyDocName,
-} from './common';
+} from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');

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

@@ -6,8 +6,8 @@ import {
   expectLoginPage,
   keyCloakSignIn,
   verifyDocName,
-} from './common';
+} from './utils-common';
-import { createRootSubPage } from './sub-pages-utils';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Doc Visibility', () => {
   test.beforeEach(async ({ page }) => {

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { overrideConfig } from './common';
+import { overrideConfig } from './utils-common';
 
 test.describe('Footer', () => {
   test.use({ storageState: { cookies: [], origins: [] } });

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

@@ -1,6 +1,10 @@
 import { expect, test } from '@playwright/test';
 
-import { expectLoginPage, keyCloakSignIn, overrideConfig } from './common';
+import {
+  expectLoginPage,
+  keyCloakSignIn,
+  overrideConfig,
+} from './utils-common';
 
 test.describe('Header', () => {
   test('checks all the elements are visible', async ({ page }) => {

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { overrideConfig } from './common';
+import { overrideConfig } from './utils-common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/docs/');

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

@@ -1,6 +1,6 @@
 import { Page, expect, test } from '@playwright/test';
 
-import { createDoc } from './common';
+import { createDoc } from './utils-common';
 
 test.describe.serial('Language', () => {
   let page: Page;

src/frontend/apps/e2e/__tests__/app-impress/share-utils.ts

@@ -1,158 +0,0 @@
-import { Locator, Page, expect } from '@playwright/test';
-
-export type UserSearchResult = {
-  email: string;
-  full_name?: string | null;
-};
-
-export type Role = 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader';
-export type LinkReach = 'Private' | 'Connected' | 'Public';
-export type LinkRole = 'Reading' | 'Edition';
-
-export const searchUserToInviteToDoc = async (
-  page: Page,
-  inputFill?: string,
-): Promise<UserSearchResult[]> => {
-  const inputFillValue = inputFill ?? 'user ';
-
-  const responsePromise = page.waitForResponse(
-    (response) =>
-      response
-        .url()
-        .includes(`/users/?q=${encodeURIComponent(inputFillValue)}`) &&
-      response.status() === 200,
-  );
-
-  await page.getByRole('button', { name: 'Share' }).click();
-  const inputSearch = page.getByRole('combobox', {
-    name: 'Quick search input',
-  });
-  await expect(inputSearch).toBeVisible();
-  await inputSearch.fill(inputFillValue);
-  const response = await responsePromise;
-  const users = (await response.json()) as UserSearchResult[];
-  return users;
-};
-
-export const addMemberToDoc = async (
-  page: Page,
-  role: Role,
-  users: UserSearchResult[],
-) => {
-  const list = page.getByTestId('doc-share-add-member-list');
-  await expect(list).toBeHidden();
-  const quickSearchContent = page.getByTestId('doc-share-quick-search');
-  for (const user of users) {
-    await quickSearchContent
-      .getByTestId(`search-user-row-${user.email}`)
-      .click();
-  }
-
-  await list.getByLabel('doc-role-dropdown').click();
-  await expect(page.getByLabel(role)).toBeVisible();
-  await page.getByLabel(role).click();
-  await page.getByRole('button', { name: 'Invite' }).click();
-};
-
-export const verifyMemberAddedToDoc = async (
-  page: Page,
-  user: UserSearchResult,
-  role: Role,
-): Promise<Locator> => {
-  const container = page.getByLabel('List members card');
-  await expect(container).toBeVisible();
-  const userRow = container.getByTestId(`doc-share-member-row-${user.email}`);
-  await expect(userRow).toBeVisible();
-  await expect(userRow.getByText(role)).toBeVisible();
-  await expect(userRow.getByText(user.full_name || user.email)).toBeVisible();
-  return userRow;
-};
-
-export const updateShareLink = async (
-  page: Page,
-  linkReach: LinkReach,
-  linkRole?: LinkRole | null,
-) => {
-  await page.getByRole('button', { name: 'Visibility', exact: true }).click();
-  await page.getByRole('menuitem', { name: linkReach }).click();
-
-  const visibilityUpdatedText = page
-    .getByText('The document visibility has been updated')
-    .first();
-
-  await expect(visibilityUpdatedText).toBeVisible();
-
-  if (linkRole) {
-    await page
-      .getByRole('button', { name: 'Visibility mode', exact: true })
-      .click();
-    await page.getByRole('menuitem', { name: linkRole }).click();
-    await expect(visibilityUpdatedText).toBeVisible();
-  }
-};
-
-export const verifyLinkReachIsDisabled = async (
-  page: Page,
-  linkReach: LinkReach,
-) => {
-  await page.getByRole('button', { name: 'Visibility', exact: true }).click();
-  const item = page.getByRole('menuitem', { name: linkReach });
-  await expect(item).toBeDisabled();
-  await page.click('body');
-};
-
-export const verifyLinkReachIsEnabled = async (
-  page: Page,
-  linkReach: LinkReach,
-) => {
-  await page.getByRole('button', { name: 'Visibility', exact: true }).click();
-  const item = page.getByRole('menuitem', { name: linkReach });
-  await expect(item).toBeEnabled();
-  await page.click('body');
-};
-
-export const verifyLinkRoleIsDisabled = async (
-  page: Page,
-  linkRole: LinkRole,
-) => {
-  await page
-    .getByRole('button', { name: 'Visibility mode', exact: true })
-    .click();
-  const item = page.getByRole('menuitem', { name: linkRole });
-  await expect(item).toBeDisabled();
-  await page.click('body');
-};
-
-export const verifyLinkRoleIsEnabled = async (
-  page: Page,
-  linkRole: LinkRole,
-) => {
-  await page
-    .getByRole('button', { name: 'Visibility mode', exact: true })
-    .click();
-  const item = page.getByRole('menuitem', { name: linkRole });
-  await expect(item).toBeEnabled();
-  await page.click('body');
-};
-
-export const verifyShareLink = async (
-  page: Page,
-  linkReach: LinkReach,
-  linkRole?: LinkRole | null,
-) => {
-  const visibilityDropdownButton = page.getByRole('button', {
-    name: 'Visibility',
-    exact: true,
-  });
-  await expect(visibilityDropdownButton).toBeVisible();
-  await expect(visibilityDropdownButton.getByText(linkReach)).toBeVisible();
-
-  if (linkRole) {
-    const visibilityModeButton = page.getByRole('button', {
-      name: 'Visibility mode',
-      exact: true,
-    });
-    await expect(visibilityModeButton).toBeVisible();
-    await expect(page.getByText(linkRole)).toBeVisible();
-  }
-};

src/frontend/apps/e2e/__tests__/app-impress/sub-pages-utils.ts

@@ -1,80 +0,0 @@
-import { Page, expect } from '@playwright/test';
-
-import { randomName, updateDocTitle, waitForResponseCreateDoc } from './common';
-
-export const createRootSubPage = async (
-  page: Page,
-  browserName: string,
-  docName: string,
-) => {
-  // Get response
-  const responsePromise = waitForResponseCreateDoc(page);
-  await clickOnAddRootSubPage(page);
-  const response = await responsePromise;
-  expect(response.ok()).toBeTruthy();
-  const subPageJson = (await response.json()) as { id: string };
-
-  // Get doc tree
-  const docTree = page.getByTestId('doc-tree');
-  await expect(docTree).toBeVisible();
-
-  // Get sub page item
-  const subPageItem = docTree
-    .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
-    .first();
-  await expect(subPageItem).toBeVisible();
-  await subPageItem.click();
-
-  // Update sub page name
-  const randomDocs = randomName(docName, browserName, 1);
-  await updateDocTitle(page, randomDocs[0]);
-
-  // Return sub page data
-  return { name: randomDocs[0], docTreeItem: subPageItem, item: subPageJson };
-};
-
-export const clickOnAddRootSubPage = async (page: Page) => {
-  const rootItem = page.getByTestId('doc-tree-root-item');
-  await expect(rootItem).toBeVisible();
-  await rootItem.hover();
-  await rootItem.getByRole('button', { name: 'add_box' }).click();
-};
-
-export const createSubPageFromParent = async (
-  page: Page,
-  browserName: string,
-  parentId: string,
-  subPageName: string,
-) => {
-  // Get parent doc tree item
-  const parentDocTreeItem = page.getByTestId(`doc-sub-page-item-${parentId}`);
-  await expect(parentDocTreeItem).toBeVisible();
-  await parentDocTreeItem.hover();
-
-  // Create sub page
-  const responsePromise = waitForResponseCreateDoc(page);
-  await parentDocTreeItem.getByRole('button', { name: 'add_box' }).click();
-
-  // Get response
-  const response = await responsePromise;
-  expect(response.ok()).toBeTruthy();
-  const subPageJson = (await response.json()) as { id: string };
-
-  // Get doc tree
-  const docTree = page.getByTestId('doc-tree');
-  await expect(docTree).toBeVisible();
-
-  // Get sub page item
-  const subPageItem = docTree
-    .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
-    .first();
-  await expect(subPageItem).toBeVisible();
-  await subPageItem.click();
-
-  // Update sub page name
-  const subPageTitle = randomName(subPageName, browserName, 1)[0];
-  await updateDocTitle(page, subPageTitle);
-
-  // Return sub page data
-  return { name: subPageTitle, docTreeItem: subPageItem, item: subPageJson };
-};

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

@@ -127,42 +127,6 @@ export const verifyDocName = async (page: Page, docName: string) => {
   }
 };
 
-export const addNewMember = async (
-  page: Page,
-  index: number,
-  role: 'Administrator' | 'Owner' | 'Editor' | 'Reader',
-  fillText: string = 'user ',
-) => {
-  const responsePromiseSearchUser = page.waitForResponse(
-    (response) =>
-      response.url().includes(`/users/?q=${encodeURIComponent(fillText)}`) &&
-      response.status() === 200,
-  );
-
-  const inputSearch = page.getByRole('combobox', {
-    name: 'Quick search input',
-  });
-
-  // Select a new user
-  await inputSearch.fill(fillText);
-
-  // Intercept response
-  const responseSearchUser = await responsePromiseSearchUser;
-  const users = (await responseSearchUser.json()) as {
-    email: string;
-  }[];
-
-  // Choose user
-  await page.getByRole('option', { name: users[index].email }).click();
-
-  // Choose a role
-  await page.getByLabel('doc-role-dropdown').click();
-  await page.getByLabel(role).click();
-  await page.getByRole('button', { name: 'Invite' }).click();
-
-  return users[index].email;
-};
-
 export const getGridRow = async (page: Page, title: string) => {
   const docsGrid = page.getByRole('grid');
   await expect(docsGrid).toBeVisible();
@@ -301,107 +265,6 @@ export const mockedListDocs = async (page: Page, data: object[] = []) => {
   });
 };
 
-export const mockedInvitations = async (page: Page, json?: object) => {
-  let result = [
-    {
-      id: '120ec765-43af-4602-83eb-7f4e1224548a',
-      abilities: {
-        destroy: true,
-        update: true,
-        partial_update: true,
-        retrieve: true,
-      },
-      created_at: '2024-10-03T12:19:26.107687Z',
-      email: 'test@invitation.test',
-      document: '4888c328-8406-4412-9b0b-c0ba5b9e5fb6',
-      role: 'editor',
-      issuer: '7380f42f-02eb-4ad5-b8f0-037a0e66066d',
-      is_expired: false,
-      ...json,
-    },
-  ];
-  await page.route('**/invitations/**/', async (route) => {
-    const request = route.request();
-    if (
-      request.method().includes('GET') &&
-      request.url().includes('invitations') &&
-      request.url().includes('page=')
-    ) {
-      await route.fulfill({
-        json: {
-          count: 1,
-          next: null,
-          previous: null,
-          results: result,
-        },
-      });
-    } else {
-      await route.continue();
-    }
-  });
-
-  await page.route(
-    '**/invitations/120ec765-43af-4602-83eb-7f4e1224548a/**/',
-    async (route) => {
-      const request = route.request();
-      if (request.method().includes('DELETE')) {
-        result = [];
-
-        await route.fulfill({
-          json: {},
-        });
-      }
-    },
-  );
-};
-
-export const mockedAccesses = async (page: Page, json?: object) => {
-  await page.route('**/accesses/**/', async (route) => {
-    const request = route.request();
-
-    if (
-      request.method().includes('GET') &&
-      request.url().includes('accesses')
-    ) {
-      await route.fulfill({
-        json: [
-          {
-            id: 'bc8bbbc5-a635-4f65-9817-fd1e9ec8ef87',
-            user: {
-              id: 'b4a21bb3-722e-426c-9f78-9d190eda641c',
-              email: 'test@accesses.test',
-            },
-            team: '',
-            max_ancestors_role: null,
-            max_role: 'reader',
-            role: 'reader',
-            document: {
-              id: 'mocked-document-id',
-              path: '000000',
-              depth: 1,
-            },
-            abilities: {
-              destroy: true,
-              update: true,
-              partial_update: true,
-              retrieve: true,
-              link_select_options: {
-                public: ['reader', 'editor'],
-                authenticated: ['reader', 'editor'],
-                restricted: null,
-              },
-              set_role_to: ['administrator', 'editor'],
-            },
-            ...json,
-          },
-        ],
-      });
-    } else {
-      await route.continue();
-    }
-  });
-};
-
 export const expectLoginPage = async (page: Page) =>
   await expect(
     page.getByRole('heading', { name: 'Collaborative writing' }),

src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts

@@ -0,0 +1,165 @@
+import { Page, expect } from '@playwright/test';
+
+export type Role = 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader';
+export type LinkReach = 'Private' | 'Connected' | 'Public';
+export type LinkRole = 'Reading' | 'Edition';
+
+export const addNewMember = async (
+  page: Page,
+  index: number,
+  role: 'Administrator' | 'Owner' | 'Editor' | 'Reader',
+  fillText: string = 'user ',
+) => {
+  const responsePromiseSearchUser = page.waitForResponse(
+    (response) =>
+      response.url().includes(`/users/?q=${encodeURIComponent(fillText)}`) &&
+      response.status() === 200,
+  );
+
+  const inputSearch = page.getByRole('combobox', {
+    name: 'Quick search input',
+  });
+
+  // Select a new user
+  await inputSearch.fill(fillText);
+
+  // Intercept response
+  const responseSearchUser = await responsePromiseSearchUser;
+  const users = (await responseSearchUser.json()) as {
+    email: string;
+  }[];
+
+  // Choose user
+  await page.getByRole('option', { name: users[index].email }).click();
+
+  // Choose a role
+  await page.getByLabel('doc-role-dropdown').click();
+  await page.getByLabel(role).click();
+  await page.getByRole('button', { name: 'Invite' }).click();
+
+  return users[index].email;
+};
+
+export const updateShareLink = async (
+  page: Page,
+  linkReach: LinkReach,
+  linkRole?: LinkRole | null,
+) => {
+  await page.getByRole('button', { name: 'Visibility', exact: true }).click();
+  await page.getByRole('menuitem', { name: linkReach }).click();
+
+  const visibilityUpdatedText = page
+    .getByText('The document visibility has been updated')
+    .first();
+
+  await expect(visibilityUpdatedText).toBeVisible();
+
+  if (linkRole) {
+    await page
+      .getByRole('button', { name: 'Visibility mode', exact: true })
+      .click();
+    await page.getByRole('menuitem', { name: linkRole }).click();
+    await expect(visibilityUpdatedText).toBeVisible();
+  }
+};
+
+export const mockedInvitations = async (page: Page, json?: object) => {
+  let result = [
+    {
+      id: '120ec765-43af-4602-83eb-7f4e1224548a',
+      abilities: {
+        destroy: true,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+      created_at: '2024-10-03T12:19:26.107687Z',
+      email: 'test@invitation.test',
+      document: '4888c328-8406-4412-9b0b-c0ba5b9e5fb6',
+      role: 'editor',
+      issuer: '7380f42f-02eb-4ad5-b8f0-037a0e66066d',
+      is_expired: false,
+      ...json,
+    },
+  ];
+  await page.route('**/invitations/**/', async (route) => {
+    const request = route.request();
+    if (
+      request.method().includes('GET') &&
+      request.url().includes('invitations') &&
+      request.url().includes('page=')
+    ) {
+      await route.fulfill({
+        json: {
+          count: 1,
+          next: null,
+          previous: null,
+          results: result,
+        },
+      });
+    } else {
+      await route.continue();
+    }
+  });
+
+  await page.route(
+    '**/invitations/120ec765-43af-4602-83eb-7f4e1224548a/**/',
+    async (route) => {
+      const request = route.request();
+      if (request.method().includes('DELETE')) {
+        result = [];
+
+        await route.fulfill({
+          json: {},
+        });
+      }
+    },
+  );
+};
+
+export const mockedAccesses = async (page: Page, json?: object) => {
+  await page.route('**/accesses/**/', async (route) => {
+    const request = route.request();
+
+    if (
+      request.method().includes('GET') &&
+      request.url().includes('accesses')
+    ) {
+      await route.fulfill({
+        json: [
+          {
+            id: 'bc8bbbc5-a635-4f65-9817-fd1e9ec8ef87',
+            user: {
+              id: 'b4a21bb3-722e-426c-9f78-9d190eda641c',
+              email: 'test@accesses.test',
+            },
+            team: '',
+            max_ancestors_role: null,
+            max_role: 'reader',
+            role: 'reader',
+            document: {
+              id: 'mocked-document-id',
+              path: '000000',
+              depth: 1,
+            },
+            abilities: {
+              destroy: true,
+              update: true,
+              partial_update: true,
+              retrieve: true,
+              link_select_options: {
+                public: ['reader', 'editor'],
+                authenticated: ['reader', 'editor'],
+                restricted: null,
+              },
+              set_role_to: ['administrator', 'editor'],
+            },
+            ...json,
+          },
+        ],
+      });
+    } else {
+      await route.continue();
+    }
+  });
+};

src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts

@@ -0,0 +1,45 @@
+import { Page, expect } from '@playwright/test';
+
+import {
+  randomName,
+  updateDocTitle,
+  waitForResponseCreateDoc,
+} from './utils-common';
+
+export const createRootSubPage = async (
+  page: Page,
+  browserName: string,
+  docName: string,
+) => {
+  // Get response
+  const responsePromise = waitForResponseCreateDoc(page);
+  await clickOnAddRootSubPage(page);
+  const response = await responsePromise;
+  expect(response.ok()).toBeTruthy();
+  const subPageJson = (await response.json()) as { id: string };
+
+  // Get doc tree
+  const docTree = page.getByTestId('doc-tree');
+  await expect(docTree).toBeVisible();
+
+  // Get sub page item
+  const subPageItem = docTree
+    .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
+    .first();
+  await expect(subPageItem).toBeVisible();
+  await subPageItem.click();
+
+  // Update sub page name
+  const randomDocs = randomName(docName, browserName, 1);
+  await updateDocTitle(page, randomDocs[0]);
+
+  // Return sub page data
+  return { name: randomDocs[0], docTreeItem: subPageItem, item: subPageJson };
+};
+
+export const clickOnAddRootSubPage = async (page: Page) => {
+  const rootItem = page.getByTestId('doc-tree-root-item');
+  await expect(rootItem).toBeVisible();
+  await rootItem.hover();
+  await rootItem.getByRole('button', { name: 'add_box' }).click();
+};