rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-11 09:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add playwright tests for Notifications Modal and Sidebar Toggle functionality

Browse Source
This commit is contained in:
Anoop M D
2025-08-30 20:24:52 +05:30
parent 1620c24557
commit e7c33f7eef
5 changed files with 65 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
e2e-tests/footer/notifications/notifications.spec.js Normal file
View File

@@ -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();
});
});

36
e2e-tests/footer/sidebar-toggle/sidebar-toggle.spec.js Normal file
View File

@@ -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);
});
});

2
packages/bruno-app/src/components/Notifications/index.js
View File

@@ -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">

2
packages/bruno-app/src/components/Sidebar/StyledWrapper.js
View File

@@ -42,7 +42,7 @@ const Wrapper = styled.div`
}
}
div.drag-sidebar {
div.sidebar-drag-handle {
display: flex;
align-items: center;
justify-content: center;

4
packages/bruno-app/src/components/Sidebar/index.js
View File

@@ -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>
)}