Web component test framework (wcTest.BrowserTest)

chrome/test/data/webui/cr_checkbox_tests.js

+// Copyright 2015 The Chromium Authors. All rights reserved.

[michaelpg, 2015/05/05 22:19:50]

It may make more sense to locate these tests alongside the source files, e.g. in
ui/webui/resources/cr_elements/cr_checkbox in this case.

[Jeremy Klein, 2015/05/06 18:03:36]

+1 to keeping tests by their unit under test if possible.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/** @fileoverview Series of tests for cr-checkbox. */
+var RegisterCrCheckboxTests = (function() {
+  suite('CrCheckboxTest', function() {
+    var checkbox;
+
+    // Import cr_checkbox.html before running suite.
+    suiteSetup(function(done) {
+      wcTest.importHtml(
+          'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html')
+          .then(done, done);
+    });
+
+    // Initialize a checked cr-checkbox before each test.
+    setup(function(done) {
+      wcTest.clear();
+      checkbox = document.createElement('cr-checkbox');

[Jeremy Klein, 2015/05/06 18:03:36]

Think it would be simple to use test-fixture for more complex dom structure? It
would let us do stuff like this:

https://github.com/PolymerElements/paper-checkbox/blob/master/test/basic.html...

But we'd need to be able to run the html rather than just js. Not worth a huge
effort, but would be convenient.

+      checkbox.setAttribute('checked', '');
+      document.body.appendChild(checkbox);
+
+      // Wait for the checkbox to be created.
+      wcTest.async().then(done);
+    });
+
+    test('toggles', function() {
+      assertTrue(checkbox.checked);
+      checkbox.toggle();
+      assertFalse(checkbox.checked);
+      assertFalse(checkbox.hasAttribute('checked'));
+      checkbox.toggle();
+      assertTrue(checkbox.checked);
+      assertTrue(checkbox.hasAttribute('checked'));
+      checkbox.toggle();
+      assertFalse(checkbox.checked);
+      assertFalse(checkbox.hasAttribute('checked'));
+    });
+
+    test('checked attribute changes property', function() {
+      assertTrue(checkbox.checked);
+      checkbox.removeAttribute('checked');
+      assertFalse(checkbox.checked);
+      checkbox.setAttribute('checked', '');
+      assertTrue(checkbox.checked);
+    });
+
+    test('change event', function(done) {
+      checkbox.addEventListener('change', function() {
+        assertFalse(checkbox.checked);
+        done();
+      });
+      checkbox.$.checkbox.tap();

[Jeremy Klein, 2015/05/06 18:03:36]

note: iron-test-helpers has some useful bits we'll be able to use with 0.8,
particularly MockInteractions:

https://github.com/PolymerElements/iron-test-helpers

+    });
+
+    test('disabled', function() {
+      wcTest.clear();
+      var disabledCheckbox = document.createElement('cr-checkbox');
+      disabledCheckbox.setAttribute('disabled', '');
+      document.body.appendChild(disabledCheckbox);
+
+      assertTrue(disabledCheckbox.disabled);
+
+      disabledCheckbox.$.checkbox.tap();
+      assertFalse(disabledCheckbox.checked);
+      assertFalse(disabledCheckbox.$.checkbox.checked);
+    });
+  });
+});