Inline tw class and update test file dots

stryker-mutator · Nov 12, 2024 · 1605b19 · 1605b19
1 parent e995048
commit 1605b19
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 35 deletions.
diff --git a/packages/elements/src/components/file/file.component.ts b/packages/elements/src/components/file/file.component.ts
@@ -134,17 +134,19 @@ export class FileComponent extends RealTimeElement {
 
   private renderMutantDots(mutants: MutantModel[] | undefined) {
     return mutants?.length
-      ? mutants.map((mutant) => {
-          const selected = this.selectedMutant?.id === mutant.id;
-          const selectedClass = selected ? 'selected' : '';
-
-          return svg`
-            <svg mutant-id="${mutant.id}" class="mutant-dot ${selectedClass} ${mutant.status}" height="10" width="12">
-              <title>${title(mutant)}</title>
-              
-              ${selected ? svg`<polygon class="mutant-dot-polygon" points="5,10 0,0 10,0"  />` : svg`<circle cx="5" cy="5" r="5" color="red" />`}
-            </svg>`;
-        })
+      ? mutants.map(
+          (mutant) =>
+            svg`<svg mutant-id="${mutant.id}" class="mutant-dot cursor-pointer m-0.5 ${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;
   }
 

diff --git a/packages/elements/src/components/file/file.scss b/packages/elements/src/components/file/file.scss
@@ -31,10 +31,6 @@ $mutant-squiggly: 'Survived', 'NoCoverage';
   }
 }
 
-polygon.mutant-dot-polygon {
-  @apply stroke-gray-800;
-}
-
 @each $status in $mutant-squiggly {
   .mte-selected-#{$status} .mutant.#{$status} {
     /*
@@ -59,14 +55,6 @@ polygon.mutant-dot-polygon {
   }
 }
 
-.mutant-dot {
-  @apply cursor-pointer;
-}
-
-svg.mutant-dot {
-  @apply m-[2px];
-}
-
 .diff-old {
   background-color: var(--mut-diff-del-bg);
 }

diff --git a/packages/elements/src/components/test-file/test-file.component.ts b/packages/elements/src/components/test-file/test-file.component.ts
@@ -158,14 +158,18 @@ 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,
-            ) => {
+            svg`<svg test-id="${test.id}" class="test-dot cursor-pointer m-0.5 ${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" />
+          ${
+            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;

diff --git a/packages/elements/src/components/test-file/test-file.scss b/packages/elements/src/components/test-file/test-file.scss
@@ -11,11 +11,3 @@ $test-themes: (
     @apply #{$theme};
   }
 }
-
-svg.test-dot.selected {
-  @apply fill-sky-400;
-}
-
-svg.test-dot {
-  @apply m-[2px];
-}