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

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