WebUI Polymer2: Fix Extensions tests

Fix failing extensions browser tests for Polymer2.

Bug: 738611
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I00cb68204fa3206f29e50d7044e50f1e6b8cc753
Reviewed-on: https://chromium-review.googlesource.com/1109450
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569822}

chrome/browser/resources/md_extensions/item.html

@@ -253,10 +253,11 @@
             </div>
           </div>
           <div id="description" class="multiline-clippable-text"
-              hidden$="[[hasWarnings_(data.*)]]">
+              hidden$="[[hasWarnings_(data.disableReasons.*, data.*)]]">
             [[data.description]]
           </div>
-          <template is="dom-if" if="[[hasWarnings_(data.*)]]">
+          <template is="dom-if"
+              if="[[hasWarnings_(data.disableReasons.*, data.*)]]">
             <div id="warnings">
               <iron-icon id="error-icon" icon="error"></iron-icon>
               <span id="runtime-warnings" aria-describedby="a11yAssociation"

chrome/test/data/webui/extensions/cr_extensions_browsertest.js

@@ -719,25 +719,35 @@ var CrExtensionsErrorConsoleTest = class extends CrExtensionsBrowserTest {
 };
 
 TEST_F('CrExtensionsErrorConsoleTest', 'TestUpDownErrors', function() {
-  const STACK_ERRORS = '* /deep/ li';
-  const ACTIVE_ERROR_IN_STACK = '* /deep/ li[tabindex="0"]';
+  const STACK_ERRORS = 'li';
+  const ACTIVE_ERROR_IN_STACK = 'li[tabindex="0"]';
 
-  let initialFocus = document.querySelector(ACTIVE_ERROR_IN_STACK);
+  let initialFocus =
+      extension_test_util.findMatches(document, ACTIVE_ERROR_IN_STACK)[0];
   assertTrue(!!initialFocus);
-  assertEquals(1, document.querySelectorAll(ACTIVE_ERROR_IN_STACK).length);
-  assertEquals(4, document.querySelectorAll(STACK_ERRORS).length);
+  assertEquals(
+      1,
+      extension_test_util.findMatches(document, ACTIVE_ERROR_IN_STACK).length);
+  assertEquals(
+      4, extension_test_util.findMatches(document, STACK_ERRORS).length);
 
   // Pressing up when the first item is focused should NOT change focus.
   MockInteractions.keyDownOn(initialFocus, 38, '', 'ArrowUp');
-  assertEquals(initialFocus, document.querySelector(ACTIVE_ERROR_IN_STACK));
+  assertEquals(
+      initialFocus,
+      extension_test_util.findMatches(document, ACTIVE_ERROR_IN_STACK)[0]);
 
   // Pressing down when the first item is focused should change focus.
   MockInteractions.keyDownOn(initialFocus, 40, '', 'ArrowDown');
-  assertNotEquals(initialFocus, document.querySelector(ACTIVE_ERROR_IN_STACK));
+  assertNotEquals(
+      initialFocus,
+      extension_test_util.findMatches(document, ACTIVE_ERROR_IN_STACK)[0]);
 
   // Pressing up when the second item is focused should focus the first again.
   MockInteractions.keyDownOn(initialFocus, 38, '', 'ArrowUp');
-  assertEquals(initialFocus, document.querySelector(ACTIVE_ERROR_IN_STACK));
+  assertEquals(
+      initialFocus,
+      extension_test_util.findMatches(document, ACTIVE_ERROR_IN_STACK)[0]);
 
   testDone();
 });

chrome/test/data/webui/extensions/extension_code_section_test.js

