✅(e2e) fix flakiness

Some flakiness appeared in the e2e tests. It
started to impact many pull requests. Time to
fix them.

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

@@ -26,7 +26,7 @@ export const createDoc = async (
   page: Page,
   docName: string,
   browserName: string,
-  length: number,
+  length: number = 1,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
@@ -91,6 +91,18 @@ export const addNewMember = async (
   return users[index].email;
 };
 
+export const getGridRow = async (page: Page, title: string) => {
+  const docsGrid = page.getByRole('grid');
+  await expect(docsGrid).toBeVisible();
+  await expect(docsGrid.getByTestId('grid-loader')).toBeHidden();
+
+  const rows = docsGrid.getByRole('row');
+
+  return rows.filter({
+    hasText: title,
+  });
+};
+
 interface GoToGridDocOptions {
   nthRow?: number;
   title?: string;

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

@@ -220,17 +220,19 @@ test.describe('Doc Editor', () => {
     browserName,
   }) => {
     // Check the first doc
-    const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
+    const [doc] = await createDoc(page, 'doc-saves-change', browserName);
     await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
     await editor.fill('Hello World Doc persisted 1');
     await expect(editor.getByText('Hello World Doc persisted 1')).toBeVisible();
 
-    const secondDoc = await goToGridDoc(page, {
-      nthRow: 2,
-    });
+    const [secondDoc] = await createDoc(
+      page,
+      'doc-saves-change-other',
+      browserName,
+    );
 
     await verifyDocName(page, secondDoc);
 
@@ -246,8 +248,7 @@ test.describe('Doc Editor', () => {
     test.skip(browserName === 'webkit', 'This test is very flaky with webkit');
 
     // Check the first doc
-    const doc = await goToGridDoc(page);
-
+    const [doc] = await createDoc(page, 'doc-quit-1', browserName, 1);
     await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');

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

@@ -1,5 +1,7 @@
 import { expect, test } from '@playwright/test';
 
+import { createDoc, getGridRow } from './common';
+
 type SmallDoc = {
   id: string;
   title: string;
@@ -92,6 +94,31 @@ test.describe('Documents Grid mobile', () => {
 });
 
 test.describe('Document grid item options', () => {
+  test('it pins a document', async ({ page, browserName }) => {
+    const [docTitle] = await createDoc(page, `Favorite doc`, browserName);
+
+    await page.goto('/');
+
+    const row = await getGridRow(page, docTitle);
+
+    // Pin
+    await row.getByText(`more_horiz`).click();
+    await page.getByText('push_pin').click();
+
+    // Check is pinned
+    await expect(row.getByLabel('Pin document icon')).toBeVisible();
+    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
+    await expect(leftPanelFavorites.getByText(docTitle)).toBeVisible();
+
+    // Unpin
+    await row.getByText(`more_horiz`).click();
+    await page.getByText('Unpin').click();
+
+    // Check is unpinned
+    await expect(row.getByLabel('Pin document icon')).toBeHidden();
+    await expect(leftPanelFavorites.getByText(docTitle)).toBeHidden();
+  });
+
   test('it deletes the document', async ({ page }) => {
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(

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

@@ -26,7 +26,7 @@ test.describe('Document create member', () => {
     const response = await responsePromise;
     const users = (await response.json()).results as {
       email: string;
-      full_name: string;
+      full_name?: string | null;
     }[];
 
     const list = page.getByTestId('doc-share-add-member-list');
@@ -40,7 +40,9 @@ test.describe('Document create member', () => {
     await expect(
       list.getByTestId(`doc-share-add-member-${users[0].email}`),
     ).toBeVisible();
-    await expect(list.getByText(`${users[0].full_name}`)).toBeVisible();
+    await expect(
+      list.getByText(`${users[0].full_name || users[0].email}`),
+    ).toBeVisible();
 
     // Select user 2 and verify tag
     await inputSearch.fill('user');
@@ -51,7 +53,9 @@ test.describe('Document create member', () => {
     await expect(
       list.getByTestId(`doc-share-add-member-${users[1].email}`),
     ).toBeVisible();
-    await expect(list.getByText(`${users[1].full_name}`)).toBeVisible();
+    await expect(
+      list.getByText(`${users[1].full_name || users[1].email}`),
+    ).toBeVisible();
 
     // Select email and verify tag
     const email = randomName('[email protected]', browserName, 1)[0];
@@ -81,7 +85,9 @@ test.describe('Document create member', () => {
     // Check user added
     await expect(page.getByText('Share with 3 users')).toBeVisible();
     await expect(
-      quickSearchContent.getByText(users[0].full_name).first(),
+      quickSearchContent
+        .getByText(users[0].full_name || users[0].email)
+        .first(),
     ).toBeVisible();
     await expect(
       quickSearchContent.getByText(users[0].email).first(),
@@ -90,7 +96,9 @@ test.describe('Document create member', () => {
       quickSearchContent.getByText(users[1].email).first(),
     ).toBeVisible();
     await expect(
-      quickSearchContent.getByText(users[1].full_name).first(),
+      quickSearchContent
+        .getByText(users[1].full_name || users[1].email)
+        .first(),
     ).toBeVisible();
   });
 

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -30,12 +30,9 @@ import { DocShareModalFooter } from './DocShareModalFooter';
 import { DocShareModalInviteUserRow } from './DocShareModalInviteUserByEmail';
 
 const ShareModalStyle = createGlobalStyle`
-
   .c__modal__title {
     padding-bottom: 0 !important;
-
-}
-
+  }
 `;
 
 type Props = {

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -70,6 +70,7 @@ export const DocsGrid = ({
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
+        role="grid"
         data-testid="docs-grid"
         $height="100%"
         $width="100%"

src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
@@ -30,6 +31,7 @@ export const SimpleDocItem = ({
   isPinned = false,
   showAccesses = false,
 }: SimpleDocItemProps) => {
+  const { t } = useTranslation();
   const { spacingsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const spacings = spacingsTokens();
@@ -44,7 +46,11 @@ export const SimpleDocItem = ({
           filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
         `}
       >
-        {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
+        {isPinned ? (
+          <PinnedDocumentIcon aria-label={t('Pin document icon')} />
+        ) : (
+          <SimpleFileIcon aria-label={t('Simple document icon')} />
+        )}
       </Box>
       <Box $justify="center">
         <Text