refactor: locators, tests, new request design

packages/bruno-app/src/components/Sidebar/NewRequest/index.js

@@ -334,79 +334,84 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
                 Type
               </label>
 
-              <div className="mt-2 flex flex-col gap-2">
-                <div className="flex items-center gap-2">
-                  <input
-                    type="radio"
-                    id="http-request"
-                    name="requestType"
-                    value="http-request"
-                    checked={formik.values.requestType === 'http-request'}
-                    onChange={formik.handleChange}
-                  />
-                  <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
-                    HTTP
-                  </label>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <input
-                    type="radio"
-                    id="graphql-request"
-                    name="requestType"
-                    value="graphql-request"
-                    checked={formik.values.requestType === 'graphql-request'}
-                    onChange={formik.handleChange}
-                  />
-                  <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
-                    GraphQL
-                  </label>
-                </div>
-
-                {isGrpcEnabled && (
+              <div className="mt-2 grid grid-cols-3 gap-2">
+                <div className="flex flex-col gap-2">
                   <div className="flex items-center gap-2">
                     <input
                       type="radio"
-                      id="grpc-request"
+                      id="http-request"
                       name="requestType"
-                      value="grpc-request"
-                      checked={formik.values.requestType === 'grpc-request'}
+                      value="http-request"
+                      checked={formik.values.requestType === 'http-request'}
                       onChange={formik.handleChange}
                     />
-                    <label htmlFor="grpc-request" className="ml-1 cursor-pointer select-none">
-                      gRPC
+                    <label htmlFor="http-request" className="ml-1 cursor-pointer select-none">
+                      HTTP
                     </label>
                   </div>
-                )}
-
-                {isWsEnabled && (
                   <div className="flex items-center gap-2">
                     <input
                       type="radio"
-                      id="ws-request"
+                      id="graphql-request"
                       name="requestType"
-                      value="ws-request"
-                      checked={formik.values.requestType === 'ws-request'}
+                      value="graphql-request"
+                      checked={formik.values.requestType === 'graphql-request'}
                       onChange={formik.handleChange}
                     />
-                    <label htmlFor="ws-request" className="ml-1 cursor-pointer select-none">
-                      WebSocket
+                    <label htmlFor="graphql-request" className="ml-1 cursor-pointer select-none">
+                      GraphQL
                     </label>
                   </div>
-                )}
+                </div>
 
-                <div className="flex items-center gap-2">
-                  <input
-                    type="radio"
-                    id="from-curl"
-                    name="requestType"
-                    value="from-curl"
-                    checked={formik.values.requestType === 'from-curl'}
-                    onChange={formik.handleChange}
-                  />
-                  <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
-                    From cURL
-                  </label>
+                <div className="flex flex-col gap-2">
+                  {isGrpcEnabled && (
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="radio"
+                        id="grpc-request"
+                        name="requestType"
+                        value="grpc-request"
+                        checked={formik.values.requestType === 'grpc-request'}
+                        onChange={formik.handleChange}
+                      />
+                      <label htmlFor="grpc-request" className="ml-1 cursor-pointer select-none">
+                        gRPC
+                      </label>
+                    </div>
+                  )}
+
+                  {isWsEnabled && (
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="radio"
+                        id="ws-request"
+                        name="requestType"
+                        value="ws-request"
+                        checked={formik.values.requestType === 'ws-request'}
+                        onChange={formik.handleChange}
+                      />
+                      <label htmlFor="ws-request" className="ml-1 cursor-pointer select-none">
+                        WebSocket
+                      </label>
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex flex-col gap-2">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="radio"
+                      id="from-curl"
+                      name="requestType"
+                      value="from-curl"
+                      checked={formik.values.requestType === 'from-curl'}
+                      onChange={formik.handleChange}
+                    />
+                    <label htmlFor="from-curl" className="ml-1 cursor-pointer select-none">
+                      From cURL
+                    </label>
+                  </div>
                 </div>
               </div>
             </div>

tests/utils/page/locators.ts

@@ -1,6 +1,6 @@
 import { Page } from '../../../playwright';
 
-export const buildCommonLocators = (page: Page) => ({
+export const buildWebsocketCommonLocators = (page: Page) => ({
   runner: () => page.getByTestId('run-button'),
   saveButton: () => page
     .locator('.infotip')

tests/websockets/connection.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '../../playwright';
-import { buildCommonLocators } from './lib/locators';
+import { buildWebsocketCommonLocators } from '../utils/page/locators';
 
 const MAX_CONNECTION_TIME = 3000;
 const BRU_FILE_NAME = /^ws-test-request$/;
@@ -12,7 +12,7 @@ test.describe.serial('websockets', () => {
   });
 
   test('websocket connects', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
 
     await page.getByTitle(BRU_FILE_NAME).click();
     await locators.connectionControls.connect().click();
@@ -23,14 +23,14 @@ test.describe.serial('websockets', () => {
   });
 
   test('websocket closes', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
     await locators.connectionControls.disconnect().click();
 
     await expect(locators.connectionControls.connect()).toBeVisible();
   });
 
   test('websocket messages were recorded', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
 
     const messages = await locators.messages();
 
@@ -39,7 +39,7 @@ test.describe.serial('websockets', () => {
   });
 
   test('websocket messages sorting can be changed', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
 
     await locators.toolbar.latestLast().click();
 
@@ -54,7 +54,7 @@ test.describe.serial('websockets', () => {
   });
 
   test('websocket request can send messages', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
 
     await locators.toolbar.clearResponse().click();
     await locators.runner().click();

tests/websockets/headers.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect } from '../../playwright';
-import { buildCommonLocators } from './lib/locators';
+import { buildWebsocketCommonLocators } from '../utils/page/locators';
 
 const BRU_FILE_NAME = /^ws-test-request-with-headers$/;
 
 test.describe.serial('headers', () => {
   test('headers are returned if passed', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
 
     await page.locator('#sidebar-collection-name').click();
     await page.getByTitle(BRU_FILE_NAME).click();

tests/websockets/persistence.spec.ts

@@ -1,5 +1,5 @@
 import { expect, Locator, test } from '../../playwright';
-import { buildCommonLocators } from './lib/locators';
+import { buildWebsocketCommonLocators } from '../utils/page/locators';
 import { readFile, writeFile } from 'fs/promises';
 import { join } from 'path';
 
@@ -33,7 +33,7 @@ test.describe.serial('persistence', () => {
 
   test('save new websocket url', async ({ pageWithUserData: page }) => {
     const replacementUrl = 'ws://localhost:8082';
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
     const unsavedColor = '#d97706';
     const getSaveSvg = () => locators.saveButton().evaluate((d) => d.querySelector('svg'));
 

tests/websockets/subproto.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect } from '../../playwright';
-import { buildCommonLocators } from './lib/locators';
+import { buildWebsocketCommonLocators } from '../utils/page/locators';
 
 const BRU_FILE_NAME = /^ws-test-request-with-subproto$/;
 
 test.describe.serial('headers', () => {
   test('headers are returned if passed', async ({ pageWithUserData: page, restartApp }) => {
-    const locators = buildCommonLocators(page);
+    const locators = buildWebsocketCommonLocators(page);
     const clearText = async (text: string) => {
       for (let i = text.length; i > 0; i--) {
         await page.keyboard.press('Backspace');