From 7328988e5994eed3a9d60778b4e692bb90a48c9e Mon Sep 17 00:00:00 2001 From: Abhishek S Lal Date: Thu, 8 Jan 2026 20:04:38 +0530 Subject: [PATCH] refactor: simplify HtmlPreview component by extracting render logic into a separate function (#6740) * refactor: simplify HtmlPreview component by extracting render logic into a separate function * refactor: wrap renderHtmlPreview in a fragment for improved JSX structure * fix: update preview visibility check in response format tests --- .../QueryResult/QueryResultPreview/HtmlPreview.js | 10 +++------- .../response-format-select-and-preview.spec.ts | 4 ++-- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js index 778e2c00c..3ea059b0d 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/HtmlPreview.js @@ -30,7 +30,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => { return () => mutationObserver.disconnect(); }, []); - if (typeof data === 'string') { + const renderHtmlPreview = (data, baseUrl, isDragging, webviewContainerRef) => { const htmlContent = data.includes('') ? data.replace('', ``) : `${data}`; @@ -51,7 +51,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => { /> ); - } + }; // For all other data types, render safely as formatted text let displayContent = ''; @@ -64,11 +64,7 @@ const HtmlPreview = React.memo(({ data, baseUrl }) => { } return ( - 
-      {displayContent}
-
+ <>{renderHtmlPreview(displayContent, baseUrl, isDragging, webviewContainerRef)} ); }); diff --git a/tests/response/response-format-select-and-preview/response-format-select-and-preview.spec.ts b/tests/response/response-format-select-and-preview/response-format-select-and-preview.spec.ts index 3cc136bf0..b9e811a13 100644 --- a/tests/response/response-format-select-and-preview/response-format-select-and-preview.spec.ts +++ b/tests/response/response-format-select-and-preview/response-format-select-and-preview.spec.ts @@ -43,7 +43,7 @@ test.describe.serial('Response Format Select and Preview', () => { await switchResponseFormat(page, 'HTML'); await expect(codeLine.nth(1)).toContainText('"hello": "bruno"'); await switchToPreviewTab(page); - await expect(previewContainer).toContainText('{"hello":"bruno"}'); + await expect(previewContainer.locator('webview')).toBeVisible(); }); await test.step('Switch to Editor, select XML, verify editor and preview error', async () => { @@ -59,7 +59,7 @@ test.describe.serial('Response Format Select and Preview', () => { await switchResponseFormat(page, 'JavaScript'); await expect(codeLine.nth(1)).toContainText('"hello": "bruno"'); await switchToPreviewTab(page); - await expect(previewContainer).toContainText('{"hello":"bruno"}'); + await expect(previewContainer.locator('webview')).toBeVisible(); }); await test.step('Switch to Editor, select Raw, verify editor and preview', async () => {