mirror of
https://github.com/usebruno/bruno.git
synced 2026-07-08 22:45:25 +00:00
Feat/add import export support for examples (#5936)
* feat: enhance Bru grammar to support response blocks and examples - Added new grammar rules for response headers, status, and body types (JSON, XML, text). - Introduced parsing logic for example blocks, allowing multiple examples with various body types. - Implemented tests for example parsing, including edge cases and complex examples with authentication. - Created fixture files for simple and complex examples to validate parsing functionality. feat: extend jsonToBru functionality to support response handling and examples - Updated jsonToBru to include parsing for response headers, status, and body types (JSON, XML, text). - Enhanced example handling to support multiple examples with various body types. - Added comprehensive tests for example parsing, including edge cases and complex scenarios with authentication. - Created fixture files for testing the new features and validating parsing functionality. move: files to fixtures folder refactor: simplify response body handling in Bru grammar and JSON conversion - Removed specific body type handling (JSON, XML, text) from grammar and semantics. - Updated response body parsing in jsonToBru to handle a unified response body format. - Adjusted tests and fixtures to reflect changes in response body structure, ensuring compatibility with the new format. feat: add response bookmarking functionality to ResponsePane - Introduced ResponseBookmark component to allow users to save responses as examples. - Added NameExampleModal for naming saved examples. - Updated ResponsePane to include the new bookmarking feature. - Implemented Redux actions to manage response examples in the collections state. - Enhanced CollectionItem to display saved examples and allow for expansion. fix: remove unnecessary padding from ExampleItem component feat: implement delete and rename functionality for examples in ExampleItem component - Added DeleteExampleModal for confirming deletion of examples. - Integrated modal for renaming examples with state management. - Enhanced ExampleItem to handle example deletion and renaming through modals. - Updated Redux actions to support example updates and deletions in the collections state. fix: example writing to disc properly fix: example parsing errors fix: request with example parsing error fix: handle examples in collections and requests feat: implement response example functionality in the application - Added ResponseExample component to handle displaying and editing response examples. - Integrated ResponseExampleRequestPane and ResponseExampleResponsePane for structured request and response handling. - Enhanced RequestTabPanel and RequestTab components to support response-example tabs. - Introduced new styled components for better UI/UX in response examples. - Updated theme files to include styles for response examples. - Implemented URL bar for editing request URLs in response examples. - Added functionality for managing headers and parameters in response examples. - Improved overall structure and organization of response example components. add styles for example url bar feat: add Checkbox component and Table-v2 for enhanced UI - Introduced a new Checkbox component for better user interaction in forms. - Added Table-v2 component to improve table rendering and resizing functionality. - Updated existing components to utilize the new Checkbox and Table-v2 for managing headers and parameters in response examples. - Enhanced styling for better visual consistency across components. - Updated theme files to include styles for the new components. feat: implement custom scrollbar styles for response example components fix: features add actions , view more feat: enhance response example functionality - Added GenerateCodeItem component for generating code snippets from response examples. - Integrated modal for code generation within ResponseExample component. - Updated ResponseExampleTopBar to handle example name and description editing. - Improved state management for response examples, including new actions for updating names and descriptions. - Enhanced ResponseExampleRequestPane to support editing and saving request details. - Refactored URL handling in ResponseExampleUrlBar to utilize example-specific data. - Improved overall user experience with better UI elements and state management. feat: enhance response example management and UI components feat: enhance editing capabilities in response example components feat: update multipart form parameter handling in response examples feat: refactor response example parameter handling and enhance UI interactions feat: introduce RadioButton component and update Checkbox usage in response examples fix: styles fix radio button styling fixed radio button styles feat: add create example from sidebar feat: enhance ResponseExample components with layout adjustments and new HeightBoundContainer feat: add Checkbox and RadioButton components with comprehensive tests for rendering, user interactions, and accessibility feat: playwright test csaes rm: comments fix: linting fix: tests refactor: update response example tests and enhance functionality fix: tests fix: e2e-tests refactor: implement hasRequestChanges utility for better change detection rm: console rm: consoles fix: lint fix: tests fix: response header disabled by default issue Feat/with bru example parser (#5892) * fix: response header disabled by default issue feat: new parsing logic fix: change test cases to accomodate new brulang add: path params features rm:consoles six: make tab permanent on double click fix width feat: add status editing feat: review fixes review fixes fix: review fixes fix: post review mv: test files fix: review * fix: lint * fix: review comments * fix: icons folder strcuture fix: tests fix: lint fix: unit tests feat: body mode selector fix: close all collections rm: example feat added tests. lang change feat: add custom status text fix: status update feat: add body mode, update tests add default name prefilled for example fix: active tab styles, prefilled name, text fixes fix : pkg lock fix: review fix: review comments fix: hide cursor when readonly fix: height fix: null body fix: response body parsing fix: test cases feat: add method support for examples fix: reponse parsing fix: update response body type when content type is updated rm : commented code feat: update parser logic fix: organize files feat: enhance examples handling in collection export and import feat: postman imports fro examples feat: enhance OpenAPI import functionality to support examples feat: support postman export fix: postman export import fix: open api tests, remove requestbody related logic rm: examples fix: move common attributes files ui fixes fix: clone issue fix: create example from request menu review fixes more review fixes mv: files, fix mode req error organize files fix:tests fix: save dot issue fix: bugs fix: postman export fix: import path params * chore:improve modal handling in environment and response example tests fix: test issues resolved * chore: update response example tests to use new fixture files and improve cleanup logic --------- Co-authored-by: Abhishek S Lal <abhishek@usebruno.com> Co-authored-by: Bijin Bruno <bijin@usebruno.com>
This commit is contained in:
sanish chirayath
GitHub
@@ -58,6 +58,7 @@ test.describe('Create gRPC Requests', () => {
|
||||
await locators.sidebar.folder('folder1').click();
|
||||
const folderRequestItem = locators.sidebar.folderRequest('folder1', 'Root gRPC Request');
|
||||
await expect(folderRequestItem).not.toBeVisible();
|
||||
await locators.folder.chevron('folder1').click(); // close folder1
|
||||
});
|
||||
|
||||
await test.step('Create gRPC request via folder1 three dots menu', async () => {
|
||||
|
||||
@@ -120,7 +120,10 @@ test.describe('Collection Environment Create Tests', () => {
|
||||
.locator('.collection-actions')
|
||||
.click();
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
|
||||
await page.getByRole('button', { name: 'Close' }).click();
|
||||
// Scope the Close button to the confirmation modal to avoid matching the dropdown close button
|
||||
// Wait for the confirmation modal with "Close Collection" title to appear
|
||||
const closeModal = page.getByRole('dialog').filter({ has: page.getByText('Close Collection') });
|
||||
await closeModal.getByRole('button', { name: 'Close' }).click();
|
||||
|
||||
await page.locator('.bruno-logo').click();
|
||||
});
|
||||
|
||||
@@ -123,7 +123,10 @@ test.describe('Global Environment Create Tests', () => {
|
||||
.locator('.collection-actions')
|
||||
.click();
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
|
||||
await page.getByRole('button', { name: 'Close' }).click();
|
||||
// Scope the Close button to the confirmation modal to avoid matching the dropdown close button
|
||||
// Wait for the confirmation modal with "Close Collection" title to appear
|
||||
const closeModal = page.getByRole('dialog').filter({ has: page.getByText('Close Collection') });
|
||||
await closeModal.getByRole('button', { name: 'Close' }).click();
|
||||
|
||||
await page.locator('.bruno-logo').click();
|
||||
});
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { test, expect } from '../../../playwright';
|
||||
import path from 'path';
|
||||
import { closeAllCollections } from '../../utils/page';
|
||||
|
||||
test.describe('Collection Environment Import Tests', () => {
|
||||
test.afterAll(async ({ page }) => {
|
||||
await closeAllCollections(page);
|
||||
});
|
||||
|
||||
test('should import collection environment from file', async ({ page, createTmpDir }) => {
|
||||
const openApiFile = path.join(__dirname, 'fixtures', 'collection.json');
|
||||
const envFile = path.join(__dirname, 'fixtures', 'collection-env.json');
|
||||
@@ -86,9 +91,9 @@ test.describe('Collection Environment Import Tests', () => {
|
||||
.filter({ has: page.locator('#sidebar-collection-name:has-text("Environment Test Collection")') })
|
||||
.locator('.collection-actions')
|
||||
.click();
|
||||
// Wait for the close collection modal to be hidden
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).waitFor({ state: 'detached' });
|
||||
await page.getByRole('button', { name: 'Close' }).click();
|
||||
|
||||
await page.locator('.bruno-logo').click();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -87,6 +87,7 @@ test.describe('Global Environment Import Tests', () => {
|
||||
.locator('.collection-actions')
|
||||
.click();
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).click();
|
||||
await page.locator('.dropdown-item').filter({ hasText: 'Close' }).waitFor({ state: 'detached' });
|
||||
await page.getByRole('button', { name: 'Close' }).click();
|
||||
});
|
||||
});
|
||||
|
||||
96
tests/import/bruno/fixtures/bruno-with-examples.json
Normal file
96
tests/import/bruno/fixtures/bruno-with-examples.json
Normal file
@@ -0,0 +1,96 @@
|
||||
{
|
||||
"name": "bruno-with-examples",
|
||||
"version": "1",
|
||||
"items": [
|
||||
{
|
||||
"type": "http",
|
||||
"name": "echo-request",
|
||||
"seq": 1,
|
||||
"request": {
|
||||
"url": "https://testbench-sanity.usebruno.com/api/echo/json",
|
||||
"method": "POST",
|
||||
"headers": [
|
||||
{
|
||||
"name": "Content-Type",
|
||||
"value": "application/json",
|
||||
"enabled": true
|
||||
}
|
||||
],
|
||||
"params": [],
|
||||
"body": {
|
||||
"mode": "json",
|
||||
"json": "{\n \"message\": \"Hello World\",\n \"timestamp\": \"{{$timestamp}}\"\n}",
|
||||
"formUrlEncoded": [],
|
||||
"multipartForm": [],
|
||||
"file": []
|
||||
},
|
||||
"script": {
|
||||
"req": "",
|
||||
"res": ""
|
||||
},
|
||||
"vars": {
|
||||
"req": [],
|
||||
"res": []
|
||||
},
|
||||
"assertions": [],
|
||||
"tests": "",
|
||||
"docs": "",
|
||||
"auth": {
|
||||
"mode": "none"
|
||||
}
|
||||
},
|
||||
"examples": [
|
||||
{
|
||||
"name": "example",
|
||||
"description": "example description",
|
||||
"type": "http",
|
||||
"request": {
|
||||
"url": "https://testbench-sanity.usebruno.com/api/echo/json",
|
||||
"method": "POST",
|
||||
"headers": [
|
||||
{
|
||||
"name": "Content-Type",
|
||||
"value": "application/json",
|
||||
"enabled": true
|
||||
}
|
||||
],
|
||||
"params": [],
|
||||
"body": {
|
||||
"mode": "json",
|
||||
"json": "{\n \"message\": \"Hello World\",\n \"timestamp\": \"{{$timestamp}}\"\n}",
|
||||
"formUrlEncoded": [],
|
||||
"multipartForm": [],
|
||||
"file": []
|
||||
}
|
||||
},
|
||||
"response": {
|
||||
"status": "200",
|
||||
"statusText": "OK",
|
||||
"headers": [
|
||||
{
|
||||
"name": "content-type",
|
||||
"value": "application/json; charset=utf-8",
|
||||
"enabled": true
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"type": "json",
|
||||
"content": "{\n \"message\": \"Hello World\",\n \"timestamp\": \"1760611876\"\n}"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"environments": [],
|
||||
"activeEnvironmentUid": null,
|
||||
"brunoConfig": {
|
||||
"version": "1",
|
||||
"name": "bruno-with-examples",
|
||||
"type": "collection",
|
||||
"ignore": [
|
||||
"node_modules",
|
||||
".git"
|
||||
]
|
||||
}
|
||||
}
|
||||
49
tests/import/bruno/import-bruno-with-examples.spec.ts
Normal file
49
tests/import/bruno/import-bruno-with-examples.spec.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { test, expect } from '../../../playwright';
|
||||
import * as path from 'path';
|
||||
import { closeAllCollections } from '../../utils/page';
|
||||
|
||||
test.describe('Import Bruno Collection with Examples', () => {
|
||||
test.afterAll(async ({ page }) => {
|
||||
await closeAllCollections(page);
|
||||
});
|
||||
|
||||
test('Import Bruno collection with examples successfully', async ({ page }) => {
|
||||
const brunoFile = path.resolve(__dirname, 'fixtures', 'bruno-with-examples.json');
|
||||
|
||||
await test.step('Open import collection modal', async () => {
|
||||
await page.getByRole('button', { name: 'Import Collection' }).click();
|
||||
});
|
||||
|
||||
await test.step('Wait for import modal and verify title', async () => {
|
||||
const importModal = page.getByRole('dialog');
|
||||
await importModal.waitFor({ state: 'visible' });
|
||||
await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Upload collection file', async () => {
|
||||
await page.setInputFiles('input[type="file"]', brunoFile);
|
||||
});
|
||||
|
||||
await test.step('Wait for file processing to complete', async () => {
|
||||
await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
|
||||
});
|
||||
|
||||
await test.step('Verify no parsing errors occurred', async () => {
|
||||
const hasError = await page.getByText('Failed to parse the file').isVisible().catch(() => false);
|
||||
if (hasError) {
|
||||
throw new Error('Collection import failed with parsing error');
|
||||
}
|
||||
});
|
||||
|
||||
await test.step('Verify location selection modal appears', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Verify collection name appears in location modal', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await expect(locationModal.getByText('bruno-with-examples')).toBeVisible();
|
||||
await page.getByTestId('modal-close-button').click();
|
||||
});
|
||||
});
|
||||
});
|
||||
155
tests/import/openapi/fixtures/openapi-with-examples.yaml
Normal file
155
tests/import/openapi/fixtures/openapi-with-examples.yaml
Normal file
@@ -0,0 +1,155 @@
|
||||
openapi: '3.0.0'
|
||||
info:
|
||||
version: '1.0.0'
|
||||
title: 'API with Examples'
|
||||
description: 'A sample API with response examples'
|
||||
servers:
|
||||
- url: 'https://api.example.com'
|
||||
description: 'Production server'
|
||||
paths:
|
||||
/users:
|
||||
get:
|
||||
summary: 'Get all users'
|
||||
operationId: 'getUsers'
|
||||
responses:
|
||||
'200':
|
||||
description: 'Successful response'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
success:
|
||||
summary: 'Success Response'
|
||||
description: 'A successful response with user data'
|
||||
value:
|
||||
users:
|
||||
- id: 1
|
||||
name: 'John Doe'
|
||||
email: 'john@example.com'
|
||||
- id: 2
|
||||
name: 'Jane Smith'
|
||||
email: 'jane@example.com'
|
||||
empty:
|
||||
summary: 'Empty Response'
|
||||
description: 'No users found'
|
||||
value:
|
||||
users: []
|
||||
'400':
|
||||
description: 'Bad Request'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
validation_error:
|
||||
summary: 'Validation Error'
|
||||
description: 'Invalid request parameters'
|
||||
value:
|
||||
error: 'Invalid parameters'
|
||||
message: 'The request contains invalid data'
|
||||
code: 'VALIDATION_ERROR'
|
||||
'500':
|
||||
description: 'Internal Server Error'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
server_error:
|
||||
summary: 'Server Error'
|
||||
description: 'Internal server error occurred'
|
||||
value:
|
||||
error: 'Internal Server Error'
|
||||
message: 'Something went wrong on our end'
|
||||
code: 'INTERNAL_ERROR'
|
||||
post:
|
||||
summary: 'Create a new user'
|
||||
operationId: 'createUser'
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
type: object
|
||||
required:
|
||||
- name
|
||||
- email
|
||||
properties:
|
||||
name:
|
||||
type: string
|
||||
example: 'John Doe'
|
||||
email:
|
||||
type: string
|
||||
format: email
|
||||
example: 'john@example.com'
|
||||
examples:
|
||||
valid_user:
|
||||
summary: 'Valid User'
|
||||
description: 'A valid user creation request'
|
||||
value:
|
||||
name: 'John Doe'
|
||||
email: 'john@example.com'
|
||||
invalid_user:
|
||||
summary: 'Invalid User'
|
||||
description: 'An invalid user creation request'
|
||||
value:
|
||||
name: ''
|
||||
email: 'invalid-email'
|
||||
responses:
|
||||
'201':
|
||||
description: 'User created successfully'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
created:
|
||||
summary: 'User Created'
|
||||
description: 'Successfully created user'
|
||||
value:
|
||||
id: 123
|
||||
name: 'John Doe'
|
||||
email: 'john@example.com'
|
||||
created_at: '2023-01-01T00:00:00Z'
|
||||
'400':
|
||||
description: 'Bad Request'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
validation_error:
|
||||
summary: 'Validation Error'
|
||||
description: 'Invalid user data'
|
||||
value:
|
||||
error: 'Validation failed'
|
||||
message: 'Name and email are required'
|
||||
code: 'VALIDATION_ERROR'
|
||||
/users/{id}:
|
||||
get:
|
||||
summary: 'Get user by ID'
|
||||
operationId: 'getUserById'
|
||||
parameters:
|
||||
- name: id
|
||||
in: path
|
||||
required: true
|
||||
schema:
|
||||
type: integer
|
||||
example: 123
|
||||
responses:
|
||||
'200':
|
||||
description: 'User found'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
found:
|
||||
summary: 'User Found'
|
||||
description: 'User successfully retrieved'
|
||||
value:
|
||||
id: 123
|
||||
name: 'John Doe'
|
||||
email: 'john@example.com'
|
||||
created_at: '2023-01-01T00:00:00Z'
|
||||
'404':
|
||||
description: 'User not found'
|
||||
content:
|
||||
application/json:
|
||||
examples:
|
||||
not_found:
|
||||
summary: 'User Not Found'
|
||||
description: 'User with the specified ID does not exist'
|
||||
value:
|
||||
error: 'Not Found'
|
||||
message: 'User with ID 123 not found'
|
||||
code: 'USER_NOT_FOUND'
|
||||
248
tests/import/openapi/import-openapi-with-examples.spec.ts
Normal file
248
tests/import/openapi/import-openapi-with-examples.spec.ts
Normal file
@@ -0,0 +1,248 @@
|
||||
import { test, expect } from '../../../playwright';
|
||||
import * as path from 'path';
|
||||
import { closeAllCollections, openCollectionAndAcceptSandbox } from '../../utils/page';
|
||||
|
||||
test.describe('Import OpenAPI Collection with Examples', () => {
|
||||
let originalShowOpenDialog;
|
||||
|
||||
test.beforeAll(async ({ electronApp }) => {
|
||||
// save the original showOpenDialog function
|
||||
await electronApp.evaluate(({ dialog }) => {
|
||||
originalShowOpenDialog = dialog.showOpenDialog;
|
||||
});
|
||||
});
|
||||
|
||||
test.afterAll(async ({ electronApp, page }) => {
|
||||
await closeAllCollections(page);
|
||||
// restore the original showOpenDialog function
|
||||
await electronApp.evaluate(({ dialog }) => {
|
||||
dialog.showOpenDialog = originalShowOpenDialog;
|
||||
});
|
||||
});
|
||||
|
||||
test('should import OpenAPI collection with examples successfully', async ({ page, electronApp, createTmpDir }) => {
|
||||
const openApiFile = path.resolve(__dirname, 'fixtures', 'openapi-with-examples.yaml');
|
||||
|
||||
// Create a temporary directory for the collection to be imported into
|
||||
const importDir = await createTmpDir('imported-openapi-collection');
|
||||
|
||||
// Mock the electron dialog to return the import directory selection
|
||||
await electronApp.evaluate(({ dialog }, { importDir }) => {
|
||||
dialog.showOpenDialog = async () => ({
|
||||
canceled: false,
|
||||
filePaths: [importDir]
|
||||
});
|
||||
}, { importDir });
|
||||
|
||||
await test.step('Open import collection modal', async () => {
|
||||
await page.getByRole('button', { name: 'Import Collection' }).click();
|
||||
});
|
||||
|
||||
await test.step('Wait for import modal and verify title', async () => {
|
||||
const importModal = page.getByRole('dialog');
|
||||
await importModal.waitFor({ state: 'visible' });
|
||||
await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Upload OpenAPI collection file using hidden file input', async () => {
|
||||
// The "choose a file" button triggers a hidden file input, so we can directly set files on it
|
||||
await page.setInputFiles('input[type="file"]', openApiFile);
|
||||
});
|
||||
|
||||
await test.step('Wait for file processing to complete', async () => {
|
||||
await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
|
||||
});
|
||||
|
||||
await test.step('Verify no parsing errors occurred', async () => {
|
||||
const hasError = await page.getByText('Failed to parse the file').isVisible().catch(() => false);
|
||||
if (hasError) {
|
||||
throw new Error('Collection import failed with parsing error');
|
||||
}
|
||||
});
|
||||
|
||||
await test.step('Verify OpenAPI import settings modal appears', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await expect(settingsModal.locator('.bruno-modal-header-title')).toContainText('OpenAPI Import Settings');
|
||||
await settingsModal.getByRole('button', { name: 'Import' }).click();
|
||||
});
|
||||
|
||||
await test.step('Click Browse link to select collection folder', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await settingsModal.getByText('Browse').click();
|
||||
});
|
||||
|
||||
await test.step('Complete import by clicking import button', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await settingsModal.getByRole('button', { name: 'Import' }).click();
|
||||
});
|
||||
|
||||
await test.step('Handle sandbox modal', async () => {
|
||||
await openCollectionAndAcceptSandbox(page, 'API with Examples', 'safe');
|
||||
});
|
||||
|
||||
await test.step('Verify collection name appears in sidebar', async () => {
|
||||
const collectionName = page.locator('#sidebar-collection-name').getByText('API with Examples');
|
||||
await expect(collectionName).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Verify GET /users request exists and has examples', async () => {
|
||||
const getUsersRequest = page.locator('.collection-item-name').getByText('Get all users');
|
||||
await expect(getUsersRequest).toBeVisible();
|
||||
|
||||
// Find the chevron icon specifically for the "Get all users" request
|
||||
const chevronIcon = page.getByTestId('request-item-chevron').nth(0);
|
||||
await expect(chevronIcon).toBeVisible();
|
||||
|
||||
// Click the chevron to expand examples
|
||||
await chevronIcon.click();
|
||||
|
||||
// Check if examples are visible
|
||||
const successExample = page.locator('.collection-item-name').getByText('Success Response');
|
||||
const emptyExample = page.locator('.collection-item-name').getByText('Empty Response');
|
||||
const validationErrorExample = page.locator('.collection-item-name').getByText('Validation Error');
|
||||
const serverErrorExample = page.locator('.collection-item-name').getByText('Server Error');
|
||||
|
||||
await expect(successExample).toBeVisible();
|
||||
await expect(emptyExample).toBeVisible();
|
||||
await expect(validationErrorExample).toBeVisible();
|
||||
await expect(serverErrorExample).toBeVisible();
|
||||
|
||||
await chevronIcon.click();
|
||||
});
|
||||
|
||||
await test.step('Verify POST /users request exists and has examples', async () => {
|
||||
// Click on the POST request
|
||||
const createUserRequest = page.locator('.collection-item-name').getByText('Create a new user');
|
||||
await expect(createUserRequest).toBeVisible();
|
||||
await createUserRequest.click();
|
||||
|
||||
// Find the chevron icon specifically for the "Create a new user" request
|
||||
const chevronIcon = page.getByTestId('request-item-chevron').nth(1);
|
||||
await expect(chevronIcon).toBeVisible();
|
||||
|
||||
// Click the chevron to expand examples
|
||||
await chevronIcon.click();
|
||||
|
||||
// Check if examples are visible
|
||||
const createdExample = page.locator('.collection-item-name').getByText('User Created');
|
||||
const validationErrorExample = page.locator('.collection-item-name').getByText('Validation Error');
|
||||
|
||||
await expect(createdExample).toBeVisible();
|
||||
await expect(validationErrorExample).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Cleanup - close all collections', async () => {
|
||||
await closeAllCollections(page);
|
||||
});
|
||||
});
|
||||
|
||||
test('should import OpenAPI collection with path-based grouping', async ({ page, electronApp, createTmpDir }) => {
|
||||
const openApiFile = path.resolve(__dirname, 'fixtures', 'openapi-with-examples.yaml');
|
||||
|
||||
// Create a temporary directory for the collection to be imported into
|
||||
const importDir = await createTmpDir('imported-openapi-collection-path');
|
||||
|
||||
// Mock the electron dialog to return the import directory selection
|
||||
await electronApp.evaluate(({ dialog }, { importDir }) => {
|
||||
dialog.showOpenDialog = async () => ({
|
||||
canceled: false,
|
||||
filePaths: [importDir]
|
||||
});
|
||||
}, { importDir });
|
||||
|
||||
await test.step('Open import collection modal', async () => {
|
||||
await page.getByRole('button', { name: 'Import Collection' }).click();
|
||||
});
|
||||
|
||||
await test.step('Wait for import modal and verify title', async () => {
|
||||
const importModal = page.getByRole('dialog');
|
||||
await importModal.waitFor({ state: 'visible' });
|
||||
await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Upload OpenAPI collection file using hidden file input', async () => {
|
||||
await page.setInputFiles('input[type="file"]', openApiFile);
|
||||
});
|
||||
|
||||
await test.step('Wait for file processing to complete', async () => {
|
||||
await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
|
||||
});
|
||||
|
||||
await test.step('Verify no parsing errors occurred', async () => {
|
||||
const hasError = await page.getByText('Failed to parse the file').isVisible().catch(() => false);
|
||||
if (hasError) {
|
||||
throw new Error('Collection import failed with parsing error');
|
||||
}
|
||||
});
|
||||
|
||||
await test.step('Verify OpenAPI import settings modal appears', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await expect(settingsModal.locator('.bruno-modal-header-title')).toContainText('OpenAPI Import Settings');
|
||||
});
|
||||
|
||||
await test.step('Select path-based grouping option from dropdown', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
|
||||
// Click on the grouping dropdown to open it
|
||||
const groupingDropdown = settingsModal.getByTestId('grouping-dropdown');
|
||||
await groupingDropdown.click();
|
||||
|
||||
// Wait for dropdown to open and select "Paths" option (note: it's "Paths" not "Path")
|
||||
const pathOption = page.getByTestId('grouping-option-path');
|
||||
await pathOption.click();
|
||||
// click on import button
|
||||
const importButton = settingsModal.getByRole('button', { name: 'Import' });
|
||||
await importButton.click();
|
||||
});
|
||||
|
||||
await test.step('Click Browse link to select collection folder', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await settingsModal.getByText('Browse').click();
|
||||
});
|
||||
|
||||
await test.step('Complete import by clicking import button', async () => {
|
||||
const settingsModal = page.getByRole('dialog');
|
||||
await settingsModal.getByRole('button', { name: 'Import' }).click();
|
||||
});
|
||||
|
||||
await test.step('Handle sandbox modal', async () => {
|
||||
await openCollectionAndAcceptSandbox(page, 'API with Examples', 'safe');
|
||||
});
|
||||
|
||||
await test.step('Verify collection name appears in sidebar', async () => {
|
||||
const collectionName = page.locator('#sidebar-collection-name').getByText('API with Examples');
|
||||
await expect(collectionName).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Verify path-based grouping structure', async () => {
|
||||
// With path-based grouping, requests should be organized by their path
|
||||
// users should be a folder containing GET and POST requests
|
||||
const usersFolder = page.locator('.collection-item-name').getByText('users');
|
||||
await expect(usersFolder).toBeVisible();
|
||||
|
||||
// Click on the users folder to expand it
|
||||
await usersFolder.click();
|
||||
|
||||
// Verify that the requests are inside the users folder
|
||||
const getUsersRequest = page.locator('.collection-item-name').getByText('Get all users');
|
||||
const createUserRequest = page.locator('.collection-item-name').getByText('Create a new user');
|
||||
|
||||
await expect(getUsersRequest).toBeVisible();
|
||||
await expect(createUserRequest).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Verify examples work with path-based grouping', async () => {
|
||||
// Test GET /users request examples
|
||||
const getUsersRequest = page.locator('.collection-item-name').getByText('Get all users');
|
||||
await expect(getUsersRequest).toBeVisible();
|
||||
|
||||
const chevronIcon = page.getByTestId('request-item-chevron').nth(0);
|
||||
await expect(chevronIcon).toBeVisible();
|
||||
await chevronIcon.click();
|
||||
|
||||
// Check if examples are visible
|
||||
const successExample = page.locator('.collection-item-name').getByText('Success Response');
|
||||
await expect(successExample).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
116
tests/import/postman/fixtures/postman-with-examples.json
Normal file
116
tests/import/postman/fixtures/postman-with-examples.json
Normal file
@@ -0,0 +1,116 @@
|
||||
{
|
||||
"info": {
|
||||
"_postman_id": "d7b47cc4-c3c5-4c9d-99d4-04b6025c9000",
|
||||
"name": "collection with examples",
|
||||
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
|
||||
"_exporter_id": "41238764"
|
||||
},
|
||||
"item": [
|
||||
{
|
||||
"name": "New Request",
|
||||
"request": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "https://testbench-sanity.usebruno.com/ping",
|
||||
"protocol": "https",
|
||||
"host": [
|
||||
"testbench-sanity",
|
||||
"usebruno",
|
||||
"com"
|
||||
],
|
||||
"path": [
|
||||
"ping"
|
||||
]
|
||||
}
|
||||
},
|
||||
"response": [
|
||||
{
|
||||
"name": "Success Response",
|
||||
"originalRequest": {
|
||||
"method": "GET",
|
||||
"header": [],
|
||||
"url": {
|
||||
"raw": "https://testbench-sanity.usebruno.com/ping",
|
||||
"protocol": "https",
|
||||
"host": [
|
||||
"testbench-sanity",
|
||||
"usebruno",
|
||||
"com"
|
||||
],
|
||||
"path": [
|
||||
"ping"
|
||||
]
|
||||
}
|
||||
},
|
||||
"status": "OK",
|
||||
"code": 200,
|
||||
"_postman_previewlanguage": "json",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json",
|
||||
"name": "Content-Type",
|
||||
"description": "",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"key": "x-powered-by",
|
||||
"value": "Express"
|
||||
}
|
||||
],
|
||||
"cookie": [],
|
||||
"body": "{\n \"ping\": \"pong\"\n}"
|
||||
},
|
||||
{
|
||||
"name": "Error Response",
|
||||
"originalRequest": {
|
||||
"method": "GET",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"body": {
|
||||
"mode": "raw",
|
||||
"raw": "{\n \"ping\": \"pong\"\n}",
|
||||
"options": {
|
||||
"raw": {
|
||||
"language": "json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"url": {
|
||||
"raw": "https://testbench-sanity.usebruno.com/ping",
|
||||
"protocol": "https",
|
||||
"host": [
|
||||
"testbench-sanity",
|
||||
"usebruno",
|
||||
"com"
|
||||
],
|
||||
"path": [
|
||||
"ping"
|
||||
]
|
||||
}
|
||||
},
|
||||
"status": "Internal Server Error",
|
||||
"code": 500,
|
||||
"_postman_previewlanguage": "json",
|
||||
"header": [
|
||||
{
|
||||
"key": "Content-Type",
|
||||
"value": "application/json",
|
||||
"name": "Content-Type",
|
||||
"description": "",
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"cookie": [],
|
||||
"body": "{\n \"error\": \"Internal Server Error\"\n}"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
111
tests/import/postman/import-postman-with-examples.spec.ts
Normal file
111
tests/import/postman/import-postman-with-examples.spec.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { test, expect } from '../../../playwright';
|
||||
import * as path from 'path';
|
||||
import { closeAllCollections, openCollectionAndAcceptSandbox } from '../../utils/page';
|
||||
|
||||
test.describe('Import Postman Collection with Examples', () => {
|
||||
let originalShowOpenDialog;
|
||||
|
||||
test.beforeAll(async ({ electronApp }) => {
|
||||
// save the original showOpenDialog function
|
||||
await electronApp.evaluate(({ dialog }) => {
|
||||
originalShowOpenDialog = dialog.showOpenDialog;
|
||||
});
|
||||
});
|
||||
|
||||
test.afterAll(async ({ electronApp, page }) => {
|
||||
await closeAllCollections(page);
|
||||
// restore the original showOpenDialog function
|
||||
await electronApp.evaluate(({ dialog }) => {
|
||||
dialog.showOpenDialog = originalShowOpenDialog;
|
||||
});
|
||||
});
|
||||
|
||||
test('should import Postman collection with examples successfully', async ({ page, electronApp, createTmpDir }) => {
|
||||
const postmanFile = path.resolve(__dirname, 'fixtures', 'postman-with-examples.json');
|
||||
|
||||
// Create a temporary directory for the collection to be imported into
|
||||
const importDir = await createTmpDir('imported-collection');
|
||||
|
||||
// Mock the electron dialog to return the import directory selection
|
||||
await electronApp.evaluate(({ dialog }, { importDir }) => {
|
||||
dialog.showOpenDialog = async () => ({
|
||||
canceled: false,
|
||||
filePaths: [importDir]
|
||||
});
|
||||
}, { importDir });
|
||||
|
||||
await test.step('Open import collection modal', async () => {
|
||||
await page.getByRole('button', { name: 'Import Collection' }).click();
|
||||
});
|
||||
|
||||
await test.step('Wait for import modal and verify title', async () => {
|
||||
const importModal = page.getByRole('dialog');
|
||||
await importModal.waitFor({ state: 'visible' });
|
||||
await expect(importModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Upload Postman collection file using hidden file input', async () => {
|
||||
// The "choose a file" button triggers a hidden file input, so we can directly set files on it
|
||||
await page.setInputFiles('input[type="file"]', postmanFile);
|
||||
});
|
||||
|
||||
await test.step('Wait for file processing to complete', async () => {
|
||||
await page.locator('#import-collection-loader').waitFor({ state: 'hidden' });
|
||||
});
|
||||
|
||||
await test.step('Verify no parsing errors occurred', async () => {
|
||||
const hasError = await page.getByText('Failed to parse the file').isVisible().catch(() => false);
|
||||
if (hasError) {
|
||||
throw new Error('Collection import failed with parsing error');
|
||||
}
|
||||
});
|
||||
|
||||
await test.step('Verify location selection modal appears', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await expect(locationModal.locator('.bruno-modal-header-title')).toContainText('Import Collection');
|
||||
});
|
||||
|
||||
await test.step('Verify collection name appears in location modal', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await expect(locationModal.getByText('collection with examples')).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Click Browse link to select collection folder', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await locationModal.getByText('Browse').click();
|
||||
});
|
||||
|
||||
await test.step('Complete import by clicking import button', async () => {
|
||||
const locationModal = page.getByRole('dialog');
|
||||
await locationModal.getByRole('button', { name: 'Import' }).click();
|
||||
});
|
||||
|
||||
await test.step('Handle sandboox modal', async () => {
|
||||
await openCollectionAndAcceptSandbox(page, 'collection with examples', 'safe');
|
||||
});
|
||||
|
||||
await test.step('Verify collection name appears in sidebar', async () => {
|
||||
const collectionName = page.locator('#sidebar-collection-name').getByText('collection with examples');
|
||||
await expect(collectionName).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Verify request exists in the collection', async () => {
|
||||
const requestItem = page.locator('.collection-item-name').getByText('New Request');
|
||||
await expect(requestItem).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Click chevron to expand examples', async () => {
|
||||
const chevronIcon = page.getByTestId('request-item-chevron');
|
||||
await expect(chevronIcon).toBeVisible();
|
||||
await chevronIcon.click();
|
||||
});
|
||||
|
||||
await test.step('Verify both examples are visible', async () => {
|
||||
const successExample = page.locator('.collection-item-name').getByText('Success Response');
|
||||
const errorExample = page.locator('.collection-item-name').getByText('Error Response');
|
||||
|
||||
await expect(successExample).toBeVisible();
|
||||
await expect(errorExample).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
118
tests/response-examples/create-example.spec.ts
Normal file
118
tests/response-examples/create-example.spec.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import { execSync } from 'child_process';
|
||||
import { test, expect } from '../../playwright';
|
||||
import path from 'path';
|
||||
|
||||
test.describe.serial('Create and Delete Response Examples', () => {
|
||||
test.afterAll(async () => {
|
||||
// Reset the collection request file to the original state
|
||||
execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'create-example.bru')}`);
|
||||
});
|
||||
|
||||
test('should create a response example from response bookmark', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('create-example').click();
|
||||
});
|
||||
|
||||
await test.step('Send request and validate example creation', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
// Wait for 30 seconds for the response bookmark button to be visible, on slower internet connections it may take longer to get the response.
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
|
||||
await expect(page.getByText('Save Response as Example')).toBeVisible();
|
||||
await expect(page.getByTestId('create-example-name-input')).toBeVisible();
|
||||
await expect(page.getByTestId('create-example-description-input')).toBeVisible();
|
||||
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Test Example from Bookmark');
|
||||
await page.getByTestId('create-example-description-input').fill('This is a test example created from response bookmark');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
await expect(page.getByText('Test Example from Bookmark')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('Validate name is required to create example', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('create-example').click();
|
||||
});
|
||||
|
||||
await test.step('Validate error when name is empty', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
|
||||
await expect(page.getByRole('button', { name: 'Create Example' })).toBeEnabled();
|
||||
|
||||
// Clear the pre-filled name to test validation
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
await expect(page.getByTestId('name-error')).toBeVisible();
|
||||
await expect(page.getByTestId('name-error')).toHaveText('Example name is required');
|
||||
});
|
||||
|
||||
await test.step('Create example with valid name', async () => {
|
||||
await page.getByTestId('create-example-name-input').fill('Required Name');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
|
||||
// Modal should close and example should be created
|
||||
await expect(page.getByText('Save Response as Example')).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('should close modal when cancelled', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Test modal cancellation', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByRole('button', { name: 'Cancel' }).click();
|
||||
await expect(page.getByText('Save Response as Example')).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('should reset form when modal is reopened', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('create-example').click();
|
||||
});
|
||||
|
||||
await test.step('Test form reset', async () => {
|
||||
await page.locator('#send-request').getByRole('img').nth(2).click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
|
||||
await page.getByTestId('create-example-name-input').fill('Test Name');
|
||||
await page.getByTestId('create-example-description-input').fill('Test Description');
|
||||
await page.getByRole('button', { name: 'Cancel' }).click();
|
||||
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
// The name field should have the pre-filled default value
|
||||
await expect(page.getByTestId('create-example-name-input')).toHaveValue('example');
|
||||
// Description should still be empty
|
||||
await expect(page.getByTestId('create-example-description-input')).toHaveValue('');
|
||||
await page.getByRole('button', { name: 'Cancel' }).click();
|
||||
});
|
||||
});
|
||||
|
||||
test('should show created example in sidebar after expanding request', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('create-example').click();
|
||||
});
|
||||
|
||||
await test.step('Create example and verify sidebar visibility', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Sidebar Test Example');
|
||||
await page.getByTestId('create-example-description-input').fill('This example should appear in the sidebar');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
});
|
||||
|
||||
await test.step('Verify example appears in sidebar', async () => {
|
||||
await page.locator('.collection-item-name', { hasText: 'create-example' }).getByTestId('request-item-chevron').click();
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Sidebar Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
182
tests/response-examples/edit-example.spec.ts
Normal file
182
tests/response-examples/edit-example.spec.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import { test, expect } from '../../playwright';
|
||||
import { execSync } from 'child_process';
|
||||
import path from 'path';
|
||||
|
||||
test.describe.serial('Edit Response Examples', () => {
|
||||
test.afterAll(async () => {
|
||||
// Reset the collection request file to the original state
|
||||
execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'edit-example.bru')}`);
|
||||
});
|
||||
|
||||
test('should enter edit mode and show editable fields when edit button is clicked', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('edit-example').click();
|
||||
});
|
||||
|
||||
await test.step('Make a successful request and create an example', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click();
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Test Example');
|
||||
await page.getByTestId('create-example-description-input').fill('This is a test example');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
});
|
||||
|
||||
await test.step('Open existing example', async () => {
|
||||
await page.locator('.collection-item-name', { hasText: 'edit-example' }).getByTestId('request-item-chevron').click();
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
await exampleItem.click();
|
||||
});
|
||||
|
||||
await test.step('Verify edit mode functionality', async () => {
|
||||
await expect(page.getByTestId('response-example-title')).toBeVisible();
|
||||
await expect(page.getByTestId('response-example-edit-btn')).toBeVisible();
|
||||
await page.getByTestId('response-example-edit-btn').click();
|
||||
await expect(page.getByTestId('response-example-name-input')).toBeVisible();
|
||||
await expect(page.getByTestId('response-example-description-input')).toBeVisible();
|
||||
await expect(page.getByTestId('response-example-save-btn')).toBeVisible();
|
||||
await expect(page.getByTestId('response-example-cancel-btn')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('should successfully update example name and persist changes', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('edit-example').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to update', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Original Example Name');
|
||||
await page.getByTestId('create-example-description-input').fill('Original description');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Open existing example', async () => {
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Original Example Name', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
await exampleItem.click();
|
||||
});
|
||||
|
||||
await test.step('Update example name and verify persistence', async () => {
|
||||
await page.getByTestId('response-example-edit-btn').click();
|
||||
await page.getByTestId('response-example-name-input').clear();
|
||||
await page.getByTestId('response-example-name-input').fill('Updated Example Name');
|
||||
await page.getByTestId('response-example-save-btn').click();
|
||||
await expect(page.getByTestId('response-example-title')).toHaveText('edit-example / Updated Example Name');
|
||||
});
|
||||
});
|
||||
|
||||
test('should successfully update example description and persist changes', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('edit-example').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to update description', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Description Test Example');
|
||||
await page.getByTestId('create-example-description-input').fill('Original description');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Open existing example', async () => {
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Description Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
await exampleItem.click();
|
||||
});
|
||||
|
||||
await test.step('Update example description and verify persistence', async () => {
|
||||
await page.getByTestId('response-example-edit-btn').click();
|
||||
await page.getByTestId('response-example-description-input').clear();
|
||||
await page.getByTestId('response-example-description-input').fill('Updated description for the example');
|
||||
await page.getByTestId('response-example-save-btn').click();
|
||||
await expect(page.getByTestId('response-example-description')).toHaveText('Updated description for the example');
|
||||
});
|
||||
});
|
||||
|
||||
test('should discard changes and revert to original values when cancel is clicked', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('edit-example').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to test cancel functionality', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Cancel Test Example');
|
||||
await page.getByTestId('create-example-description-input').fill('Original description for cancel test');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Open existing example', async () => {
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Cancel Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
await exampleItem.click();
|
||||
});
|
||||
|
||||
await test.step('Test cancel functionality and verify reversion', async () => {
|
||||
const originalName = await page.getByTestId('response-example-title').textContent();
|
||||
await page.getByTestId('response-example-edit-btn').click();
|
||||
await page.getByTestId('response-example-name-input').clear();
|
||||
await page.getByTestId('response-example-name-input').fill('This should not be saved');
|
||||
await page.getByTestId('response-example-cancel-btn').click();
|
||||
await expect(page.getByTestId('response-example-title')).toHaveText(originalName!);
|
||||
});
|
||||
});
|
||||
|
||||
test('should save changes using keyboard shortcut (Cmd+S)', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('edit-example').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to test keyboard shortcut', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Keyboard Shortcut Test Example');
|
||||
await page.getByTestId('create-example-description-input').fill('Original description for keyboard test');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// Wait for modal to close
|
||||
await page.waitForSelector('text=Save Response as Example', { state: 'detached' });
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
});
|
||||
|
||||
await test.step('Open existing example', async () => {
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Keyboard Shortcut Test Example', { exact: true });
|
||||
await expect(exampleItem).toBeVisible();
|
||||
await exampleItem.click();
|
||||
});
|
||||
|
||||
await test.step('Test keyboard shortcut save functionality', async () => {
|
||||
await page.getByTestId('response-example-edit-btn').click();
|
||||
await page.getByTestId('response-example-name-input').clear();
|
||||
await page.getByTestId('response-example-name-input').fill('Keyboard Shortcut Test');
|
||||
await page.keyboard.press('Meta+s');
|
||||
await expect(page.getByTestId('response-example-title')).toHaveText('edit-example / Keyboard Shortcut Test');
|
||||
});
|
||||
});
|
||||
});
|
||||
5
tests/response-examples/fixtures/collection/bruno.json
Normal file
5
tests/response-examples/fixtures/collection/bruno.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"version": "1",
|
||||
"name": "collection",
|
||||
"type": "collection"
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
meta {
|
||||
name: create-example
|
||||
type: http
|
||||
seq: 1
|
||||
}
|
||||
|
||||
post {
|
||||
url: https://testbench-sanity.usebruno.com/api/echo/json
|
||||
body: json
|
||||
auth: none
|
||||
}
|
||||
|
||||
headers {
|
||||
Content-Type: application/json
|
||||
}
|
||||
|
||||
body:json {
|
||||
{
|
||||
"message": "Hello World",
|
||||
"timestamp": "{{$timestamp}}"
|
||||
}
|
||||
}
|
||||
22
tests/response-examples/fixtures/collection/edit-example.bru
Normal file
22
tests/response-examples/fixtures/collection/edit-example.bru
Normal file
@@ -0,0 +1,22 @@
|
||||
meta {
|
||||
name: edit-example
|
||||
type: http
|
||||
seq: 1
|
||||
}
|
||||
|
||||
post {
|
||||
url: https://testbench-sanity.usebruno.com/api/echo/json
|
||||
body: json
|
||||
auth: none
|
||||
}
|
||||
|
||||
headers {
|
||||
Content-Type: application/json
|
||||
}
|
||||
|
||||
body:json {
|
||||
{
|
||||
"message": "Hello World",
|
||||
"timestamp": "{{$timestamp}}"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
meta {
|
||||
name: menu-operations
|
||||
type: http
|
||||
seq: 1
|
||||
}
|
||||
|
||||
post {
|
||||
url: https://testbench-sanity.usebruno.com/api/echo/json
|
||||
body: json
|
||||
auth: none
|
||||
}
|
||||
|
||||
headers {
|
||||
Content-Type: application/json
|
||||
}
|
||||
|
||||
body:json {
|
||||
{
|
||||
"message": "Hello World",
|
||||
"timestamp": "{{$timestamp}}"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"collections": [
|
||||
{
|
||||
"path": "{{projectRoot}}/tests/response-examples/fixtures/collection",
|
||||
"securityConfig": {
|
||||
"jsSandboxMode": "safe"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
6
tests/response-examples/init-user-data/preferences.json
Normal file
6
tests/response-examples/init-user-data/preferences.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"maximized": false,
|
||||
"lastOpenedCollections": [
|
||||
"{{projectRoot}}/tests/response-examples/fixtures/collection"
|
||||
]
|
||||
}
|
||||
114
tests/response-examples/menu-operations.spec.ts
Normal file
114
tests/response-examples/menu-operations.spec.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { test, expect } from '../../playwright';
|
||||
import { execSync } from 'child_process';
|
||||
import path from 'path';
|
||||
|
||||
test.describe.serial('Response Example Menu Operations', () => {
|
||||
test.afterAll(async () => {
|
||||
// Reset the collection request file to the original state
|
||||
execSync(`git checkout -- ${path.join(__dirname, 'fixtures', 'collection', 'menu-operations.bru')}`);
|
||||
});
|
||||
|
||||
test('should clone a response example via three dots menu', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('menu-operations').click();
|
||||
});
|
||||
|
||||
await test.step('Create example', async () => {
|
||||
await page.locator('#send-request').getByRole('img').nth(2).click();
|
||||
await page.getByTestId('response-bookmark-btn').click();
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Example to Clone');
|
||||
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();
|
||||
|
||||
const exampleItem = page.locator('.collection-item-name').getByText('Example to Clone');
|
||||
await expect(exampleItem).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();
|
||||
|
||||
await page.getByTestId('response-example-clone-option').click();
|
||||
const clonedExampleItem = page.locator('.collection-item-name').getByText('Example to Clone (Copy)');
|
||||
await expect(clonedExampleItem).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('should delete a response example via three dots menu', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('menu-operations').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to delete', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Example to Delete');
|
||||
await page.getByTestId('create-example-description-input').fill('This example will be deleted');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// 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();
|
||||
});
|
||||
|
||||
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();
|
||||
|
||||
await page.getByTestId('response-example-delete-option').click();
|
||||
await expect(page.getByText('Delete Example')).toBeVisible();
|
||||
await page.getByRole('button', { name: 'Delete' }).click();
|
||||
await expect(exampleItem).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test('should rename a response example via three dots menu', async ({ pageWithUserData: page }) => {
|
||||
await test.step('Open collection and request', async () => {
|
||||
await page.locator('#sidebar-collection-name').getByText('collection').click();
|
||||
await page.locator('.collection-item-name').getByText('menu-operations').click();
|
||||
});
|
||||
|
||||
await test.step('Create example to rename', async () => {
|
||||
await page.getByTestId('send-arrow-icon').click();
|
||||
await page.getByTestId('response-bookmark-btn').click({ timeout: 30000 });
|
||||
await page.getByTestId('create-example-name-input').clear();
|
||||
await page.getByTestId('create-example-name-input').fill('Example to Rename');
|
||||
await page.getByTestId('create-example-description-input').fill('This example will be renamed');
|
||||
await page.getByRole('button', { name: 'Create Example' }).click();
|
||||
// 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();
|
||||
});
|
||||
|
||||
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();
|
||||
await expect(page.getByText('Rename Example')).toBeVisible();
|
||||
const renameExampleNameInput = page.getByTestId('rename-example-name-input');
|
||||
await renameExampleNameInput.clear();
|
||||
await renameExampleNameInput.fill('Renamed Example');
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user