Add tests to check for collapsed sidebar and tooltip

responsible-ai-collaborative · Dec 10, 2024 · 111f71e · 111f71e
1 parent 7608d18
commit 111f71e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/site/gatsby-site/playwright/e2e/landingPage.spec.ts b/site/gatsby-site/playwright/e2e/landingPage.spec.ts
@@ -101,11 +101,11 @@ test.describe('The Landing page', () => {
   );
 
   test('Loads the random incidents carousel', async ({ page, skipOnEmptyEnvironment }) => {
-      await page.goto('/');
-      await page.locator('[data-cy="random-incidents-carousel"]').scrollIntoViewIfNeeded();
-      await expect(page.locator('[data-cy="random-incidents-carousel"]')).toBeVisible();
-      await expect(page.locator('[data-cy="random-incidents-carousel-item"]')).toHaveCount(5);
-    });
+    await page.goto('/');
+    await page.locator('[data-cy="random-incidents-carousel"]').scrollIntoViewIfNeeded();
+    await expect(page.locator('[data-cy="random-incidents-carousel"]')).toBeVisible();
+    await expect(page.locator('[data-cy="random-incidents-carousel-item"]')).toHaveCount(5);
+  });
 
   test('Renders commit sha in the footer', async ({ page }) => {
     await page.goto('/');
@@ -119,4 +119,30 @@ test.describe('The Landing page', () => {
     await expect(lis).toBeGreaterThan(0);
   });
 
+  test('Should collapse sidebar', async ({ page, skipOnEmptyEnvironment }) => {
+    await page.goto('/');
+    const sidebarTree = page.locator('[data-testid="sidebar-desktop"]');
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    const sidebar = await page.locator('[id="sidebar"]').first();
+    let hasClass = await sidebar.evaluate((el, className) => {
+      return el.classList.contains(className);
+    }, 'collapsed');
+    expect(hasClass).toBe(true);
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    hasClass = await sidebar.evaluate((el, className) => {
+      return el.classList.contains(className);
+    }, 'collapsed');
+    expect(hasClass).toBe(false);
+  });
+
+  test('Should display sidebar tooltip when collapsed', async ({ page, skipOnEmptyEnvironment }) => {
+    await page.goto('/');
+    const sidebarTree = page.locator('[data-testid="sidebar-desktop"]');
+    await sidebarTree.locator('[data-cy="collapse-button"]').click();
+    // Hovers over a sidebar item
+    await page.getByTestId('sidebar-desktop').getByTestId("sidebar-welcome").hover();
+    await expect(page.getByTestId('sidebar-desktop').locator('[data-testid="flowbite-tooltip"]', { hasText: 'Welcome to the AIID' }))
+      .toBeVisible();
+
+  });
 });
diff --git a/site/gatsby-site/src/components/sidebar/index.js b/site/gatsby-site/src/components/sidebar/index.js
@@ -227,7 +227,9 @@ const Sidebar = ({ defaultCollapsed = false, location = null, setNavCollapsed })
       <aside
         id="sidebar"
         aria-label="Sidebar"
-        className={`${sidebarWidth} sticky top-0 flex flex-col md:bg-text-light-gray z-2`}
+        className={`${sidebarWidth} sticky top-0 flex flex-col md:bg-text-light-gray z-2 ${
+          isCollapsed ? 'collapsed' : ''
+        }`}
         style={{
           height:
             (headerVisiblePixels && !isMobile) || window.innerWidth > 768