refactor: update UI interactions and improve test stability

Author: abhishek-bruno

packages/bruno-app/src/components/SingleLineEditor/index.js

@@ -205,7 +205,11 @@ class SingleLineEditor extends Component {
   render() {
     return (
       <div className={`flex flex-row justify-between w-full overflow-x-auto ${this.props.className}`}>
-        <StyledWrapper ref={this.editorRef} className={`single-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`} />
+        <StyledWrapper
+          ref={this.editorRef}
+          className={`single-line-editor grow ${this.props.readOnly ? 'read-only' : ''}`}
+          {...(this.props['data-testid'] ? { 'data-testid': this.props['data-testid'] } : {})}
+        />
         {this.secretEye(this.props.isSecret)}
       </div>
     );

packages/bruno-app/src/components/TagList/StyledWrapper.js

@@ -23,13 +23,18 @@ const StyledWrapper = styled.div`
     max-width: 200px;
     transition: all 0.2s ease;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    cursor: default;
 
-    &:hover {
+    &:has(.tag-remove:hover) {
       background-color: ${(props) => props.theme.requestTabs.active.bg};
       border-color: ${(props) => props.theme.requestTabs.active.border || props.theme.requestTabs.bottomBorder};
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       transform: translateY(-1px);
     }
+
+    .tag-remove {
+      cursor: pointer;
+    }
   }
 
   .tag-icon {

packages/bruno-app/src/components/TagList/index.js

@@ -49,6 +49,7 @@ const TagList = ({ tagsHintList = [], handleAddTag, tags, handleRemoveTag, onSav
         onChange={handleInputChange}
         onRun={handleKeyDown}
         onSave={onSave}
+        data-testid="tag-input"
       />
       {error && <span className='text-xs text-red-500'>{error}</span>}
       <ul className="flex flex-wrap gap-1">
@@ -57,14 +58,15 @@ const TagList = ({ tagsHintList = [], handleAddTag, tags, handleRemoveTag, onSav
               <li key={_tag}>
                 <button
                   className="tag-item"
-                  onClick={() => handleRemoveTag(_tag)}
                   type="button"
                 >
                   <IconTag size={12} className="tag-icon" aria-hidden="true" />
                   <span className="tag-text" title={_tag}>
                     {_tag}
                   </span>
-                  <IconX size={12} strokeWidth={2} aria-hidden="true" />
+                  <span className="tag-remove" title="Remove tag" onClick={() => handleRemoveTag(_tag)}>
+                    <IconX size={12} strokeWidth={2} aria-hidden="true" />
+                  </span>
                 </button>
               </li>
             ))

tests/collection/create-requests/graphql-requests.spec.ts

@@ -11,12 +11,14 @@ test.describe('Create GraphQL Requests', () => {
 
   test.afterAll(async ({ pageWithUserData: page }) => {
     // Clean up Root GraphQL Request
-    await locators.sidebar.request('Root GraphQL Request').click({ button: 'right' });
+    await locators.sidebar.request('Root GraphQL Request').hover();
+    await locators.actions.collectionItemActions('Root GraphQL Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
     // Clean up Folder GraphQL Request
-    await locators.sidebar.request('Folder GraphQL Request').click({ button: 'right' });
+    await locators.sidebar.request('Folder GraphQL Request').hover();
+    await locators.actions.collectionItemActions('Folder GraphQL Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
@@ -58,8 +60,8 @@ test.describe('Create GraphQL Requests', () => {
     });
 
     await test.step('Create GraphQL request via folder1 three dots menu', async () => {
-      const folderItem = locators.sidebar.folder('folder1');
-      await folderItem.click({ button: 'right' });
+      await locators.sidebar.folder('folder1').hover();
+      await locators.actions.collectionItemActions('folder1').click();
       await locators.dropdown.item('New Request').click();
 
       await page.getByTestId('graphql-request').click();

tests/collection/create-requests/grpc-requests.spec.ts

@@ -13,12 +13,14 @@ test.describe('Create gRPC Requests', () => {
     const locators = buildCommonLocators(page);
 
     // Clean up Root gRPC Request
-    await locators.sidebar.request('Root gRPC Request').click({ button: 'right' });
+    await locators.sidebar.request('Root gRPC Request').hover();
+    await locators.actions.collectionItemActions('Root gRPC Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
     // Clean up Folder gRPC Request
-    await locators.sidebar.request('Folder gRPC Request').click({ button: 'right' });
+    await locators.sidebar.request('Folder gRPC Request').hover();
+    await locators.actions.collectionItemActions('Folder gRPC Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
@@ -60,8 +62,8 @@ test.describe('Create gRPC Requests', () => {
     });
 
     await test.step('Create gRPC request via folder1 three dots menu', async () => {
-      const folderItem = locators.sidebar.folder('folder1');
-      await folderItem.click({ button: 'right' });
+      await locators.sidebar.folder('folder1').hover();
+      await locators.actions.collectionItemActions('folder1').click();
       await locators.dropdown.item('New Request').click();
 
       await page.getByTestId('grpc-request').click();

tests/collection/create-requests/http-requests.spec.ts

@@ -13,12 +13,14 @@ test.describe('Create HTTP Requests', () => {
     const locators = buildCommonLocators(page);
 
     // Clean up Root HTTP Request
-    await locators.sidebar.request('Root HTTP Request').click({ button: 'right' });
+    await locators.sidebar.request('Root HTTP Request').hover();
+    await locators.actions.collectionItemActions('Root HTTP Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
     // Clean up Folder HTTP Request
-    await locators.sidebar.request('Folder HTTP Request').click({ button: 'right' });
+    await locators.sidebar.request('Folder HTTP Request').hover();
+    await locators.actions.collectionItemActions('Folder HTTP Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
@@ -59,8 +61,8 @@ test.describe('Create HTTP Requests', () => {
     });
 
     await test.step('Create HTTP request via folder1 three dots menu', async () => {
-      const folderItem = locators.sidebar.folder('folder1');
-      await folderItem.click({ button: 'right' });
+      await locators.sidebar.folder('folder1').hover();
+      await locators.actions.collectionItemActions('folder1').click();
       await locators.dropdown.item('New Request').click();
 
       await page.getByTestId('request-name').fill('Folder HTTP Request');

tests/collection/create-requests/ws-requests.spec.ts

@@ -13,12 +13,14 @@ test.describe('Create WebSocket Requests', () => {
     const locators = buildCommonLocators(page);
 
     // Clean up Folder WebSocket Request
-    await locators.sidebar.request('Folder WebSocket Request').click({ button: 'right' });
+    await locators.sidebar.request('Folder WebSocket Request').hover();
+    await locators.actions.collectionItemActions('Folder WebSocket Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
     // Clean up Root WebSocket Request
-    await locators.sidebar.request('Root WebSocket Request').click({ button: 'right' });
+    await locators.sidebar.request('Root WebSocket Request').hover();
+    await locators.actions.collectionItemActions('Root WebSocket Request').click();
     await locators.dropdown.item('Delete').click();
     await locators.modal.button('Delete').click();
 
@@ -60,8 +62,8 @@ test.describe('Create WebSocket Requests', () => {
     });
 
     await test.step('Create WebSocket request via folder1 three dots menu', async () => {
-      const folderItem = locators.sidebar.folder('folder1');
-      await folderItem.click({ button: 'right' });
+      await locators.sidebar.folder('folder1').hover();
+      await locators.actions.collectionItemActions('folder1').click();
       await locators.dropdown.item('New Request').click();
 
       await page.getByTestId('ws-request').click();

tests/collection/moving-requests/cross-collection-drag-drop-folder.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../../../playwright';
-import { closeAllCollections } from '../../utils/page';
+import { closeAllCollections, createCollection } from '../../utils/page';
 
 test.describe('Cross-Collection Drag and Drop for folder', () => {
   test.afterEach(async ({ page }) => {
@@ -8,18 +8,8 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
   });
 
   test('Verify cross-collection folder drag and drop', async ({ page, createTmpDir }) => {
-    // Create first collection - click dropdown menu first
-    await page.locator('.dropdown-icon').click();
-    await page.locator('.dropdown-item').filter({ hasText: 'Create Collection' }).click();
-    await page.getByLabel('Name').fill('source-collection');
-    await page.getByLabel('Location').fill(await createTmpDir('source-collection'));
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for collection to appear and click on it
-    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();
+    // Create first collection - open with sandbox mode
+    await createCollection(page, 'source-collection', await createTmpDir('source-collection'), { openWithSandboxMode: 'safe' });
 
     // Create a folder in the first collection
     // Look for the collection menu button for the source collection specifically
@@ -34,37 +24,28 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
     await page.getByRole('button', { name: 'Create' }).click();
 
     // Wait for the folder to be created and appear in the sidebar
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(200);
     await expect(page.locator('.collection-item-name').filter({ hasText: 'test-folder' })).toBeVisible();
 
     // Add a request to the folder to make it more realistic
-    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).click({ button: 'right' });
+    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).hover();
+    await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).locator('.menu-icon').click();
     await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
     await page.getByPlaceholder('Request Name').fill('test-request-in-folder');
     await page.locator('#new-request-url .CodeMirror').click();
     await page.locator('textarea').fill('https://echo.usebruno.com');
     await page.getByRole('button', { name: 'Create' }).click();
 
     // Wait for the request to be created
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(200);
 
     // Expand the folder to see the request inside
     await page.locator('.collection-item-name').filter({ hasText: 'test-folder' }).click();
-    await page.waitForTimeout(500);
+    await page.waitForTimeout(200);
     await expect(page.locator('.collection-item-name').filter({ hasText: 'test-request-in-folder' })).toBeVisible();
 
-    // Create second collection - click dropdown menu first
-    await page.locator('.dropdown-icon').click();
-    await page.locator('.dropdown-item').filter({ hasText: 'Create Collection' }).click();
-    await page.getByLabel('Name').fill('target-collection');
-    await page.getByLabel('Location').fill(await createTmpDir('target-collection'));
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for second collection to appear and click on it
-    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'target-collection' })).toBeVisible();
-    await page.locator('#sidebar-collection-name').filter({ hasText: 'target-collection' }).click();
-    await page.getByLabel('Safe Mode').check();
-    await page.getByRole('button', { name: 'Save' }).click();
+    // Create second collection - open with sandbox mode
+    await createCollection(page, 'target-collection', await createTmpDir('target-collection'), { openWithSandboxMode: 'safe' });
 
     // Wait for both collections to be visible in sidebar
     await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'source-collection' })).toBeVisible();
@@ -82,12 +63,12 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
     await sourceFolder.dragTo(targetCollection);
 
     // Wait for the operation to complete
-    await page.waitForTimeout(3000);
+    await page.waitForTimeout(200);
 
     // Verify the folder has been moved to the target collection
     // Click on target collection to expand it if needed
     await page.locator('#sidebar-collection-name').filter({ hasText: 'target-collection' }).click();
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(200);
 
     // Check that the folder now appears under target collection
     const targetCollectionContainer = page
@@ -100,7 +81,7 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
 
     // Expand the moved folder to verify the request inside is also moved
     await targetCollectionContainer.locator('.collection-item-name').filter({ hasText: 'test-folder' }).click();
-    await page.waitForTimeout(500);
+    await page.waitForTimeout(200);
     await expect(
       targetCollectionContainer.locator('.collection-item-name').filter({ hasText: 'test-request-in-folder' })
     ).toBeVisible();
@@ -125,17 +106,7 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
     createTmpDir
   }) => {
     // Create first collection (source) - use unique names for this test
-    await page.locator('.dropdown-icon').click();
-    await page.locator('.dropdown-item').filter({ hasText: 'Create Collection' }).click();
-    await page.getByLabel('Name').fill('source-collection');
-    await page.getByLabel('Location').fill(await createTmpDir('source-collection'));
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for collection to appear and click on it
-    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();
+    await createCollection(page, 'source-collection', await createTmpDir('source-collection'), { openWithSandboxMode: 'safe' });
 
     // Create a folder in the first collection
     await page
@@ -158,7 +129,8 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
     await expect(page.locator('.collection-item-name').filter({ hasText: 'folder-1' })).toBeVisible();
 
     // Add a request to the folder to make it more realistic
-    await page.locator('.collection-item-name').filter({ hasText: 'folder-1' }).click({ button: 'right' });
+    await page.locator('.collection-item-name').filter({ hasText: 'folder-1' }).hover();
+    await page.locator('.collection-item-name').filter({ hasText: 'folder-1' }).locator('.menu-icon').click();
     await page.locator('.dropdown-item').filter({ hasText: 'New Request' }).click();
     await page.getByPlaceholder('Request Name').fill('http-request');
     await page.locator('#new-request-url .CodeMirror').click();
@@ -169,17 +141,7 @@ test.describe('Cross-Collection Drag and Drop for folder', () => {
     await expect(page.locator('.collection-item-name').filter({ hasText: 'http-request' })).toBeVisible();
 
     // Create second collection (target)
-    await page.locator('.dropdown-icon').click();
-    await page.locator('.dropdown-item').filter({ hasText: 'Create Collection' }).click();
-    await page.getByLabel('Name').fill('target-collection');
-    await page.getByLabel('Location').fill(await createTmpDir('target-collection'));
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
-
-    // Wait for second collection to appear and click on it
-    await expect(page.locator('#sidebar-collection-name').filter({ hasText: 'target-collection' })).toBeVisible();
-    await page.locator('#sidebar-collection-name').filter({ hasText: 'target-collection' }).click();
-    await page.getByLabel('Safe Mode').check();
-    await page.getByRole('button', { name: 'Save' }).click();
+    await createCollection(page, 'target-collection', await createTmpDir('target-collection'), { openWithSandboxMode: 'safe' });
 
     // Create a folder with the same name in the target collection
     await page