Display material design policies grouped by tags.

chrome/test/data/webui/policy_ui_material.js

Index: chrome/test/data/webui/policy_ui_material.js
diff --git a/chrome/test/data/webui/policy_ui_material.js b/chrome/test/data/webui/policy_ui_material.js
new file mode 100644
index 0000000000000000000000000000000000000000..83f113fdedb85e260e246fee24b4d7a1520f624f
--- /dev/null
+++ b/chrome/test/data/webui/policy_ui_material.js
@@ -0,0 +1,250 @@
+// 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']);
+
+
+/** @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: {
+    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.
+   * @return {Object} Name object with policies within 'chromePolicyNames' key.
+   */
+  createPolicyNames: function(policies) {
+    policies = policies || Object.keys(POLICY).map(key => POLICY[key]);
+    var data = { chromePolicyNames : {} };
+    for (var i = policies.length - 1; i >= 0; i--) {
+      data.chromePolicyNames[policies[i].NAME] = policies[i].TAGS;
+    };
+    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
+   * @return {Array.Element} list of found objects
+   */
+  queryObjectDeep_: function(selector, root) {
+    root = root || document;
+    if (this.IGNORED_TAGS.indexOf(root.tagName) != -1)
+      return [];
+    var result = [];
+    if (root.tagName == selector.toUpperCase())
+      result.push(root);
+    if (selector.startsWith('.') &&
+        root.classList &&
+        root.classList.contains(selector.slice(1)))
+      result.push(root);

[stevenjb, 2015/10/07 17:09:33]

{}

[fhorschig, 2015/10/08 09:35:46]

Done.

+    if (selector.startsWith('#') &&
+        root.id == selector.slice(1))

[stevenjb, 2015/10/07 17:09:33]

one line

[fhorschig, 2015/10/08 09:35:46]

Done.

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

[stevenjb, 2015/10/07 17:09:33]

{}

[fhorschig, 2015/10/08 09:35:46]

Done.

+    }
+    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()) {
+      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
+   * @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.tagGroups.length - 1; i >= 0; i--)
+      if (ui.tagGroups[i].name == name)
+        return ui.tagGroups[i].element;

[stevenjb, 2015/10/07 17:09:33]

P{

[fhorschig, 2015/10/08 09:35:46]

Done.

+    return null;
+  },
+
+  /**
+   * Returns if there is a group with the given |groupName| whose content
+   * contains the given |text|.
+   * @param {string} groupName
+   * @param {text} text

[stevenjb, 2015/10/07 17:09:33]

This is confusing... where is |text| typedef'd? If it is a real type, maybe name
the variable something else... that's kind of like having a variable in C++
named 'string' :)

[fhorschig, 2015/10/08 09:35:46]

Sorry, I meant string. 

+   * @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('RandomPolicy') != 1;
+  }
+};
+
+GEN('#include "chrome/test/data/webui/policy_ui_material.h"');
+
+// 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);
+  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();
+});