MD Settings: Fix <select> search highlighting.

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

Index: chrome/test/data/webui/settings/search_settings_test.js
diff --git a/chrome/test/data/webui/settings/search_settings_test.js b/chrome/test/data/webui/settings/search_settings_test.js
new file mode 100644
index 0000000000000000000000000000000000000000..e91f2f3a17e8afac7ea80df6f460acecfcd8a632
--- /dev/null
+++ b/chrome/test/data/webui/settings/search_settings_test.js
@@ -0,0 +1,93 @@
+// 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_test', function() {
+  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';

[Dan Beam, 2016/10/27 21:46:09]

textBefore -> optionText?

[Dan Beam, 2016/10/27 22:15:52]

ping

[dpapad, 2016/10/27 22:24:50]

Done.

[Dan Beam, 2016/10/28 22:26:04]

thx

+
+      document.body.innerHTML =
+          `<settings-section hidden-by-search>
+             <div id="mydiv">${textBefore}</div>
+          </settings-section>`;

[Dan Beam, 2016/10/27 21:46:09]

indent off?

[dpapad, 2016/10/27 22:14:22]

Done, although I think this is arguable. Is it off because you are considering
it as HTML? Or are you considering as any JS string?

var foo =
    `<a>
      <b></b>
    </a>`;

VS

var foo =
   `This is a very loooooooong
   string. Is the indent off?`

+
+      var section = document.querySelector('settings-section');
+      var div = section.queryEffectiveChildren('#mydiv');

[Dan Beam, 2016/10/27 21:46:09]

why can't this just be $('mydiv')?

[dpapad, 2016/10/27 22:14:22]

Changed to document.querySelector. Not using "$" because
 
ReferenceError: $ is not defined
    at Context.<anonymous> (search_settings_test.js:27:28)

+
+      assertTrue(section.hiddenBySearch);
+      return searchManager.search('settings', section).then(function() {
+        assertFalse(section.hiddenBySearch);
+
+        var highlighWrapper = div.querySelector('.search-highlight-wrapper');

[Dan Beam, 2016/10/27 21:46:09]

highlightWrapper

[dpapad, 2016/10/27 22:14:22]

Done.

+        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);
+      });
+    });
+

[Dan Beam, 2016/10/27 21:46:09]

remove \n

[dpapad, 2016/10/27 22:14:22]

OK.

+
+    /**
+     * 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() {
+      document.body.innerHTML =
+          `<settings-section hidden-by-search>
+            <select>

[Dan Beam, 2016/10/27 21:46:09]

indent off?

[dpapad, 2016/10/27 22:14:22]

OK.

+              <option>Foo</option>
+              <option>Settings</option>
+              <option>Baz</option>
+            </select>
+          </settings-section>`;
+
+      var section = document.querySelector('settings-section');
+      var select = section.querySelector('select');
+
+      assertTrue(section.hiddenBySearch);
+      return searchManager.search('settings', section).then(function() {
+        assertFalse(section.hiddenBySearch);
+
+        var highlightWrapper = select.querySelector(
+            '.search-highlight-wrapper');
+        assertFalse(!!highlightWrapper);
+
+        // 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);
+      });
+    });
+  });
+});