cypress-plugin-filter-runnables 1.2.0 → 1.3.1

package/README.md

@@ -53,7 +53,7 @@ Example:
 
 The [cypress-plugin-grep-boxes](https://github.com/dennisbergevin/cypress-plugin-grep-boxes) is a great companion for this plugin.
 
-Paired with `cypress-plugin-grep-boxes` (`@bahmutov/cy-grep` is also required), you can filter suites/tests and use the checkboxes to run only selected tests:
+Paired with `cypress-plugin-grep-boxes` (`@bahmutov/cy-grep` is also required), you can filter suites/tests and use the main toggle (v2.1.0 of cypress-plugin-grep-boxes) or individual checkboxes to run only the tests you've filtered:
 
 ![cypress-plugin-filter-runnables-demo-2](https://github.com/user-attachments/assets/59053e87-cbfa-4a49-81a0-6212abc94ba8)
 

package/index.js

@@ -3,8 +3,9 @@
  */
 
 if (
+  Cypress.config('isInteractive') &&
   window.top?.document.querySelectorAll('#test-suite-filter-search').length ===
-  0
+    0
 ) {
   const style = document.createElement('style');
   style.textContent = `
@@ -139,21 +140,19 @@ searchInput?.addEventListener('input', (event) => {
   scanRunnables(searchTerm);
 });
 
-const scanRunnables = (searchInput) => {
-  const testsAndSuites = window.top?.document.querySelectorAll(
-    '.test.runnable, .suite.runnable'
-  );
-  if (!testsAndSuites) return;
+const scanRunnables = (searchTerm) => {
+  const testRunnables = window.top?.document.querySelectorAll('.test.runnable');
+  if (!testRunnables) return;
 
   // Split search groups by ";"
-  const groups = searchInput
-    .toLowerCase()
+  const groups = searchTerm
+    ?.toLowerCase()
     .split(';')
     .map((group) => group.replace(/,/g, ' ').split(/\s+/).filter(Boolean))
     .filter((group) => group.length > 0); // Remove empty groups
 
-  for (let i = 0; i < testsAndSuites.length; i++) {
-    const el = testsAndSuites[i];
+  for (let i = 0; i < testRunnables.length; i++) {
+    const el = testRunnables[i];
     const itemText = el.textContent.toLowerCase();
     const suiteText = el
       .closest('.suite.runnable')
@@ -161,13 +160,13 @@ const scanRunnables = (searchInput) => {
       .toLowerCase();
 
     // A test matches if it satisfies ANY group
-    const matchesAnyGroup = groups.some((group) =>
+    const matchesAnyGroup = groups?.some((group) =>
       group.every((term) => {
         return itemText.includes(term) || suiteText.includes(term);
       })
     );
 
-    if (searchInput === '') {
+    if (searchTerm === '') {
       el.style.display = '';
     } else {
       el.style.display = matchesAnyGroup ? '' : 'none';
@@ -179,7 +178,10 @@ const scanRunnables = (searchInput) => {
 // This targets cypress open mode where user can switch specs
 if (Cypress.config('isInteractive')) {
   Cypress.on('window:unload', () => {
-    const searchTerm = searchInput.value.toLowerCase();
+    const searchInput = window.top?.document.querySelector(
+      '#test-suite-filter-search'
+    );
+    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
@@ -189,7 +191,7 @@ if (Cypress.config('isInteractive')) {
     if (
       window.top?.document.URL !=
         sidebarDebugLinkPage.getAttribute('data-url') &&
-      searchInput.value !== ''
+      searchInput?.value !== ''
     ) {
       clearBtn.click();
     }
@@ -198,3 +200,23 @@ if (Cypress.config('isInteractive')) {
     scanRunnables(searchTerm);
   });
 }
+
+if (Cypress.config('isInteractive')) {
+  // To account for when the collapsible runnables are removed, persist filtered runnables
+  // watching for changes to DOM structure
+  MutationObserver = window.MutationObserver;
+
+  var observer = new MutationObserver(function () {
+    const searchInput = window.top?.document.querySelector(
+      '#test-suite-filter-search'
+    );
+    // fired when a mutation occurs
+    scanRunnables(searchInput?.value);
+  });
+
+  // defining the window.top?.document to be observed by the observer
+  observer.observe(window.top?.document, {
+    subtree: true,
+    attributes: true,
+  });
+}

package/package.json

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