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

/*global module test htmlbody ok equals same stop start */

var itemList = [{ title: “Red”, value: “red”, enabled: YES,ariaLabeledBy: “color” }, { title: “Green”, value: “green”,ariaLabeledBy: “color” }, { title: “Blue”, value: “blue”,ariaLabeledBy: “color” }], itemList2 = [{ title: “Cyan”, value: “cyan”, enabled: YES,ariaLabel: “itemList1” }, { title: “Magenta”, value: “magenta”,ariaLabel: “itemList1” }, { title: “Yellow”, value: “yellow”,ariaLabel: “itemList1” },{ title: “blacK”, value: “black”,ariaLabel: “itemList1” }], itemList3 = [{ title: “Red”, value: “red”, enabled: YES, width: 30 }, { title: “Green”, value: “green”, width: 50 }, { title: “Blue”, value: “blue”, width: 40 }];

var pane = SC.ControlTestPane.design()

.add("basic", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("checked", SC.RadioView, {
  value: "red",
  isEnabled: YES,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("disabled", SC.RadioView, {
  value: "",
  isEnabled: NO,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("enabled first", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  itemIsEnabledKey: 'enabled',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("horizontal", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: 'Yes No'.w(),
  // LAYOUT_VERTICAL is default
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("horizontal widths", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList3,
  layoutDirection: SC.LAYOUT_HORIZONTAL,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  itemWidthKey: 'width'
})

.add("aria-role-group", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("aria-role-radio", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList,
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("aria-label", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList2,
  itemAriaLabelKey: 'ariaLabel',
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
})

.add("aria-labeledBy", SC.RadioView, {
  value: "",
  isEnabled: YES,
  items: itemList,
  itemAriaLabeledByKey: 'ariaLabeledBy',
  itemTitleKey: 'title',
  itemValueKey: 'value',
  layoutDirection: SC.LAYOUT_HORIZONTAL
});

pane.verifyButtons = function verifyButtons(view, items) {

var radioButtons = view.$('.sc-radio-button');
equals(radioButtons.length, items.length, 'number of radio buttons should be %@'.fmt(items.length));

var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
    idx = parseInt(theInput.attr('index'),0),
    buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));

  equals(theInput.attr('aria-checked'), 'false', 'radio button #%@ should not be checked'.fmt(idx));
  ok(!theInput.hasClass('disabled'), 'radio button #%@ should not be disabled'.fmt(idx));

  i++;
});

};

pane.verifyLabels = function verifyLabels(view, items) {

var labels = view.$('span.sc-button-label');
equals(labels.length, items.length, 'number of labels should be %@'.fmt(items.length));

var idx = 0;
labels.forEach(function(label) {
  equals(label.innerHTML, items[idx].title, 'radio button #%@ should have original label'.fmt(idx));
  idx++;
});

};

// .….….….….….….….….….….….….….….. // TEST VIEWS // module('SC.RadioView UI', {

setup: function(){
  htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
  pane.standardSetup().setup();
},
teardown: function(){
  pane.standardSetup().teardown();
  clearHtmlbody();
}

});

test(“basic”, function() {

var view = pane.view('basic');

ok(!view.$().hasClass('disabled'), 'should not have disabled class');
pane.verifyButtons(view, itemList);
pane.verifyLabels(view, itemList);

// Modify the items array in place
itemList.replace(0, {title: "Hue", value: "hue", enabled: YES });
itemList.replace(1, { title: "Saturation", value: "saturation" });
itemList.replace(2, { title: "Brightness", value: "brightness"});

// Allow the radio view a chance to update
SC.RunLoop.begin().end();

pane.verifyButtons(view, itemList);
pane.verifyLabels(view, itemList);

// Swap out the items array
view.set('items', itemList2);

// Allow the radio view a chance to update
SC.RunLoop.begin().end();

pane.verifyButtons(view, itemList2);
pane.verifyLabels(view, itemList2);

// Reset the items array before moving on
itemList.replace(0, { title: "Red", value: "red", enabled: YES });
itemList.replace(1, { title: "Green", value: "green" });
itemList.replace(2, { title: "Blue", value: "blue" });

});

test(“checked”, function() {

var view = pane.view('checked');

ok(!view.$().hasClass('disabled'), 'should not have disabled class');

var radioButtons = view.$('.sc-radio-button');
equals(radioButtons.length, 3, 'number of radio buttons should be 3');

var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
      idx = parseInt(theInput.attr('index'),0),
      buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
  if(idx===0) {
    equals(theInput.attr('aria-checked'), 'true', 'radio button #%@ should be checked'.fmt(idx));
  } else {
    equals(theInput.attr('aria-checked'), 'false', 'radio button #%@ should not be checked'.fmt(idx));
  }

  ok(!theInput.hasClass('disabled'), 'radio button #%@ should not be disabled'.fmt(idx));
  i++;
});

var labels = view.$('span.sc-button-label');
equals(labels.length, 3, 'number of labels should be 3');

var idx = 0;
labels.forEach(function(label) {
  equals(label.innerHTML, itemList[idx].title, 'radio button #%@ should have original label'.fmt(idx));
  idx++;
});

});

