Display material design policies grouped by tags.

chrome/test/data/webui/policy_ui_material.js

+// Copyright (c) 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.
+
+/** @const {string} Path to source root. */
+var ROOT_PATH = '../../../../';
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
+

[Dan Beam, 2015/10/10 01:04:19]

one less \n

[fhorschig, 2015/10/13 16:29:11]

Done.

+
+/** @type {Object} * @const */
+var GROUP = {
+  ADMIN: 'fullAdminAccess',
+  SECURITY: 'systemSecurity'
+};
+
+/** @type {Array.string} @const */
+var GROUP_NAMES = Object.keys(GROUP).map(key => GROUP[key]);
+
+/** @type {Object} @const */
+var POLICY = {
+  SAMLE_A: {

[Dan Beam, 2015/10/10 01:04:19]

is this supposed to be SAMPLE_{A,B}?

[fhorschig, 2015/10/13 16:29:11]

Thanks!

+    NAME: 'RandomPolicy',
+    TAGS: [GROUP.ADMIN, GROUP.SECURITY]
+  },
+  SAMLE_B: {
+    NAME: 'AnotherPolicy',
+    TAGS: [GROUP.ADMIN]
+  }
+};
+
+/**
+ * Test fixture for policy ui WebUI testing.
+ * @constructor
+ * @extends {PolymerTest}
+ */
+function PolicyUiMaterialWebUITest() {
+}
+
+PolicyUiMaterialWebUITest.prototype = {
+  __proto__: PolymerTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://md-policy',
+
+  /** @override */
+  runAccessibilityChecks: true,
+
+  /** @override */
+  accessibilityIssuesAreErrors: true,
+
+  /**
+   * Generate a real C++ class; don't typedef.
+   * @type {?string}
+   * @override
+   */
+  typedefCppFixture: null,
+
+  /**
+   * Set extra libraries relative to source root.
+   * @override
+   */
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
+
+  /**
+   * Skipped tags when looking for Objects in DOM.
+   * @type {Array.string}
+   * @const
+   */
+  IGNORED_TAGS: ['DOM-MODULE', 'SCRIPT', 'STYLE', 'TEMPLATE', 'HEAD'],
+
+  /**
+   * Creates object as send by chromium. Can include only a subset of policies.
+   * @param {Array.Object=} policies Defaults to all policies.

[Dan Beam, 2015/10/10 01:04:19]

opt_policies

[fhorschig, 2015/10/13 16:29:11]

Done.

+   * @return {Object} Name object with policies within 'chromePolicyNames' key.
+   */
+  createPolicyNames: function(policies) {
+    policies = policies || Object.keys(POLICY).map(key => POLICY[key]);
+    var data = { chromePolicyNames : {} };

[Dan Beam, 2015/10/10 01:04:19]

{chromePolicyNames: {}} (no spaces)

[fhorschig, 2015/10/13 16:29:12]

Done.

+    for (var i = policies.length - 1; i >= 0; i--) {
+      data.chromePolicyNames[policies[i].NAME] = policies[i].TAGS;
+    };

[Dan Beam, 2015/10/10 01:04:19]

}; -> }

[fhorschig, 2015/10/13 16:29:11]

Removed.

+    return data;
+  },
+
+  // TODO(fhorschig): Remove as soon as some querying tool handles shadow DOM.
+  /**
+   * Selects #id, .class or tag while ignoring dom-module and searching
+   * shadow-dom.
+   * @private
+   * @param {string} selector
+   * @param {Element=} root Defaults to document

[Dan Beam, 2015/10/10 01:04:19]

opt_root

[fhorschig, 2015/10/13 16:29:12]

Done.

+   * @return {Array.Element} list of found objects
+   */
+  queryObjectDeep_: function(selector, root) {

[Dan Beam, 2015/10/10 01:04:19]

why not just actually use /deep/?

[fhorschig, 2015/10/13 16:29:11]

It's deprecated [1] and searched DOM-MODULES (which was a problem only
initially). Others are already mention that their tests will break. If you know
a good method, please let me know. (My intention is, not to enforce an exact
HTML structure, just to check for existence and functionality)


[1] https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/68qSZM5QMRQ

+    root = root || document;
+    if (this.IGNORED_TAGS.indexOf(root.tagName) != -1) {
+      return [];
+    }

[Dan Beam, 2015/10/10 01:04:19]

no curlies

[fhorschig, 2015/10/13 16:29:12]

Done.

+    var result = [];
+    if (root.tagName == selector.toUpperCase()) {
+      result.push(root);
+    }
+    if (selector.startsWith('.') &&
+        root.classList &&
+        root.classList.contains(selector.slice(1))) {

[Dan Beam, 2015/10/10 01:04:19]

root.matches && root.matches(selector)?

[fhorschig, 2015/10/13 16:29:12]

Nice!

+      result.push(root);
+    }
+    if (selector.startsWith('#') && root.id == selector.slice(1))
+      result.push(root);

[Dan Beam, 2015/10/10 01:04:19]

would also be handled by matches

[fhorschig, 2015/10/13 16:29:12]

Exactly what I was looking for.

+    for (var i = 0; i < root.children.length; ++i)
+      result = result.concat(this.queryObjectDeep_(selector, root.children[i]));

[Dan Beam, 2015/10/10 01:04:19]

nit: \n

[fhorschig, 2015/10/13 16:29:12]

Done.

