cypress-plugin-filter-runnables 1.0.0 → 1.2.0

package/README.md

@@ -8,7 +8,6 @@ Cypress plugin that allows user to filter suites/tests in Cypress Test Runner.
 
 ![cypress-plugin-filter-runnables-demo-1](https://github.com/user-attachments/assets/fc9f3a8a-5de2-4ca1-8b73-2e26bacb3bf6)
 
-
 ## Features
 
 - 🔍 A new UI search bar within `cypress open` to filter suites/tests in a given spec
@@ -44,6 +43,12 @@ Run `npx cypress open` to launch Cypress in `open` mode.
 
 Choose a spec file to run and you will be able to filter by suite/test title at the top of the reporter.
 
+You can combine multiple searches by separating them with a semicolon (`;`).
+
+Example:
+
+`@smoke; can add todo`
+
 ### Pairing with `cypress-plugin-grep-boxes`
 
 The [cypress-plugin-grep-boxes](https://github.com/dennisbergevin/cypress-plugin-grep-boxes) is a great companion for this plugin.

package/index.js

@@ -135,26 +135,66 @@ clearBtn?.addEventListener('click', function () {
 
 searchInput?.addEventListener('input', (event) => {
   const searchTerm = event.target.value.toLowerCase();
+
+  scanRunnables(searchTerm);
+});
+
+const scanRunnables = (searchInput) => {
   const testsAndSuites = window.top?.document.querySelectorAll(
     '.test.runnable, .suite.runnable'
   );
+  if (!testsAndSuites) return;
 
-  for (let i = 0; i < testsAndSuites.length; i++) {
-    const itemText = testsAndSuites[i].textContent.toLowerCase();
+  // Split search groups by ";"
+  const groups = searchInput
+    .toLowerCase()
+    .split(';')
+    .map((group) => group.replace(/,/g, ' ').split(/\s+/).filter(Boolean))
+    .filter((group) => group.length > 0); // Remove empty groups
 
-    if (itemText.includes(searchTerm)) {
-      testsAndSuites[i].style.display = '';
+  for (let i = 0; i < testsAndSuites.length; i++) {
+    const el = testsAndSuites[i];
+    const itemText = el.textContent.toLowerCase();
+    const suiteText = el
+      .closest('.suite.runnable')
+      ?.innerText.split('\n')[0]
+      .toLowerCase();
+
+    // A test matches if it satisfies ANY group
+    const matchesAnyGroup = groups.some((group) =>
+      group.every((term) => {
+        return itemText.includes(term) || suiteText.includes(term);
+      })
+    );
+
+    if (searchInput === '') {
+      el.style.display = '';
     } else {
-      const closestSuiteText = testsAndSuites[i]
-        .closest('.suite.runnable')
-        .innerText.split('\n')[0]
-        .toLowerCase();
-      if (closestSuiteText.includes(searchTerm)) {
-        testsAndSuites[i].style.display = '';
-      } else {
-        testsAndSuites[i].click;
-        testsAndSuites[i].style.display = 'none';
-      }
+      el.style.display = matchesAnyGroup ? '' : 'none';
     }
   }
-});
+};
+
+// Wrapping logic within isInteractive check
+// This targets cypress open mode where user can switch specs
+if (Cypress.config('isInteractive')) {
+  Cypress.on('window:unload', () => {
+    const searchTerm = searchInput.value.toLowerCase();
+    // Store the current Cypress test runner url
+    // This is to check against any spec change in test runner while a filter search is entered
+    // If a user does switch spec while filter is active, the filter search will be reset
+    const sidebarDebugLinkPage = window.top?.document.querySelector(
+      '[data-cy="sidebar-link-debug-page"]'
+    );
+    if (
+      window.top?.document.URL !=
+        sidebarDebugLinkPage.getAttribute('data-url') &&
+      searchInput.value !== ''
+    ) {
+      clearBtn.click();
+    }
+    sidebarDebugLinkPage.setAttribute('data-url', window.top?.document.URL);
+
+    scanRunnables(searchTerm);
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress-plugin-filter-runnables",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Cypress plugin that allows user to filter suites/tests in Cypress Test Runner.",
   "main": "./index.js",
   "keywords": [