test(“disabled”, function() {

var view = pane.view('disabled');

ok(view.$().hasClass('disabled'), 'should have disabled class');

var radioButtons = view.$('.sc-radio-button');
equals(radioButtons.length, 3, 'number of radio buttons should be 3');

var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
    idx = parseInt(theInput.attr('index'),0),
    buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
  equals(theInput.attr('aria-checked'), 'false', 'radio button #%@ should not be checked'.fmt(idx));

  // NOTE: the individual buttons SHOULD be disabled if the control itself is.
  ok(theInput.hasClass('disabled'), 'radio button #%@ should be disabled'.fmt(idx));
  i++;
});

var labels = view.$('span.sc-button-label');
equals(labels.length, 3, 'number of labels should be 3');

var idx = 0;
labels.forEach(function(label) {
  equals(label.innerHTML, itemList[idx].title, 'radio button #%@ should have original label'.fmt(idx));
  idx++;
});

});

test(“enabled first”, function() {

var view = pane.view('enabled first');

ok(!view.$().hasClass('disabled'), 'should not have disabled class');

var radioButtons = view.$('.sc-radio-button');
equals(radioButtons.length, 3, 'number of radio buttons should be 3');
SC.RunLoop.begin();
view.set('isEnabled', NO);
SC.RunLoop.end();
var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
    idx = parseInt(theInput.attr('index'),0),
    buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
  ok(theInput.attr('aria-checked'), 'false', 'radio button #%@ should not be checked'.fmt(idx));
  i++;
});

ok(view.$().hasClass('disabled'), 'should have disabled class');

var labels = view.$('span.sc-button-label');
equals(labels.length, 3, 'number of labels should be 3');

var idx = 0;
labels.forEach(function(label) {
  equals(label.innerHTML, itemList[idx].title, 'radio button #%@ should have original label'.fmt(idx));
  idx++;
});

});

test(“item widths”, function() {

 var radioButtons = pane.view('horizontal widths').$('.sc-radio-button'),
     widths = [30, 50, 40],
     idx = 0, radio;

 radioButtons.forEach(function(elem) {
   equals(SC.$(elem).width(), widths[idx], 'radio button %@ should width specified by itemWidthKey'.fmt(idx, widths[idx]));
   idx++;
 });
});

test(“aria-role-group”, function() {

var radioButton = pane.view('aria-role-group');
equals(radioButton.$().attr('role'),'radiogroup', 'role should be radiogroup');

});

test(“aria-role-radio”, function() {

var radioButtons = pane.view('aria-role-radio').$('.sc-radio-button');

var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
    idx = parseInt(theInput.attr('index'),0),
    buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));
  equals(theInput.attr('role'), 'radio', 'radio button #%@ should have role as radio'.fmt(idx));

  i++;
});

});

test(“aria-labeledBy”, function() {

var radioButtons = pane.view('aria-labeledBy').$('.sc-radio-button');

var i = 0;
radioButtons.forEach(function(radioInput) {
  var theInput = SC.$(radioInput),
    idx = parseInt(theInput.attr('index'),0),
    buttonValue = theInput.attr('value');

  equals(idx, i, 'radio button #%@ should have field value %@'.fmt(idx, i));

  var labelled_by = document.getElementById(theInput.attr('aria-labelledby'));
  equals(labelled_by, theInput.find('.sc-button-label')[0], 'radio button #%@ should have aria-labelledby pointing to label element'.fmt(idx));

  i++;
});

});