+    if (root.shadowRoot) {
+      for (var i = 0; i < root.shadowRoot.children.length; ++i) {
+        result = result.concat(this.queryObjectDeep_(
+                                   selector, root.shadowRoot.children[i]));
+      }
+    }
+    return result;
+  },
+
+  /**
+   * Selects #id, .class or tag while ignoring dom-module and searching
+   * shadow-dom. Allows nested selectors.
+   * @param {string} selector
+   * @param {Element=} root Defaults to document
+   * @return {Array.Element} list of found objects
+   */
+  listOf: function(selector, root) {
+    var selectors = selector.split(' ');
+    var containers = [root || document];
+    var newContainers = [];
+    while (selector = selectors.shift()) {

[Dan Beam, 2015/10/10 01:04:19]

nit: selector.split(' ').forEach(function() { ... });?

[fhorschig, 2015/10/13 16:29:12]

Done.

+      newContainers = [];
+      for (var i = 0; i < containers.length; ++i) {
+        newContainers = newContainers.concat(
+                            this.queryObjectDeep_(selector, containers[i]));
+      }
+      containers = newContainers;
+    }
+    return containers;
+  },
+
+  /**
+   * Tries to find at least one of the element matching the selector.
+   * @param {string} selector
+   * @param {Element=} root Defaults to document

[Dan Beam, 2015/10/10 01:04:19]

opt_root

[fhorschig, 2015/10/13 16:29:12]

Done.

+   * @return {Array.Element} list of found objects
+   */
+  exists: function(selector, root) {
+    return this.listOf(selector, root).length > 0;
+  },
+
+  /**
+   * Tries to find a group by name within the first POLICY-UI tag.
+   * @param {string} name Name of the group
+   * @return {?Element} Group with name matching |name|.
+   */
+  group: function(name) {
+    var ui = this.listOf('policy-ui')[0];
+    for (var i = ui.$.groups.children.length - 1; i >= 0; i--) {
+      if (ui.$.groups.children[i].riskTag == name)

[Dan Beam, 2015/10/10 01:04:19]

if you use reflectToAttribute, you can just

querySelector('[risk-tag=' + name + ']')

maybe?

[fhorschig, 2015/10/13 16:29:12]

Good idea.

+        return ui.$.groups.children[i];
+    }
+    return null;
+  },
+
+  /**
+   * Returns if there is a group with the given |groupName| whose content
+   * contains the given |text|.
+   * @param {string} groupName
+   * @param {string} text
+   * @return {boolean} Returns false when there is no group named |groupName| or
+   *     if the group doesn't contain the string.
+   */
+  groupContainsText: function(groupName, text) {
+    var group = this.group(groupName);
+    if (!group)
+      return false;
+    return group.$.content.textContent.indexOf(text) != 1;
+  }
+};
+
+GEN('#include "chrome/test/data/webui/policy_ui_material.h"');

[Dan Beam, 2015/10/10 01:04:19]

move to top

[fhorschig, 2015/10/13 16:29:12]

Done.

+
+// Test some basic assumptions about the print preview WebUI.
+TEST_F('PolicyUiMaterialWebUITest', 'TestPolicyLayout', function() {
+  var createPolicyNames =
+          this.createPolicyNames.bind(PolicyUiMaterialWebUITest.prototype);
+  var exists = this.exists.bind(PolicyUiMaterialWebUITest.prototype);

[Dan Beam, 2015/10/10 01:04:19]

can't you just bind(this)?

[fhorschig, 2015/10/13 16:29:12]

Done.

+  var groupContainsText =
+          this.groupContainsText.bind(PolicyUiMaterialWebUITest.prototype);
+  var listOf = this.listOf.bind(PolicyUiMaterialWebUITest.prototype);
+
+  suite('Layout', function() {
+    test('has one PolicyUi', function() {
+      expectTrue(exists('policy-ui'));
+    });
+
+    test('PolicyUi has paper-cards', function() {
+      expectTrue(exists('policy-ui paper-card'));
+    });
+
+    test('PolicyUi contains introduction', function() {
+      expectTrue(exists('policy-ui #introduction'));
+    });
+  });
+
+  suite('Functionality', function() {
+    setup(function() {
+      this.policyUi = listOf('policy-ui')[0];
+    });
+
+    test('PolicyUi loads introduction title', function() {
+      expectTrue(this.policyUi.$.introduction.heading != '');
+    });
+
+    test('PolicyUi loads at least one group', function() {
+      this.policyUi.setPolicyGroups(GROUP_NAMES);
+      this.policyUi.setPolicyNames(createPolicyNames([POLICY.SAMLE_A]));
+      expectTrue(exists('policy-ui #groups policy-group'));
+    });
+
+    test('PolicyUi provides same methods as internal page', function() {
+      expectTrue(typeof this.policyUi.setPolicyGroups === 'function');
+      expectTrue(typeof this.policyUi.setPolicyNames === 'function');
+      expectTrue(typeof this.policyUi.setPolicyValues === 'function');
+      expectTrue(typeof this.policyUi.setStatus === 'function');
+    });
+
+    test('PolicyUi clears groups when names are loaded', function() {
+      this.policyUi.setPolicyGroups(GROUP_NAMES);
+      this.policyUi.setPolicyNames(createPolicyNames());
+
+      expectTrue(listOf('policy-ui #groups policy-group').length == 2);
+
+      this.policyUi.setPolicyGroups([POLICY.SAMLE_B.TAGS[0]]);
+      this.policyUi.setPolicyNames(createPolicyNames([POLICY.SAMLE_B]));
+
+      expectTrue(listOf('policy-ui #groups policy-group').length == 1);
+    });
+
+    test('policies with multiple tags are in multiple groups', function() {
+      this.policyUi.setPolicyGroups(GROUP_NAMES);
+      this.policyUi.setPolicyNames(createPolicyNames());
+      expectTrue(groupContainsText(GROUP.ADMIN, POLICY.SAMLE_A.NAME));
+      expectTrue(groupContainsText(GROUP.SECURITY, POLICY.SAMLE_A.NAME));
+    });
+  });
+
+  mocha.run();
+});