Test formatting of checkboxes and radio buttons on the settings page. Both styles of checks must be wrapped in <div class=type> to ensure consistency in spacing. Checkboxes require an id or a pref property. Radio buttons require name and value properties.

BUG=160301

Review URL: https://chromiumcodereview.appspot.com/11364137

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@167193 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 158 insertions, 0 deletions

diff --git a/chrome/browser/ui/webui/options/settings_format_browsertest.js b/chrome/browser/ui/webui/options/settings_format_browsertest.js
new file mode 100644
index 0000000..c6a5ad5
--- /dev/null
+++ b/chrome/browser/ui/webui/options/settings_format_browsertest.js
@@ -0,0 +1,157 @@
+// Copyright (c) 2012 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.
+
+/**
+ * TestFixture for testing the formatting of settings pages.
+ * @extends {testing.Test}
+ * @constructor
+ */
+function SettingsFormatWebUITest() {}
+
+/**
+ * Map of rule exemptions grouped by test.
+ * @const
+ */
+SettingsFormatWebUITest.Filters = {
+  /**
+   * Exemption for checkboxes that do not require an id or pref property.
+   * Input methods use inputMethodId instead of id for unique identification.
+   */
+  'pref': ['language-options-input-method-proto',
+           'language-options-input-method-list']
+};
+
+/**
+ * Collection of error messages.
+ * @const
+ */
+SettingsFormatWebUITest.Messages = {
+    MISSING_CHECK_WRAPPER: 'Element $1 should be enclosed in <div class="$2">',
+    MISSING_ID_OR_PREF: 'Missing id or pref preoperty for checkbox $1.',
+    MISSING_RADIO_BUTTON_NAME: 'Radio button $1 is missing the name property',
+    MISSING_RADIO_BUTTON_VALUE: 'Radio button $1 is missing the value property',
+};
+
+SettingsFormatWebUITest.prototype = {
+  __proto__: testing.Test.prototype,
+
+  /**
+   * Navigate to browser settings.
+   */
+  browsePreload: 'chrome://settings-frame/settings',
+
+  /**
+   * List of errors generated during a test. Used instead of expect* functions
+   * to suppress verbosity. The implementation of errorsToMessage in the
+   * testing API generates a call stack for each error produced which greatly
+   * reduces readability.
+   * @type {Array.<string>}
+   */
+  errors: null,
+
+  setUp: function() {
+    this.errors = [];
+  },
+
+  tearDown: function() {
+    assertTrue(this.errors.length == 0, '\n' + this.errors.join('\n'));
+  },
+
+  /**
+   * Generates a failure message. During tear down of the test, the accumulation
+   * of pending messages triggers a test failure.
+   * @param {string} key Label of the message formatting string.
+   * @param {!Element} element The element that triggered the failure.
+   * @param {...string} args Additional arguments for formatting the message.
+   */
+  fail: function(key, element, args) {
+    var subs = [this.getLabel(element)].concat(
+        Array.prototype.slice.call(arguments, 2));
+    var message = SettingsFormatWebUITest.Messages[key].replace(
+        /\$\d/g,
+        function(m) {
+      return subs[m[1] - 1] || '$' + m[1];
+    });
+    assertFalse(/\$\d/.test(message), 'found unreplaced subs');
+    this.errors.push(message);
+  },
+
+ /**
+  * String for identifying a node within an error message.
+  * @param {!Element} element The target element to identify.
+  * @return {string} Name to facilitate tracking down the element.
+  */
+  getLabel: function(element) {
+    if (element.id)
+      return element.id;
+
+    if (element.pref)
+      return element.pref;
+
+    if (element.name && element.value)
+      return element.name + '-' + element.value;
+
+    return this.getLabel(element.parentNode);
+  },
+
+
+  /**
+   * Checks if the node is exempt from following the formatting rule.
+   * @param {!Element} element The candidate element.
+   * @param {Array.<string>} filters List of exemptions.
+   * @return {boolean} True if the element is exempt.
+   */
+  isExempt: function(element, filters) {
+    var target = this.getLabel(element);
+    for (var i = 0; i < filters.length; i++) {
+      if (filters[i] == target)
+        return true;
+    }
+    return false;
+  }
+};
+
+/**
+ * Ensure that radio and checkbox buttons have consistent layout.
+ */
+TEST_F('SettingsFormatWebUITest', 'RadioCheckboxStyleCheck', function() {
+  var settings = $('settings');
+  assertTrue(settings != null, 'Unable to access settings');
+  var query = 'input[type=checkbox], input[type=radio]';
+  var elements = document.querySelectorAll(query);
+  assertTrue(elements.length > 0);
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (!findAncestorByClass(element, element.type))
+      this.fail('MISSING_CHECK_WRAPPER', element, element.type);
+  }
+});
+
+/**
+ * Each checkbox requires an id or pref property.
+ */
+TEST_F('SettingsFormatWebUITest', 'CheckboxIdOrPrefCheck', function() {
+  var query = 'input[type=checkbox]:not([pref]):not([id])';
+  var elements = document.querySelectorAll(query);
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (!this.isExempt(element, SettingsFormatWebUITest.Filters['pref']))
+      this.fail('MISSING_ID_OR_PREF', element);
+  }
+});
+
+/**
+ * Each radio button requires name and value properties.
+ */
+TEST_F('SettingsFormatWebUITest', 'RadioButtonNameValueCheck', function() {
+  var elements = document.querySelectorAll('input[type=radio]');
+  for (var i = 0; i < elements.length; i++) {
+    var element = elements[i];
+    if (!element.name)
+      this.fail('MISSING_RADIO_BUTTON_NAME', element);
+
+    if (!element.getAttribute("value"))
+      this.fail('MISSING_RADIO_BUTTON_VALUE', element);
+  }
+});
diff --git a/chrome/chrome_tests.gypi b/chrome/chrome_tests.gypi
index cadee0a..327e57c 100644
--- a/chrome/chrome_tests.gypi
+++ b/chrome/chrome_tests.gypi
@@ -1117,6 +1117,7 @@
         'browser/ui/webui/options/preferences_browsertest.cc',
         'browser/ui/webui/options/preferences_browsertest.h',
         'browser/ui/webui/options/search_engine_manager_browsertest.js',
+        'browser/ui/webui/options/settings_format_browsertest.js',
         'browser/ui/webui/print_preview/print_preview_ui_browsertest.cc',
         'browser/ui/webui/sync_setup_browsertest.js',
         'browser/ui/webui/test_web_dialog_delegate.cc',