MD Settings: Fix <select> search highlighting.

chrome/test/data/webui/settings/search_settings_test.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('settings_main_page', function() {
+
+  function registerSearchTests() {
+    var searchManager = settings.getSearchManager();
+
+    suite('SearchSettingsTest', function() {
+      setup(function() {
+        PolymerTest.clearBody();
+      });
+
+      /*
+       * Test that the DOM of a node is modified as expected when a search hit
+       * occurs within that node.
+       */
+      test('normal highlighting', function() {
+        var textBefore = 'FooSettingsFoo';
+        var htmlBefore = document.body.innerHTML =
+            `<settings-section hidden-by-search>
+               <div id="mydiv">${textBefore}</div>
+            </settings-section>`;
+
+        document.body.innerHTML = htmlBefore;
+
+        var section = document.querySelector('settings-section');
+        var div = section.queryEffectiveChildren('#mydiv');
+
+        return searchManager.search('settings', section).then(function() {
+          assertFalse(section.hiddenBySearch);

[dpapad, 2016/10/27 01:24:48]

I believe this is the assertion you were talking about earlier over chat.

+
+          var highlighWrapper = div.querySelector('.search-highlight-wrapper');
+          assertTrue(!!highlighWrapper);
+
+          var originalContent = highlighWrapper.querySelector(
+              '.search-highlight-original-content');
+          assertTrue(!!originalContent);
+          assertEquals(textBefore, originalContent.textContent);
+
+          var searchHits = highlighWrapper.querySelectorAll(
+              '.search-highlight-hit');
+          assertEquals(1, searchHits.length);
+          assertEquals('Settings', searchHits[0].textContent);
+
+          // Check that original DOM structure is restored when search
+          // highlights are cleared.
+          return searchManager.search('', section);
+        }).then(function() {
+          assertEquals(0, div.children.length);
+          assertEquals(textBefore, div.textContent);
+        });
+      });
+
+
+      /*
+       * Tests that a search hit within a <select> node causes the parent
+       * settings-section to be shown, but the DOM of the <select> is not
+       * modified.
+       */
+      test('<select> highlighting', function() {
+        PolymerTest.clearBody();
+        document.body.innerHTML =
+            `<settings-section hidden-by-search>
+              <select>
+                <option>Foo</option>
+                <option>Settings</option>
+                <option>Baz</option>
+              </select>
+            </settings-section>`;
+
+        var section = document.querySelector('settings-section');
+        var select = section.querySelector('select');
+
+        return searchManager.search('settings', section).then(function() {
+          assertFalse(section.hiddenBySearch);
+
+          var highlighWrapper = select.querySelector(
+              '.search-highlight-wrapper');
+          assertFalse(!!highlighWrapper);
+
+          // Check that original DOM structure is present even after search
+          // highlights are cleared.
+          return searchManager.search('', section);
+        }).then(function() {
+          var options = select.querySelectorAll('option');
+          assertEquals(3, options.length);
+          assertEquals('Foo', options[0].textContent);
+          assertEquals('Settings', options[1].textContent);
+          assertEquals('Baz', options[2].textContent);
+        });
+      });
+    });
+  }
+
+  return {
+    registerSearchTests: registerSearchTests,
+  };
+});