mutation-testing-elements - npm Package Compare versions

Comparing version 1.7.10 to 1.7.11

dist/components/app/app.component.js

@@ -86,3 +86,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     getTheme() {
-        var _a;
         // 1. check local storage
@@ -94,3 +93,3 @@ const theme = isLocalStorageAvailable() && localStorage.getItem('mutation-testing-elements-theme');
         }
-        else if (window.matchMedia && ((_a = window.matchMedia('(prefers-color-scheme: dark)')) === null || _a === void 0 ? void 0 : _a.matches)) {
+        else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches) {
             return 'dark';
@@ -159,2 +158,3 @@ // 3. default is light
                 ? html `<mte-mutant-view
+                    id="mte-mutant-view"
                     .result="${this.context.result}"
@@ -166,3 +166,3 @@ .thresholds="${this.report.thresholds}"
               ${this.context.view === 'test' && this.context.result
-                ? html `<mte-test-view .result="${this.context.result}" .path="${this.path}"></mte-test-view>`
+                ? html `<mte-test-view id="mte-test-view" .result="${this.context.result}" .path="${this.path}"></mte-test-view>`
                 : ''}
@@ -187,11 +187,26 @@ </div>
     renderTabs() {
-        var _a;
-        if ((_a = this.rootModel) === null || _a === void 0 ? void 0 : _a.testMetrics) {
+        if (this.rootModel?.testMetrics) {
+            const mutantsActive = this.context.view === 'mutant';
+            const testsActive = this.context.view === 'test';
             return html `<nav>
         <ul class="nav nav-tabs border-bottom-0" role="tablist">
-          <li class="nav-item">
-            <a class="nav-link ${this.context.view === 'mutant' ? 'active' : ''}" role="tab" href="${toAbsoluteUrl('mutant')}">👽 Mutants</a>
+          <li class="nav-item" role="presentation">
+            <a
+              class="nav-link ${mutantsActive ? 'active' : ''}"
+              role="tab"
+              href="${toAbsoluteUrl('mutant')}"
+              aria-selected="${mutantsActive}"
+              aria-controls="mte-mutant-view"
+              >👽 Mutants</a
+            >
           </li>
-          <li class="nav-item">
-            <a class="nav-link ${this.context.view === 'test' ? 'active' : ''}" role="tab" href="${toAbsoluteUrl('test')}">🧪 Tests</a>
+          <li class="nav-item" role="presentation">
+            <a
+              class="nav-link ${testsActive ? 'active' : ''}"
+              role="tab"
+              href="${toAbsoluteUrl('test')}"
+              aria-selected="${testsActive}"
+              aria-controls="mte-test-view"
+              >🧪 Tests</a
+            >
           </li>
@@ -198,0 +213,0 @@ </ul>

dist/components/drawer-mutant/drawer-mutant.component.js

@@ -20,7 +20,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     render() {
-        var _a, _b;
-        return html `<mte-drawer ?hasDetail="${((_a = this.mutant) === null || _a === void 0 ? void 0 : _a.killedByTests) || ((_b = this.mutant) === null || _b === void 0 ? void 0 : _b.coveredByTests)}" .mode="${this.mode}">
+        return html `<mte-drawer ?hasDetail="${this.mutant?.killedByTests || this.mutant?.coveredByTests}" .mode="${this.mode}">
       ${renderIfPresent(this.mutant, (mutant) => html `
           <span slot="header"
-            >${mutant.id} ${getEmojiForStatus(mutant.status)} ${mutant.mutatorName} ${mutant.status}
+            >${getEmojiForStatus(mutant.status)} ${mutant.mutatorName} ${mutant.status}
             (${mutant.location.start.line}:${mutant.location.start.column})</span
@@ -34,27 +33,24 @@ >
     renderSummary() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `<div class="d-flex mx-2">
-      ${((_b = (_a = this.mutant) === null || _a === void 0 ? void 0 : _a.killedByTests) === null || _b === void 0 ? void 0 : _b[0])
+      ${this.mutant?.killedByTests?.[0]
             ? html `<h6 class="pe-4"
-            >🎯 Killed by: ${(_c = this.mutant.killedByTests) === null || _c === void 0 ? void 0 : _c[0].name}
+            >🎯 Killed by: ${this.mutant.killedByTests?.[0].name}
             ${this.mutant.killedByTests.length > 1 ? html `(and ${this.mutant.killedByTests.length - 1} more)` : undefined}</h6
           >`
             : undefined}
-      ${renderIf((_d = this.mutant) === null || _d === void 0 ? void 0 : _d.static, html `<h6 class="pe-4">🗿 Static mutant</h6>`)}
-      ${renderIfPresent((_e = this.mutant) === null || _e === void 0 ? void 0 : _e.coveredByTests, (coveredTests) => {
-            var _a;
-            return html `<h6 class="pe-4"
+      ${renderIf(this.mutant?.static, html `<h6 class="pe-4">🗿 Static mutant</h6>`)}
+      ${renderIfPresent(this.mutant?.coveredByTests, (coveredTests) => html `<h6 class="pe-4"
             >☂️ Covered by ${coveredTests.length} test${plural(coveredTests)}
-            ${renderIf(((_a = this.mutant) === null || _a === void 0 ? void 0 : _a.status) === MutantStatus.Survived, '(yet still survived)')}</h6
-          >`;
-        })}
-      ${renderIf((_g = (_f = this.mutant) === null || _f === void 0 ? void 0 : _f.statusReason) === null || _g === void 0 ? void 0 : _g.trim(), html `<h6 class="pe-4" title="Reason for the ${this.mutant.status} status">🕵️ ${this.mutant.statusReason}</h6>`)}
-      ${renderIfPresent((_h = this.mutant) === null || _h === void 0 ? void 0 : _h.description, (description) => html `<h6 class="pe-4">📖 ${description}</h6>`)}
+            ${renderIf(this.mutant?.status === MutantStatus.Survived, '(yet still survived)')}</h6
+          >`)}
+      ${renderIf(this.mutant?.statusReason?.trim(), html `<h6 class="pe-4" title="Reason for the ${this.mutant.status} status">🕵️ ${this.mutant.statusReason}</h6>`)}
+      ${renderIfPresent(this.mutant?.description, (description) => html `<h6 class="pe-4">📖 ${description}</h6>`)}
     </div>`;
     }
     renderDetail() {
-        var _a, _b, _c, _d;
         return html `<ul class="list-group">
-      ${(_b = (_a = this.mutant) === null || _a === void 0 ? void 0 : _a.killedByTests) === null || _b === void 0 ? void 0 : _b.map((test) => html `<li title="This mutant was killed by this test" class="list-group-item">🎯 ${describeTest(test)}</li>`)}
-      ${(_d = (_c = this.mutant) === null || _c === void 0 ? void 0 : _c.coveredByTests) === null || _d === void 0 ? void 0 : _d.filter((test) => { var _a, _b; return !((_b = (_a = this.mutant) === null || _a === void 0 ? void 0 : _a.killedByTests) === null || _b === void 0 ? void 0 : _b.includes(test)); }).map((test) => html `<li class="list-group-item" title="This mutant was covered by this test">☂️ ${describeTest(test)}</li>`)}
+      ${this.mutant?.killedByTests?.map((test) => html `<li title="This mutant was killed by this test" class="list-group-item">🎯 ${describeTest(test)}</li>`)}
+      ${this.mutant?.coveredByTests
+            ?.filter((test) => !this.mutant?.killedByTests?.includes(test))
+            .map((test) => html `<li class="list-group-item" title="This mutant was covered by this test">☂️ ${describeTest(test)}</li>`)}
     </ul>`;
@@ -61,0 +57,0 @@ }

dist/components/drawer-test/drawer-test.component.js

@@ -20,4 +20,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     render() {
-        var _a, _b;
-        return html `<mte-drawer ?hasDetail="${((_a = this.test) === null || _a === void 0 ? void 0 : _a.killedMutants) || ((_b = this.test) === null || _b === void 0 ? void 0 : _b.coveredMutants)}" .mode="${this.mode}">
+        return html `<mte-drawer ?hasDetail="${this.test?.killedMutants || this.test?.coveredMutants}" .mode="${this.mode}">
       ${renderIfPresent(this.test, (test) => html `
@@ -34,24 +33,21 @@ <span slot="header"
     renderSummary() {
-        var _a, _b, _c, _d;
         return html `<div class="d-flex mx-2">
-      ${((_b = (_a = this.test) === null || _a === void 0 ? void 0 : _a.killedMutants) === null || _b === void 0 ? void 0 : _b[0])
+      ${this.test?.killedMutants?.[0]
             ? html `<h6 class="pe-4"
-            >🎯 Killed: ${describeMutant((_c = this.test.killedMutants) === null || _c === void 0 ? void 0 : _c[0])}
+            >🎯 Killed: ${describeMutant(this.test.killedMutants?.[0])}
             ${this.test.killedMutants.length > 1 ? html `(and ${this.test.killedMutants.length - 1} more)` : ''}</h6
           >`
             : ''}
-      ${renderIfPresent((_d = this.test) === null || _d === void 0 ? void 0 : _d.coveredMutants, (coveredMutants) => {
-            var _a;
-            return html `<h6 class="pe-4">
+      ${renderIfPresent(this.test?.coveredMutants, (coveredMutants) => html `<h6 class="pe-4">
             ☂️ Covered ${coveredMutants.length} mutant${plural(coveredMutants)}
-            ${renderIf(((_a = this.test) === null || _a === void 0 ? void 0 : _a.status) === TestStatus.Covering, "(yet didn't kill any of them)")}
-          </h6>`;
-        })}
+            ${renderIf(this.test?.status === TestStatus.Covering, "(yet didn't kill any of them)")}
+          </h6>`)}
     </div>`;
     }
     renderDetail() {
-        var _a, _b, _c, _d;
         return html `<ul class="list-group">
-      ${(_b = (_a = this.test) === null || _a === void 0 ? void 0 : _a.killedMutants) === null || _b === void 0 ? void 0 : _b.map((mutant) => html `<li title="This test killed this mutant" class="list-group-item">🎯 ${describeMutant(mutant)}</li>`)}
-      ${(_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.coveredMutants) === null || _d === void 0 ? void 0 : _d.filter((mutant) => { var _a, _b; return !((_b = (_a = this.test) === null || _a === void 0 ? void 0 : _a.killedMutants) === null || _b === void 0 ? void 0 : _b.includes(mutant)); }).map((mutant) => html `<li class="list-group-item" title="This test covered this mutant">☂️ ${describeMutant(mutant)}</li>`)}
+      ${this.test?.killedMutants?.map((mutant) => html `<li title="This test killed this mutant" class="list-group-item">🎯 ${describeMutant(mutant)}</li>`)}
+      ${this.test?.coveredMutants
+            ?.filter((mutant) => !this.test?.killedMutants?.includes(mutant))
+            .map((mutant) => html `<li class="list-group-item" title="This test covered this mutant">☂️ ${describeMutant(mutant)}</li>`)}
     </ul>`;
@@ -58,0 +54,0 @@ }

dist/components/file-icon/file-icon.component.js

@@ -20,4 +20,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     get cssClass() {
-        var _a, _b;
-        return `${this.isFile ? (_b = (_a = this.language) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : 'unknown' : 'directory'}${this.isTestFile ? ' test' : ''}`;
+        return `${this.isFile ? this.language?.toString() ?? 'unknown' : 'directory'}${this.isTestFile ? ' test' : ''}`;
     }
@@ -24,0 +23,0 @@ render() {

dist/components/file/file.component.js

@@ -111,9 +111,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     renderMutantDots(mutants) {
-        return html `${mutants === null || mutants === void 0 ? void 0 : mutants.map((mutant) => {
-            var _a;
-            return svg `<svg mutant-id="${mutant.id}" class="mutant-dot ${((_a = this.selectedMutant) === null || _a === void 0 ? void 0 : _a.id) === mutant.id ? 'selected' : mutant.status}" height="10" width="10">
+        return html `${mutants?.map((mutant) => svg `<svg mutant-id="${mutant.id}" class="mutant-dot ${this.selectedMutant?.id === mutant.id ? 'selected' : mutant.status}" height="10" width="10">
           <title>${title(mutant)}</title>
           <circle cx="5" cy="5" r="5" />
-          </svg>`;
-        })}`;
+          </svg>`)}`;
     }
@@ -243,5 +240,4 @@ toggleMutant(mutant) {
 function clearSelection() {
-    var _a;
-    (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+    window.getSelection()?.removeAllRanges();
 }
 //# sourceMappingURL=file.component.js.map

dist/components/metrics-table/metrics-table.component.d.ts

@@ -15,3 +15,3 @@ import { LitElement } from 'lit';
     category: ColumnCategory;
-    isHeader?: true;
+    isBold?: true;
 }
@@ -18,0 +18,0 @@ export declare class MutationTestReportTestMetricsTable<TFile, TMetric> extends LitElement {

dist/components/metrics-table/metrics-table.component.js

@@ -44,3 +44,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     renderTableHead(column) {
-        const header = column.tooltip ? html `<mte-tooltip title="${column.tooltip}">${column.label}</mte-tooltip>` : html `<span>${column.label}</span>`;
+        const id = `tooltip-${column.key.toString()}`;
+        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') {
@@ -94,2 +97,4 @@ return html ` <th colspan="2"> ${header} </th>`;
                   aria-valuemax="100"
+                  aria-describedby="tooltip-mutationScore"
+                  title="${column.label}"
                   style="${progressBarStyle}"
@@ -104,3 +109,3 @@ >
         }
-        return column.isHeader ? html `<th class="text-center">${value}</th>` : html `<td class="text-center">${value}</td>`;
+        return html `<td class="text-center ${column.isBold ? 'fw-bold' : ''}" aria-describedby="${`tooltip-${column.key.toString()}`}">${value}</td>`;
     }
@@ -107,0 +112,0 @@ determineColoringClass(mutationScore) {

dist/components/mutant-view/mutant-view.js

@@ -114,3 +114,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         width: 'large',
-        isHeader: true,
+        isBold: true,
     },
@@ -123,3 +123,3 @@ {
         width: 'large',
-        isHeader: true,
+        isBold: true,
     },
@@ -132,5 +132,5 @@ {
         width: 'large',
-        isHeader: true,
+        isBold: true,
     },
 ];
 //# sourceMappingURL=mutant-view.js.map

dist/components/test-file/test-file.component.js

@@ -76,15 +76,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             return html `<div class="list-group">
-        ${testsToRenderInTheList.map((test) => {
-                var _a;
-                return html `<button
+        ${testsToRenderInTheList.map((test) => html `<button
             type="button"
             test-id="${test.id}"
             @click=${(ev) => {
-                    ev.stopPropagation();
-                    this.toggleTest(test);
-                }}
-            class="mte-test-list-group-item list-group-item list-group-item-action${((_a = this.selectedTest) === null || _a === void 0 ? void 0 : _a.id) === test.id ? ' active' : ''}"
+                ev.stopPropagation();
+                this.toggleTest(test);
+            }}
+            class="mte-test-list-group-item list-group-item list-group-item-action${this.selectedTest?.id === test.id ? ' active' : ''}"
             ><span class="emblem">${getEmojiForTestStatus(test.status)}</span> ${test.name} [${test.status}]</button
-          >`;
-            })}
+          >`)}
       </div>`;
@@ -95,4 +92,3 @@ }
     renderCode() {
-        var _a;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.source) {
+        if (this.model?.source) {
             const testsByLine = new Map();
@@ -125,3 +121,3 @@ for (const test of this.tests) {
     renderTestDots(tests) {
-        return html `${tests === null || tests === void 0 ? void 0 : tests.map((test) => svg `<svg test-id="${test.id}" class="test-dot ${this.selectedTest === test ? 'selected' : test.status}" @click=${(ev) => {
+        return html `${tests?.map((test) => svg `<svg test-id="${test.id}" class="test-dot ${this.selectedTest === test ? 'selected' : test.status}" @click=${(ev) => {
             ev.stopPropagation();
@@ -128,0 +124,0 @@ this.toggleTest(test);

dist/components/test-view/test-view.js

@@ -76,4 +76,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     },
-    { key: 'total', label: 'Total tests', width: 'large', category: 'number', isHeader: true },
+    { key: 'total', label: 'Total tests', width: 'large', category: 'number', isBold: true },
 ];
 //# sourceMappingURL=test-view.js.map

dist/lib/code-helpers.js

@@ -55,4 +55,3 @@ import { highlight, languages } from 'prismjs/components/prism-core';
 export function highlightCode(code, fileName) {
-    var _a;
-    const language = (_a = determineLanguage(fileName)) !== null && _a !== void 0 ? _a : 'plain';
+    const language = determineLanguage(fileName) ?? 'plain';
     let highlightLanguage = language;
@@ -154,3 +153,3 @@ if (language === ProgrammingLanguage.vue) {
         }
-        return `<${elementName}${Object.entries(attributes !== null && attributes !== void 0 ? attributes : {}).reduce((acc, [name, value]) => (value === undefined ? `${acc} ${name}` : `${acc} ${name}="${value}"`), '')}>`;
+        return `<${elementName}${Object.entries(attributes ?? {}).reduce((acc, [name, value]) => (value === undefined ? `${acc} ${name}` : `${acc} ${name}="${value}"`), '')}>`;
     }
@@ -157,0 +156,0 @@ function endLine() {

dist/mutation-test-elements.js.LICENSE.txt

@@ -1,16 +0,1 @@
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
 /**
@@ -35,2 +20,8 @@ * @license
 /**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
  * Prism: Lightweight, robust, elegant syntax highlighting
@@ -37,0 +28,0 @@ *

package.json

 {
   "name": "mutation-testing-elements",
-  "version": "1.7.10",
+  "version": "1.7.11",
   "description": "A suite of web components for a mutation testing report.",
@@ -31,7 +31,6 @@ "unpkg": "dist/mutation-test-elements.js",
     "@types/prismjs": "^1.16.1",
-    "mutation-testing-metrics": "1.7.10",
+    "mutation-testing-metrics": "1.7.11",
     "mutation-testing-report-schema": "1.7.10",
     "prismjs": "^1.21.0"
-  },
-  "gitHead": "1df68c02ccfcbcb9499524f22183c1950d50f1ac"
+  }
 }

No alert changes

Improved metrics

Lines of code

3290

increased by0.86%

Worsened metrics

Total package byte prevSize

387218

decreased by-6.34%

Number of package files

92

decreased by-2.13%

No dependency changes