change site-settings -> usb-device to use cr-action-menu instead of paper-menu

chrome/test/data/webui/settings/usb_devices_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 usb_devices. */
+cr.define('usb_devices', function() {
+  function registerTests() {
+    suite('USBDevices', function() {

[dpapad, 2016/11/08 01:53:49]

Nit: UsbDevices

[scottchen, 2016/11/09 19:20:56]

Done.

+      /**
+       * A dummy usb-devices element created before each test.
+       * @type {UsbDeviceEntry}
+       */
+      var testElement;
+
+      /**
+       * The mock proxy object to use during test.
+       * @type {TestSiteSettingsPrefsBrowserProxy}
+       */
+      var browserProxy = null;
+
+      /**
+       * An example USB device entry list.
+       * @type {!Array<UsbDeviceEntry>}
+       */
+      var deviceList = [
+        {
+          embeddingOrigin: 'device-1-embedding-origin',
+          object: {
+            name: 'device-1',
+            "product-id": 1,
+            "serial-number": "device-1-sn",
+            "vendor-id": 1
+          },
+          objectName: 'device-1',
+          origin: 'device-1-origin',
+          setting: 'device-1-settings',
+          source: 'device-1-source'
+        }, {
+          embeddingOrigin: 'device-2-embedding-origin',
+          object: {
+            name: 'device-2',
+            "product-id": 2,
+            "serial-number": "device-2-sn",
+            "vendor-id": 2
+          },
+          objectName: 'device-2',
+          origin: 'device-2-origin',
+          setting: 'device-2-settings',
+          source: 'device-2-source'
+        }
+      ];
+
+      // Import necessary html before running suite.
+      suiteSetup(function() {
+        return PolymerTest.importHtml(
+           'chrome://md-settings/site_settings/usb_devices.html');
+      });
+
+      setup(function() {
+        browserProxy = new TestSiteSettingsPrefsBrowserProxy();
+        settings.SiteSettingsPrefsBrowserProxyImpl.instance_ = browserProxy;
+        return initPage();

[dpapad, 2016/11/08 01:53:49]

Can we remove this call? Every test is calling initPage() already, because they
need to setup fake data first.

[scottchen, 2016/11/09 19:20:57]

Done.

+      });
+
+      teardown(function() {
+        testElement.remove();
+        testElement = null;
+      });
+
+      /** @return {!Promise} */
+      function initPage() {
+        browserProxy.reset();
+        PolymerTest.clearBody();
+        testElement = document.createElement('usb-devices');
+        document.body.appendChild(testElement);
+        return browserProxy.whenCalled('fetchUsbDevices');
+      }
+
+      test('empty devices list', function() {
+        return initPage().then(function(){
+          var devices = testElement.devices;
+          assertTrue(!!devices);

[dpapad, 2016/11/08 01:53:49]

This tests that |devices| is populated, but it's not giving us great coverage.
|devices| is private state of the element that is tested, where as we should be
testing externally observable behavior, meaning the DOM.
For example, if someone updates the HTML code and break the dom-if (say
items="devicesss"), this test will not break.

So how about we change this to query the DOM that the right amount of list-item
nodes have been created? (similar for tests below).

[scottchen, 2016/11/09 19:20:57]

Done.

+          assertEquals(0, devices.length);
+        });
+      });
+
+      test('non-empty device list', function() {
+        browserProxy.setUsbDevices(deviceList);
+
+        return initPage().then(function() {
+          var devices = testElement.devices;
+          assertTrue(!!devices);
+          assertEquals(deviceList.length, devices.length);
+        });
+      });
+
+
+      test('non-empty device list creates dialog menu correctly', function() {
+        browserProxy.setUsbDevices(deviceList);
+
+        return initPage().then(function() {
+          Polymer.dom.flush();
+          var dialog = testElement.$$('dialog');
+
+          assertTrue(!!dialog);
+          assertFalse(dialog.hasAttribute('open'));
+
+          var removeButton = testElement.$["remove-button"];
+          assertTrue(!!removeButton);
+        });
+      });
+
+      test('non-empty device list has working menu buttons', function() {
+        browserProxy.setUsbDevices(deviceList);
+
+        return initPage().then(function() {
+          Polymer.dom.flush();
+
+          var menuButton = testElement.$$('paper-icon-button');
+          assertTrue(!!menuButton);
+
+          MockInteractions.tap(menuButton);
+
+          var dialog = testElement.$$('dialog');
+          assertTrue(dialog.hasAttribute('open'));
+        });
+      });
+
+      test('remove first item from list using remove button', function() {
+        browserProxy.setUsbDevices(deviceList);
+
+        return initPage().then(function() {
+          Polymer.dom.flush();
+
+          /**
+           * To test whether remove button removes an item, we first
+           * tap the menu button to indicate which device to remove, then
+           * check that device count goes down.
+           */
+          assertEquals(deviceList.length, testElement.devices.length);
+
+          var menuButton = testElement.$$('paper-icon-button');
+          MockInteractions.tap(menuButton);
+          var removeButton = testElement.$["remove-button"];
+          MockInteractions.tap(removeButton);
+
+          // Check length is one less than original fixture
+          assertEquals(deviceList.length - 1, testElement.devices.length);
+          // Check second device in original fixture becomes the first device
+          assertEquals(deviceList[1], testElement.devices[0]);
+        });
+      });
+
+      test('remove second item from list using remove button', function() {
+        browserProxy.setUsbDevices(deviceList);
+
+        return initPage().then(function() {
+          Polymer.dom.flush();
+
+          /**
+           * To test whether remove button removes an item, we first
+           * tap the menu button to indicate which device to remove, then
+           * check that device count goes down.
+           */
+          assertEquals(deviceList.length, testElement.devices.length);
+
+          var menuButton = testElement.root
+              .querySelectorAll('paper-icon-button')[1];
+          var removeButton = testElement.$["remove-button"];
+          MockInteractions.tap(menuButton);
+          MockInteractions.tap(removeButton);
+
+          // Check length is one less than original fixture
+          assertEquals(deviceList.length - 1, testElement.devices.length);
+          // Check first device in original fixture is still the first device
+          assertEquals(deviceList[0], testElement.devices[0]);
+        });
+      });
+    });
+  }
+
+  return {
+    registerTests: registerTests,
+  };
+});