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

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

Index: chrome/test/data/webui/media_router/route_controls_tests.js
diff --git a/chrome/test/data/webui/media_router/route_controls_tests.js b/chrome/test/data/webui/media_router/route_controls_tests.js
new file mode 100644
index 0000000000000000000000000000000000000000..f24ad670045d4db1eb07462abd371ee8ce0d850b
--- /dev/null
+++ b/chrome/test/data/webui/media_router/route_controls_tests.js
@@ -0,0 +1,284 @@
+// Copyright 2017 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-controls. */
+cr.define('route_controls', function() {
+  function registerTests() {
+    suite('RouteControls', function() {
+      /**
+       * Route Controls created before each test.
+       * @type {RouteControls}
+       */
+      var controls;
+
+      /**
+       * 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;
+
+      var checkText = function(expected, elementId) {

[mark a. foltz, 2017/05/12 21:07:34]

assertElementText ?

[takumif, 2017/05/15 17:13:13]

Done.

+        assertEquals(expected,
+            controls.$[elementId].innerText);
+      };
+
+      var isElementShown = function(elementId) {
+        return !controls.$[elementId].hasAttribute('hidden');
+      }
+
+      // Creates an instance of RouteStatus with the given parameters. If a
+      // parameter is not set, it defaults to an empty string, zero, or false.
+      var createRouteStatus = function(params = {}) {
+        return new media_router.RouteStatus(
+          params.title ? params.title : "",
+          params.status ? params.status : "",
+          !!params.canPlayPause,
+          !!params.canMute,
+          !!params.canSetVolume,
+          !!params.canSeek,
+          !!params.isPaused,
+          !!params.isMuted,
+          params.volume ? params.volume : 0,
+          params.duration ? params.duration : 0,
+          params.currentTime ? params.currentTime : 0
+        );
+      }
+
+      // Mock the browser API.
+      var overrideBrowserApi = function() {
+        cr.define('media_router.browserApi', function() {
+          'use strict';
+
+          function pauseCurrentMedia() {
+            controls.fire('mock-pause-current-media');
+          }
+
+          function playCurrentMedia() {
+            controls.fire('mock-play-current-media');
+          }
+
+          function seekCurrentMedia(time) {
+            controls.fire('mock-seek-current-media', {time: time});
+          }
+
+          function setCurrentMediaMute(mute) {
+            controls.fire('mock-set-current-media-mute', {mute: mute});
+          }
+
+          function setCurrentMediaVolume(volume) {
+            controls.fire('mock-set-current-media-volume', {volume: volume});
+          }
+
+          return {
+            pauseCurrentMedia: pauseCurrentMedia,
+            playCurrentMedia: playCurrentMedia,
+            seekCurrentMedia: seekCurrentMedia,
+            setCurrentMediaMute: setCurrentMediaMute,
+            setCurrentMediaVolume: setCurrentMediaVolume,
+          };
+        });
+      }
+
+      // Import route_controls.html before running suite.
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+            'chrome://media-router/elements/route_controls/' +
+            'route_controls.html');
+      });
+
+      // Initialize a route-controls before each test.
+      setup(function(done) {
+        PolymerTest.clearBody();
+        controls = document.createElement('route-controls');
+        document.body.appendChild(controls);
+        overrideBrowserApi();
+
+        // 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');

[mark a. foltz, 2017/05/12 21:07:35]

Nit: It doesn't look like there's any test coverage of the extension view. Maybe
drop the URL?

[takumif, 2017/05/15 17:13:13]

Done.

+        fakeRouteTwo = new media_router.Route('route id 2', 'sink id 2',
+            'Video 2', 2, false, true);
+
+        // Allow for the route controls to be created and attached.
+        setTimeout(done);
+      });
+
+      // Tests the initial expected text.
+      test('initial text setting', function() {
+        // Set |route|.
+        controls.onRouteUpdated(fakeRouteOne);
+        checkText(loadTimeData.getStringF('castingActivityStatus',
+            fakeRouteOne.description), 'route-description');
+
+        // Set |route| to a different route.
+        controls.onRouteUpdated(fakeRouteTwo);
+        checkText(loadTimeData.getStringF('castingActivityStatus',
+            fakeRouteTwo.description), 'route-description');
+      });
+
+      // Tests that the route title and status are shown when RouteStatus is
+      // updated.
+      test('update route text', function() {
+        var title = "test title";
+        var status = "test status";
+        controls.routeStatus = createRouteStatus({
+          title: title,
+          status: status
+        });
+
+        checkText(title, 'route-title');
+        checkText(status, 'route-description');
+      });
+
+      // Tests that media controls are shown and hidden when RouteStatus is
+      // updated.
+      test('media controls visibility', function() {
+        // Create a RouteStatus with no controls.
+        controls.routeStatus = createRouteStatus();
+        assertFalse(isElementShown('route-play-pause-button'));

[mark a. foltz, 2017/05/12 21:07:34]

Nit: You could have assertElementShown() and assertElementHidden() which would
be slightly more readable.

[takumif, 2017/05/15 17:13:13]

Done.

+        assertFalse(isElementShown('route-time-controls'));
+        assertFalse(isElementShown('route-volume-button'));
+        assertFalse(isElementShown('route-volume-slider'));
+
+        controls.routeStatus = createRouteStatus({
+          canPlayPause: true,
+          canSeek: true
+        });
+
+        assertTrue(isElementShown('route-play-pause-button'));
+        assertTrue(isElementShown('route-time-controls'));
+        assertFalse(isElementShown('route-volume-button'));
+        assertFalse(isElementShown('route-volume-slider'));
+
+        controls.routeStatus = createRouteStatus({
+          canMute: true,
+          canSetVolume: true
+        });
+
+        assertFalse(isElementShown('route-play-pause-button'));
+        assertFalse(isElementShown('route-time-controls'));
+        assertTrue(isElementShown('route-volume-button'));
+        assertTrue(isElementShown('route-volume-slider'));
+      });
+
+      // Tests that the play button sends a command to the browser API.
+      test('send play command', function(done) {
+        controls.addEventListener('mock-play-current-media', function(data) {
+          done();
+        });
+
+        controls.routeStatus = createRouteStatus({
+          canPlayPause: true,
+          isPaused: true
+        });
+        MockInteractions.tap(controls.$['route-play-pause-button']);
+      });
+
+      // Tests that the pause button sends a command to the browser API.
+      test('send pause command', function(done) {
+        controls.addEventListener('mock-pause-current-media', function(data) {
+          done();
+        });
+
+        controls.routeStatus = createRouteStatus({
+          canPlayPause: true,
+          isPaused: false
+        });
+        MockInteractions.tap(controls.$['route-play-pause-button']);
+      });
+
+      // Tests that the mute button sends a command to the browser API.
+      test('send mute command', function(done) {
+        controls.addEventListener(
+            'mock-set-current-media-mute', function(data) {
+          if (data.detail.mute) {
+            done();
+          } else {
+            done('Expected the "Mute" command but received "Unmute".');
+          }
+        });
+
+        controls.routeStatus = createRouteStatus({
+          canMute: true,
+          isMuted: false
+        });
+        MockInteractions.tap(controls.$['route-volume-button']);
+      });
+
+      // Tests that the unmute button sends a command to the browser API.
+      test('send unmute command', function(done) {
+        controls.addEventListener(
+            'mock-set-current-media-mute', function(data) {
+          if (data.detail.mute) {
+            done('Expected the "Unmute" command but received "Mute".');
+          } else {
+            done();
+          }
+        });
+
+        controls.routeStatus = createRouteStatus({
+          canMute: true,
+          isMuted: true
+        });
+        MockInteractions.tap(controls.$['route-volume-button']);
+      });
+
+      // // Tests that the seek slider sends a command to the browser API.
+      test('send seek command', function(done) {
+        var currentTime = 500;
+        var duration = 1200;
+        controls.addEventListener('mock-seek-current-media', function(data) {
+          if (data.detail.time == currentTime) {
+            done();
+          } else {
+            done('Expected the time to be ' + currentTime +
+                 ' but instead got ' + data.detail.time);
+          }
+        });
+
+        controls.routeStatus = createRouteStatus({
+          canSeek: true,
+          duration: duration
+        });
+
+        // In actual usage, the change event gets fired when the user interacts
+        // with the slider.
+        controls.$['route-time-slider'].value = currentTime;
+        controls.$['route-time-slider'].fire('change');
+      });
+
+      // Tests that the volume slider sends a command to the browser API.
+      test('send set volume command', function(done) {
+        var volume = 0.45;
+        controls.addEventListener(
+            'mock-set-current-media-volume', function(data) {
+          if (data.detail.volume == volume) {
+            done();
+          } else {
+            done('Expected the volume to be ' + volume + ' but instead got ' +
+                 data.detail.volume);
+          }
+        });
+
+        controls.routeStatus = createRouteStatus({canSetVolume: true});
+
+        // In actual usage, the change event gets fired when the user interacts
+        // with the slider.
+        controls.$['route-volume-slider'].value = volume;
+        controls.$['route-volume-slider'].fire('change');
+      });
+    });
+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});