fix(ws): remove default '{}' message body and make all message headers sticky (usebruno#8565)

Author: pooja-bruno

packages/bruno-app/src/components/RequestPane/WsBody/SingleWSMessage/StyledWrapper.js

@@ -23,14 +23,11 @@ const StyledWrapper = styled.div`
     }
   }
 
-  &:not(.disabled) .accordion-header {
+  .accordion-header {
     position: sticky;
     top: 0;
     z-index: 1;
     background: ${(props) => props.theme.bg};
-  }
-
-  .accordion-header {
     display: flex;
     align-items: center;
     justify-content: space-between;

packages/bruno-lang/v2/src/jsonToBru.js

@@ -660,7 +660,7 @@ ${indentString(body.sparql)}
         }
 
         // Convert content to JSON string if it's an object
-        let contentValue = typeof content === 'object' ? JSON.stringify(content, null, 2) : content || '{}';
+        let contentValue = typeof content === 'object' ? JSON.stringify(content, null, 2) : content || '';
 
         // Wrap content with triple quotes for multiline support, without extra indentation
         bru += `${indentString(`content: '''\n${indentString(contentValue)}\n'''`)}\n`;

packages/bruno-lang/v2/tests/jsonToBru.spec.js

@@ -52,6 +52,26 @@ describe('jsonToBru stringify', () => {
       expect(output).toMatch(new RegExp(`keepAliveInterval: ${input.settings.keepAliveInterval}`));
       expect(output).toMatch(new RegExp(`timeout: ${input.settings.timeout}`));
     });
+
+    it('serializes falsy content to an empty content block', () => {
+      const input = {
+        body: {
+          mode: 'ws',
+          ws: [
+            {
+              content: '',
+              name: 'message 1'
+            }
+          ]
+        }
+      };
+
+      const output = stringify(input);
+
+      // Content block is emitted but empty (no '{}' fallback).
+      expect(output).toMatch(/content: '''\s*'''/);
+      expect(output).not.toContain('{}');
+    });
   });
 
   describe('body:multipart-form file values', () => {

tests/utils/page/actions.ts

@@ -1658,6 +1658,12 @@ const closeAllTabs = async (page: Page) => {
     if (await discardAllButton.isVisible({ timeout: 1000 }).catch(() => false)) {
       await discardAllButton.click();
     }
+
+    const saveTransientModal = page.getByTestId('save-transient-request-modal');
+    if (await saveTransientModal.isVisible({ timeout: 1000 }).catch(() => false)) {
+      await saveTransientModal.getByRole('button', { name: 'Cancel' }).click();
+      await expect(saveTransientModal).toBeHidden();
+    }
   });
 };
 

tests/utils/page/locators.ts

@@ -351,9 +351,20 @@ export const buildWebsocketCommonLocators = (page: Page) => ({
   },
   messages: () => page.locator('.ws-message'),
   message: {
+    container: () => page.getByTestId('ws-messages-container'),
+    addButton: () => page.getByTestId('ws-add-message'),
+    headers: () => page.getByTestId(/^ws-message-header-/),
+    header: (index: number) => page.getByTestId(`ws-message-header-${index}`),
+    body: (index: number) => page.getByTestId(`ws-message-body-${index}`),
+    editor: (index: number) => page.getByTestId(`ws-message-body-${index}`).locator('.CodeMirror'),
+    editorPlaceholder: (index: number) =>
+      page.getByTestId(`ws-message-body-${index}`).locator('.CodeMirror-placeholder'),
+    editorCode: (index: number) => page.getByTestId(`ws-message-body-${index}`).locator('.CodeMirror-code'),
     label: (index: number) => page.getByTestId(`ws-message-label-${index}`),
     nameInput: (index: number) => page.getByTestId(`ws-message-name-input-${index}`),
-    nameTooltip: () => page.getByTestId('ws-message-name-tooltip')
+    nameTooltip: () => page.getByTestId('ws-message-name-tooltip'),
+    sendButton: (index: number) => page.getByTestId(`ws-send-msg-${index}`),
+    deleteButton: (index: number) => page.getByTestId(`ws-delete-msg-${index}`)
   },
   toolbar: {
     latestFirst: () => page.getByRole('button', { name: 'Latest First' }),

tests/websockets/message-body-default.spec.ts

@@ -1,34 +1,48 @@
 import { expect, test } from '../../playwright';
-import { closeAllCollections } from '../utils/page/actions';
-
-const REQ_NAME = /^ws-default-body-request$/;
+import { closeAllTabs, createTransientRequest, selectRequestPaneTab } from '../utils/page/actions';
+import { buildWebsocketCommonLocators } from '../utils/page/locators';
 
 test.describe('websocket message default body', () => {
-  test.afterAll(async ({ pageWithUserData: page }) => {
-    await closeAllCollections(page);
+  test.afterEach(async ({ page }) => {
+    await closeAllTabs(page);
   });
 
   test('a newly added message defaults to an empty body showing the placeholder', async ({
-    pageWithUserData: page
+    page
   }) => {
-    // Open the preloaded websocket request
-    await page.getByTestId('sidebar-collection-row').click();
-    await page.getByTitle(REQ_NAME).click();
+    const ws = buildWebsocketCommonLocators(page);
+
+    await createTransientRequest(page, { requestType: 'WebSocket' });
+    await selectRequestPaneTab(page, 'Message');
 
-    const headers = page.getByTestId(/^ws-message-header-/);
-    const beforeCount = await headers.count();
+    const beforeCount = await ws.message.headers().count();
 
-    await page.getByTestId('ws-add-message').click();
-    await expect(headers).toHaveCount(beforeCount + 1);
+    await ws.message.addButton().click();
+    await expect(ws.message.headers()).toHaveCount(beforeCount + 1);
 
     // The newly added message is the last one and auto-expands.
-    const newBody = page.getByTestId(`ws-message-body-${beforeCount}`);
-    await expect(newBody).toBeVisible();
+    await expect(ws.message.body(beforeCount)).toBeVisible();
 
-    const editor = newBody.locator('.CodeMirror');
     // Body should be empty (previously defaulted to '{}'); the editor should
     // surface the '...' placeholder instead of any '{}' content.
-    await expect(editor.locator('.CodeMirror-placeholder')).toHaveText('...');
-    await expect(editor.locator('.CodeMirror-code')).not.toContainText('{}');
+    await expect(ws.message.editorPlaceholder(beforeCount)).toHaveText('...');
+    await expect(ws.message.editorCode(beforeCount)).not.toContainText('{}');
+  });
+
+  test('the default first message of a newly created websocket request has an empty body', async ({
+    page
+  }) => {
+    const ws = buildWebsocketCommonLocators(page);
+
+    await createTransientRequest(page, { requestType: 'WebSocket' });
+    await selectRequestPaneTab(page, 'Message');
+
+    // The default first message auto-expands.
+    await expect(ws.message.body(0)).toBeVisible();
+
+    // Body must be empty (previously defaulted to '{}'); the editor should surface
+    // the '...' placeholder rather than any '{}' content.
+    await expect(ws.message.editorPlaceholder(0)).toHaveText('...');
+    await expect(ws.message.editorCode(0)).not.toContainText('{}');
   });
 });