feat(elements): make mutant dots styling more clear (#3475)

---------

Co-authored-by: Amzir-A <[email protected]>
Co-authored-by: Hugo van Rijswijk <[email protected]>
Co-authored-by: stryker-mutator[bot] <158062761+stryker-mutator[bot]@users.noreply.github.com>

packages/elements/src/components/drawer-mutant/drawer-mutant.component.ts

@@ -1,6 +1,7 @@
 import type { TemplateResult } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import type { MutantModel, TestModel } from 'mutation-testing-metrics';
 import { describeLocation, getEmojiForStatus, plural, renderIf, renderIfPresent } from '../../lib/html-helpers.js';
 import { tailwind } from '../../style/index.js';
@@ -79,12 +80,13 @@ export class MutationTestReportDrawerMutant extends RealTimeElement {
 
   private renderDetail() {
     return html`<ul class="mb-6 mr-2">
-      ${this.mutant?.killedByTests?.map((test) =>
+      ${map(this.mutant?.killedByTests, (test) =>
         renderDetailLine('This mutant was killed by this test', html`${renderEmoji('🎯', 'killed')} ${describeTest(test)}`),
       )}
-      ${this.mutant?.coveredByTests
-        ?.filter((test) => !this.mutant?.killedByTests?.includes(test))
-        .map((test) => renderDetailLine('This mutant was covered by this test', html`${renderEmoji('☂️', 'umbrella')} ${describeTest(test)}`))}
+      ${map(
+        this.mutant?.coveredByTests?.filter((test) => !this.mutant?.killedByTests?.includes(test)),
+        (test) => renderDetailLine('This mutant was covered by this test', html`${renderEmoji('☂️', 'umbrella')} ${describeTest(test)}`),
+      )}
     </ul>`;
   }
 }

packages/elements/src/components/drawer-test/drawer-test.component.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import type { MutantModel, TestModel } from 'mutation-testing-metrics';
 import { TestStatus } from 'mutation-testing-metrics';
 import { describeLocation, getEmojiForTestStatus, plural, renderIfPresent } from '../../lib/html-helpers.js';
@@ -64,12 +65,13 @@ export class MutationTestReportDrawerTestComponent extends RealTimeElement {
   }
   private renderDetail() {
     return html`<ul class="mb-6 mr-2">
-      ${this.test?.killedMutants?.map((mutant) =>
+      ${map(this.test?.killedMutants, (mutant) =>
         renderDetailLine('This test killed this mutant', html`${renderEmoji('🎯', 'killed')} ${describeMutant(mutant)}`),
       )}
-      ${this.test?.coveredMutants
-        ?.filter((mutant) => !this.test?.killedMutants?.includes(mutant))
-        .map((mutant) => renderDetailLine('This test covered this mutant', html`${renderEmoji('☂️', 'umbrella')} ${describeMutant(mutant)}`))}
+      ${map(
+        this.test?.coveredMutants?.filter((mutant) => !this.test?.killedMutants?.includes(mutant)),
+        (mutant) => renderDetailLine('This test covered this mutant', html`${renderEmoji('☂️', 'umbrella')} ${describeMutant(mutant)}`),
+      )}
     </ul>`;
   }
 }

packages/elements/src/components/file/file.component.ts

