Make console log outputs multiline. (#119675) (#119991)

Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Justin Kambic <[email protected]>
elastic · Nov 30, 2021 · f32d326 · f32d326
1 parent 8324c85
commit f32d326
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx b/x-pack/plugins/uptime/public/components/synthetics/executed_step.test.tsx
@@ -82,4 +82,19 @@ describe('ExecutedStep', () => {
     expect(getByText('Console output'));
     expect(getByText(browserConsole[0]));
   });
+
+  it('renders multi-line console output', () => {
+    const browserConsole = ['line1', 'line2', 'line3'];
+
+    const { getByText } = render(
+      <ExecutedStep browserConsoles={browserConsole} index={3} step={step} loading={false} />
+    );
+
+    expect(getByText('Console output'));
+
+    const codeBlock = getByText('line1 line2', { exact: false });
+    expect(codeBlock.innerHTML).toEqual(`line1
+line2
+line3`);
+  });
 });
diff --git a/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx b/x-pack/plugins/uptime/public/components/synthetics/executed_step.tsx
@@ -88,14 +88,7 @@ export const ExecutedStep: FC<ExecutedStepProps> = ({ loading, step, index, brow
             language="javascript"
             initialIsOpen={!isSucceeded}
           >
-            <>
-              {browserConsoles?.map((browserConsole) => (
-                <>
-                  {browserConsole}
-                  <EuiSpacer />
-                </>
-              ))}
-            </>
+            {browserConsoles?.join('\n')}
           </CodeBlockAccordion>
           <EuiSpacer />
           <StepScreenshots step={step} />