From e7c33f7eef4b94fb2194c595bdfda2ea435df8b5 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 30 Aug 2025 20:24:52 +0530
Subject: [PATCH] Add playwright tests for Notifications Modal and Sidebar
 Toggle functionality

---
 .../notifications/notifications.spec.js       | 25 +++++++++++++
 .../sidebar-toggle/sidebar-toggle.spec.js     | 36 +++++++++++++++++++
 .../src/components/Notifications/index.js     |  2 +-
 .../src/components/Sidebar/StyledWrapper.js   |  2 +-
 .../bruno-app/src/components/Sidebar/index.js |  4 +--
 5 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 e2e-tests/footer/notifications/notifications.spec.js
 create mode 100644 e2e-tests/footer/sidebar-toggle/sidebar-toggle.spec.js

diff --git a/e2e-tests/footer/notifications/notifications.spec.js b/e2e-tests/footer/notifications/notifications.spec.js
new file mode 100644
index 000000000..238afcc98
--- /dev/null
+++ b/e2e-tests/footer/notifications/notifications.spec.js
@@ -0,0 +1,25 @@
+import { test, expect } from '../../../playwright';
+
+test.describe('Notifications Modal', () => {
+  test('should open notifications modal when clicking bell icon and close with close button', async ({ page }) => {
+    // Get the notification bell icon in the status bar
+    const notificationBell = page.getByLabel('Check all Notifications');
+    
+    // Click on the bell icon to open notifications
+    await notificationBell.click();
+    
+    // Get modal elements
+    const notificationsModal = page.locator('.bruno-modal');
+    const modalCloseButton = notificationsModal.locator('div.bruno-modal-header div.close');
+    
+    // Verify modal is visible and has the correct title
+    await expect(notificationsModal).toBeVisible();
+    await expect(notificationsModal.locator('.bruno-modal-header-title')).toContainText('NOTIFICATIONS');
+    
+    // Click the close button
+    await modalCloseButton.click();
+    
+    // Verify modal is closed
+    await expect(notificationsModal).not.toBeVisible();
+  });
+});
\ No newline at end of file
diff --git a/e2e-tests/footer/sidebar-toggle/sidebar-toggle.spec.js b/e2e-tests/footer/sidebar-toggle/sidebar-toggle.spec.js
new file mode 100644
index 000000000..d8e7dfb21
--- /dev/null
+++ b/e2e-tests/footer/sidebar-toggle/sidebar-toggle.spec.js
@@ -0,0 +1,36 @@
+import { test, expect } from '../../../playwright';
+
+test.describe('Sidebar Toggle', () => {
+  test('should toggle sidebar visibility when clicking the toggle button', async ({ page }) => {
+    // Get the sidebar and toggle button elements
+    const sidebar = page.locator('aside.sidebar');
+    const toggleButton = page.getByLabel('Toggle Sidebar');
+    const dragHandle = page.locator('.sidebar-drag-handle');
+    
+    // Initial state - sidebar and drag handle should be visible
+    await expect(sidebar).toBeVisible();
+    await expect(dragHandle).toBeVisible();
+    
+    // Click toggle to hide sidebar
+    await toggleButton.click();
+    
+    // Wait for transition to complete and verify sidebar and drag handle are hidden
+    await expect(sidebar).not.toBeVisible();
+    await expect(dragHandle).not.toBeVisible();
+
+    // Verify the sidebar has collapsed width
+    const sidebarBox = await sidebar.boundingBox();
+    expect(sidebarBox?.width).toBe(0);
+    
+    // Click toggle again to show sidebar
+    await toggleButton.click();
+    
+    // Wait for transition and verify sidebar and drag handle are visible again
+    await expect(sidebar).toBeVisible();
+    await expect(dragHandle).toBeVisible();
+
+    // Verify the sidebar has expanded width
+    const expandedSidebarBox = await sidebar.boundingBox();
+    expect(expandedSidebarBox?.width).toBeGreaterThan(0);
+  });
+});
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
index 0667a4146..951cb5f6e 100644
--- a/packages/bruno-app/src/components/Notifications/index.js
+++ b/packages/bruno-app/src/components/Notifications/index.js
@@ -79,7 +79,7 @@ const Notifications = () => {
 
   const modalCustomHeader = (
     <div className="flex flex-row gap-8">
-      <div>NOTIFICATIONS</div>
+      <div className="bruno-modal-header-title">NOTIFICATIONS</div>
       {unreadNotifications.length > 0 && (
         <>
           <div className="normal-case font-normal">
diff --git a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
index 8bbe696fe..2cec70df5 100644
--- a/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/StyledWrapper.js
@@ -42,7 +42,7 @@ const Wrapper = styled.div`
     }
   }
 
-  div.drag-sidebar {
+  div.sidebar-drag-handle {
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index fd0423bcd..bd8b319c3 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -77,7 +77,7 @@ const Sidebar = () => {
 
   return (
     <StyledWrapper className="flex relative h-full">
-      <aside style={{ width: currentWidth, transition: dragging ? 'none' : 'width 0.2s ease-in-out' }}>
+      <aside className="sidebar" style={{ width: currentWidth, transition: dragging ? 'none' : 'width 0.2s ease-in-out' }}>
         <div className="flex flex-row h-full w-full">
           <div className="flex flex-col w-full" style={{ width: asideWidth }}>
             <div className="flex flex-col flex-grow">
@@ -89,7 +89,7 @@ const Sidebar = () => {
       </aside>
 
       {!sidebarCollapsed && (
-        <div className="absolute drag-sidebar h-full" onMouseDown={handleDragbarMouseDown}>
+        <div className="absolute sidebar-drag-handle h-full" onMouseDown={handleDragbarMouseDown}>
           <div className="drag-request-border" />
         </div>
       )}