// ========================================================================== // 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("progress basic", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 25, minimum: 0, maximum: 100 }) .add("progress disabled", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 0, minimum: 0, maximum: 100, isEnabled: NO }) .add("progress basic value 0", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 0, minimum: 0, maximum: 100 }) .add("progress basic value 100", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 100, minimum: 0, maximum: 100 }) .add("progress basic max 50", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 25, minimum: 0, maximum: 50 }) .add("progress basic min max", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 75, minimum: 50, maximum: 100 }) .add("progress aria-role", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 10, minimum: 0, maximum: 50 }) .add("progress aria-valuemax", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 40, minimum: 0, maximum: 100 }) .add("progress aria-valuemin", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 20, minimum: 0, maximum: 100 }) .add("progress aria-valuenow", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 40, minimum: 0, maximum: 100 }) .add("progress aria-valuetext", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 20, minimum: 0, maximum: 100 }) .add("progress aria-disabled", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, value: 50, minimum: 0, maximum: 100, isEnabled: NO }).add("progress indeterminate", SC.ProgressView, { layout: {top:0, bottom:0, left:0, width: 250}, isIndeterminate: YES });
// .….….….….….….….….….….….….….….. // TEST VIEWS // module(“SC.ProgressView 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('progress basic'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$('.track').length > 0, 'should have track class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "25%", 'width should be 25%'); // browsers compute the width after % adjustment differently. just be close var v = (SC.browser.isIE || SC.browser.isMozilla || SC.browser.isChrome) ? 63 : 62; equals(view.$('.content').width(), v, 'pixel width ');
});
test(“disabled”, function() {
var view = pane.view('progress disabled'); ok(view.$().hasClass('disabled'), 'should have disabled class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "0%", 'width should be 0%'); equals(view.$('.content').width(), 0, 'pixel width ');
});
test(“indeterminate”, function() {
var view = pane.view('progress indeterminate'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$().hasClass('indeterminate'), 'should have indeterminate class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "100%", 'width should be 100%');
});
test(“basic value 0”, function() {
var view = pane.view('progress basic value 0'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "0%", 'width should be 0%'); equals(view.$('.content').width(), 0, 'pixel width ');
});
test(“basic value 100”, function() {
var view = pane.view('progress basic value 100'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "100%", 'width should be 100%'); equals(view.$('.content').width(), 250, 'pixel width '); // Check that the sc-complete class is added ok(view.$().hasClass('sc-complete'), 'should have sc-complete class');
});
test(“basic max 50”, function() {
var view = pane.view('progress basic max 50'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "50%", 'width should be 50%'); equals(view.$('.content').width(), 125, 'pixel width ');
});
test(“basic min max”, function () {
var view = pane.view('progress basic min max'); ok(!view.$().hasClass('disabled'), 'should NOT have disabled class'); ok(view.$('.content').length > 0, 'should have content class'); equals(view.$('.content')[0].style.width, "50%", 'width should be 50%'); equals(view.$('.content').width(), 125, 'pixel width ');
})
// .….….….….….….….….….….….….….….. // TEST CHANGING PROGRESS BARS //
test(“changing value from empty -> value”, function() {
var view = pane.view('progress basic value 0'); equals(view.$('.content').width(), 0, 'precon - pixel width should be 0'); SC.RunLoop.begin(); view.set('value', 50); SC.RunLoop.end(); equals(view.$('.content')[0].style.width, "50%", 'width should be 50%'); var assertions = function(){ equals(view.$('.content').width(), 125, 'pixel width '); start(); }; stop(); setTimeout(assertions, 200);
});
test(“changing value from full -> empty”, function() {
var view = pane.view('progress basic value 100'); // Check that the sc-complete class is added ok(view.$().hasClass('sc-complete'), 'should have sc-complete class'); equals(view.$('.content').width(), 250, 'precon - pixel width should be 316'); SC.RunLoop.begin(); view.set('value', 0); SC.RunLoop.end(); equals(view.$('.content')[0].style.width, "0%", 'width should be 0%'); var assertions = function(){ equals(view.$('.content').width(), 0, 'pixel width '); start(); }; stop(); setTimeout(assertions, 200);
});
test(“changing value from full -> negative number”, function() {
var view = pane.view('progress basic value 100'); SC.RunLoop.begin(); view.set('value', 100); SC.RunLoop.end(); // Check that the sc-complete class is added ok(view.$().hasClass('sc-complete'), 'should have sc-complete class'); SC.RunLoop.begin(); view.set('value', -10); SC.RunLoop.end(); equals(view.$('.content')[0].style.width, "0%", 'width should be 0%'); var assertions = function(){ equals(view.$('.content').width(), 0, 'pixel width '); start(); }; stop(); setTimeout(assertions, 200);
});
test(“changing value to over maximum”, function() {
var view = pane.view('progress basic'); // browsers compute the width after % adjustment differently. just be close var v = (SC.browser.isIE || SC.browser.isMozilla || SC.browser.isChrome) ? 63 : 62; equals(view.$('.content').width(), v, 'precon - pixel width should be fixed'); SC.RunLoop.begin(); view.set('value', 110); SC.RunLoop.end(); equals(view.$('.content')[0].style.width, "100%", 'width should be 100%'); // Check that the sc-complete class is added ok(view.$().hasClass('sc-complete'), 'should have sc-complete class'); var assertions = function(){ equals(view.$('.content').width(), 250, 'pixel width '); start(); }; stop(); setTimeout(assertions, 200);
});
test(“changing value to a string”, function() {
var view = pane.view('progress basic'); SC.RunLoop.begin(); view.set('value', 25); SC.RunLoop.end(); SC.RunLoop.begin(); view.set('value', 'aString'); SC.RunLoop.end(); equals(view.$('.content')[0].style.width, "0%", 'width should be 0%'); var assertions = function(){ equals(view.$('.content').width(), 0, 'pixel width '); start(); }; stop(); setTimeout(assertions, 200);
});
test(“on indeterminate state animation respects start,stop”, function() {
var view = pane.view('progress indeterminate'); SC.RunLoop.begin(); view.set('isRunning', YES); SC.RunLoop.end(); var currentBgPos = view.$('.content .middle').css('background-position'); var assertionsOnStart = function(){ ok(view.$().hasClass('indeterminate'), 'should have indeterminate class'); ok(view.$().hasClass('running'), 'should have running class'); var newBgPos = view.$('.content .middle').css('background-position'); if(SC.platform.supportsCSSTransitions) { ok((currentBgPos === newBgPos), 'bg pos should NOT have changed on platforms that support css transitions (old was '+currentBgPos+' new is: '+newBgPos+')'); } else { ok(!(currentBgPos === newBgPos), 'bg pos should have changed (old was '+currentBgPos+' new is: '+newBgPos+')'); } SC.RunLoop.begin(); view.set('isRunning', NO); SC.RunLoop.end(); currentBgPos = view.$('.content .middle').css('background-position'); var assertionsOnStop = function(){ newBgPos = view.$('.content .middle').css('background-position'); ok((currentBgPos === newBgPos), 'after stopping, bg pos should NOT have changed (old was '+currentBgPos+' new is: '+newBgPos+')'); start(); }; setTimeout(assertionsOnStop, 400); }; stop(); setTimeout(assertionsOnStart, 500);
});
test(“Check if aria role is set to progress view”, function() {
var viewElem = pane.view('progress aria-role').$(); ok(viewElem.attr('role') === 'progressbar', 'aria-role is set to the progress view');
});
test(“Check if attribute aria-valuemax is set correctly”, function() {
var viewElem = pane.view('progress 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('progress 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('progress aria-valuenow').$(); equals(viewElem.attr('aria-valuenow'), 40, 'aria-valuenow should be 40');
});
test(“Check if attribute aria-valuetext is set correctly”, function() {
var viewElem = pane.view('progress aria-valuetext').$(); equals(viewElem.attr('aria-valuetext'), 20, 'aria-valuetext should be 20');
});
})();