Files
bruno/tests/request/save/save.spec.ts
Abhishek S Lal 30d2a6d141 Refactor dropdown components to use MenuDropdown for improved functionality and keyboard accessibility (#6404)
* Refactor dropdown components to use MenuDropdown for improved functionality and keyboard accessibility

- Replaced Dropdown with MenuDropdown in various components including BodyModeSelector, AuthMode, and RequestBodyMode.
- Updated styles and structure for better usability and accessibility.
- Removed unused Dropdown component and its associated styles.
- Enhanced action buttons in ResponsePane and Collection components with ActionIcon for better UI consistency.

* fix: Update HttpMethodSelector styles and tests for improved accessibility

- Changed the class name for the "Add Custom" button to include 'text-link' for better styling.
- Updated tests to use role-based queries for dropdown items, enhancing accessibility checks.
- Ensured the correct application of classes in tests to reflect the updated structure.

* refactor: Improve component accessibility and consistency

* fix: update hover behavior for collection actions menu in runner.ts

* refactor: streamline hover interactions for collection actions across tests

* refactor: enhance component structure and accessibility across response actions

* fix: correct fill property syntax in StyledWrapper for consistent styling

* refactor: simplify isDisabled logic in response components for clarity

* fix: correct tabIndex logic in ResponseCopy component for improved accessibility

* fix: update tabIndex logic in ResponseBookmark component for improved accessibility

* fix: enable action buttons in ResponsePaneActions for improved usability

* refactor: remove unnecessary tabIndex attributes in response components for improved accessibility

* refactor: remove keyDown event handlers from response components for cleaner interaction

* refactor: remove SidebarHeader component and related styles for improved structure
2025-12-16 18:26:38 +05:30

76 lines
3.4 KiB
TypeScript

import { test, expect, Locator, Page } from '../../../playwright';
import { closeAllCollections } from '../../utils/page';
import { buildCommonLocators } from '../../utils/page/locators';
import { waitForPredicate } from '../../utils/wait';
const isRequestSaved = async (saveButton: Locator) => {
const savedColor = '#9f9f9f';
return (await saveButton.evaluate((d) => d.querySelector('svg')?.getAttribute('stroke') ?? '#invalid')) === savedColor;
};
const setup = async (page: Page, createTmpDir: (tag?: string | undefined) => Promise<string>) => {
await page.getByTestId('collections-header-add-menu').click();
await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
await page.getByLabel('Name').fill('source-collection');
const locationInput = page.getByLabel('Location');
if (await locationInput.isVisible()) {
await locationInput.fill(await createTmpDir('source-collection'));
}
await page.locator('.bruno-modal').getByRole('button', { name: 'Create', exact: true }).click();
await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection' })).toBeVisible();
await page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection' }).click();
await page.getByLabel('Safe Mode').check();
await page.getByRole('button', { name: 'Save' }).click();
const sourceCollection = page.locator('.collection-name').filter({ hasText: 'source-collection' });
await sourceCollection.hover();
await sourceCollection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
await page.getByPlaceholder('Request Name').fill('test-request');
await page.locator('#new-request-url .CodeMirror').click();
await page.locator('textarea').fill('https://echo.usebruno.com');
await page.getByRole('button', { name: 'Create' }).click();
await expect(page.locator('.collection-item-name').filter({ hasText: 'test-request' })).toBeVisible();
};
test.describe.serial('save requests', () => {
test.beforeAll(async ({ page }) => {
await closeAllCollections(page);
});
test('saves new http request', async ({ page, createTmpDir }) => {
// prep the collection by creating a new collection and a new http request
await setup(page, createTmpDir);
const locators = buildCommonLocators(page);
const originalUrl = 'https://echo.usebruno.com';
const replacementUrl = 'ws://localhost:8082';
const clearText = async (text: string) => {
for (let i = text.length; i > 0; i--) {
await page.keyboard.press('Backspace');
}
};
// Open the request tab
await page.locator('.collection-item-name').filter({ hasText: 'test-request' }).dblclick();
await expect(page.locator('.request-tab .tab-label').filter({ hasText: 'test-request' })).toBeVisible();
// remove the original url from the request
await page.locator('.input-container').filter({ hasText: originalUrl }).first().click();
await clearText(originalUrl);
// replace it with an arbitrary url
await page.keyboard.insertText(replacementUrl);
// check if the request is now unsaved
expect(await isRequestSaved(locators.saveButton())).toBe(false);
// trigger a save
locators.saveButton().click();
// Wait for it to be saved
const result = await waitForPredicate(() => isRequestSaved(locators.saveButton()));
expect(result).toBe(true);
});
});