fix(drawer): preserve whitespace when rendering mutant description an…

…d statusReason (#2926) --------- Co-authored-by: Stryker Mutator NPA <[email protected]>
stryker-mutator · Dec 23, 2023 · b23731a · b23731a
1 parent 871c5d7
commit b23731a
Show file tree

Hide file tree

Showing 18 changed files with 15 additions and 2 deletions.
diff --git a/packages/elements/src/components/drawer-mutant/drawer-mutant.component.ts b/packages/elements/src/components/drawer-mutant/drawer-mutant.component.ts
@@ -1,3 +1,4 @@
+import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { MutantModel, TestModel } from 'mutation-testing-metrics';
@@ -10,6 +11,11 @@ import { renderDetailLine, renderEmoji, renderSummaryContainer, renderSummaryLin
 
 const describeTest = (test: TestModel) => `${test.name}${test.sourceFile && test.location ? ` (${describeLocation(test)})` : ''}`;
 
+/**
+ * Wrap so that the whitespace is preserved when rendered
+ */
+const whitespacePreserving = (content: string | TemplateResult) => html`<span class="whitespace-pre-wrap">${content}</span>`;
+
 @customElement('mte-drawer-mutant')
 export class MutationTestReportDrawerMutant extends RealTimeElement {
   @property()
@@ -60,9 +66,14 @@ export class MutationTestReportDrawerMutant extends RealTimeElement {
       )}
       ${renderIf(
         this.mutant?.statusReason?.trim(),
-        renderSummaryLine(html`${renderEmoji('🕵️', 'spy')} ${this.mutant!.statusReason!}`, `Reason for the ${this.mutant!.status} status`),
+        renderSummaryLine(
+          html`${renderEmoji('🕵️', 'spy')} ${whitespacePreserving(this.mutant!.statusReason!)}`,
+          `Reason for the ${this.mutant!.status} status`,
+        ),
       )}
-      ${renderIfPresent(this.mutant?.description, (description) => renderSummaryLine(html`${renderEmoji('📖', 'book')} ${description}`))}`,
+      ${renderIfPresent(this.mutant?.description, (description) =>
+        renderSummaryLine(html`${renderEmoji('📖', 'book')} ${whitespacePreserving(description)}`),
+      )}`,
     );
   }
 

diff --git a/...utant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-linux.png b/...utant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-linux.png
diff --git a/...utant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png b/...utant-view-when-a-mutant-is-opened-should-look-as-expected-1-chromium-win32.png
diff --git a/...mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png b/...mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-linux.png
diff --git a/...mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png b/...mutant-view-when-a-mutant-is-opened-should-look-as-expected-1-firefox-win32.png
diff --git a/...en-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-linux.png b/...en-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-linux.png
diff --git a/...en-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/...en-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-chromium-win32.png
diff --git a/...hen-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/...hen-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-linux.png
diff --git a/...hen-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/...hen-a-mutant-is-opened-should-look-as-expected-in-dark-mode-1-firefox-win32.png
diff --git a/...ed-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png b/...ed-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-linux.png
diff --git a/...ed-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png b/...ed-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-chromium-win32.png
diff --git a/...ned-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png b/...ned-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-linux.png
diff --git a/...ned-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png b/...ned-whe-a1d5a--toggled-should-look-as-expected-in-dark-mode-1-firefox-win32.png
diff --git a/...s-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png b/...s-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-linux.png
diff --git a/...s-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png b/...s-opened-when-read-more-is-toggled-should-look-as-expected-1-chromium-win32.png
diff --git a/...is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png b/...is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-linux.png
diff --git a/...is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png b/...is-opened-when-read-more-is-toggled-should-look-as-expected-1-firefox-win32.png
diff --git a/packages/elements/testResources/test-files-example/mutation-report.json b/packages/elements/testResources/test-files-example/mutation-report.json
@@ -1000,6 +1000,8 @@
           "mutatorName": "ConditionalExpression",
           "replacement": "false",
           "status": "Survived",
+          "statusReason": "First line\nSecond line",
+          "description": "Also first line\nAlso second line",
           "testsCompleted": 2,
           "static": false,
           "coveredBy": ["2", "3"]