[Media Router WebUI] Put sink list in conditional template.

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

 // 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.
 
 /** @fileoverview Suite of tests for media-router-container that focus on
  * routes.
  */
 cr.define('media_router_container_route', function() {
   function registerTests() {
     suite('MediaRouterContainerRoute', function() {
@@ skipping 91 matching lines @@
         setTimeout(done);
       });
 
       // Tests for 'create-route' event firing when a sink with no associated
       // route is clicked.
       test('select sink without a route', function(done) {
         container.allSinks = fakeSinkList;
 
         setTimeout(function() {
           var sinkList =
-              container.$['sink-list'].querySelectorAll('paper-item');
+              container.shadowRoot.getElementById('sink-list')
+                  .querySelectorAll('paper-item');
           container.addEventListener('create-route', function(data) {
             // Container is initially in auto mode since a cast mode has not
             // been selected.
             assertEquals(media_router.CastModeType.AUTO,
                 container.shownCastModeValue_);
             assertEquals(fakeSinkList[2].id, data.detail.sinkId);
 
             // The preferred compatible cast mode on the sink is used, since
             // the we did not choose a cast mode on the container.
             assertEquals(0x2, data.detail.selectedCastModeValue);
             done();
           });
           // Tap on a sink without a route, which should fire a 'create-route'
           // event.
           assertEquals(fakeSinkList.length, sinkList.length);
           MockInteractions.tap(sinkList[2]);
         });
       });
 
       // Tests that selecting a sink with an associated route will make the
       // |container| switch to ROUTE_DETAILS view.
       test('select sink with a route', function(done) {
         container.allSinks = fakeSinkList;
         container.routeList = fakeRouteList;
 
         setTimeout(function() {
           var sinkList =
-              container.$['sink-list'].querySelectorAll('paper-item');
+              container.shadowRoot.getElementById('sink-list')
+                  .querySelectorAll('paper-item');
 
           // Start from the SINK_LIST view.
           container.showSinkList_();
           checkCurrentView(media_router.MediaRouterView.SINK_LIST);
           MockInteractions.tap(sinkList[0]);
           checkCurrentView(media_router.MediaRouterView.ROUTE_DETAILS);
           done();
         });
       });
 
@@ skipping 20 matching lines @@
                 media_router.SinkStatus.PENDING, [1, 2, 3])
         ];
 
         container.routeList = [
             new media_router.Route('id 3', 'sink id 3', 'Title 3', 0, true),
             new media_router.Route('id 4', 'sink id 4', 'Title 4', 1, false),
         ];
 
         setTimeout(function() {
           var sinkSubtextList =
-              container.$['sink-list'].querySelectorAll('.sink-subtext');
+              container.shadowRoot.getElementById('sink-list')
+                  .querySelectorAll('.sink-subtext');
 
           // There will only be 3 sink subtext entries, because Sink 1 does not
           // have any subtext.
           assertEquals(3, sinkSubtextList.length);
 
           checkElementText(container.allSinks[1].description,
               sinkSubtextList[0]);
 
           // Route description overrides sink description for subtext.
           checkElementText(container.routeList[0].description,
@@ skipping 120 matching lines @@
         MockInteractions.tap(container.$['container-header'].
             $['arrow-drop-icon']);
         setTimeout(function() {
           // Select cast mode 2.
           var castModeList =
               container.$$('#cast-mode-list').querySelectorAll('paper-item');
           MockInteractions.tap(castModeList[1]);
           assertEquals(fakeCastModeList[1].description, container.headerText);
           setTimeout(function() {
             var sinkList =
-                container.$['sink-list'].querySelectorAll('paper-item');
+                container.shadowRoot.getElementById('sink-list')
+                    .querySelectorAll('paper-item');
             container.addEventListener('create-route', function(data) {
               assertEquals(fakeSinkList[2].id, data.detail.sinkId);
               // Cast mode 2 is used, since we selected it explicitly.
               assertEquals(fakeCastModeList[1].type,
                            data.detail.selectedCastModeValue);
               done();
             });
             // All sinks are compatible with cast mode 2.
             assertEquals(fakeSinkList.length, sinkList.length);
             // Tap on a sink without a route, which should fire a 'create-route'
             // event.
             MockInteractions.tap(sinkList[2]);
           });
         });
       });
     });
   }
 
   return {
     registerTests: registerTests,
   };
 });