[Media Router] Wiring for searching route providers for new sinks.

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() {
+
+      /**
+       * Checks whether |view| matches the current view of |container|.
+       *
+       * @param {!media_router.MediaRouterView} view Expected view type.
+       */
+      var checkCurrentView;
+
+      /**
+       * Checks whether an element is visible. An element is visible if it
+       * exists, does not have its |hidden| property set, and its |display|
+       * property is not 'none'.
+       *
+       * @param {Element} element The element to test.
+       * @param {boolean} visible Whether the element should be visible.
+       */
+      var checkElementVisible = function(element, visible) {
+        assertEquals(visible,
+            !!element && !element.hidden && element.style.display != 'none');
+      };
+
+      /**
+       * Media Router Container created before each test.
+       * @type {?MediaRouterContainer}
+       */
+      var container;
+
+      /**
+       * The list of available sinks.
+       * @type {!Array<!media_router.Sink>}
+       */
+      var fakeSinkList = [];
+
+      /**
+       * The list of available sinks plus the pseudo sink.
+       * @type {!Array<!media_router.Sink>}
+       */
+      var fakeSinkListWithPseudoSink = [];
+
+      /**
+       * Sink returned by search.
+       * @type {media_router.Sink}
+       */
+      var foundSink = null;
+
+      /**
+       * Example pseudo sink.
+       * @type {media_router.Sink}
+       */
+      var pseudoSink = null;
+
+      // Import media_router_container.html before running suite.
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+            'chrome://media-router/elements/media_router_container/' +
+            'media_router_container.html');
+      });
+
+      setup(function(done) {
+        PolymerTest.clearBody();
+        // Initialize a media-router-container before each test.
+        container = document.createElement('media-router-container');
+        document.body.appendChild(container);
+
+        // Get common functions and variables.
+        var test_base = media_router_container_test_base.init(container);
+
+        checkCurrentView = test_base.checkCurrentView;
+        fakeSinkList = test_base.fakeSinkList;
+
+        pseudoSink = new media_router.Sink(
+            'pseudo:test', '', null, 'domain.com',
+            media_router.SinkIconType.CAST, undefined,
+            test_base.castModeBitset);
+        pseudoSink.isPseudoSink = true;
+        foundSink = new media_router.Sink(
+            'found sink id', 'no existing sink', null, pseudoSink.domain,
+            pseudoSink.iconType, undefined, pseudoSink.castModes);
+        fakeSinkListWithPseudoSink = fakeSinkList.concat([pseudoSink]);
+
+        setTimeout(done);
+      });
+
+      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() {
+            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() {
+          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() {
+          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() {
+          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() {
+          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);
+            var item =
+                container.$$('#searchResults').itemForElement(searchResults[0]);
+            assertEquals(pseudoSink.id, item.sinkItem.id);
+            var spinner = searchResults[0].querySelector('paper-spinner');
+            checkElementVisible(spinner, true);
+            done();
+          });
+        });
+      });
+
+      test('onReceiveSearchResult updates spinner', function(done) {
+        container.allSinks = fakeSinkListWithPseudoSink;
+
+        var searchInput = container.$['sink-search-input'];
+        searchInput.value = foundSink.name;
+        setTimeout(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);
+            var item =
+                container.$$('#searchResults').itemForElement(searchResults[0]);
+            assertEquals(foundSink.id, item.sinkItem.id);
+            var spinner = searchResults[0].querySelector('paper-spinner');
+            checkElementVisible(spinner, true);
+            done();
+          });
+        });
+      });
+
+      test('sink list updates spinner', function(done) {
+        container.allSinks = fakeSinkListWithPseudoSink;
+
+        var searchInput = container.$['sink-search-input'];
+        searchInput.value = foundSink.name;
+        setTimeout(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);
+              var item = container.$$('#searchResults')
+                             .itemForElement(searchResults[0]);
+              assertEquals(foundSink.id, item.sinkItem.id);
+              var spinner = searchResults[0].querySelector('paper-spinner');
+              checkElementVisible(spinner, true);
+              done();
+            });
+          });
+        });
+      });
+
+      test('route received clears spinner and search state', function(done) {
+        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() {
+          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, route, true);
+          assertEquals(null, container.pseudoSinkSearchState_);
+          setTimeout(function() {
+            checkCurrentView(media_router.MediaRouterView.ROUTE_DETAILS);
+            MockInteractions.tap(
+                container.$['container-header'].$['back-button']);
+            setTimeout(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();
+            });
+          });
+        });
+      });
+
+      test('pseudo sink search state launching sink id', function() {
+        var searchState = new PseudoSinkSearchState(pseudoSink);
+
+        assertEquals(pseudoSink.id, searchState.getCurrentLaunchingSinkId());
+        searchState.checkForRealSink(fakeSinkList);
+        assertEquals(pseudoSink.id, searchState.getCurrentLaunchingSinkId());
+        searchState.checkForRealSink(fakeSinkList.concat([foundSink]));
+        assertEquals(pseudoSink.id, searchState.getCurrentLaunchingSinkId());
+
+        searchState.receiveSinkResponse(foundSink.id);
+        assertEquals(pseudoSink.id, searchState.getCurrentLaunchingSinkId());
+        searchState.checkForRealSink(fakeSinkList.concat([foundSink]));
+        assertEquals(foundSink.id, searchState.getCurrentLaunchingSinkId());
+        searchState.checkForRealSink(fakeSinkList);
+        assertEquals(foundSink.id, searchState.getCurrentLaunchingSinkId());
+      });
+
+      test('pseudo sink search state map sink id', function() {
+        var searchState = new PseudoSinkSearchState(pseudoSink);
+        var someId = 'some sink id';
+
+        assertEquals(someId, searchState.mapRouteSinkId(someId));
+        assertEquals('', searchState.mapRouteSinkId(pseudoSink.id));
+        searchState.receiveSinkResponse(foundSink.id);
+        assertEquals(someId, searchState.mapRouteSinkId(someId));
+        assertEquals(foundSink.id, searchState.mapRouteSinkId(pseudoSink.id));
+      });
+    });

[amp, 2016/04/08 17:12:46]

Do we need any tests for the error scenario's where issues were added but didn't
show up in the filter view?

Also I recall there was some case where the UI got into a state where the pseudo
sink was visible, but clicking on it didn't try to create a route (I think it
was after there was an error). Did we resolve that (and can we add tests for the
scenario that caused it)?

[btolsch, 2016/04/08 21:55:04]

I added a test in the filter tests to make sure issues are visible in filter
view.

The UI issues are resolved and it's not possible to get into the states we saw
before with the simplification. I did add a test to make sure everything resets
when route creation fails though.

+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});