[Media Router WebUI] Fix search input positioning when list scrolls.

chrome/test/data/webui/media_router/media_router_container_search_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
  * the MRPM search feature.
  */
 cr.define('media_router_container_search', function() {
   function registerTests() {
     suite('MediaRouterContainerSearch', function() {
@@ skipping 149 matching lines @@
       });
 
       test('pseudo sink hidden without filter input', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         setTimeout(function() {
           var sinkList =
               container.$$('#sink-list').querySelectorAll('paper-item');
           assertEquals(fakeSinkList.length, sinkList.length);
           MockInteractions.tap(container.$['sink-search-icon']);
-          setTimeout(function() {
+          chainOnAnimationPromise(function() {
             var searchResults =
                 container.$$('#search-results').querySelectorAll('paper-item');
             assertEquals(fakeSinkList.length, searchResults.length);
             done();
           });
         });
       });
 
       test('filter input adds pseudo sink', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = 'no existing sink';
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           assertEquals(1, searchResults.length);
           var item =
               container.$$('#searchResults').itemForElement(searchResults[0]);
           assertEquals(pseudoSink.id, item.sinkItem.id);
           done();
         });
       });
 
       test('filter exact match real sink hides pseudo sink', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = fakeSinkList[0].name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           assertEquals(1, searchResults.length);
           var item =
               container.$$('#searchResults').itemForElement(searchResults[0]);
           assertEquals(fakeSinkList[0].id, item.sinkItem.id);
           done();
         });
       });
 
       test('clicking pseudo sink starts search', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = 'no existing sink';
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           container.addEventListener(
               'search-sinks-and-create-route', function(data) {
                 assertEquals(pseudoSink.id, data.detail.id);
                 assertEquals(pseudoSink.name, data.detail.name);
                 assertEquals(pseudoSink.domain, data.detail.domain);
                 done();
               });
           MockInteractions.tap(searchResults[0]);
         });
       });
 
       test('spinner starts on pseudo sink', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           setTimeout(function() {
             searchResults =
                 container.$$('#search-results').querySelectorAll('paper-item');
             assertEquals(1, searchResults.length);
             checkSpinningSinkInFilter(pseudoSink);
 
             searchInput.value = foundSink.name[0];
             setTimeout(function() {
               checkSpinningSinkInFilter(pseudoSink);
 
               searchInput.value = '';
               setTimeout(function() {
                 checkSpinningSinkInFilter(pseudoSink);
                 done();
               });
             });
           });
         });
       });
 
       test('pseudo sink shown in sink list before real sink', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           MockInteractions.tap(
               container.$['container-header'].$$('#back-button'));
-          setTimeout(function() {
+          chainOnAnimationPromise(function() {
             checkCurrentView(media_router.MediaRouterView.SINK_LIST);
             checkSpinningSinkInSinkList(
                 pseudoSink, fakeSinkListWithPseudoSink.length);
             done();
           });
         });
       });
 
       test('onReceiveSearchResult updates spinner', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           container.allSinks = fakeSinkListWithPseudoSink.concat([foundSink]);
           container.onReceiveSearchResult(foundSink.id);
           setTimeout(function() {
             searchResults =
                 container.$$('#search-results').querySelectorAll('paper-item');
             assertEquals(1, searchResults.length);
             checkSpinningSinkInFilter(foundSink);
             done();
           });
         });
       });
 
       test('sink list updates spinner', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           setTimeout(function() {
             container.onReceiveSearchResult(foundSink.id);
             container.allSinks = fakeSinkListWithPseudoSink.concat([foundSink]);
             setTimeout(function() {
               searchResults = container.$$('#search-results')
                                   .querySelectorAll('paper-item');
               assertEquals(1, searchResults.length);
               checkSpinningSinkInFilter(foundSink);
               done();
             });
           });
         });
       });
 
       test('route received clears spinner and search state', function(done) {
         var route = new media_router.Route(
             'id 1', foundSink.id, 'Title 1', 0, true, false);
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           container.allSinks = fakeSinkListWithPseudoSink.concat([foundSink]);
           container.onReceiveSearchResult(foundSink.id);
           container.onCreateRouteResponseReceived(foundSink.id, route, true);
           assertEquals(null, container.pseudoSinkSearchState_);
           setTimeout(function() {
             checkCurrentView(media_router.MediaRouterView.ROUTE_DETAILS);
             MockInteractions.tap(
                 container.$['container-header'].$$('#back-button'));
-            setTimeout(function() {
+            chainOnAnimationPromise(function() {
               checkCurrentView(media_router.MediaRouterView.SINK_LIST);
               sinkList =
                   container.$$('#sink-list').querySelectorAll('paper-item');
               sinkList.forEach(function(sink) {
                 var spinner = sink.querySelector('paper-spinner');
                 checkElementVisible(spinner, false);
               });
               done();
             });
           });
@@ skipping 50 matching lines @@
             });
           });
         });
       });
 
       test('route creation failure clears spinner and search', function(done) {
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var searchResults =
               container.$$('#search-results').querySelectorAll('paper-item');
           MockInteractions.tap(searchResults[0]);
           container.allSinks = fakeSinkListWithPseudoSink.concat([foundSink]);
           container.onReceiveSearchResult(foundSink.id);
           container.onCreateRouteResponseReceived(pseudoSink.id, null, true);
           assertEquals(null, container.pseudoSinkSearchState_);
           setTimeout(function() {
             checkCurrentView(media_router.MediaRouterView.FILTER);
             searchResults =
                 container.$$('#search-results').querySelectorAll('paper-item');
             searchResults.forEach(function(sink) {
               var spinner = sink.querySelector('paper-spinner');
               checkElementVisible(spinner, false);
             });
             done();
           });
         });
       });
 
       test('pseudo sink with empty domain is not shown', function(done) {
         pseudoSink.domain = '';
         container.allSinks = fakeSinkListWithPseudoSink;
 
         var searchInput = container.$['sink-search-input'];
         searchInput.value = foundSink.name;
-        setTimeout(function() {
+        chainOnAnimationPromise(function() {
           var noMatches = container.$$('#no-search-matches');
           var searchResults = container.$$('#search-results');
           checkElementVisible(noMatches, true);
           checkElementVisible(searchResults, false);
           done();
         });
       });
 
       test('pseudo sink search state launching sink id', function() {
         var searchState = new PseudoSinkSearchState(pseudoSink);
@@ skipping 11 matching lines @@
             searchState.checkForRealSink(fakeSinkList.concat([foundSink])));
         assertEquals(foundSink.id, searchState.checkForRealSink(fakeSinkList));
       });
     });
   }
 
   return {
     registerTests: registerTests,
   };
 });