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

});