@@ -1,6 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { html, nothing, svg, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import type { FileUnderTestModel, MutantModel } from 'mutation-testing-metrics';
 import type { MutantResult, MutantStatus } from 'mutation-testing-report-schema/api';
@@ -9,10 +10,10 @@ import type { MteCustomEvent } from '../../lib/custom-events.js';
 import { createCustomEvent } from '../../lib/custom-events.js';
 import { escapeHtml, getContextClassForStatus, getEmojiForStatus, scrollToCodeFragmentIfNeeded } from '../../lib/html-helpers.js';
 import { prismjs, tailwind } from '../../style/index.js';
+import { RealTimeElement } from '../real-time-element.js';
 import type { StateFilter } from '../state-filter/state-filter.component.js';
 import style from './file.scss?inline';
 import { renderDots, renderLine } from './util.js';
-import { RealTimeElement } from '../real-time-element.js';
 
 const diffOldClass = 'diff-old';
 const diffNewClass = 'diff-new';
@@ -105,7 +106,7 @@ export class FileComponent extends RealTimeElement {
         class="line-numbers ${this.selectedMutantStates.map((state) => `mte-selected-${state}`).join(' ')} flex rounded-md py-4"
       >
         <code ${ref(this.codeRef)} class="flex language-${this.model.language}">
-          <table>${this.lines.map((line, lineIndex) => {
+          <table>${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
         const mutantDots = this.renderMutantDots(mutantLineMap.get(lineNr));
         const finalMutants = this.lines.length === lineNr ? renderFinalMutants(lineNr) : nothing;
@@ -136,12 +137,16 @@ export class FileComponent extends RealTimeElement {
     return mutants?.length
       ? mutants.map(
           (mutant) =>
-            svg`<svg mutant-id="${mutant.id}" class="mutant-dot ${
-              this.selectedMutant?.id === mutant.id ? 'selected' : mutant.status
-            }" height="10" width="12">
-          <title>${title(mutant)}</title>
-          <circle cx="5" cy="5" r="5" />
-          </svg>`,
+            svg`<svg mutant-id="${mutant.id}" class="mutant-dot ${this.selectedMutant?.id === mutant.id ? 'selected' : ''} ${mutant.status}" height="10" width="12">
+              <title>${title(mutant)}</title>
+              ${
+                this.selectedMutant?.id === mutant.id
+                  ? // Triangle pointing down
+                    svg`<path class="stroke-gray-800" d="M5,10 L0,0 L10,0 Z" />`
+                  : // Circle
+                    svg`<circle cx="5" cy="5" r="5" />`
+              }
+            </svg>`,
         )
       : nothing;
   }

packages/elements/src/components/file/file.scss

@@ -32,10 +32,6 @@ $mutant-squiggly: 'Survived', 'NoCoverage';
   }
 }
 
-svg.mutant-dot.selected {
-  @apply fill-sky-400;
-}
-
 @each $status in $mutant-squiggly {
   .mte-selected-#{$status} .mutant.#{$status} {
     /*
@@ -61,11 +57,7 @@ svg.mutant-dot.selected {
 }
 
 .mutant-dot {
-  @apply cursor-pointer;
-}
-
-svg.mutant-dot {
-  @apply m-[2px];
+  @apply m-0.5 cursor-pointer;
 }
 
 .diff-old {

packages/elements/src/components/metrics-table/metrics-table.component.ts

@@ -2,6 +2,7 @@ import type { PropertyValues } from 'lit';
 import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import type { MetricsResult } from 'mutation-testing-metrics';
 import type { Thresholds } from 'mutation-testing-report-schema/api';
@@ -119,7 +120,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
       if (model.file) {
         return nothing;
       } else {
-        return model.childResults.map((childResult) => {
+        return map(model.childResults, (childResult) => {
           const nameParts: string[] = [childResult.name];
           while (!childResult.file && childResult.childResults.length === 1) {
             childResult = childResult.childResults[0];
@@ -143,7 +144,7 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
             : html`<span class="py-4">${row.name}</span>`}
         </div>
       </td>
-      ${this.columns.map((column) => this.renderCell(column, row.metrics))}
+      ${map(this.columns, (column) => this.renderCell(column, row.metrics))}
     </tr>`;
   }
 

packages/elements/src/components/test-file/test-file.component.ts

@@ -6,6 +6,7 @@ import type { TestFileModel, TestModel } from 'mutation-testing-metrics';
 import { TestStatus } from 'mutation-testing-metrics';
 import style from './test-file.scss?inline';
 
+import { map } from 'lit/directives/map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { determineLanguage, gte, highlightCode, transformHighlightedLines } from '../../lib/code-helpers.js';
 import type { MteCustomEvent } from '../../lib/custom-events.js';
@@ -14,8 +15,8 @@ import { getContextClassForTestStatus, getEmojiForTestStatus, scrollToCodeFragme
 import { prismjs, tailwind } from '../../style/index.js';
 import '../../style/prism-plugins';
 import { renderDots, renderLine } from '../file/util.js';
-import type { StateFilter } from '../state-filter/state-filter.component.js';
 import { RealTimeElement } from '../real-time-element.js';
+import type { StateFilter } from '../state-filter/state-filter.component.js';
 
 @customElement('mte-test-file')
 export class TestFileComponent extends RealTimeElement {
@@ -143,7 +144,7 @@ export class TestFileComponent extends RealTimeElement {
         this.model.name,
       )}">
       <table>
-        ${this.lines.map((line, lineIndex) => {
+        ${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
         const testDots = this.renderTestDots(testsByLine.get(lineNr));
         const finalTests = this.lines.length === lineNr ? renderFinalTests(lineNr) : nothing;
@@ -158,15 +159,25 @@ export class TestFileComponent extends RealTimeElement {
     return tests?.length
       ? tests.map(
           (test) =>
-            svg`<svg test-id="${test.id}" class="cursor-pointer test-dot ${this.selectedTest === test ? 'selected' : test.status}" @click=${(
-              ev: MouseEvent,
-            ) => {
-              ev.stopPropagation();
-              this.toggleTest(test);
-            }} height="10" width="12">
-          <title>${title(test)}</title>
-          <circle cx="5" cy="5" r="5" />
-          </svg>`,
+            svg`<svg
+              test-id="${test.id}"
+              class="test-dot ${this.selectedTest?.id === test.id ? 'selected' : ''} ${test.status}"
+              @click=${(ev: MouseEvent) => {
+                ev.stopPropagation();
+                this.toggleTest(test);
+              }}
+              height="10"
+              width="12"
+            >
+              <title>${title(test)}</title>
+              ${
+                this.selectedTest === test
+                  ? // Triangle pointing down
+                    svg`<path class="stroke-gray-800" d="M5,10 L0,0 L10,0 Z" />`
+                  : // Circle
+                    svg`<circle cx="5" cy="5" r="5" />`
+              }
+            </svg>`,
         )
       : nothing;
   }

packages/elements/src/components/test-file/test-file.scss

@@ -12,10 +12,6 @@ $test-themes: (
   }
 }
 
-svg.test-dot.selected {
-  @apply fill-sky-400;
-}
-
-svg.test-dot {
-  @apply m-[2px];
+.test-dot {
+  @apply m-0.5 cursor-pointer;
 }

packages/elements/test/unit/components/test-file.component.spec.ts

@@ -159,7 +159,7 @@ describe(TestFileComponent.name, () => {
       await sut.whenStable();
 
       expect(sut.$('code tr.line:nth-child(2) .code').innerHTML).contains(
-        '<svg height="10" width="12" test-id="spec-1" class="cursor-pointer test-dot NotCovering">',
+        `<svg height="10" width="12" test-id="spec-1" class="test-dot  NotCovering">`,
       );
     });