Files
bruno/tests/collection/description/write-collection-vars-description.spec.ts
Sid 0bba66a590 feat: variable descriptions (#8269)
* feat: add description column to various tables and enhance UI interactions
- Introduced a description column in Headers, VarsTable, and other components to allow multi-line descriptions.
- Added toggle buttons to show/hide the description column in relevant tables.
- Updated EditableTable component to support dynamic row addition with customizable labels.
- Enhanced UI for better user experience with consistent button styles and spacing adjustments.

* chore: resize fix handles

* fix: restrict column check for last index

* refactor: remove unwanted style and fix bottom padding of the last child in the table row

* tests: improve testability and fix impacted locators

* tests: fix locators for value fields

* fix: improve newline handling in description prefix

* fix: ts changes

* chore: remove redundant code and fix description roundtrip

* chore: remove redundant check

* tests(bru-lang): tests for description and annotation

* test: improve locators and tests

* tests: descriptions

* chore: re-add description setup

* fix: re-add description cols

* chore: fix the double click reset

* fix: account for hidden sidebar in request pane width calculation

* refactor: ui/ux fixes for data type toggle

* chore: inline common deps into bruno-lang and bruno-schema

* chore: tests

* chore: fix ux for descriptions

* fix: layout for environment vars table

* fix: ensure correct row selection for multipart file upload in tests

* feat: enhance UID assignment for request headers and variables in collections

* chore: simplify

* chore: update pkg

* chore: abstract the e2e utils

* chore: fix exports

* tests: fix locators for datatype vars

* fix: ux issue with secrets in environment table

* tests: update locators for collection headers and vars descriptions

* tests: update locators to use data attributes for datatype selectors

* chore: update default css width for actions column

* chore: remove tooltip for string type warnings

* fix: reduce name widths

* refactor: update annotation serialization to use single-quote delimiters for descriptions

* refactor(tests): simplify description formatting in jsonToEnv tests

* feat: add multiline description escaping and unescaping functions with tests

* refactor: clean up imports and improve multiline text block handling

* refactor: update locators to use new test IDs for environment variable editors

* refactor: streamline header input handling and improve environment variable row access

* refactor: update e2e-test job to support self-hosted runners

* refactor: update E2E test runner configuration to include e2e and macOS environments

---------

Co-authored-by: Pragadesh-45 <temporaryg7904@gmail.com>
2026-07-07 21:43:39 +05:30

65 lines
3.1 KiB
TypeScript

import * as fs from 'fs';
import * as path from 'path';
import { test, expect } from '../../../playwright';
test.describe('Collection Settings Descriptions - Write (Vars)', () => {
test('writes a multiline description to a pre-request var and persists it to collection.bru', async ({
pageWithUserData: page,
collectionFixturePath
}) => {
// Open collection settings
await page
.locator('#sidebar-collection-name')
.filter({ hasText: 'col-description' })
.click();
// The tab label always reads "Collection" regardless of the collection name
await expect(page.locator('.request-tab .tab-label').filter({ hasText: 'Collection' })).toBeVisible();
await page.locator('.tab.vars').click();
// Wait for the pre-request vars table to render its rows
await expect(page.locator('table:first-of-type tbody tr').first()).toBeVisible();
// Find the 'plain' row by checking name input values, not by position.
// Use CodeMirror's JS API so the `change` event fires synchronously and
// the EditableTable onChange chain updates Redux state before we click Save.
await page.evaluate(() => {
const rows = document.querySelectorAll('table:first-of-type tbody tr');
const targetRow = Array.from(rows).find((row) => {
const input = row.querySelector('[data-testid="column-name"] input') as HTMLInputElement;
return input?.value === 'plain';
});
if (!targetRow) throw new Error('\'plain\' var row not found in pre-request vars table');
// Var rows have two CodeMirrors: value (index 0) and description (index 1)
const cms = targetRow.querySelectorAll('.CodeMirror');
const cm = (cms[1] as any)?.CodeMirror;
if (!cm) throw new Error('Description CodeMirror not found in plain row');
cm.setValue('First line\nSecond line');
});
// Find the 'plain' row in Playwright to assert both CM lines are reflected
const varsTable = page.getByTestId('collection-vars-req');
const plainRowIndex = await varsTable.locator('[data-testid="column-name"] input').evaluateAll(
(inputs) => inputs.findIndex((el) => (el as HTMLInputElement).value === 'plain')
);
if (plainRowIndex === -1) throw new Error('\'plain\' var not found for assertion');
const descCell = varsTable.locator('tbody tr').nth(plainRowIndex).getByTestId('column-description');
await expect(descCell.locator('.CodeMirror-line').nth(0)).toHaveText('First line');
await expect(descCell.locator('.CodeMirror-line').nth(1)).toHaveText('Second line');
// The vars section has a single "Save" button shared by pre and post tables
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByText('Collection Settings saved successfully')).toBeVisible({ timeout: 5000 });
// Verify the description was written to collection.bru
const collectionBruPath = path.join(collectionFixturePath!, 'collection.bru');
const fileContent = fs.readFileSync(collectionBruPath, 'utf8');
expect(fileContent).toContain('First line');
expect(fileContent).toContain('Second line');
});
});