Extensions: Add test to ensure that view change events bubble

This is currently broken in Polymer2.

Bug: 738611
Change-Id: I813b1b8aa6b4b4cfa31d1735f3b3b35f318e4c3a
Reviewed-on: https://chromium-review.googlesource.com/1125501
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#574090}

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

@@ -11,21 +11,25 @@ cr.define('extension_view_manager_tests', function() {
   };
 
   let viewManager;
+  let parent;
   let views;
   const suiteName = 'ExtensionViewManagerTest';
 
   suite(suiteName, function() {
-    // Initialize an extension item before each test.
+    // Initialize an extensions-view-manager inside a parent div before
+    // each test.
     setup(function() {
       PolymerTest.clearBody();
-
       document.body.innerHTML = `
-        <extensions-view-manager id="viewManager">
-          <div slot="view" id="viewOne">view 1</div>
-          <div slot="view" id="viewTwo">view 2</div>
-          <div slot="view" id="viewThree">view 3</div>
-        </extensions-view-manager>`;
-
+        <div id="parent">
+          <extensions-view-manager id="viewManager">
+            <div slot="view" id="viewOne">view 1</div>
+            <div slot="view" id="viewTwo">view 2</div>
+            <div slot="view" id="viewThree">view 3</div>
+          </extensions-view-manager>
+        </div>
+      `;
+      parent = document.body.querySelector('#parent');
       viewManager = document.body.querySelector('#viewManager');
     });
 
@@ -56,44 +60,52 @@ cr.define('extension_view_manager_tests', function() {
 
     test(assert(TestNames.EventFiring), function() {
       const viewOne = viewManager.querySelector('#viewOne');
-      const enterStart = false;
-      const enterFinish = false;
-      const exitStart = false;
-      const exitFinish = false;
 
-      const fired = {};
+      const fired = new Set();
+      const bubbled = new Set();
 
       ['view-enter-start', 'view-enter-finish', 'view-exit-start',
        'view-exit-finish',
       ].forEach(type => {
+        parent.addEventListener(type, () => {
+          bubbled.add(type);
+        });
         viewOne.addEventListener(type, () => {
-          fired[type] = true;
+          fired.add(type);
         });
       });
 
+      /**
+       * @param {string} eventName The event to check
+       * @param {boolean} expectFired Whether the event should have fired.
+       */
+      function verifyEventFiredAndBubbled(eventName, expectFired) {
+        expectEquals(expectFired, fired.has(eventName));
+        expectEquals(expectFired, bubbled.has(eventName));
+      }
+
       // Setup the switch promise first.
       let enterPromise = viewManager.switchView('viewOne');
       // view-enter-start should fire synchronously.
-      expectTrue(!!fired['view-enter-start']);
+      verifyEventFiredAndBubbled('view-enter-start', true);
       // view-enter-finish should not fire yet.
-      expectFalse(!!fired['view-enter-finish']);
-
+      verifyEventFiredAndBubbled('view-enter-finish', false);
       return enterPromise
           .then(() => {
             // view-enter-finish should fire after animation.
-            expectTrue(!!fired['view-enter-finish']);
+            verifyEventFiredAndBubbled('view-enter-finish', true);
 
             enterPromise = viewManager.switchView('viewTwo');
             // view-exit-start should fire synchronously.
-            expectTrue(!!fired['view-exit-start']);
+            verifyEventFiredAndBubbled('view-exit-start', true);
             // view-exit-finish should not fire yet.
-            expectFalse(!!fired['view-exit-finish']);
+            verifyEventFiredAndBubbled('view-exit-finish', false);
 
             return enterPromise;
           })
           .then(() => {
             // view-exit-finish should fire after animation.
-            expectTrue(!!fired['view-exit-finish']);
+            verifyEventFiredAndBubbled('view-exit-finish', true);
           });
     });
   });