// ========================================================================== // 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');

});

})();