Tests and documentation for array .index(ind) function.

doc/api.html

@@ -450,7 +450,10 @@ <h3 class="apimethod">.toggleClass(index, className, [options])</h3>
 <h3 class="apimethod">.hasClass(index, className, [options])</h3>
 <p>Return true/false based on if the given index has the CSS class <code>className</code>. Parameter
   <code>index</code> should be a number.</p>
-
+<h3 class="apimethod">.index(index)</h3>
+<p>Returns an ArrayIndex object correcponding to the array index at the given position. The ArrayIndex object
+has all the functions JSAV node objects have, like <code>.css</code>, <code>.toggle/add/remove/hasClass</code>,
+and <code>.highlight</code>.</p>
 <h3 class="apitopic">Events</h3>
 <p>There are functions to attach event handlers for the array elements. The events that can be
   listened for are: click, dblclick, mousedown, mousemove, mouseup, mouseenter, and mouseleave. 

src/array.js

@@ -480,6 +480,7 @@
 
 
   JSAV._types.ds.AVArray = AVArray;
+  JSAV._types.ds.ArrayIndex = ArrayIndex;
   // expose the data structures for the JSAV
   JSAV.ext.ds.array = function(element, options) {
     return new AVArray(this, element, options);

test/unit/array.js

@@ -33,8 +33,7 @@ test("Initializing from Array", function() {
 test("Highlighting indices in Array", function() {
   // [12, 22, 14, 39, 10] array in HTML
   var av = new JSAV("arraycontainer"),
-    arr = av.ds.array($("#array")),
-    props = ["color", "background-color"];
+    arr = av.ds.array($("#array"));
   arr.highlight(0);
   av.step();
   arr.highlight([1]); // highlight with an array
@@ -45,32 +44,31 @@ test("Highlighting indices in Array", function() {
   av.recorded(); // will do rewind, nothing should be highlighted
   $.fx.off = true;
 
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
 
   av.forward(); // apply first highlight
 
-  arrayUtils.testArrayHighlights(arr, [1, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [1, 0, 0, 0, 0]);
 
   av.forward(); // apply 2nd (array version) highlight
-  arrayUtils.testArrayHighlights(arr, [1, 1, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 0, 0, 0]);
 
   av.forward(); // apply 3rd (function version) highlight
-  arrayUtils.testArrayHighlights(arr, [1, 1, 0, 0, 1], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 0, 0, 1]);
 
   av.forward(); // apply last highlight (all should now be highlighted)
-  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1]);
 
   av.begin(); // going to beginning should remove all highlights
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
   av.end(); // going to the end should reapply the highlights
-  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1]);
 });
 
 test("Unhighlighting indices in Array", function() {
   // [12, 22, 14, 39, 10] array in HTML
   var av = new JSAV("arraycontainer"),
-    arr = av.ds.array($("#array")),
-    props = ["color", "background-color"];
+    arr = av.ds.array($("#array"));
 
   arr.highlight();
   av.step();
@@ -84,39 +82,38 @@ test("Unhighlighting indices in Array", function() {
   av.recorded(); // will do rewind, nothing should be highlighted
   $.fx.off = true;
 
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
 
   av.forward(); // apply first highlight
-  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1]);
 
   av.forward(); // apply first unhighlight
-  arrayUtils.testArrayHighlights(arr, [0, 1, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [0, 1, 1, 1, 1]);
 
   av.forward(); // apply 2nd (array version) unhighlight
-  arrayUtils.testArrayHighlights(arr, [0, 0, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 1, 1, 1]);
 
   av.forward(); // apply 3rd (function version) unhighlight
-  arrayUtils.testArrayHighlights(arr, [0, 0, 1, 1, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 1, 1, 0]);
 
   av.forward(); // apply last unhighlight (all should now be unhighlighted)
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
 
   av.begin(); // going to beginning should remove all highlights
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
   av.end(); // going to the end should reapply the unhighlights
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
 });
 
 test("Highlight without parameters", function() {
   var av = new JSAV("arraycontainer"),
-    arr = av.ds.array($("#array")),
-    props = ["color", "background-color"];
+    arr = av.ds.array($("#array"));
   arr.highlight();
   av.recorded();
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
   $.fx.off = true;
   av.forward();
-  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1], props);
+  arrayUtils.testArrayHighlights(arr, [1, 1, 1, 1, 1]);
 });
 
 test("Test isHighlight", function() {
@@ -153,25 +150,24 @@ test("Simple swaps", function() {
 
 test("Swaps with highlights", function() {
   var av = new JSAV("emptycontainer"),
-    arr = av.ds.array([10, 20, 30, 40]),
-    props = ["color", "background-color"];
+    arr = av.ds.array([10, 20, 30, 40]);
   arr.highlight(function(index) { return index%2 === 0;});
   av.step();
   arr.swap(0, 2);
   av.step();
   arr.unhighlight(function(index) { return index%2 === 0;});
   av.recorded();
   $.fx.off = true;
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
   arrayUtils.testArrayValues(arr, [10, 20, 30, 40]);
   av.forward(); // apply highlight
-  arrayUtils.testArrayHighlights(arr, [1, 0, 1, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [1, 0, 1, 0, 0]);
   arrayUtils.testArrayValues(arr, [10, 20, 30, 40]);
   av.forward(); // apply swap
-  arrayUtils.testArrayHighlights(arr, [1, 0, 1, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [1, 0, 1, 0, 0]);
   arrayUtils.testArrayValues(arr, [30, 20, 10, 40]);
   av.forward(); // apply unhighlight
-  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0], props);
+  arrayUtils.testArrayHighlights(arr, [0, 0, 0, 0, 0]);
   arrayUtils.testArrayValues(arr, [30, 20, 10, 40]);
 });
 test("Swaps with indices", function() {
@@ -418,4 +414,27 @@ test("Test on event binding and custom events", function() {
     arr.highlight(0);
     ok(!arr.equals(arr3, {css: ["background-color", "color"]}));
   });
+
+  test("Test array indices", function() {
+    var av = new JSAV("arraycontainer"),
+        arr = av.ds.array([1, 2, 3, 4]);
+    arr.layout();
+
+    var ind0 = arr.index(0);
+    ok(ind0 instanceof JSAV._types.ds.ArrayIndex);
+    ok(ind0, "Index function returns something");
+    ok(!arr.index(7), "Nothing is returned when index out of bounds");
+    ok(!arr.index(-1), "Nothing is returned when index out of bounds");
+    ok(!arr.index("kissa"), "Nothing is returned when index out of bounds");
+
+    equal(ind0.value(), 1, "Index value");
+
+    arr.highlight(0);
+    ok(ind0.isHighlight());
+    arr.unhighlight();
+    ok(!ind0.isHighlight());
+
+    arr.css(0, {color: "rgb(0, 0, 7)"});
+    equal(ind0.css("color"), "rgb(0, 0, 7)");
+  });
 })();

test/utils/arrayutils.js

@@ -1,24 +1,21 @@
 var arrayUtils = {
 
-  testArrayHighlights: function(arr, hlIndices, props) {
-    var testDiv= $('<ol class="' + arr.element[0].className + '"><li class="jsavnode jsavindex jsavhighlight"><span class="jsavvalue"></span></li><li class="jsavnode jsavindex" ><span class="jsavvalue"></span></li></ol>'),
-      hlDiv = testDiv.find(".jsavnode").filter(".jsavhighlight"),
-      unhlDiv = testDiv.find(".jsavnode").not(".jsavhighlight");
-    $("#qunit-fixture").append(testDiv);
-    for (var i= 0; i < arr.size(); i++) {
-      var el = hlIndices[i]?hlDiv:unhlDiv,
-        hlText = hlIndices[i]?"highlighted":"not highlighted";
-      for (var j=0; j < props.length; j++) {
-        equal(arr.css(i, props[j]), el.css(props[j]), "index " + i + " " + props[j] + " " + hlText);
-      }
+  testArrayHighlights: function(arr, hlIndices) {
+    for (var i = 0, l = arr.size(); i < l; i++) {
+      // test highlights through array.isHighlight
+      equal(arr.isHighlight(i), hlIndices[i]);
+      // test highlights through the corresponding index objects
+      equal(arr.index(i).isHighlight(), hlIndices[i]);
     }
-    testDiv.remove();
   },
 
   testArrayValues: function(arr, values) {
     equal(arr.size(), values.length, "Equal array sizes");
-    for (var i = 0; i < values.length; i++) {
+    for (var i = 0, l = values.length; i < l; i++) {
+      // test values through array
       equal(arr.value(i), values[i], "Values in index " + i);
+      // test values through the corresponding index objects
+      equal(arr.index(i).value(), values[i]);
     }
   }
 };