Display material design policies grouped by tags.

chrome/test/data/webui/policy_ui_material.js

+/** @const {string} Path to source root. */

[Dan Beam, 2015/10/14 21:44:00]

needs a copyright

[fhorschig, 2015/10/15 17:38:29]

Done.

+var ROOT_PATH = '../../../../';
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
+
+GEN('#include "base/macros.h"');

[Dan Beam, 2015/10/14 21:44:00]

why is this needed here?

[fhorschig, 2015/10/15 17:38:30]

Sorry, just added this on the wrong place.

+GEN('#include "chrome/test/data/webui/policy_ui_material.h"');
+
+/** @type {Object} * @const */
+var GROUP = {
+  ADMIN: 'fullAdminAccess',
+  SECURITY: 'systemSecurity'
+};
+
+/** @type {Array.string} @const */

[Dan Beam, 2015/10/14 21:44:00]

!Array<string>

[fhorschig, 2015/10/15 17:38:29]

Done.

+var GROUP_NAMES = Object.keys(GROUP).map(key => GROUP[key]);
+
+/** @type {Object} @const */
+var POLICY = {
+  SAMPLE_A: {
+    NAME: 'RandomPolicy',
+    TAGS: [GROUP.ADMIN, GROUP.SECURITY]
+  },
+  SAMPLE_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.

[Dan Beam, 2015/10/14 21:44:00]

the CppFixture is always a C++ class, no?

I think all of this should probably just be

/** @override */

[fhorschig, 2015/10/15 17:38:29]

Done.

+   * @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}

[Dan Beam, 2015/10/14 21:44:00]

!Array<string>

[fhorschig, 2015/10/15 17:38:29]

Done.

+   * @const
+   */
+  IGNORED_TAGS: ['DOM-MODULE', 'SCRIPT', 'STYLE', 'TEMPLATE', 'HEAD'],

[Dan Beam, 2015/10/14 21:44:00]

can you make this private and static (i.e.
PolicyUiMaterialWebUITest.IGNORED_TAGS_) or just local static (var
IGNORED_TAGS)?

[fhorschig, 2015/10/15 17:38:29]

Done.

+
+  /**
+   * Creates object as send by chromium. Can include only a subset of policies.
+   * @param {Array.Object=} opt_policies Defaults to all policies.
+   * @return {Object} Name object with policies within 'chromePolicyNames' key.
+   */
+  createPolicyNames: function(opt_policies) {
+    opt_policies = opt_policies || Object.keys(POLICY).map(key => POLICY[key]);
+    var data = {chromePolicyNames: {}};
+    for (var i = opt_policies.length - 1; i >= 0; i--)
+      data.chromePolicyNames[opt_policies[i].NAME] = opt_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=} opt_root Defaults to document
+   * @return {Array.Element} list of found objects
+   */
+  queryObjectDeep_: function(selector, opt_root) {
+    opt_root = opt_root || document;
+    if (this.IGNORED_TAGS.indexOf(opt_root.tagName) != -1)
+      return [];
+    var result = [];
+    if (opt_root.matches && opt_root.matches(selector))

[esprehn, 2015/10/14 21:35:34]

This is going to be massively slower than just calling querySelectorAll() at
each shadowRoot, then iterating every descendant looking for more ShadowRoots.

[fhorschig, 2015/10/15 17:38:29]

Changed the way I test, so I don't need to deep search shadow roots anymore.

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

[esprehn, 2015/10/14 21:35:34]

don't use .children (ever), use .firstElementChild and .nextElementSibling

[fhorschig, 2015/10/15 17:38:29]

Done.

+        result = result.concat(this.queryObjectDeep_(
+                                   selector, opt_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=} opt_root Defaults to document
+   * @return {Array.Element} list of found objects
+   */
+  listOf: function(selector, opt_root) {
+    var containers = [opt_root || document];
+    var newContainers = [];
+    selector.split(' ').forEach((function(sel) {

[esprehn, 2015/10/14 21:35:34]

This doesn't make sense, selectors aren't separated by spaces, "#a .b" means .b
inside #a for all web apis, they should be separated by commas, also this breaks
if you write [attr='value with space'] I guess you're trying to match across
boundaries? This is going to match all kinds of crazy weird things, and doesn't
work for .a + .b etc.

[fhorschig, 2015/10/15 17:38:29]

This is absolutely true. Deleted. Currently, I only have a handful of use cases
so solving these problems would be an overkill. The small and countable set of
shadow roots will be handled manually, by querying selectors from the known
shadow root.

+      newContainers = [];
+      for (var i = 0; i < containers.length; ++i) {
+        newContainers = newContainers.concat(
+                            this.queryObjectDeep_(sel, containers[i]));
+      }
+      containers = newContainers;
+    }).bind(this));
+    return containers;
+  },
+
+  /**
+   * Tries to find at least one of the element matching the selector.
+   * @param {string} selector
+   * @param {Element=} opt_root Defaults to document
+   * @return {Array.Element} list of found objects
+   */
+  exists: function(selector, opt_root) {
+    return this.listOf(selector, opt_root).length > 0;

[esprehn, 2015/10/14 21:35:34]

this is super slow, you're querying for *all* to check for *one*, you need a
different early out code path at the first match

[fhorschig, 2015/10/15 17:38:30]

querySelector handles this now. Should be fine.

+  },
+
+  /**
+   * 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];

[esprehn, 2015/10/14 21:35:34]

again you query for *all* to get the first one, don't do that.

[fhorschig, 2015/10/15 17:38:29]

Now it's querySelector, again. Thanks for pointing out those obvious flaws.

+    return ui.$.groups.querySelector('[risk-tag=' + name + ']');
+  },
+
+  /**
+   * 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;
+  }
+};
+
+// Test some basic assumptions about the print preview WebUI.
+TEST_F('PolicyUiMaterialWebUITest', 'TestPolicyLayout', function() {
+  var createPolicyNames = this.createPolicyNames.bind(this);
+  var exists = this.exists.bind(this);
+  var groupContainsText = this.groupContainsText.bind(this);
+  var listOf = this.listOf.bind(this);
+
+  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.SAMPLE_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.SAMPLE_B.TAGS[0]]);
+      this.policyUi.setPolicyNames(createPolicyNames([POLICY.SAMPLE_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.SAMPLE_A.NAME));
+      expectTrue(groupContainsText(GROUP.SECURITY, POLICY.SAMPLE_A.NAME));
+    });
+  });
+
+  mocha.run();
+});