Tests for Media Router media-router-container Polymer element.

chrome/test/data/webui/media_router/media_router_container_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 media-router-container. */
+cr.define('media_router_container', function() {
+  function registerTests() {
+    suite('MediaRouterContainer', function() {
+      /**
+       * Media Router Container created before each test.
+       * @type {media_router_container}
+       */
+      var container;
+
+      /**
+       * The blocking issue to show.
+       * @type {?media_router.Issue}
+       */
+      var fakeBlockingIssue;
+
+      /**
+       * The list of CastModes to show.
+       * @type {!Array<!media_router.CastMode>}
+       */
+      var fakeCastModeList;

[michaelpg, 2015/07/06 20:55:46]

dbeam: technically this starts out as undefined. does closure care? should this
be {!Array<..>|undefined} (I hope not)

[Dan Beam, 2015/07/06 21:08:06]

it'd be arguably better to start as

  var fakeCastModeList = [];

but closure doesn't care, no :(

[apacible, 2015/07/07 18:38:43]

Updated to start as

  var fakeCastModeList = [];

here and below.

+
+      /**
+       * The blocking issue to show.
+       * @type {?media_router.Issue}
+       */
+      var fakeNonBlockingIssue;
+
+      /**
+       * The list of current routes.
+       * @type {!Array<!media_router.Route>}
+       */
+      var fakeRouteList;
+
+      /**
+       * The list of available sinks.
+       * @type {!Array<!media_router.Sink}
+       */
+      var fakeSinkList;
+
+      // Checks whether the current icon matches the icon used for the view.
+      var checkArrowDropIcon = function(view) {
+        assertEquals(container.$['arrow-drop-icon'].icon,
+            container.computeArrowDropIcon_(view));

[michaelpg, 2015/07/06 20:55:46]

You should also test the result of computeArrowDropIcon_ itself somewhere, since
this is only checking that the data binding is working.

[apacible, 2015/07/07 18:38:43]

Done.

+      }
+
+      // Checks whether |view| matches the current view of |container|.
+      var checkCurrentView = function(view) {
+        assertEquals(container.currentView_, view);
+      }
+      // Checks whether element |elementId| is hidden. |expected| is the

[michaelpg, 2015/07/06 20:55:46]

nit: linebreak above

[apacible, 2015/07/07 18:38:43]

Done.

+      // expected visibility.

[michaelpg, 2015/07/06 20:55:46]

|expected| is true if the item should be hidden, so it's the expected
hidden-ness. Rename to |hidden|?

[apacible, 2015/07/07 18:38:43]

Done.

+      var checkElementHiddenWithId = function(expected, elementId) {
+        checkElementHidden(expected, container.$[elementId]);
+      };
+
+      // Checks whether |element| is hidden. |expected| is the expected
+      // visibility.
+      var checkElementHidden = function(expected, element) {
+        assertEquals(expected, element.hidden);
+      };
+
+      // Checks whether |expected| and the text in the |elementId| element
+      // are equal.
+      var checkElementText = function(expected, element) {
+        assertEquals(expected.trim(), element.textContent.trim());
+      }
+
+      // Checks whether |expected| and the text in the |elementId| element
+      // are equal given an id.
+      var checkElementTextWithId = function(expected, elementId) {
+        checkElementText(expected, container.$[elementId]);
+      };
+
+      // Import media_router_container.html before running suite.
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+            'chrome://media-router/elements/media_router_container/' +
+            'media_router_container.html');
+      });
+
+      // Initialize an issue-banner before each test.
+      setup(function(done) {
+        PolymerTest.clearBody();
+        container = document.createElement('media-router-container');
+        document.body.appendChild(container);
+
+        // Initialize local variables.
+        fakeCastModeList = [
+            new media_router.CastMode(1, 'Cast Mode 1', 'Description 1'),

[michaelpg, 2015/07/06 20:55:46]

nit: 2-space indent inside array/object literals

[apacible, 2015/07/07 18:38:43]

Done.

+            new media_router.CastMode(2, 'Cast Mode 2', 'Description 2'),
+            new media_router.CastMode(3, 'Cast Mode 3', 'Description 3'),
+        ];
+
+        fakeRouteList = [
+            new media_router.Route('id 1', 'sink id 1', 'Title 1', true),
+            new media_router.Route('id 2', 'sink id 2', 'Title 2', false),
+        ];
+
+        fakeSinkList = [
+            new media_router.Sink('sink id 1', 'Sink 1',
+                media_router.SinkStatus.ACTIVE, [1, 2, 3]),
+            new media_router.Sink('sink id 2', 'Sink 2',
+                media_router.SinkStatus.ACTIVE, [1, 2, 3]),
+            new media_router.Sink('sink id 3', 'Sink 3',
+                media_router.SinkStatus.PENDING, [1, 2, 3]),
+        ];
+
+        fakeBlockingIssue = new media_router.Issue(
+            'issue id 1', 'Issue Title 1', 'Issue Message 1', 0, 1,
+            'route id 1', true, 1234);
+
+        fakeNonBlockingIssue = new media_router.Issue(
+            'issue id 2', 'Issue Title 2', 'Issue Message 2', 0, 1,
+            'route id 2', false, 1234);
+
+        // Allow for the media router container to be created and attached.
+        setTimeout(done);
+      });
+
+      // Tests for 'close-button-click' event firing when the close button
+      // is clicked.
+      test('close button click', function(done) {
+        container.addEventListener('close-button-click', function() {

[michaelpg, 2015/07/06 20:55:46]

We should add a PolymerTest.awaitEvent[s] method to simplify this:

PolymerTest.awaitEvent(container, 'close-button-click', done);

Not a requisite for this CL, just a thought.

[apacible, 2015/07/07 18:38:43]

Acknowledged.

+          done();
+        });
+        MockInteractions.tap(container.$['close-button']);
+      });
+
+      // Tests for 'create-route' event firing when a sink with no associated
+      // route is clicked.
+      test('select sink without a route', function() {
+        container.sinkList = fakeSinkList;
+
+        setTimeout(function() {
+          var sinkList =
+              container.$['sink-list'].querySelectorAll('paper-item');
+          var sinkArray = Array.prototype.slice.call(sinkList);

[michaelpg, 2015/07/06 20:55:46]

why slice this if you're not going to use Array methods?

NodeList supports [indexing] (like all JS objects -- take a look
Object.getOwnPropertyNames(foo) for all kinds of variables.)

[apacible, 2015/07/07 18:38:43]

Fixed.

+
+          container.addEventListener('create-route', function(data) {
+            assertEquals(fakeSinkList[2].id, data.detail.sinkId);
+            assertEquals(container.selectedCastModeValue_,
+                data.detail.selectedCastModeValue);

[michaelpg, 2015/07/06 20:55:46]

This is asynchronous, so include a `done` callback in this test and call it here
-- otherwise the test will pass immediately, and nothing happens if the listener
is never triggered.

[apacible, 2015/07/07 18:38:43]

Done.

+          });
+
+          // Tap on a sink without a route, which should fire a 'create-route'
+          // event.
+          MockInteractions.tap(sinkArray[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() {
+        container.sinkList = fakeSinkList;
+
+        setTimeout(function() {

[michaelpg, 2015/07/06 20:55:46]

Same -- call done() at the end of this function, otherwise Mocha registers the
test as a pass before this function is executed.

[apacible, 2015/07/07 18:38:43]

Done.

+          var sinkList =
+              container.$['sink-list'].querySelectorAll('paper-item');
+          sinkArray = Array.prototype.slice.call(sinkList);
+
+          checkCurrentView(container.containerView_.SINK_LIST);
+          MockInteractions.tap(sinkArray[0]);
+          checkCurrentView(container.containerView_.ROUTE_DETAILS);
+        });
+      });
+
+      // Tests that |container| returns to SINK_LIST view and arrow drop icon
+      // toggles after a cast mode is selected.
+      test('select cast mode', function() {
+        container.castModeList = fakeCastModeList;
+
+        MockInteractions.tap(container.$['arrow-drop-icon']);
+        checkArrowDropIcon(container.containerView_.CAST_MODE_LIST);
+        checkCurrentView(container.containerView_.CAST_MODE_LIST);
+
+        setTimeout(function() {
+          var castModeList =
+              container.$['cast-mode-list'].querySelectorAll('paper-item');
+          var castModeArray = Array.prototype.slice.call(castModeList);
+
+          MockInteractions.tap(castModeArray[2]);
+          checkArrowDropIcon(container.containerView_.SINK_LIST);
+          checkCurrentView(container.containerView_.SINK_LIST);
+        });
+      });
+
+      // Tests that clicking on the drop down icon will toggle |container|
+      // between SINK_LIST and CAST_MODE_LIST views.
+      test('click drop down icon', function() {
+        checkCurrentView(container.containerView_.SINK_LIST);
+
+        MockInteractions.tap(container.$['arrow-drop-icon']);
+        checkArrowDropIcon(container.containerView_.CAST_MODE_LIST);
+        checkCurrentView(container.containerView_.CAST_MODE_LIST);
+
+        MockInteractions.tap(container.$['arrow-drop-icon']);
+        checkArrowDropIcon(container.containerView_.SINK_LIST);
+        checkCurrentView(container.containerView_.SINK_LIST);
+      });
+
+      // Tests the header text. Choosing a cast mode updates the header text.
+      test('header text', function() {
+        checkElementTextWithId(loadTimeData.getString('selectCastModeHeader'),
+            'cast-mode-header-text');
+
+        var fakeHeaderText = 'fake header text';
+        container.headerText = fakeHeaderText;
+        checkElementTextWithId(fakeHeaderText, 'sink-list-header-text');
+
+        // Set the cast mode list to update the header text when one is
+        // selected.
+        container.castModeList = fakeCastModeList;
+
+        setTimeout(function() {
+          var castModeList =
+              container.$['cast-mode-list'].querySelectorAll('paper-item');
+          var castModeArray = Array.prototype.slice.call(castModeList);
+
+          for (var i = 0; i < fakeCastModeList.length; i++) {
+            MockInteractions.tap(castModeArray[i]);
+            checkElementTextWithId(fakeCastModeList[i].title,
+                'sink-list-header-text');
+          }
+        });
+      });
+
+      // Tests that text shown for each cast mode matches their descriptions.
+      test('cast mode list text', function() {
+        container.castModeList = fakeCastModeList;
+
+        setTimeout(function() {
+          var castModeList =
+              container.$['cast-mode-list'].querySelectorAll('paper-item');
+          var castModeArray = Array.prototype.slice.call(castModeList);
+
+          for (var i = 0; i < fakeCastModeList.length; i++) {
+            checkElementText(fakeCastModeList[i].description, castModeArray[i]);

[michaelpg, 2015/07/06 20:55:46]

can you combine this with the previous test?

[apacible, 2015/07/07 18:38:43]

Done.

+          }
+        });
+      });
+
+      // Tests that text shown for each sink matches their names.
+      test('sink list text', function() {
+        container.sinkList = fakeSinkList;
+
+        setTimeout(function() {
+          var sinkList =
+              container.$['sink-list'].querySelectorAll('paper-item');
+          sinkArray = Array.prototype.slice.call(sinkList);
+
+          for (var i = 0; i < fakeSinkList.length; i++) {
+            checkElementText(fakeSinkList[i].name, sinkArray[i]);
+          }
+        });
+      });
+
+      test('sink list route text', function() {
+        container.sinkList = fakeSinkList;
+        container.routeList = fakeRouteList;
+
+        setTimeout(function() {
+          var sinkList =
+              container.$['sink-list'].querySelectorAll('paper-item');
+          sinkArray = Array.prototype.slice.call(sinkList);
+
+          var routeList =
+              container.$['sink-list'].querySelectorAll('.route');
+          routeArray = Array.prototype.slice.call(routeList);
+
+          checkElementText(fakeRouteList[0].title, routeArray[0]);
+          checkElementText(fakeRouteList[1].title, routeArray[1]);
+          checkElementText('', routeArray[2]);
+
+          container.addRoute(
+              new media_router.Route('id 3', 'sink id 3', 'Title 3', false));
+          checkElementText(container.routeList[2].title, routeArray[3]);
+
+          container.addRoute(
+              new media_router.Route('id 4', 'sink id 1', 'Title 4', false));
+          checkElementText(container.routeList[0].title, routeArray[0]);
+        });
+      });
+
+      // Tests for expected visible UI when the view is CAST_MODE_LIST.
+      test('cast mode list state visibility', function() {
+        container.showCastModeList_();
+        checkElementHiddenWithId(false, 'container-header');

[michaelpg, 2015/07/06 20:55:46]

A thought: could you make a checkElementsHidden function, which takes an array
of elements, tests that those elements are hidden, and tests that the elements
you care about that are *not* in that array are *not* hidden?

It would clean up these walls of checkElementHiddenWithId and make the tests
easier to read, e.g.:

checkElementsHidden(['sink-list-header-text',
                     'issue-banner',
                     'route-details',
                     'sink-list']);

IDK, maybe that's getting too fancy.

[apacible, 2015/07/07 18:38:43]

Done.

+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(false, 'cast-mode-header-text');
+        checkElementHiddenWithId(true, 'issue-banner');
+        checkElementHiddenWithId(false, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+
+        // Set a non-blocking issue. The issue should stay hidden.
+        container.issue = fakeNonBlockingIssue;
+        checkElementHiddenWithId(false, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(false, 'cast-mode-header-text');
+        checkElementHiddenWithId(true, 'issue-banner');
+        checkElementHiddenWithId(false, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+
+        // Set a blocking issue. The issue should stay hidden.
+        container.issue = fakeBlockingIssue;
+        checkElementHiddenWithId(false, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(false, 'cast-mode-header-text');
+        checkElementHiddenWithId(true, 'issue-banner');
+        checkElementHiddenWithId(false, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+      });
+
+      // Tests for expected visible UI when the view is ROUTE_DETAILS.
+      test('route details state visibility', function() {
+        container.showRouteDetails_();
+        checkElementHiddenWithId(true, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(true, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(false, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+
+        // Set a non-blocking issue. The issue should be shown.
+        container.issue = fakeNonBlockingIssue;
+        checkElementHiddenWithId(true, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(false, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(false, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+
+        // Set a blocking issue. The issue should be shown, and everything
+        // else, hidden.
+        container.issue = fakeBlockingIssue;
+        checkElementHiddenWithId(true, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(false, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+      });
+
+      test('route visibility', function() {
+        container.sinkList = fakeSinkList;
+        container.routeList = fakeRouteList;
+
+        setTimeout(function() {
+          var sinkList =
+              container.$['sink-list'].querySelectorAll('paper-item');
+          sinkArray = Array.prototype.slice.call(sinkList);
+
+          var routeList =
+              container.$['sink-list'].querySelectorAll('.route');
+          routeArray = Array.prototype.slice.call(routeList);
+
+          checkElementHidden(false, routeArray[0]);
+          checkElementHidden(false, routeArray[1]);
+          checkElementHidden(true, routeArray[2]);
+
+          container.addRoute(
+              new media_router.Route('id 3', 'sink id 3', 'Title 3', false));
+          checkElementHidden(false, routeArray[2]);
+        });
+      });
+
+      // Tests for expected visible UI when the view is SINK_LIST.
+      test('sink list state visibility', function() {
+        container.showSinkList_();
+        checkElementHiddenWithId(false, 'container-header');
+        checkElementHiddenWithId(false, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(true, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(false, 'sink-list');
+
+        // Set a non-blocking issue. The issue should be shown.
+        container.issue = fakeNonBlockingIssue;
+        checkElementHiddenWithId(false, 'container-header');
+        checkElementHiddenWithId(false, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(false, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(false, 'sink-list');
+
+        // Set a blocking issue. The issue should be shown, and everything
+        // else, hidden.
+        container.issue = fakeBlockingIssue;
+        checkElementHiddenWithId(true, 'container-header');
+        checkElementHiddenWithId(true, 'sink-list-header-text');
+        checkElementHiddenWithId(true, 'cast-mode-header-text');
+        checkElementHiddenWithId(false, 'issue-banner');
+        checkElementHiddenWithId(true, 'cast-mode-list');
+        checkElementHiddenWithId(true, 'route-details');
+        checkElementHiddenWithId(true, 'sink-list');
+      });
+    });
+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});