Attempt to increase Capybara wait time for CSS selector tests

Author: camertron

test/css/component_selector_use_test.rb

@@ -50,73 +50,75 @@ class ComponentSelectorUseTest < System::TestCase
 
     previews.each do |preview|
       define_method("test_selectors_used_by_#{component_uri.parameterize(separator: '_')}_#{preview}_are_valid") do
-        visit("/rails/view_components/#{component_uri}/#{preview}")
-
-        global_ignored_selectors = IGNORED_SELECTORS.fetch(:global, [])
-        ignored_selectors = IGNORED_SELECTORS.fetch(component_class, [])
-
-        unmatched_selectors = driver.evaluate_async_script(<<~JS, COMPONENT_SELECTORS, global_ignored_selectors, ignored_selectors)
-          const [componentSelectors, globalIgnoredSelectors, ignoredSelectors, callback] = arguments;
-          const root = document.querySelector('.preview-wrap > *');
-
-          const ignoreClass = (className) => {
-            return(
-              globalIgnoredSelectors.includes(className) ||
-                ignoredSelectors.includes(className) ||
-                className.startsWith('octicon-')
-            );
-          };
-
-          const ignoreNode = (node) => {
-            for (let i = 0; i < node.classList.length; i ++) {
-              if (!ignoreClass(node.classList[i])) {
-                return false;
+        Capybara.current_session.using_wait_time(10) do
+          visit("/rails/view_components/#{component_uri}/#{preview}")
+
+          global_ignored_selectors = IGNORED_SELECTORS.fetch(:global, [])
+          ignored_selectors = IGNORED_SELECTORS.fetch(component_class, [])
+
+          unmatched_selectors = driver.evaluate_async_script(<<~JS, COMPONENT_SELECTORS, global_ignored_selectors, ignored_selectors)
+            const [componentSelectors, globalIgnoredSelectors, ignoredSelectors, callback] = arguments;
+            const root = document.querySelector('.preview-wrap > *');
+
+            const ignoreClass = (className) => {
+              return(
+                globalIgnoredSelectors.includes(className) ||
+                  ignoredSelectors.includes(className) ||
+                  className.startsWith('octicon-')
+              );
+            };
+
+            const ignoreNode = (node) => {
+              for (let i = 0; i < node.classList.length; i ++) {
+                if (!ignoreClass(node.classList[i])) {
+                  return false;
+                }
               }
-            }
 
-            return true;
-          };
+              return true;
+            };
 
-          const findEachNode = (node, cb) => {
-            if (!ignoreNode(node)) {
-              cb(node)
-            }
-
-            for (const child of node.children) {
-              findEachNode(child, cb);
-            }
-          };
+            const findEachNode = (node, cb) => {
+              if (!ignoreNode(node)) {
+                cb(node)
+              }
 
-          const nodeMatchesAtLeastOneComponentSelector = (node) => {
-            for (const componentSelector of componentSelectors) {
-              try {
-                if (node.matches(componentSelector) || node.querySelectorAll(`:scope > ${componentSelector}`).length > 0) {
-                  return true;
+              for (const child of node.children) {
+                findEachNode(child, cb);
+              }
+            };
+
+            const nodeMatchesAtLeastOneComponentSelector = (node) => {
+              for (const componentSelector of componentSelectors) {
+                try {
+                  if (node.matches(componentSelector) || node.querySelectorAll(`:scope > ${componentSelector}`).length > 0) {
+                    return true;
+                  }
+                } catch {
                 }
-              } catch {
               }
-            }
 
-            return false;
-          }
+              return false;
+            }
 
-          let unmatchedClasses = [];
+            let unmatchedClasses = [];
 
-          findEachNode(root, (node) => {
-            if (!nodeMatchesAtLeastOneComponentSelector(node)) {
-              for (className of node.classList) {
-                if (!ignoreClass(className)) {
-                  unmatchedClasses.push(className);
+            findEachNode(root, (node) => {
+              if (!nodeMatchesAtLeastOneComponentSelector(node)) {
+                for (className of node.classList) {
+                  if (!ignoreClass(className)) {
+                    unmatchedClasses.push(className);
+                  }
                 }
               }
-            }
-          });
+            });
 
-          const result = Array.from(new Set(unmatchedClasses));
-          callback(result);
-        JS
+            const result = Array.from(new Set(unmatchedClasses));
+            callback(result);
+          JS
 
-        assert unmatched_selectors.empty?, unmatched_selectors_message(component_class, unmatched_selectors)
+          assert unmatched_selectors.empty?, unmatched_selectors_message(component_class, unmatched_selectors)
+        end
       end
     end
   end