feat(report): add Mutation Coverage based on Covered code column (#3310)

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

@@ -23,6 +23,7 @@ export interface Column<TMetric> {
   width?: TableWidth;
   category: ColumnCategory;
   isBold?: true;
+  group?: string;
 }
 
 @customElement('mte-metrics-table')
@@ -67,9 +68,11 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
   }
 
   private renderTableHeadRow() {
+    const nonMutationScoreColumns = this.columns.filter((column) => column.group !== 'Mutation score');
+    const mutationScoreColumns = this.columns.filter((column) => column.group === 'Mutation score');
     return html`<thead class="border-b border-gray-200 text-center text-sm">
       <tr>
-        <th scope="col" class="px-4 py-4">
+        <th rowspan="2" scope="col" class="px-4 py-4">
           <div class="flex items-center justify-around">
             <span>File / Directory</span
             ><a
@@ -81,8 +84,16 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
             >
           </div>
         </th>
+        ${mutationScoreColumns.length>0 ? html`<th colspan="4" class="px-2 even:bg-gray-100">Mutation Score</th>`:``}
         ${repeat(
-          this.columns,
+          nonMutationScoreColumns,
+          (column) => column.key,
+          (column) => this.renderTableHead(column),
+        )}
+      </tr>
+      <tr>
+       ${repeat(
+          mutationScoreColumns,
           (column) => column.key,
           (column) => this.renderTableHead(column),
         )}
@@ -95,10 +106,10 @@ export class MutationTestReportTestMetricsTable<TFile, TMetric> extends RealTime
     const header = column.tooltip
       ? html`<mte-tooltip title="${column.tooltip}" id="${id}">${column.label}</mte-tooltip>`
       : html`<span id="${id}">${column.label}</span>`;
-    if (column.category === 'percentage') {
-      return html` <th colspan="2" class="px-2 even:bg-gray-100"> ${header} </th>`;
+    if (column.group) {
+      return html` <th colspan="2" class="px-2 bg-gray-200"> ${header} </th>`;
     }
-    return html`<th class="w-24 px-2 even:bg-gray-100 2xl:w-28">
+    return html`<th rowspan="2" class="w-24 px-2 even:bg-gray-100 2xl:w-28">
       <div class="inline-block">${header}</div>
     </th>`;
   }

packages/elements/src/components/mutant-view/mutant-view.ts

