blossom/tests/application/qunit/desktop/views/list/ui_alternatingrows.js

Modern, Cross-Platform Application Framework

// ==========================================================================
// Project:   SproutCore - JavaScript Application Framework
// Copyright: ©2006-2011 Strobe Inc. and contributors.
//            portions copyright @2009 Apple Inc.
// License:   Licensed under MIT license (see license.js)
// ==========================================================================

/*
  This test evaluates the creation of list item views with alternating rows
*/

suite("SC.ListView - alternating rows");

// create a fake content array.  Generates a list with whatever length you
// want of objects with a title based on the index.  Cannot mutate.
var ContentArray = SC.Object.extend(SC.Array, {
  
  length: 0,
  
  objectAt: function(idx) {
    if (idx >= this.get('length')) return undefined;
    
    var content = this._content, ret ;
    if (!content) content = this._content = [];
    
    ret = content[idx];
    if (!ret) {
      ret = content[idx] = SC.Object.create({ 
        title: "ContentItem %@".fmt(idx)
      });
    }
    
    return ret ;
  }
});

var pane = SC.ControlTestPane.design()
  .add("basic-even", SC.ScrollView.design({
    layout: { left: 0, right: 0, top: 0, height: 180 },
    hasHorizontalScroller: false,
    contentView: SC.ListView.design({
      content: ContentArray.create({ length: 10 }),
      showAlternatingRows: true,
      rowHeight: 20
    })
  }))
  .add("basic-odd", SC.ScrollView.design({
    layout: { left: 0, right: 0, top: 0, height: 180 },
    hasHorizontalScroller: false,
    contentView: SC.ListView.design({
      content: ContentArray.create({ length: 11 }),
      showAlternatingRows: true,
      rowHeight: 20
    })
  }));
  
pane.show(); // add a test to show the test pane
window.pane = pane ;

function verifyClasses(views) {
  var evens = SC.IndexSet.create(0).addEach([2,4,6,8,10]);
  var odds = SC.IndexSet.create(1).addEach([3,5,7,9]);

  views.forEach(function(item) {
    var cq = item.$();
    var idx = item.get('contentIndex');

    if (evens.contains(idx)) {
      ok(!cq.hasClass('odd'), "item %@ doesn't have 'odd' CSS class".fmt(idx));
      ok(cq.hasClass('even'), "item %@ has 'even' CSS class".fmt(idx));
    }
    else if (odds.contains(idx)) {
      ok(cq.hasClass('odd'), "item %@ has 'odd' CSS class".fmt(idx));
      ok(!cq.hasClass('even'), "item %@ doesn't have 'even' CSS class".fmt(idx));
    }
  });
}

test("alternating class set on list view", function() {
  var listView = pane.view("basic-even").contentView;
  var cq = listView.$();
  
  ok(cq.hasClass('alternating'), "ListView instance should have 'alternating' CSS class");
});

test("even/odd classes on ListItemView children - even", function() {
  var items = pane.view("basic-even").contentView.childViews;
  verifyClasses(items);
});

test("even/odd classes on ListItemView children - odd", function() {
  items = pane.view("basic-odd").contentView.childViews;
  verifyClasses(items);
});

test("even/odd classes with incremental rendering - even", function() {
  var scrollView = pane.view("basic-even"),
      listView = scrollView.contentView,
      item = listView.childViews;
  
  SC.run(function() {
    scrollView.scrollTo(0,21);
  });
  
  verifyClasses(items);
  
  SC.run(function() {
    scrollView.scrollTo(0,0);
  });
  
  verifyClasses(items);
});

test("even/odd classes with incremental rendering - odd", function() {
  var scrollView = pane.view("basic-odd"),
      listView = scrollView.contentView,
      item = listView.childViews;
  
  SC.run(function() {
    scrollView.scrollTo(0,21);
  });
  
  verifyClasses(items);
  
  SC.run(function() {
    scrollView.scrollTo(0,0);
  });
  
  verifyClasses(items);
});