[Media Router] Custom Controls 4 - Implement details view WebUI

chrome/test/data/webui/media_router/route_details_tests.js

 // Copyright 2015 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.
 
 /** @fileoverview Suite of tests for route-details. */
 cr.define('route_details', function() {
   function registerTests() {
     suite('RouteDetails', function() {
       /**
        * Route Details created before each test.
        * @type {RouteDetails}
        */
       var details;
 
       /**
        * First fake route created before each test.
        * @type {media_router.Route}
        */
       var fakeRouteOne;
 
       /**
        * Second fake route created before each test.
        * @type {media_router.Route}
        */
       var fakeRouteTwo;
 
+      /**
+       * Fake sink that corresponds to |fakeRouteOne|.
+       * @type {media_router.Sink}
+       */
+      var fakeSinkOne;
+
       // Checks whether |expected| and the text in the span element in
       // the |elementId| element are equal.
       var checkSpanText = function(expected, elementId) {
         assertEquals(expected,
             details.$[elementId].querySelector('span').innerText);
       };
 
       // Checks the default route view is shown.
       var checkDefaultViewIsShown = function() {
         assertFalse(details.$['route-information'].hasAttribute('hidden'));
-        assertTrue(details.$['custom-controller'].hasAttribute('hidden'));
+        assertTrue(
+            details.$$('extension-view-wrapper').hasAttribute('hidden'));
       };
 
-      // Checks the default route view is shown.
+      // Checks the start button is shown.
       var checkStartCastButtonIsShown = function() {
         assertFalse(
             details.$['start-casting-to-route-button'].hasAttribute('hidden'));
       };
 
-      // Checks the default route view is not shown.
+      // Checks the start button is not shown.
       var checkStartCastButtonIsNotShown = function() {
         assertTrue(
             details.$['start-casting-to-route-button'].hasAttribute('hidden'));
       };
 
       // Checks the custom controller is shown.
       var checkCustomControllerIsShown = function() {
         assertTrue(details.$['route-information'].hasAttribute('hidden'));
-        assertFalse(details.$['custom-controller'].hasAttribute('hidden'));
+        assertFalse(
+            details.$$('extension-view-wrapper').hasAttribute('hidden'));
       };
 
       // Checks whether |expected| and the text in the |elementId| element
       // are equal given an id.
       var checkElementTextWithId = function(expected, elementId) {
         assertEquals(expected, details.$[elementId].innerText);
       };
 
-      /**
-       * Fake sink that corresponds to |fakeRouteOne|.
-       * @type {media_router.Sink}
-       */
-      var fakeSinkOne;
-
       // Import route_details.html before running suite.
       suiteSetup(function() {
         return PolymerTest.importHtml(
             'chrome://media-router/elements/route_details/' +
             'route_details.html');
       });
 
       // Initialize a route-details before each test.
       setup(function(done) {
         PolymerTest.clearBody();
         details = document.createElement('route-details');
+        details.useWebUiRouteControls = false;
         document.body.appendChild(details);
 
         // Initialize routes and sinks.
         fakeRouteOne = new media_router.Route('route id 1', 'sink id 1',
             'Video 1', 1, true, false,
             'chrome-extension://123/custom_view.html');
         fakeRouteTwo = new media_router.Route('route id 2', 'sink id 2',
             'Video 2', 2, false, true);
         fakeSinkOne = new media_router.Sink(
             'sink id 1', 'sink 1', 'description', null,
@@ skipping 101 matching lines @@
         details.route = fakeRouteTwo;
         assertEquals(fakeRouteTwo, details.route);
         checkSpanText(loadTimeData.getStringF('castingActivityStatus',
             fakeRouteTwo.description), 'route-information');
         checkDefaultViewIsShown();
         checkStartCastButtonIsShown();
       });
 
       // Tests when |route| exists, has a custom controller, and it loads.
       test('route has custom controller and loading succeeds', function(done) {
-        var loadInvoked = false;
-        details.$['custom-controller'].load = function(url) {
-          loadInvoked = true;
-          assertEquals('chrome-extension://123/custom_view.html', url);
-          return Promise.resolve();
-        };
+        details.$$('extension-view-wrapper').$['custom-controller'].load =
+            function(url) {
+              setTimeout(function() {
+                assertEquals('chrome-extension://123/custom_view.html', url);
+                checkCustomControllerIsShown();
+                done();
+              });
+              return Promise.resolve();
+            };
 
         details.route = fakeRouteOne;
-        setTimeout(function() {
-          assertTrue(loadInvoked);
-          checkCustomControllerIsShown();
-          done();
-        });
       });
 
       // Tests when |route| exists, has a custom controller, but fails to load.
       test('route has custom controller but loading fails', function(done) {
-        var loadInvoked = false;
-        details.$['custom-controller'].load = function(url) {
-          loadInvoked = true;
-          return Promise.reject();
-        };
+        details.$$('extension-view-wrapper').$['custom-controller'].load =
+            function(url) {
+              setTimeout(function() {
+                checkDefaultViewIsShown();
+                done();
+              });
+              return Promise.reject();
+            };
 
         details.route = fakeRouteOne;
-        setTimeout(function() {
-          assertTrue(loadInvoked);
-          checkDefaultViewIsShown();
-          done();
-        });
       });
     });
   }
 
   return {
     registerTests: registerTests,
   };
 });