@@ -65,9 +65,17 @@ export class MutationTestReportMutantViewComponent extends RealTimeElement {
 const COLUMNS: Column<Metrics>[] = [
   {
     key: 'mutationScore',
-    label: 'Mutation score',
+    label: 'Of total',
     tooltip: 'The percentage of mutants that were detected. The higher, the better!',
     category: 'percentage',
+    group: 'Mutation score'
+  },
+  {
+    key: 'mutationScoreBasedOnCoveredCode',
+    label: 'Of covered',
+    tooltip: 'Mutation score based on only the code covered by tests',
+    category: 'percentage',
+    group: 'Mutation score'
   },
   {
     key: 'killed',
@@ -98,7 +106,7 @@ const COLUMNS: Column<Metrics>[] = [
     label: 'Ignored',
     tooltip: "These mutants weren't tested because they are ignored. Either by user action, or for another reason.",
     category: 'number',
-  },
+  },  
   {
     key: 'runtimeErrors',
     label: 'Runtime errors',

packages/elements/test/integration/directoryReport.it.spec.ts

@@ -24,11 +24,13 @@ test.describe('Directory report page', () => {
       await Promise.all([
         row.progressBar().expectPercentage('8.70'),
         expect(row.mutationScore()).toHaveText('8.70'),
+        row.testStrengthProgressBar().expectPercentage('66.67'),        
+        expect(row.mutationScoreBasedOnCoveredCode()).toHaveText('66.67'),
         expect(row.killed()).toHaveText('2'),
         expect(row.survived()).toHaveText('1'),
         expect(row.timeout()).toHaveText('0'),
         expect(row.noCoverage()).toHaveText('20'),
-        expect(row.ignored()).toHaveText('0'),
+        expect(row.ignored()).toHaveText('0'),        
         expect(row.runtimeErrors()).toHaveText('0'),
         expect(row.compileErrors()).toHaveText('3'),
         expect(row.totalDetected()).toHaveText('2'),

packages/elements/test/integration/po/ResultTableRow.po.ts

@@ -7,14 +7,16 @@ export class ResultTableRow extends PageObject {
   public name = () => this.nameTableElement().innerText();
   public progressBar = () => new ProgressBar(this.$('td:nth-child(2)>div.rounded-full'), this.browser);
   public mutationScore = () => this.$('td:nth-child(3)');
-  public killed = () => this.$('td:nth-child(4)');
-  public survived = () => this.$('td:nth-child(5)');
-  public timeout = () => this.$('td:nth-child(6)');
-  public noCoverage = () => this.$('td:nth-child(7)');
-  public ignored = () => this.$('td:nth-child(8)');
-  public runtimeErrors = () => this.$('td:nth-child(9)');
-  public compileErrors = () => this.$('td:nth-child(10)');
-  public totalDetected = () => this.$('td:nth-child(11)');
-  public totalUndetected = () => this.$('td:nth-child(12)');
-  public totalMutants = () => this.$('td:nth-child(13)');
+  public testStrengthProgressBar = () => new ProgressBar(this.$('td:nth-child(4)>div.rounded-full'), this.browser);
+  public mutationScoreBasedOnCoveredCode = () => this.$('td:nth-child(5)');
+  public killed = () => this.$('td:nth-child(6)');
+  public survived = () => this.$('td:nth-child(7)');
+  public timeout = () => this.$('td:nth-child(8)');
+  public noCoverage = () => this.$('td:nth-child(9)');
+  public ignored = () => this.$('td:nth-child(10)');  
+  public runtimeErrors = () => this.$('td:nth-child(11)');
+  public compileErrors = () => this.$('td:nth-child(12)');
+  public totalDetected = () => this.$('td:nth-child(13)');
+  public totalUndetected = () => this.$('td:nth-child(14)');
+  public totalMutants = () => this.$('td:nth-child(15)');
 }

packages/elements/test/unit/components/mutant-view.component.spec.ts

@@ -29,9 +29,17 @@ describe(MutationTestReportMutantViewComponent.name, () => {
       const expectedColumns: Column<Metrics>[] = [
         {
           key: 'mutationScore',
-          label: 'Mutation score',
+          label: 'Of total',
           tooltip: 'The percentage of mutants that were detected. The higher, the better!',
           category: 'percentage',
+          group: 'Mutation score'
+        },
+        {
+          key: 'mutationScoreBasedOnCoveredCode',
+          label: 'Of covered',
+          tooltip: 'Mutation score based on only the code covered by tests',
+          category: 'percentage',
+          group: 'Mutation score'
         },
         {
           key: 'killed',

packages/elements/test/unit/components/totals.component.spec.ts

@@ -10,7 +10,20 @@ describe(MutationTestReportTestMetricsTable.name, () => {
   beforeEach(async () => {
     sut = new CustomElementFixture('mte-metrics-table');
     sut.element.columns = [
-      { key: 'mutationScore', label: 'Mutation score', category: 'percentage' },
+      {
+        key: 'mutationScore',
+        label: 'Total',
+        tooltip: 'The percentage of mutants that were detected. The higher, the better!',
+        category: 'percentage',
+        group: 'Mutation score'
+      },
+      {
+        key: 'mutationScoreBasedOnCoveredCode',
+        label: 'Of covered',
+        tooltip: 'Mutation score based on only the code covered by tests',
+        category: 'percentage',
+        group: 'Mutation score'
+      },
       { key: 'killed', label: '# Killed', category: 'number' },
       { key: 'survived', label: '# Survived', category: 'number' },
       { key: 'timeout', label: '# Timeout', category: 'number' },
@@ -40,8 +53,8 @@ describe(MutationTestReportTestMetricsTable.name, () => {
     await sut.whenStable();
     const table = sut.$('table');
     expect(table).ok;
-    expect(table.querySelectorAll('thead th')).lengthOf(12);
-    expect(table.querySelectorAll('tbody th, tbody td')).lengthOf(13);
+    expect(table.querySelectorAll('thead th')).lengthOf(14);
+    expect(table.querySelectorAll('tbody th, tbody td')).lengthOf(15);
   });
 
   it('should show a table with a 3 rows for a directory result with 2 directories and one file', async () => {