✅(frontend) update document sharing tests

- Added Share button interactions in various document visibility
scenarios
- Updated test assertions for share and copy link functionality
- Improved test coverage for document sharing features

CHANGELOG.md

@@ -13,6 +13,11 @@ and this project adheres to
 
 - github actions to managed Crowdin workflow
 
+## Changed
+
+- 💄(frontend) add abilities on doc row #581
+
+
 ## [2.0.1] - 2025-01-17
 
 ## Fixed

docker-compose.yml

@@ -151,7 +151,7 @@ services:
     image: node:18
     user: "${DOCKER_USER:-1000}"
     environment:
-      HOME: /tmp
+      HOME: /tmp 
     volumes:
       - ".:/app"
 

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

@@ -418,6 +418,13 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
+    const shareButton = page.getByRole('button', {
+      name: 'Share',
+      exact: true,
+    });
+    await expect(shareButton).toBeVisible();
+
+    await shareButton.click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
   });
@@ -455,6 +462,7 @@ test.describe('Documents Header mobile', () => {
 
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
     // Test that clipboard is in HTML format

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

@@ -79,7 +79,7 @@ test.describe('Document create member', () => {
     await expect(quickSearchContent.getByText(email).first()).toBeVisible();
 
     // Check user added
-    await expect(page.getByText('Share with 2 users')).toBeVisible();
+    await expect(page.getByText('Share with 3 users')).toBeVisible();
     await expect(
       quickSearchContent.getByText(users[0].full_name).first(),
     ).toBeVisible();

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

@@ -250,7 +250,7 @@ test.describe('Doc Visibility: Public', () => {
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
     await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
-    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
     const card = page.getByLabel('It is the card information');
     await expect(card).toBeVisible();
 
@@ -314,7 +314,7 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await verifyDocName(page, docTitle);
-    await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
   });
 });
 
@@ -413,6 +413,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await page.getByRole('button', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
   });
@@ -468,6 +469,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.goto(urlDoc);
 
     await verifyDocName(page, docTitle);
+    await page.getByRole('button', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
   });

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -576,6 +576,22 @@ input:-webkit-autofill:focus {
   }
 }
 
+.c__modal__scroller:has(.noPadding) {
+  padding: 0 !important;
+
+  .c__modal__close .c__button {
+    right: 5px;
+    top: 5px;
+    padding: 1.5rem 1rem;
+  }
+
+  .c__modal__title {
+    font-size: var(--c--theme--font--sizes--xs);
+    padding: var(--c--theme--spacings--base);
+    margin-bottom: 0;
+  }
+}
+
 /**
  * Toast
 */

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

@@ -114,7 +114,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
             arrowCss={css`
               color: ${colors['primary-800']} !important;
             `}
-            disabled={!doc.abilities.accesses_manage}
+            disabled={!canManage}
             showArrow={true}
             options={linkReachOptions}
           >

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

@@ -63,11 +63,16 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             $align="center"
             $gap={spacings.xs}
             $flex={flexLeft}
-            $padding={{ right: 'md' }}
+            $padding={{ right: isDesktop ? 'md' : '3xs' }}
           >
             <SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
-            {showAccesses && isDesktop && (
+            {showAccesses && (
-              <>
+              <Box
+                $padding={{ top: '3xs' }}
+                $css={css`
+                  align-self: flex-start;
+                `}
+              >
                 <Tooltip
                   content={
                     <Text $textAlign="center" $variation="000">
@@ -87,7 +92,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
                     />
                   </div>
                 </Tooltip>
-              </>
+              </Box>
             )}
           </Box>
         </StyledLink>

src/frontend/apps/impress/src/pages/globals.css

@@ -41,19 +41,3 @@ main ::-webkit-scrollbar-thumb:hover,
   cursor: pointer;
   outline: inherit;
 }
-
-.c__modal__scroller:has(.noPadding) {
-  padding: 0 !important;
-
-  .c__modal__close .c__button {
-    right: 5px;
-    top: 5px;
-    padding: 1.5rem 1rem;
-  }
-
-  .c__modal__title {
-    font-size: var(--c--theme--font--sizes--xs);
-    padding: var(--c--theme--spacings--base);
-    margin-bottom: 0;
-  }
-}