@@ -46,7 +46,7 @@ cr.define('extension_code_section_tests', function() {
       expectFalse(testIsVisible('#no-code'));
 
       let codeSections =
-          codeSection.querySelectorAll('* /deep/ #source span span');
+          codeSection.shadowRoot.querySelectorAll('#source span span');
 
       expectEquals(code.beforeHighlight, codeSections[0].textContent);
       expectEquals(code.highlight, codeSections[1].textContent);

chrome/test/data/webui/extensions/extension_detail_view_test.js

@@ -266,7 +266,7 @@ cr.define('extension_detail_view_tests', function() {
       testWarningVisible('#blacklisted-warning', true);
       testWarningVisible('#update-required-warning', false);
 
-      item.set('data.blacklistText', undefined);
+      item.set('data.blacklistText', null);
       Polymer.dom.flush();
       testWarningVisible('#runtime-warnings', true);
       testWarningVisible('#corrupted-warning', true);

chrome/test/data/webui/extensions/extension_error_page_test.js

@@ -92,7 +92,7 @@ cr.define('extension_error_page_tests', function() {
       expectTrue(testIsVisible('#heading'));
       expectTrue(testIsVisible('#errorsList'));
 
-      var errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
+      var errorElements = errorPage.shadowRoot.querySelectorAll('.error-item');
       expectEquals(1, errorElements.length);
       var error = errorElements[0];
       expectEquals(
@@ -109,7 +109,7 @@ cr.define('extension_error_page_tests', function() {
           manifestErrorBase);
       errorPage.set('data.manifestErrors', [manifestError]);
       Polymer.dom.flush();
-      errorElements = errorPage.querySelectorAll('* /deep/ .error-item');
+      errorElements = errorPage.shadowRoot.querySelectorAll('.error-item');
       expectEquals(2, errorElements.length);
       error = errorElements[0];
       expectEquals(
@@ -165,8 +165,9 @@ cr.define('extension_error_page_tests', function() {
       Polymer.dom.flush();
 
       var errorElements =
-          errorPage.querySelectorAll('* /deep/ .error-item .start');
-      var ironCollapses = errorPage.querySelectorAll('* /deep/ iron-collapse');
+          errorPage.shadowRoot.querySelectorAll('.error-item .start');
+      var ironCollapses =
+          errorPage.shadowRoot.querySelectorAll('iron-collapse');
       expectEquals(2, errorElements.length);
       expectEquals(2, ironCollapses.length);
 

chrome/test/data/webui/extensions/extension_item_test.js

@@ -260,7 +260,7 @@ cr.define('extension_item_tests', function() {
       Polymer.dom.flush();
       assertWarnings(kCorrupt | kSuspicious | kBlacklisted);
 
-      item.set('data.blacklistText', undefined);
+      item.set('data.blacklistText', null);
       Polymer.dom.flush();
       assertWarnings(kCorrupt | kSuspicious);
 

chrome/test/data/webui/extensions/extension_sidebar_test.js

@@ -30,15 +30,25 @@ cr.define('extension_sidebar_tests', function() {
       PolymerTest.clearBody();
       sidebar = new extensions.Sidebar();
       document.body.appendChild(sidebar);
+      const whenSelected =
+          test_util.eventToPromise('iron-select', sidebar.$.sectionMenu);
       Polymer.dom.flush();
-      expectEquals(sidebar.$$(selector).id, 'sections-shortcuts');
+      return whenSelected
+          .then(function() {
+            expectEquals(sidebar.$$(selector).id, 'sections-shortcuts');
 
-      window.history.replaceState(undefined, '', '/');
-      PolymerTest.clearBody();
-      sidebar = new extensions.Sidebar();
-      document.body.appendChild(sidebar);
-      Polymer.dom.flush();
-      expectEquals(sidebar.$$(selector).id, 'sections-extensions');
+            window.history.replaceState(undefined, '', '/');
+            PolymerTest.clearBody();
+            sidebar = new extensions.Sidebar();
+            document.body.appendChild(sidebar);
+            const whenSelected =
+                test_util.eventToPromise('iron-select', sidebar.$.sectionMenu);
+            Polymer.dom.flush();
+            return whenSelected;
+          })
+          .then(function() {
+            expectEquals(sidebar.$$(selector).id, 'sections-extensions');
+          });
     });
 
     test(assert(TestNames.LayoutAndClickHandlers), function(done) {

chrome/test/data/webui/extensions/extension_test_util.js

@@ -249,6 +249,35 @@ cr.define('extension_test_util', function() {
         });
   }
 
+  /**
+   * Finds all nodes matching |query| under |root|, within self and children's
+   * Shadow DOM.
+   * @param {!Node} root
+   * @param {string} query The CSS query
+   * @return {!Array<!HTMLElement>}
+   */
+  function findMatches(root, query) {
+    let elements = new Set();
+    function doSearch(node) {
+      if (node.nodeType == Node.ELEMENT_NODE) {
+        const matches = node.querySelectorAll(query);
+        for (let match of matches)
+          elements.add(match);
+      }
+      let child = node.firstChild;
+      while (child !== null) {
+        doSearch(child);
+        child = child.nextSibling;
+      }
+      const shadowRoot = node.shadowRoot;
+      if (shadowRoot)
+        doSearch(shadowRoot);
+    }
+    doSearch(root);
+    return Array.from(elements);
+  }
+
+
   return {
     ClickMock: ClickMock,
     ListenerMock: ListenerMock,
@@ -258,5 +287,6 @@ cr.define('extension_test_util', function() {
     testVisible: testVisible,
     createExtensionInfo: createExtensionInfo,
     testIcons: testIcons,
+    findMatches: findMatches,
   };
 });