// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2013 7x7 Software, Inc. // License: Licensed under MIT license (see license.js) // ========================================================================== /*global module, test, equals, ok, start, stop */ var view, pane; /** Test the SC.View states. */ module("SC.View Transition States", { setup: function () { view = SC.View.create(); pane = SC.Pane.create({ layout: { width: 400, height: 400 } }); }, teardown: function () { view.destroy(); pane.destroy(); view = pane = null; } }); /** */ // test("Reversing SHOWING to HIDDEN: FADE_IN", function () { // stop(2000); // view.set('isVisible', false); // SC.run(function () { // pane.appendChild(view); // pane.append(); // }); // // Test assumption. // equals(view.get('isVisible'), false, "The isVisible property of the view is"); // ok(view.$().hasClass('sc-hidden'), "The view has sc-hidden class name."); // equals(view.$().css('opacity'), '1', "The view's opacity is"); // view.set('transitionShow', SC.View.FADE_IN); // SC.run(function () { // view.set('isVisible', true); // }); // equals(view.$().css('opacity'), '0', "The view's opacity is"); // setTimeout(function () { // var jqEl = view.$(); // // Test assumption. // equals(view.get('isVisible'), true, "The isVisible property of the view is"); // ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); // ok(jqEl.css('opacity') > 0, "The view's opacity is not 0."); // ok(jqEl.css('opacity') < 1, "The view's opacity is not 1."); // SC.run(function () { // view.set('isVisible', false); // }); // jqEl = view.$(); // equals(view.get('isVisible'), false, "The isVisible property of the view is"); // ok(jqEl.hasClass('sc-hidden'), "The view has sc-hidden class name."); // equals(jqEl.css('opacity'), '1', "The view's opacity is"); // start(); // }, 200); // }); /** */ test("Reversing SHOWING to HIDING: FADE_IN & FADE_OUT", function () { stop(2000); view.set('isVisible', false); SC.run(function () { pane.appendChild(view); pane.append(); }); // Test assumption. equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(view.$().hasClass('sc-hidden'), "The view has sc-hidden class name."); equals(view.$().css('opacity'), '1', "The view's opacity is"); view.set('transitionShow', SC.View.FADE_IN); view.set('transitionHide', SC.View.FADE_OUT); SC.run(function () { view.set('isVisible', true); }); equals(view.$().css('opacity'), '0', "The view's opacity is"); setTimeout(function () { var jqEl = view.$(); // Test assumption. equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's opacity is not 0."); ok(jqEl.css('opacity') < 1, "The view's opacity is not 1."); SC.run(function () { view.set('isVisible', false); }); jqEl = view.$(); equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's opacity is not 0 still."); }, 200); setTimeout(function () { var jqEl = view.$(); // Test assumption. equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's opacity is not 0."); ok(jqEl.css('opacity') < 1, "The view's opacity is not 1."); }, 400); setTimeout(function () { var jqEl = view.$(); SC.RunLoop.begin().end(); // Test assumption. equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(jqEl.hasClass('sc-hidden'), "The view has sc-hidden class name."); ok(view._layoutStyleNeedsUpdate, "The view's layout needs update"); start(); }, 1500); }); /** */ test("Reversing HIDING to SHOWN: FADE_OUT", function () { stop(2000); SC.run(function () { pane.appendChild(view); pane.append(); }); // Test assumption. equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!view.$().hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); equals(view.$().css('opacity'), '1', "The view's opacity is"); view.set('transitionHide', SC.View.FADE_OUT); SC.run(function () { view.set('isVisible', false); }); equals(view.$().css('opacity'), '1', "The view's opacity is"); // Fading out. setTimeout(function () { var jqEl = view.$(); // Test assumption. equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's opacity is not 0."); ok(jqEl.css('opacity') < 1, "The view's opacity is not 1."); // Cancel fading out. SC.run(function () { view.set('isVisible', true); }); jqEl = view.$(); equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); equals(jqEl.css('opacity'), '1', "The view's opacity is now"); start(); }, 200); }); /** */ test("Reversing HIDING to SHOWING: FADE_IN & FADE_OUT", function () { stop(2000); SC.run(function () { pane.appendChild(view); pane.append(); }); // Test assumption. equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!view.$().hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); equals(view.$().css('opacity'), '1', "The view's opacity is"); view.set('transitionShow', SC.View.FADE_IN); view.set('transitionHide', SC.View.FADE_OUT); SC.run(function () { view.set('isVisible', false); }); equals(view.$().css('opacity'), '1', "The view's opacity is"); setTimeout(function () { var jqEl = view.$(); // Test assumption. equals(view.get('isVisible'), false, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's current opacity is not 0."); ok(jqEl.css('opacity') < 1, "The view's current opacity is not 1."); // Cancel fading out. SC.run(function () { view.set('isVisible', true); }); jqEl = view.$(); equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); ok(jqEl.css('opacity') > 0, "The view's current opacity is not 0 still."); ok(jqEl.css('opacity') < 1, "The view's current opacity is not 1 still."); }, 200); setTimeout(function () { var jqEl = view.$(); // Test assumption. equals(view.get('isVisible'), true, "The isVisible property of the view is"); ok(!jqEl.hasClass('sc-hidden'), "The view doesn't have sc-hidden class name."); equals(jqEl.css('opacity'), '1', "The view's current opacity is now"); start(); }, 1000); });