✅(frontend) enhance document grid tests and component interactions

- Updated test cases to replace 'docs-grid-loader' with 'grid-loader'
for improved consistency across document grid tests.
- Refactored document interaction tests to utilize the 'docs-grid'
locator for better readability and maintainability.
- Enhanced document table content tests by refining element selection
methods for improved clarity and performance.
- Cleaned up test code to ensure better structure and maintainability.

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

@@ -104,10 +104,10 @@ export const goToGridDoc = async (
 
   const docsGrid = page.getByTestId('docs-grid');
   await expect(docsGrid).toBeVisible();
-  await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+  await expect(docsGrid.getByTestId('grid-loader')).toBeHidden();
 
   const rows = docsGrid.getByRole('row');
-  expect(await rows.count()).toEqual(20);
+
   const row = title
     ? rows.filter({
         hasText: title,

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

@@ -18,11 +18,11 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
 
     const docsGrid = page.getByTestId('docs-grid');
     await expect(docsGrid).toBeVisible();
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
     await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
 });

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

@@ -29,8 +29,9 @@ test.describe('Document favorite', () => {
     );
     const result = await response.json();
     docs = result.results as SmallDoc[];
-    await page.getByRole('heading', { name: 'All docs' }).click();
+    const docsGrid = page.getByTestId('docs-grid');
-    await expect(page.getByText(`Doc ${id}`)).toBeVisible();
+    await docsGrid.getByRole('heading', { name: 'All docs' }).click();
+    await expect(docsGrid.getByText(`Doc ${id}`)).toBeVisible();
     const doc = docs.find((doc) => doc.title === createdDoc[0]) as SmallDoc;
 
     // Check document
@@ -38,7 +39,7 @@ test.describe('Document favorite', () => {
     expect(doc?.title).toBe(createdDoc[0]);
 
     // Open document actions
-    const button = page.getByTestId(`docs-grid-actions-button-${doc.id}`);
+    const button = docsGrid.getByTestId(`docs-grid-actions-button-${doc.id}`);
     await expect(button).toBeVisible();
     await button.click();
 

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

@@ -78,7 +78,7 @@ test.describe('Documents Grid mobile', () => {
 
     const docsGrid = page.getByTestId('docs-grid');
     await expect(docsGrid).toBeVisible();
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
 
     const rows = docsGrid.getByRole('row');
     const row = rows.filter({
@@ -186,7 +186,7 @@ test.describe('Document grid item options', () => {
 test.describe('Documents filters', () => {
   test('it checks the prebuild left panel filters', async ({ page }) => {
     // All Docs
-    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
     const response = await page.waitForResponse(
       (response) =>
         response.url().endsWith('documents/?page=1') &&
@@ -194,7 +194,7 @@ test.describe('Documents filters', () => {
     );
     const result = await response.json();
     const allCount = result.count as number;
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
 
     const allDocs = page.getByLabel('All docs');
     const myDocs = page.getByLabel('My docs');
@@ -227,7 +227,7 @@ test.describe('Documents filters', () => {
     url = new URL(page.url());
     target = url.searchParams.get('target');
     expect(target).toBe('my_docs');
-    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
     const responseMyDocs = await page.waitForResponse(
       (response) =>
         response.url().endsWith('documents/?page=1&is_creator_me=true') &&
@@ -235,7 +235,7 @@ test.describe('Documents filters', () => {
     );
     const resultMyDocs = await responseMyDocs.json();
     const countMyDocs = resultMyDocs.count as number;
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
     expect(countMyDocs).toBeLessThanOrEqual(allCount);
 
     // Shared with me
@@ -243,7 +243,7 @@ test.describe('Documents filters', () => {
     url = new URL(page.url());
     target = url.searchParams.get('target');
     expect(target).toBe('shared_with_me');
-    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
     const responseSharedWithMe = await page.waitForResponse(
       (response) =>
         response.url().includes('documents/?page=1&is_creator_me=false') &&
@@ -251,7 +251,7 @@ test.describe('Documents filters', () => {
     );
     const resultSharedWithMe = await responseSharedWithMe.json();
     const countSharedWithMe = resultSharedWithMe.count as number;
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
     expect(countSharedWithMe).toBeLessThanOrEqual(allCount);
     expect(countSharedWithMe + countMyDocs).toEqual(allCount);
   });
@@ -264,7 +264,7 @@ test.describe('Documents Grid', () => {
 
   test('checks all the elements are visible', async ({ page }) => {
     let docs: SmallDoc[] = [];
-    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
 
     const response = await page.waitForResponse(
       (response) =>
@@ -274,7 +274,7 @@ test.describe('Documents Grid', () => {
     const result = await response.json();
     docs = result.results as SmallDoc[];
 
-    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
     await expect(page.locator('h4').getByText('All docs')).toBeVisible();
 
     const thead = page.getByTestId('docs-grid-header');
@@ -317,7 +317,6 @@ test.describe('Documents Grid', () => {
     );
 
     await page.getByTestId('infinite-scroll-trigger').scrollIntoViewIfNeeded();
-
     const responsePage2 = await responsePromisePage2;
     result = await responsePage2.json();
     docs = result.results as SmallDoc[];

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

@@ -19,34 +19,9 @@ test.describe('Doc Table Content', () => {
 
     await verifyDocName(page, randomDoc);
 
-    const editor = page.locator('.ProseMirror');
+    await page.locator('.ProseMirror').click();
 
-    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.keyboard.type('# Level 1\n## Level 2\n### Level 3');
-
-    await page.getByText('Heading 1').click();
-    await page.keyboard.type('Level 1');
-    await editor.getByText('Level 1').dblclick();
-    await page.getByRole('button', { name: 'Strike' }).click();
-
-    await page.locator('.bn-block-outer').first().click();
-    await editor.click();
-    await page.locator('.bn-block-outer').last().click();
-    await page.keyboard.press('Enter');
-
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 2').click();
-    await page.keyboard.type('Level 2');
-
-    await page.locator('.bn-block-outer').last().click();
-
-    // Create space to fill the viewport
-    await page.keyboard.press('Enter');
-
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 3').click();
-    await page.keyboard.type('Level 3');
-
-    expect(true).toBe(true);
 
     const summaryContainer = page.locator('#summaryContainer');
     await summaryContainer.click();

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

@@ -32,11 +32,9 @@ test.describe('Doc Version', () => {
 
     const editor = page.locator('.ProseMirror');
     await modal.getByRole('button', { name: 'close' }).click();
-    await editor.locator('.bn-block-outer').last().fill('/');
+    await editor.click();
-    await page.getByText('Heading 1').click();
+    await page.keyboard.type('# Hello World');
 
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
     await goToGridDoc(page, {
       title: randomDoc,
     });