feat(file-picker): add fuzzy search to file picker (#3517)

stryker-mutator · Nov 22, 2024 · 577c6c1 · 577c6c1
1 parent 3c79cd1
commit 577c6c1
Show file tree

Hide file tree

Showing 38 changed files with 299 additions and 200 deletions.
diff --git a/libs/eslint-plugin-mte/index.js b/libs/eslint-plugin-mte/index.js
@@ -22,12 +22,11 @@ export default [
       reportUnusedDisableDirectives: 'error',
     },
     rules: {
+      eqeqeq: 'error',
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
-      // Not useful for a lot of stuff, but mainly `.shadowRoot`
-      '@typescript-eslint/no-non-null-assertion': 'off',
     },
   },
   {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/elements/.vscode/launch.json b/packages/elements/.vscode/launch.json
@@ -18,6 +18,29 @@
       "url": "http://localhost:5173",
       "webRoot": "${workspaceFolder}",
       "sourceMaps": true
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Run unit tests",
+      "program": "${workspaceFolder:parent}/node_modules/vitest/vitest.mjs",
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
+    },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to unit test browser",
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug unit tests",
+      "configurations": ["Attach to unit test browser", "Run unit tests"],
+      "stopAll": true
     }
   ]
 }
diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -59,6 +59,7 @@
     "esbuild": "0.24.0",
     "eslint-config-mte": "*",
     "express": "4.21.1",
+    "fuzzysort": "3.1.0",
     "lit": "3.2.1",
     "mutation-testing-metrics": "3.3.0",
     "mutation-testing-real-time": "3.3.0",

diff --git a/packages/elements/src/components/app/app.component.ts b/packages/elements/src/components/app/app.component.ts
@@ -2,6 +2,7 @@
 import type { PropertyValues } from 'lit';
 import { html, isServer, nothing, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import type {
   FileUnderTestModel,
   Metrics,
@@ -370,11 +371,11 @@ export class MutationTestReportAppComponent extends RealTimeElement {
               .path="${this.context.path}"
             ></mte-breadcrumb>
             <mte-result-status-bar
-              .detected="${this.rootModel?.systemUnderTestMetrics.metrics.totalDetected}"
-              .noCoverage="${this.rootModel?.systemUnderTestMetrics.metrics.noCoverage}"
-              .pending="${this.rootModel?.systemUnderTestMetrics.metrics.pending}"
-              .survived="${this.rootModel?.systemUnderTestMetrics.metrics.survived}"
-              .total="${this.rootModel?.systemUnderTestMetrics.metrics.totalValid}"
+              detected="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalDetected)}"
+              noCoverage="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.noCoverage)}"
+              pending="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.pending)}"
+              survived="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.survived)}"
+              total="${ifDefined(this.rootModel?.systemUnderTestMetrics.metrics.totalValid)}"
             ></mte-result-status-bar>
             ${this.context.view === 'mutant' && this.context.result
               ? html`<mte-mutant-view

diff --git a/packages/elements/src/components/breadcrumb.ts b/packages/elements/src/components/breadcrumb.ts
@@ -72,7 +72,9 @@ export class MutationTestReportBreadcrumbComponent extends LitElement {
   }
 
   #renderSearchIcon() {
-    return html` <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="open file picker">${searchIcon}</button> `;
+    return html`
+      <button @click="${() => this.#dispatchFilePickerOpenEvent()}" class="ml-auto" title="Open file picker (Ctrl-K)">${searchIcon}</button>
+    `;
   }
 
   #dispatchFilePickerOpenEvent() {