// ========================================================================== // 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 */

(function() { var pane = SC.ControlTestPane.design()

.add("slider basic", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 50,
  minimum: 0,
  maximum: 100
})
.add("slider disabled", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 50,
  minimum: 0,
  maximum: 100,
  isEnabled: NO
})
.add("slider no-scroll", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 50,
  minimum: 0,
  maximum: 100,
  updateOnScroll: false
})
.add("slider value 100", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 100,
  minimum: 0,
  maximum: 100
})
.add("slider basic step 20", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 50,
  minimum: 0,
  maximum: 100,
  step: 20
})
.add("slider aria-role", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 10,
  minimum: 0,
  maximum: 50
})
.add("slider aria-valuemax", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 40,
  minimum: 0,
  maximum: 100
})
.add("slider aria-valuemin", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 20,
  minimum: 0,
  maximum: 100
})
.add("slider aria-valuenow", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 40,
  minimum: 0,
  maximum: 100
})
.add("slider aria-valuetext", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 20,
  minimum: 0,
  maximum: 100
})
.add("slider aria-orientation", SC.SliderView, {
  layout: {top:0, bottom:0, left:0, width: 250},
  value: 50,
  minimum: 0,
  maximum: 100
})
.add("slider markSteps", SC.SliderView, {
  layout: { top:0, bottom:0, left:0, width: 250 },
  value: 20,
  minimum: 0,
  maximum: 100,
  step: 20,
  markSteps: true
});

// .….….….….….….….….….….….….….….. // TEST VIEWS //

module(“SC.SliderView UI”, pane.standardSetup());

test(“basic”, function() {

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

ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
ok(view.$('.track').length > 0, 'should have track classed element');
ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
equals(view.$('.sc-handle')[0].style.left, '50%', 'left of sc-handle should be 50%');

});

test(“disabled”, function() {

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

ok(view.$().hasClass('disabled'), 'should have disabled class');
ok(view.$('.track').length > 0, 'should have track classed element');
ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
equals(view.$('.sc-handle')[0].style.left, '50%', 'left of sc-handle should be 50%');

});

test(“no scroll”, function() {

var view = pane.view('slider no-scroll');

ok(!view.mouseWheel({}), "A slider view with updateOnScroll set to false should return NO from the mouseWheel event handler.");

});

test(“basic value 100”, function() {

var view = pane.view('slider value 100');

ok(!view.$().hasClass('disabled'), 'should have disabled class');
ok(view.$('.track').length > 0, 'should have track classed element');
ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
equals(view.$('.sc-handle')[0].style.left, '100%', 'left of sc-handle should be 100%');

});

test(“basic step 20”, function() {

var view = pane.view('slider basic step 20');

ok(!view.$().hasClass('disabled'), 'should have disabled class');
ok(view.$('.track').length > 0, 'should have track classed element');
ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
equals(view.$('.sc-handle')[0].style.left, '60%', 'left of sc-handle should be 60%');

});

test(“Check if aria role is set to slider view”, function() {

var viewElem = pane.view('slider aria-role').$();
ok(viewElem.attr('role') === 'slider', 'aria-role is set to the slider  view');

});

test(“Check if attribute aria-valuemax is set correctly”, function() {

var viewElem = pane.view('slider aria-valuemax').$();
equals(viewElem.attr('aria-valuemax'), 100, 'aria-valuemax should be 100');

});

test(“Check if attribute aria-valuemin is set correctly”, function() {

var viewElem = pane.view('slider aria-valuemin').$();
equals(viewElem.attr('aria-valuemin'), 0, 'aria-valuemin should be 0');

});

test(“Check if attribute aria-valuenow is set correctly”, function() {

var viewElem = pane.view('slider aria-valuenow').$();
equals(viewElem.attr('aria-valuenow'), 40, 'aria-valuenow should be 40');

});

test(“Check if attribute aria-orientation is set correctly”, function() {

var viewElem = pane.view('slider aria-orientation').$();
equals(viewElem.attr('aria-orientation'), "horizontal", 'aria-orientation should be horizontal');

});

// markSteps

test(“markStep”, function() {

var view = pane.view('slider markSteps'),
    marks, expectedCount;

// Initial.
marks = view.$().find('.sc-slider-step-mark');
expectedCount = Math.floor((view.get('maximum') - view.get('minimum')) / view.get('step')) + 1; // yeah yeah math.floor + 1 is math.ciel
equals(marks.length, expectedCount, "A view with markSteps set to true contains the correct number of marks");
ok(marks.eq(2).hasClass('sc-slider-step-mark-2'), "The nth mark has sc-slider-step-mark-n class.");
ok(view.$().find('.sc-slider-step-mark-first').length === 1, "Only one mark is labeled as the first.");
ok(view.$().find('.sc-slider-step-mark-last').length === 1, "Only one mark is labeled as the last.");

// Change.
SC.run(function() { view.set('maximum', 200); });
marks = view.$().find('.sc-slider-step-mark');
expectedCount = Math.floor((view.get('maximum') - view.get('minimum')) / view.get('step')) + 1; // yeah yeah math.floor + 1 is math.ciel
equals(marks.length, expectedCount, "Changing maximum correctly updates the number of marks");
ok(view.$().find('.sc-slider-step-mark-first').length === 1, "Only one mark is labeled as the first.");
ok(view.$().find('.sc-slider-step-mark-last').length === 1, "Only one mark is labeled as the last.");

// Test mark at value = 0. (See https://github.com/sproutcore/sproutcore/issues/1229)
SC.run(function() {
  view.set('minimum', -1).set('maximum', 4).set('step', 1);
});

marks = view.$('.sc-slider-step-mark');
equals(marks[1].style.left, "20%", "The mark representing value zero is positioned correctly when minimum is less than zero");

});

})();