Issue #1919470 by s_leu, Berdir, Cottser, joelpittet, YesCT, Wim Leers: Add a...

Issue #1919470 by s_leu, Berdir, Cottser, joelpittet, YesCT, Wim Leers: Add a search field to the test overview page.

core/modules/simpletest/lib/Drupal/simpletest/Form/SimpletestTestForm.php

@@ -25,6 +25,26 @@ public function getFormID() {
    * {@inheritdoc}
    */
   public function buildForm(array $form, array &$form_state) {
+    // JavaScript-only table filters.
+    $form['filters'] = array(
+      '#type' => 'container',
+      '#attributes' => array(
+        'class' => array('table-filter', 'js-show'),
+      ),
+    );
+    $form['filters']['text'] = array(
+      '#type' => 'search',
+      '#title' => t('Search'),
+      '#size' => 30,
+      '#placeholder' => t('Enter test name…'),
+      '#attributes' => array(
+        'class' => array('table-filter-text'),
+        'data-table' => '#simpletest-test-form',
+        'autocomplete' => 'off',
+        'title' => t('Enter at least 3 characters of the test name or description to filter by.'),
+      ),
+    );
+
     $form['tests'] = array(
       '#type' => 'details',
       '#title' => t('Tests'),

core/modules/simpletest/simpletest.js

@@ -6,18 +6,18 @@
  * Add the cool table collapsing on the testing overview page.
  */
 Drupal.behaviors.simpleTestMenuCollapse = {
-  attach: function (context, settings) {
+  attach: function (context) {
     var timeout = null;
     // Adds expand-collapse functionality.
     $('div.simpletest-image').once('simpletest-image', function () {
       var $this = $(this);
-      var direction = settings.simpleTest[this.id].imageDirection;
-      $this.html(settings.simpleTest.images[direction]);
+      var direction = drupalSettings.simpleTest[this.id].imageDirection;
+      $this.html(drupalSettings.simpleTest.images[direction]);
 
       // Adds group toggling functionality to arrow images.
       $this.click(function () {
-        var trs = $this.closest('tbody').children('.' + settings.simpleTest[this.id].testClass);
-        var direction = settings.simpleTest[this.id].imageDirection;
+        var trs = $this.closest('tbody').children('.' + drupalSettings.simpleTest[this.id].testClass);
+        var direction = drupalSettings.simpleTest[this.id].imageDirection;
         var row = direction ? trs.length - 1 : 0;
 
         // If clicked in the middle of expanding a group, stop so we can switch directions.
@@ -49,8 +49,8 @@ Drupal.behaviors.simpleTestMenuCollapse = {
         rowToggle();
 
         // Toggle the arrow image next to the test group title.
-        $this.html(settings.simpleTest.images[(direction ? 0 : 1)]);
-        settings.simpleTest[this.id].imageDirection = !direction;
+        $this.html(drupalSettings.simpleTest.images[(direction ? 0 : 1)]);
+        drupalSettings.simpleTest[this.id].imageDirection = !direction;
 
       });
     });
@@ -62,9 +62,9 @@ Drupal.behaviors.simpleTestMenuCollapse = {
  * selected/deselected.
  */
 Drupal.behaviors.simpleTestSelectAll = {
-  attach: function (context, settings) {
+  attach: function (context) {
     $('td.simpletest-select-all').once('simpletest-select-all', function () {
-      var testCheckboxes = settings.simpleTest['simpletest-test-group-' + $(this).attr('id')].testNames;
+      var testCheckboxes = drupalSettings.simpleTest['simpletest-test-group-' + $(this).attr('id')].testNames;
       var groupCheckbox = $('<input type="checkbox" class="form-checkbox" id="' + $(this).attr('id') + '-select-all" />');
 
       // Each time a single-test checkbox is checked or unchecked, make sure
@@ -99,4 +99,62 @@ Drupal.behaviors.simpleTestSelectAll = {
   }
 };
 
+/**
+ * Filters the test list table by a text input search string.
+ *
+ * Additionally accounts for multiple tables being wrapped in "package" details
+ * elements.
+ *
+ * Text search input: input.table-filter-text
+ * Target table:      input.table-filter-text[data-table]
+ * Source text:       .table-filter-text-source
+ */
+Drupal.behaviors.simpletestTableFilterByText = {
+  attach: function (context) {
+    var $input = $('input.table-filter-text').once('table-filter-text');
+    var $table = $($input.attr('data-table'));
+    var $rows;
+    var searched = false;
+
+    function filterTestList (e) {
+      var query = $(e.target).val().toLowerCase();
+
+      function showTestRow (index, row) {
+        var $row = $(row);
+        var $sources = $row.find('.table-filter-text-source');
+        var textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
+        $row.closest('tr').toggle(textMatch);
+      }
+
+      // Filter if the length of the query is at least 3 characters.
+      if (query.length >= 3) {
+        // Indicate that a search has been performed, and hide the "select all"
+        // checkbox.
+        searched = true;
+        $('#simpletest-form-table thead th.select-all input').hide();
+
+        $rows.each(showTestRow);
+      }
+      // Restore to the original state if any searching has occurred.
+      else if (searched) {
+        searched = false;
+        $('#simpletest-form-table thead th.select-all input').show();
+        // Hide all rows and then show groups.
+        $rows.hide();
+        $rows.filter('.simpletest-group').show().each(function () {
+          var id = 'simpletest-test-group-' + $(this).children().first().attr('id');
+          if (drupalSettings.simpleTest[id].imageDirection) {
+            $(this).closest('tbody').children('.' + drupalSettings.simpleTest[id].testClass).show();
+          }
+        });
+      }
+    }
+
+    if ($table.length) {
+      $rows = $table.find('tbody tr');
+      $input.trigger('focus').on('keyup', Drupal.debounce(filterTestList, 200));
+    }
+  }
+};
+
 })(jQuery);

core/modules/simpletest/simpletest.module

@@ -700,6 +700,7 @@ function simpletest_library_info() {
       array('system', 'drupalSettings'),
       array('system', 'jquery.once'),
       array('system', 'drupal.tableselect'),
+      array('system', 'drupal.debounce'),
     ),
   );
 

core/modules/simpletest/simpletest.theme.inc

@@ -100,11 +100,11 @@ function theme_simpletest_test_table($variables) {
       );
       $row[] = array(
         'data' => '<label for="' . $test['#id'] . '">' . $title . '</label>',
-        'class' => array('simpletest-test-label'),
+        'class' => array('simpletest-test-label', 'table-filter-text-source'),
       );
       $row[] = array(
-        'data' => '<div class="description">' . $description . '</div>',
-        'class' => array('simpletest-test-description'),
+        'data' => '<div class="description">' . format_string('@description (@class)', array('@description' => $description, '@class' => $test_name)) . '</div>',
+        'class' => array('simpletest-test-description', 'table-filter-text-source'),
       );
 
       $rows[] = array('data' => $row, 'class' => array($test_class . '-test', ($collapsed ? 'js-hide' : '')));