Port aria_util_test.js to run as a WebUI test.

chrome/browser/resources/chromeos/chromevox/common/aria_util_test.js

+// Copyright 2014 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.
+
+/**
+ * Test fixture for aria_util.js.
+ * @constructor
+ * @extends {testing.Test}
+ */
+function AriaUtilUnitTest() {}
+
+AriaUtilUnitTest.prototype = {
+  __proto__: testing.Test.prototype,
+
+ /**

[Peter Lundblad, 2014/05/22 15:24:25]

nit: indentation.

[dmazzoni, 2014/05/22 16:27:32]

Done.

+   * This test fixture uses the WebUI test framework, so we need to
+   * have any WebUI page loaded first.
+   */
+  browsePreload: 'chrome://settings-frame',

[Peter Lundblad, 2014/05/22 15:24:25]

Looks like a temporary hack to me.  Maybe make a base class for all our
similar tests where we put this so we can clean it up easily
when we fix the framework?

[Peter Lundblad, 2014/05/22 15:24:25]

There seems to be a DUMMY_URL constant for this purpose.  Doesn't that work
here?

[dmazzoni, 2014/05/22 16:27:32]

Yes! That works, thanks.

[dmazzoni, 2014/05/22 16:27:32]

Moved to a base class!

I don't think there's an easy path for replacing the framework, we have to go
all-in with WebUI or write our own. Too much of the WebUI system really does
depend on WebUI.

Luckily I think this should work.

+
+ /**

[Peter Lundblad, 2014/05/22 15:24:25]

nit: Indent.

[dmazzoni, 2014/05/22 16:27:32]

Done.

+   * Loads some inlined html into the current document, replacing
+   * whatever was there previously. To use it, call it with the html
+   * inside an inline comment, like this:
+   *
+   * this.loadDoc(function() {/*!
+   *     <p>Html goes here</p>
+   * * /});
+   */
+  loadDoc: function(commentEncodedHtml) {

[Peter Lundblad, 2014/05/22 15:24:25]

Looks like a candidate to moved into a base class.

[dmazzoni, 2014/05/22 16:27:32]

Done.

+    var html = commentEncodedHtml.toString().
+        replace(/^[^\/]+\/\*!?/, '').
+        replace(/\*\/[^\/]+$/, '');
+    document.open();
+    document.write(html);
+    document.close();
+  },
+
+  /** @override */
+  extraLibraries: [
+    'aria_util.js',
+    'dom_util.js',
+    'node_state.js',
+    'chromevox.js',
+    '../host/interface/abstract_earcons.js']

[Peter Lundblad, 2014/05/22 15:24:25]

Given our dependency situation, I am wondering if we should make some
effeort to automate this.  It works here, but it could be cumbersome to
list all dependencies for other tests.
We could for example make the C++ code pick up goog.requires
automatically.  I can take a peak at that if you like.

[dmazzoni, 2014/05/22 16:27:32]

That would be cool if you'd like to look into that!

+};
+
+TEST_F('AriaUtilUnitTest', 'GetStateGridWithActiveCell', function() {
+  this.loadDoc(function() {/*!
+    <div id="grid" role="grid" aria-activedescendant="cell">
+      <div role="row">
+        <div id="cell" role="gridcell">
+      </div>
+    </div>
+  */});

[Peter Lundblad, 2014/05/22 15:24:25]

Neat trick!  Hadn't seen it before;)

+  assertEquals(

[Peter Lundblad, 2014/05/22 15:24:25]

I think assertThat(..., eqJSON) is a nice and compact way of checking that
two objects are equal.  Should we make that the idiomatic way of doing this
for both arrays and objects?

[dmazzoni, 2014/05/22 16:27:32]

Agreed, that works great, thanks.

+      [['aria_role_gridcell_pos', 1, 1]].toString(),
+      cvox.AriaUtil.getStateMsgs($('grid'), true).
+          toString());
+});
+
+TEST_F('AriaUtilUnitTest', 'GetActiveDescendant', function() {
+  this.loadDoc(function() {/*!
+    <div id="top" aria-activedescendant="child">
+      <div id="child" />
+    </div>
+    <div id="top_2" aria-activedescendant="child_2">
+      <div id="child_2" aria-activedescendant="grandchild_2">
+        <div id="grandchild_2" />
+      </div>
+    </div>
+
+    <h1>The buggy cases.</h1>
+    <div id="loop" aria-activedescendant="loop" />
+    <div id="circleA" aria-activedescendant="circleB">
+      <div id="circleB" aria-activedescendant="circleA" />
+    </div>
+  */});
+
+  // The typical case.
+  var topElt = $('top');
+  var childElt = $('child');
+  assertEquals(childElt, cvox.AriaUtil.getActiveDescendant(topElt));
+
+  // childElt has not aria-activedescendant, so return null.
+  assertEquals(null, cvox.AriaUtil.getActiveDescendant(childElt));
+
+  // The chained case.
+  var top2Elt = $('top_2');
+  var grandchild2Elt = $('grandchild_2');
+  assertEquals(grandchild2Elt, cvox.AriaUtil.getActiveDescendant(top2Elt));
+
+  // The buggy cases.  These are invalid, so return null as if the
+  // aria-activedescendant tags did not exist.
+  var loopElt = $('loop');
+  assertEquals(null, cvox.AriaUtil.getActiveDescendant(loopElt));
+
+  var circleAElt = $('circleA');
+  assertEquals(null, cvox.AriaUtil.getActiveDescendant(circleAElt));
+});
+
+TEST_F('AriaUtilUnitTest', 'ListIndexAndState', function() {
+  this.loadDoc(function() {/*!
+    <div id="l" role="listbox" tabindex="0" aria-activedescendant="l2">
+      <div id="l1" role="option">A</div>
+      <div id="l2" role="option">B</div>
+      <div id="l3" role="option">C</div>
+    </div>
+    <div id="a" role="listbox" tabindex="0" aria-activedescendant="a2">
+      <div id="a1" role="option" aria-setsize="10" aria-posinset="5">A</div>
+      <div id="a2" role="option" aria-setsize="20" aria-posinset="15">B</div>
+      <div id="a3" role="option" aria-setsize="30" aria-posinset="25">C</div>
+    </div>
+    <div id="b" role="listbox" tabindex="0" aria-activedescendant="b2">
+      <div id="b1" role="option" aria-posinset="3">A</div>
+      <div id="b2" role="option" aria-posinset="2">B</div>
+      <div id="b3" role="option" aria-posinset="1">C</div>
+    </div>
+  */});
+
+  var optionElt = $('l2');
+  assertEquals(
+      [['list_position', 2, 3]].toString(),
+      cvox.AriaUtil.getStateMsgs(optionElt).toString());
+
+  var ariaOptionElt = $('a2');
+  assertEquals(
+      [['list_position', 15, 20]].toString(),
+      cvox.AriaUtil.getStateMsgs(ariaOptionElt).toString());
+
+  ariaOptionElt = $('b3');
+  assertEquals(
+      [['list_position', 1, 3]].toString(),
+      cvox.AriaUtil.getStateMsgs(ariaOptionElt).toString());
+});
+
+TEST_F('AriaUtilUnitTest', 'GetLiveRegions', function() {
+  this.loadDoc(function() {/*!
+   <div id="outer">
+    <div id="progress" role="progressbar" aria-live="polite" aria-valuenow="1">
+      <div id="ptext">
+        1% complete.
+      </div>
+    </div>
+    <div id="progress2" role="progressbar" aria-live="polite" aria-valuenow="1">
+      <div id="ptext2">
+        1% complete.
+      </div>
+    </div>
+   </div>
+  */});
+
+  var progressLiveRegions = cvox.AriaUtil.getLiveRegions(progress);
+  assertEquals(1, progressLiveRegions.length);
+  assertNotEquals(-1, progressLiveRegions.indexOf(progress));
+
+  var outerLiveRegions = cvox.AriaUtil.getLiveRegions(outer);
+  assertEquals(2, outerLiveRegions.length);
+  assertNotEquals(-1, outerLiveRegions.indexOf(progress));
+  assertNotEquals(-1, outerLiveRegions.indexOf(progress2));
+
+  // getLiveRegions works walking up the tree as well.
+  var ptextLiveRegions = cvox.AriaUtil.getLiveRegions(ptext);
+  assertEquals(1, ptextLiveRegions.length);
+  assertNotEquals(-1, ptextLiveRegions.indexOf(progress));
+});