fix: refactor response examples to use MenuDropdown and Editable components (#6382)

* feat: use common dropdown component

* fix: update example ui to match v3

* fix: test cases, bugs

* fix: review comments

* fix: review comments

* fix: review

* fix: file body/binary table within response examples

* fix: file name, close btn not visible issue

* fix: unnessary transition for three  dots

* fix: install missing deps in bruno-app

* update example url when param is updated

* empty commit

* chore: update package-lock.json

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>
This commit is contained in:
sanish chirayath
2025-12-14 16:21:06 +05:30
committed by GitHub
parent 2f5537c8db
commit 8cbda5f5cc
30 changed files with 1211 additions and 1349 deletions

View File

@@ -60,7 +60,7 @@ test.describe('Draft values are used in requests', () => {
// Create a request in the collection
// Create a new request via collection menu
await folder.locator('.menu-icon').hover();
await folder.hover();
await folder.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();

View File

@@ -11,7 +11,7 @@ test.describe('Copy and Paste Requests', () => {
// Create a new request
const collection = page.locator('.collection-name').filter({ hasText: 'test-collection' });
await collection.locator('.collection-actions').hover();
await collection.hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
await page.getByPlaceholder('Request Name').fill('original-request');
@@ -23,6 +23,7 @@ test.describe('Copy and Paste Requests', () => {
// Copy the request
const requestItem = page.locator('.collection-item-name').filter({ hasText: 'original-request' });
await requestItem.hover();
await requestItem.locator('.menu-icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'Copy' }).click();
@@ -37,7 +38,7 @@ test.describe('Copy and Paste Requests', () => {
test('should paste request into a folder', async ({ page, createTmpDir }) => {
const collection = page.locator('.collection-name').filter({ hasText: 'test-collection' });
await collection.locator('.collection-actions').hover();
await collection.hover();
await collection.locator('.collection-actions .icon').click();
await page.locator('.dropdown-item').filter({ hasText: 'New Folder' }).click();
await page.locator('#folder-name').fill('test-folder');

View File

@@ -24,19 +24,19 @@ test.describe.serial('Response Example Menu Operations', () => {
await page.getByRole('button', { name: 'Create Example' }).click();
// Wait for modal to close
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
await page.locator('.collection-item-name', { hasText: 'menu-operations' }).getByTestId('request-item-chevron').click();
await page.locator('.collection-item-name').filter({ hasText: 'menu-operations' }).getByTestId('request-item-chevron').click();
const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
await expect(exampleItem).toBeVisible();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Clone' });
await expect(exampleRow).toBeVisible();
});
await test.step('Clone example', async () => {
const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
await exampleItem.hover();
await page.getByTestId('response-example-menu-icon').last().click();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Clone' });
await exampleRow.hover();
await exampleRow.locator('.menu-icon').click();
await page.getByTestId('response-example-clone-option').click();
const clonedExampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
await page.getByTestId('response-example-menu-clone').click();
const clonedExampleItem = page.locator('.collection-item-name').filter({ hasText: 'Example to Clone (Copy)' });
await expect(clonedExampleItem).toBeVisible();
});
});
@@ -57,20 +57,20 @@ test.describe.serial('Response Example Menu Operations', () => {
// Wait for modal to close
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
await expect(exampleItem).toBeVisible();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Delete' });
await expect(exampleRow).toBeVisible();
});
await test.step('Delete example', async () => {
const exampleItem = page.locator('.collection-item-name').getByText('Example to Delete', { exact: true });
await expect(exampleItem).toBeVisible();
await exampleItem.hover();
await page.getByTestId('response-example-menu-icon').last().click();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Delete' });
await expect(exampleRow).toBeVisible();
await exampleRow.hover();
await exampleRow.locator('.menu-icon').click();
await page.getByTestId('response-example-delete-option').click();
await page.getByTestId('response-example-menu-delete').click();
await expect(page.getByText('Delete Example')).toBeVisible();
await page.getByRole('button', { name: 'Delete' }).click();
await expect(exampleItem).not.toBeVisible();
await expect(exampleRow).not.toBeVisible();
});
});
@@ -90,16 +90,16 @@ test.describe.serial('Response Example Menu Operations', () => {
// Wait for modal to close
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
await expect(exampleItem).toBeVisible();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Rename' });
await expect(exampleRow).toBeVisible();
});
await test.step('Rename example', async () => {
const exampleItem = page.locator('.collection-item-name').getByText('Example to Rename', { exact: true });
await expect(exampleItem).toBeVisible();
await exampleItem.hover();
await page.getByTestId('response-example-menu-icon').last().click();
await page.getByTestId('response-example-rename-option').click();
const exampleRow = page.locator('.collection-item-name').filter({ hasText: 'Example to Rename' });
await expect(exampleRow).toBeVisible();
await exampleRow.hover();
await exampleRow.locator('.menu-icon').click();
await page.getByTestId('response-example-menu-rename').click();
await expect(page.getByText('Rename Example')).toBeVisible();
const renameExampleNameInput = page.getByTestId('rename-example-name-input');
await renameExampleNameInput.clear();
@@ -107,10 +107,9 @@ test.describe.serial('Response Example Menu Operations', () => {
await page.getByRole('button', { name: 'Rename' }).click();
// Wait for modal to close
await page.waitForSelector('text=Rename Example', { state: 'detached' });
const updatedExampleItem = page.locator('.collection-item-name').getByText('Renamed Example', { exact: true });
await expect(exampleItem).not.toBeVisible();
await expect(updatedExampleItem).toBeVisible();
await expect(updatedExampleItem).toHaveText('Renamed Example');
const updatedExampleRow = page.locator('.collection-item-name').filter({ hasText: 'Renamed Example' });
await expect(exampleRow).not.toBeVisible();
await expect(updatedExampleRow).toBeVisible();
});
});
});

View File

@@ -217,6 +217,7 @@ const deleteRequest = async (page, requestName: string, collectionName: string)
const collectionWrapper = collectionContainer.locator('..');
const request = collectionWrapper.locator('.collection-item-name').filter({ hasText: requestName });
await request.hover();
await request.locator('.menu-icon').click();
await locators.dropdown.item('Delete').click();
await locators.modal.button('Delete').click();