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

fix: auto-expand collapsed sidebar section when clicking action buttons (#6468)

Browse Source
This commit is contained in:
Pooja
2025-12-19 16:15:52 +05:30
committed by GitHub
parent e4e17b0c74
commit 5f88e7d201
2 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,7 +66,12 @@ const SidebarSection = ({
{actions && (
<div
className="section-actions"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
if (!localExpanded) {
setSectionExpanded(id, true);
}
}}
>
{actions}
</div>

74
tests/sidebar/section-auto-expand.spec.ts Normal file
View File

@@ -0,0 +1,74 @@
import { test, expect } from '../../playwright';
test.describe('Sidebar Section Auto-Expand', () => {
test('Clicking action button on collapsed section should expand it', async ({ page }) => {
// The api-specs section is collapsed by default (only collections is expanded)
// Find the api-specs section by its title
const apiSpecsSection = page.locator('.sidebar-section').filter({ hasText: 'API Specs' });
// Verify the api-specs section is initially collapsed (doesn't have 'expanded' class)
await expect(apiSpecsSection).not.toHaveClass(/expanded/);
// Verify section-content is not visible when collapsed
const sectionContent = apiSpecsSection.locator('.section-content');
await expect(sectionContent).not.toBeVisible();
// Click on the add button in the section-actions area
// This should trigger the auto-expand logic
const addButton = page.getByTestId('api-specs-header-add-menu');
await addButton.click();
// Close the dropdown by pressing Escape (we just want to test the expand, not the dropdown action)
await page.keyboard.press('Escape');
// After clicking an action, the section should be expanded
await expect(apiSpecsSection).toHaveClass(/expanded/);
// Verify section-content is now visible
await expect(sectionContent).toBeVisible();
});
test('Clicking action button on already expanded section should keep it expanded', async ({ page }) => {
// The collections section is expanded by default
const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
// Verify the collections section is initially expanded
await expect(collectionsSection).toHaveClass(/expanded/);
// Verify section-content is visible
const sectionContent = collectionsSection.locator('.section-content');
await expect(sectionContent).toBeVisible();
// Click on the add button in the section-actions area
const addButton = page.getByTestId('collections-header-add-menu');
await addButton.click();
// Close the dropdown
await page.keyboard.press('Escape');
// Section should still be expanded
await expect(collectionsSection).toHaveClass(/expanded/);
await expect(sectionContent).toBeVisible();
});
test('Clicking search action on collapsed collections section should expand it', async ({ page }) => {
// First, collapse the collections section by clicking on its header
const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
const sectionHeader = collectionsSection.locator('.section-header-left');
await sectionHeader.click();
// Verify the section is now collapsed
await expect(collectionsSection).not.toHaveClass(/expanded/);
const sectionContent = collectionsSection.locator('.section-content');
await expect(sectionContent).not.toBeVisible();
// Now click on the search action button in the collapsed section
// The search button is in section-actions with title "Search requests"
const searchButton = collectionsSection.locator('.section-actions button[title="Search requests"]');
await searchButton.click();
// The section should now be expanded
await expect(collectionsSection).toHaveClass(/expanded/);
await expect(sectionContent).toBeVisible();
});
});