Add Shadow DOM to the PolyGerrit test suite

This change runs all tests with Shadow DOM both on and off (in
supported browsers). It also fixes issues that needed to be
addressed due to a lack of understanding about Shadow DOM in light of
it not being turned on.

For more info on where 99% of the issues were, visit
https://www.polymer-project.org/1.0/docs/devguide/local-dom.html

This also removes a test-fixture dep and moves to webcomponents-lite.js
per https://github.com/PolymerElements/polymer-starter-kit/issues/473

Change-Id: I93889d99442af5ecfc0165f45373c8a24fb74e0d

polygerrit-ui/app/elements/gr-change-list.html

@@ -107,7 +107,8 @@ limitations under the License.
       },
 
       _getNonHeaderListItems: function() {
-        return this.querySelectorAll('gr-change-list-item:not([header])');
+        return Polymer.dom(this.root).querySelectorAll(
+            'gr-change-list-item:not([header])');
       },
 
     });

polygerrit-ui/app/elements/gr-diff-view.html

@@ -208,7 +208,7 @@ limitations under the License.
           this._renderRulerElements();
         }
         var remove = newValue == 0;
-        var rulerEls = document.querySelectorAll('.ruler');
+        var rulerEls = Polymer.dom(this.root).querySelectorAll('.ruler');
         for (var i = 0; i < rulerEls.length; i++) {
           if (remove) {
             rulerEls[i].parentNode.removeChild(rulerEls[i]);
@@ -318,14 +318,13 @@ limitations under the License.
         var rowNum = contentEl.getAttribute('data-row-num');
         el.addEventListener('gr-diff-comment-thread-height-changed',
             this._handleCommentThreadHeightChange.bind(this, rowNum, threadID));
-
         Polymer.dom(contentEl.parentNode).insertBefore(
             el, contentEl.nextSibling);
       },
 
       _handleCommentThreadHeightChange: function(rowNum, threadID, e) {
         // Adjust the filler element heights if they're present in the DOM.
-        var els = this.querySelectorAll(
+        var els = Polymer.dom(this.root).querySelectorAll(
             '.js-threadFiller[data-thread-id="' + threadID + '"]');
         if (els.length > 0) {
           for (var i = 0; i < els.length; i++) {
@@ -335,7 +334,8 @@ limitations under the License.
         }
 
         // Create the filler elements if they're not already present.
-        var els = this.querySelectorAll('[data-row-num="' + rowNum + '"]');
+        var els = Polymer.dom(this.root).querySelectorAll(
+            '[data-row-num="' + rowNum + '"]');
         for (var i = 0; i < els.length; i++) {
           // Is this is the side with the comment? Skip if so.
           if (els[i].nextSibling &&
@@ -344,7 +344,7 @@ limitations under the License.
           }
           var fillerEl = document.createElement('div');
           fillerEl.setAttribute('data-thread-id', threadID);
-          fillerEl.className = 'js-threadFiller';
+          fillerEl.classList.add('js-threadFiller');
           fillerEl.style.height = e.detail.height + 'px';
           Polymer.dom(els[i].parentNode).insertBefore(
               fillerEl, els[i].nextSibling);
@@ -518,7 +518,7 @@ limitations under the License.
       },
 
       _renderRulerElements: function() {
-        var contentEls = this.querySelectorAll('.content');
+        var contentEls = Polymer.dom(this.root).querySelectorAll('.content');
         for (var i = 0; i < contentEls.length; i++) {
           var rulerEl = this._createElement('i', 'ruler');
           rulerEl.style.left = this.rulerWidth + 'ch';

polygerrit-ui/app/test/gr-change-list-item-test.html

@@ -18,9 +18,8 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>gr-change-list-item</title>
 
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 
 <link rel="import" href="../elements/gr-change-list-item.html">
 

polygerrit-ui/app/test/gr-change-list-test.html

@@ -18,9 +18,8 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>gr-change-list</title>
 
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 
 <link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">
 <link rel="import" href="../elements/gr-change-list.html">
@@ -46,8 +45,8 @@ limitations under the License.
         {_number: 2},
       ];
       flushAsynchronousOperations();
-      var changeListItems =
-          changeList.querySelectorAll('gr-change-list-item:not([header])');
+      var changeListItems = Polymer.dom(changeList.root).querySelectorAll(
+          'gr-change-list-item:not([header])');
       assert.equal(changeListItems.length, 3);
       assert.equal(changeList.selectedIndex, 0);
 

polygerrit-ui/app/test/gr-date-formatter-test.html

@@ -18,9 +18,8 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>gr-date-formatter</title>
 
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 <script src="../scripts/util.js"></script>
 
 <link rel="import" href="../elements/gr-date-formatter.html">

polygerrit-ui/app/test/gr-diff-comment-test.html

@@ -18,9 +18,8 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>gr-diff-comment</title>
 
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 
 <link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">
 <link rel="import" href="../elements/gr-diff-comment.html">

polygerrit-ui/app/test/gr-diff-comment-thread-test.html

@@ -18,9 +18,8 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>gr-diff-comment-thread</title>
 
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 <script src="../scripts/util.js"></script>
 
 <link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">

polygerrit-ui/app/test/gr-diff-view-test.html

@@ -20,9 +20,9 @@ limitations under the License.
 
 <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 <script src="../scripts/changes.js"></script>
 <script src="../scripts/util.js"></script>
+
 <link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">
 <link rel="import" href="../elements/gr-diff-view.html">
 
@@ -102,10 +102,10 @@ limitations under the License.
 
     test('ab content is the same for left and right sides', function() {
       for (var i = 0; i < diffContent[0].ab.length; i++) {
-        var leftEls = element.querySelectorAll(
+        var leftEls = Polymer.dom(element.root).querySelectorAll(
             '#leftDiffContent .content[data-line-num="' + (i + 1) + '"]');
         assert.equal(leftEls.length, 1);
-        var rightEls = element.querySelectorAll(
+        var rightEls = Polymer.dom(element.root).querySelectorAll(
             '#rightDiffContent .content[data-line-num="' + (i + 1) + '"]');
         assert.equal(rightEls.length, 1);
         assert.equal(leftEls[0].textContent, rightEls[0].textContent);
@@ -114,7 +114,7 @@ limitations under the License.
 
     test('all line number and content elements have same (non-zero) height',
         function() {
-      var els = element.querySelectorAll('.lineNum, .content');
+      var els = Polymer.dom(element.root).querySelectorAll('.lineNum, .content');
       assert.isAbove(els.length, 0);
       var offsetHeight = els.length > 0 && els[0].offsetHeight;
       assert.isAbove(offsetHeight, 0);
@@ -124,7 +124,7 @@ limitations under the License.
     });
 
     test('content is properly escaped', function() {
-      var firstLineEls = element.querySelectorAll(
+      var firstLineEls = Polymer.dom(element.root).querySelectorAll(
         '#leftDiffContent .content[data-line-num="1"], ' +
         '#rightDiffContent .content[data-line-num="1"]');
       assert.equal(2, firstLineEls.length);
@@ -149,27 +149,29 @@ limitations under the License.
 
     test('ruler width changes are applied correctly', function() {
       assert.equal(element.rulerWidth, 0);
-      assert.equal(element.querySelectorAll('.ruler').length, 0);
+      assert.equal(Polymer.dom(element.root).querySelectorAll('.ruler').length,
+          0);
       element.rulerWidth = 80;
       flushAsynchronousOperations();
-      var els = element.querySelectorAll('.ruler');
+      var els = Polymer.dom(element.root).querySelectorAll('.ruler');
       assert.isAbove(els.length, 0);
       for (var i = 0; i < els.length; i++) {
         assert.equal(els[i].style.left, '80ch');
       }
       element.rulerWidth = 0;
       flushAsynchronousOperations();
-      assert.equal(element.querySelectorAll('.ruler').length, 0);
+      assert.equal(Polymer.dom(element.root).querySelectorAll('.ruler').length,
+          0);
       element.rulerWidth = 100;
       flushAsynchronousOperations();
-      els = element.querySelectorAll('.ruler');
+      els = Polymer.dom(element.root).querySelectorAll('.ruler');
       assert.isAbove(els.length, 0);
       for (var i = 0; i < els.length; i++) {
         assert.equal(els[i].style.left, '100ch');
       }
     });
 
-    test('comment threads are rendered correctly', function() {
+    test('comment threads are rendered correctly', function(done) {
       elWithComments._maybeRenderDiff({content: diffContent}, [], [
           {
             id: 'file_comment',
@@ -187,20 +189,34 @@ limitations under the License.
             },
           }
       ]);
-      flushAsynchronousOperations();
-      var threadEls = elWithComments.querySelectorAll(
-          'gr-diff-comment-thread[data-thread-id="thread-1-8"]');
-      assert.equal(threadEls.length, 1);
-      var fillerEls = elWithComments.querySelectorAll(
-          '.js-threadFiller[data-thread-id="thread-1-8"]');
-      assert.equal(fillerEls.length, 3);
 
-      threadEls = elWithComments.querySelectorAll(
-          'gr-diff-comment-thread[data-thread-id="thread-1-FILE"]');
-      assert.equal(threadEls.length, 1);
-      fillerEls = elWithComments.querySelectorAll(
-          '.js-threadFiller[data-thread-id="thread-1-FILE"]');
-      assert.equal(fillerEls.length, 3);
+      // On WebKit and Gecko, flushAsynchronousOperations isn't enough to allow
+      // the thread filler elements to properly render. Wait for the resize
+      // events that trigger their addition and check after the expected number
+      // come in.
+      var numEventsFired = 0;
+      elWithComments.addEventListener('gr-diff-comment-thread-height-changed',
+          function() {
+        numEventsFired++;
+        if (numEventsFired < 2) { return; }
+        assert.equal(numEventsFired, 2);
+
+        var threadEls = Polymer.dom(elWithComments.root).querySelectorAll(
+            'gr-diff-comment-thread[data-thread-id="thread-1-8"]');
+        assert.equal(threadEls.length, 1);
+        var fillerEls = Polymer.dom(elWithComments.root).querySelectorAll(
+            '.js-threadFiller[data-thread-id="thread-1-8"]');
+        assert.equal(fillerEls.length, 3);
+
+        threadEls = Polymer.dom(elWithComments.root).querySelectorAll(
+            'gr-diff-comment-thread[data-thread-id="thread-1-FILE"]');
+        assert.equal(threadEls.length, 1);
+        fillerEls = Polymer.dom(elWithComments.root).querySelectorAll(
+            '.js-threadFiller[data-thread-id="thread-1-FILE"]');
+        assert.equal(fillerEls.length, 3);
+
+        done();
+      });
     });
 
   });

polygerrit-ui/app/test/gr-search-bar-test.html

@@ -20,10 +20,8 @@ limitations under the License.
 
 <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
-<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
 
 <link rel="import" href="../../bower_components/iron-test-helpers/iron-test-helpers.html">
-
 <link rel="import" href="../elements/gr-search-bar.html">
 
 <test-fixture id="basic">

polygerrit-ui/app/test/index.html

@@ -18,16 +18,22 @@ limitations under the License.
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 <title>Elements Test Runner</title>
 <meta charset="utf-8">
-<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <script src="../../bower_components/web-component-tester/browser.js"></script>
 <script>
-  WCT.loadSuites([
-    'gr-change-list-item-test.html',
+  var testFiles = [];
+
+  [ 'gr-change-list-item-test.html',
     'gr-change-list-test.html',
     'gr-date-formatter-test.html',
     'gr-diff-comment-test.html',
     'gr-diff-comment-thread-test.html',
     'gr-diff-view-test.html',
-    'gr-search-bar-test.html'
-  ]);
+    'gr-search-bar-test.html',
+  ].forEach(function(file) {
+      testFiles.push(file);
+      testFiles.push(file + '?dom=shadow');
+  });
+
+  WCT.loadSuites(testFiles);
 </script>

polygerrit-ui/bower.json

@@ -12,7 +12,6 @@
   },
   "devDependencies": {
     "web-component-tester": "*",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#~1.0.6",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0"
+    "iron-test-helpers": "PolymerElements/iron-test-helpers"
   }
 }