From c06a6e1f6360ec59fe127921336563fccdbcdb98 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 18 Oct 2021 20:37:19 -0800
Subject: [PATCH] fix(html): always highlight error code (#9604)

---
 packages/playwright-test/src/reporters/base.ts | 16 ++++++++--------
 packages/playwright-test/src/reporters/raw.ts  |  2 +-
 tests/playwright-test/reporter-html.spec.ts    | 17 +++++++++++++++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/playwright-test/src/reporters/base.ts b/packages/playwright-test/src/reporters/base.ts
index fd05482ce5..34b7334822 100644
--- a/packages/playwright-test/src/reporters/base.ts
+++ b/packages/playwright-test/src/reporters/base.ts
@@ -98,7 +98,7 @@ export class BaseReporter implements Reporter  {
   }
 
   onError(error: TestError) {
-    console.log(formatError(error).message);
+    console.log(formatError(error, colors.enabled));
   }
 
   async onEnd(result: FullResult) {
@@ -219,7 +219,7 @@ export function formatFailure(config: FullConfig, test: TestCase, options: {inde
   lines.push(colors.red(header));
   for (const result of test.results) {
     const resultLines: string[] = [];
-    const { tokens: resultTokens, position } = formatResultFailure(test, result, '    ');
+    const { tokens: resultTokens, position } = formatResultFailure(test, result, '    ', colors.enabled);
     if (!resultTokens.length)
       continue;
     if (result.retry) {
@@ -281,7 +281,7 @@ export function formatFailure(config: FullConfig, test: TestCase, options: {inde
   };
 }
 
-export function formatResultFailure(test: TestCase, result: TestResult, initialIndent: string): FailureDetails {
+export function formatResultFailure(test: TestCase, result: TestResult, initialIndent: string, highlightCode: boolean): FailureDetails {
   const resultTokens: string[] = [];
   if (result.status === 'timedOut') {
     resultTokens.push('');
@@ -293,7 +293,7 @@ export function formatResultFailure(test: TestCase, result: TestResult, initialI
   }
   let error: ErrorDetails | undefined = undefined;
   if (result.error !== undefined) {
-    error = formatError(result.error, test.location.file);
+    error = formatError(result.error, highlightCode, test.location.file);
     resultTokens.push(indent(error.message, initialIndent));
   }
   return {
@@ -325,7 +325,7 @@ function formatTestHeader(config: FullConfig, test: TestCase, indent: string, in
   return pad(header, '=');
 }
 
-function formatError(error: TestError, file?: string): ErrorDetails {
+export function formatError(error: TestError, highlightCode: boolean, file?: string): ErrorDetails {
   const stack = error.stack;
   const tokens = [''];
   let positionInFile: PositionInFile | undefined;
@@ -337,7 +337,7 @@ function formatError(error: TestError, file?: string): ErrorDetails {
     positionInFile = position;
     tokens.push(message);
 
-    const codeFrame = generateCodeFrame(file, position);
+    const codeFrame = generateCodeFrame(highlightCode, file, position);
     if (codeFrame) {
       tokens.push('');
       tokens.push(codeFrame);
@@ -365,7 +365,7 @@ function indent(lines: string, tab: string) {
   return lines.replace(/^(?=.+$)/gm, tab);
 }
 
-function generateCodeFrame(file?: string, position?: PositionInFile): string | undefined {
+function generateCodeFrame(highlightCode: boolean, file?: string, position?: PositionInFile): string | undefined {
   if (!position || !file)
     return;
 
@@ -373,7 +373,7 @@ function generateCodeFrame(file?: string, position?: PositionInFile): string | u
   const codeFrame = codeFrameColumns(
       source,
       { start: position },
-      { highlightCode: colors.enabled }
+      { highlightCode }
   );
 
   return codeFrame;
diff --git a/packages/playwright-test/src/reporters/raw.ts b/packages/playwright-test/src/reporters/raw.ts
index c5e87f391a..be0cb49bb3 100644
--- a/packages/playwright-test/src/reporters/raw.ts
+++ b/packages/playwright-test/src/reporters/raw.ts
@@ -188,7 +188,7 @@ class RawReporter {
       startTime: result.startTime.toISOString(),
       duration: result.duration,
       status: result.status,
-      error: formatResultFailure(test, result, '').tokens.join('').trim(),
+      error: formatResultFailure(test, result, '', true).tokens.join('').trim(),
       attachments: this._createAttachments(result),
       steps: this._serializeSteps(test, result.steps)
     };
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 9f027c5dc4..59618af246 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -246,3 +246,20 @@ test('should include stdio', async ({ runInlineTest, page, showReport }) => {
   await page.locator('text=stderr').click();
   await expect(page.locator('.attachment-body').nth(1)).toHaveText('Third line');
 });
+
+test('should highlight error', async ({ runInlineTest, page, showReport }) => {
+  const result = await runInlineTest({
+    'a.test.js': `
+      const { test } = pwt;
+      test('fails', async ({ page }) => {
+        await expect(true).toBeFalsy();
+      });
+    `,
+  }, { reporter: 'dot,html' });
+  expect(result.exitCode).toBe(1);
+  expect(result.failed).toBe(1);
+
+  await showReport();
+  await page.click('text=fails');
+  await expect(page.locator('.error-message span:has-text("received")').nth(1)).toHaveCSS('color', 'rgb(204, 0, 0)');
+});