Return the base64 from response formatter for svg (#48)

Author: vasharma05-bruno

packages/bruno-api-docs/e2e/components/playground/response-pane.component.ts

@@ -56,6 +56,7 @@ export class ResponsePaneComponent extends BaseComponent {
   }
 
   readonly previewToggle = this.page.getByRole('switch', { name: 'Toggle preview' });
+  readonly previewImage = this.page.getByTestId('response-preview-image');
 
   formatOption(format: ResponseBodyFormat): Locator {
     return this.page.getByTestId(`response-format-selector-${format}`);

packages/bruno-api-docs/e2e/tests/playground/response-svg-preview.spec.ts

@@ -0,0 +1,50 @@
+import { Buffer } from 'buffer';
+import { test, expect } from '../../playwright';
+
+// A small SVG whose bytes the sniffer classifies as image/svg+xml. Small SVG bodies are kept as
+// selectable text (no base64 copy), so the preview must build the <img> src from that text —
+// regression: it used to read the absent base64 buffer and render "base64,undefined".
+const SVG_BODY
+  = '<?xml version="1.0" encoding="UTF-8"?>\n'
+    + '<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">'
+    + '<rect width="400" height="300" fill="red"/></svg>';
+const INLINE_SVG_SRC = `data:image/svg+xml;base64,${Buffer.from(SVG_BODY).toString('base64')}`;
+
+test.describe('response body — SVG preview', () => {
+  test.use({ viewport: { width: 1280, height: 900 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/api/users**', (route) =>
+      route.fulfill({
+        status: 200,
+        headers: { 'content-type': 'image/svg+xml' },
+        body: SVG_BODY
+      })
+    );
+  });
+
+  test('renders the SVG image from its inline markup, not a broken data URL', async ({
+    page,
+    playground,
+    responsePane
+  }) => {
+    await page.goto('/#/?pg=1&dock=bottom');
+    await playground.openSidebarItem('get users');
+    await responsePane.send();
+
+    // An SVG is an image, so the pane defaults to preview and renders an <img>.
+    await expect(responsePane.previewImage).toBeVisible();
+
+    // The src is the SVG markup encoded inline — not the "base64,undefined" the bug produced.
+    await expect(responsePane.previewImage).toHaveAttribute('src', INLINE_SVG_SRC);
+
+    // And the browser actually decoded it: a broken data URL leaves naturalWidth at 0.
+    await expect
+      .poll(() =>
+        responsePane.previewImage.evaluate(
+          (img: HTMLImageElement) => img.complete && img.naturalWidth > 0
+        )
+      )
+      .toBe(true);
+  });
+});

packages/bruno-api-docs/src/components/Playground/QueryResultPreview/QueryResultPreview.tsx

@@ -49,7 +49,8 @@ const QueryResultPreview: React.FC<QueryResultPreviewProps> = ({
       return <HtmlPreview data={data} baseUrl={baseUrl} />;
     }
     case 'preview-image': {
-      return <img src={`data:${contentType.split(';')[0].trim()};base64,${dataBuffer}`} />;
+      const mimeType = contentType.split(';')[0].trim();
+      return <img data-testid="response-preview-image" src={`data:${mimeType};base64,${dataBuffer}`} />;
     }
     case 'preview-pdf': {
       return (

packages/bruno-api-docs/src/runner/RequestExecutor.ts

@@ -258,9 +258,7 @@ export class RequestExecutor {
     // aren't round-trippable). A small plain-text/SVG string body carries its own bytes, so skip the
     // redundant copy — but oversized bodies are still encoded here, since they're actioned
     // (download/copy) from the reveal warning; only their formatting is deferred.
-    const isReconstructableText
-      = (detectedContentType === 'text/plain' || detectedContentType === 'image/svg+xml')
-        && typeof data === 'string';
+    const isReconstructableText = detectedContentType === 'text/plain' && typeof data === 'string';
     const base64Data = isReconstructableText && !isLarge ? undefined : buffer.toString('base64');
 
     return { data, size, base64Data, detectedContentType };

packages/bruno-api-docs/src/runner/index.spec.ts

@@ -535,7 +535,7 @@ describe('RequestExecutor parseResponse — content-type handling', () => {
     const res = await run();
     expect(res.detectedContentType).toBe('image/svg+xml');
     expect(res.data).toContain('<svg');
-    expect(res.base64Data).toBeUndefined();
+    expect(res.base64Data).toBe('PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==');
     global.fetch = originalFetch;
   });