// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2013 7x7 Software, Inc. // License: Licensed under MIT license (see license.js) // ==========================================================================

/*global module, test, equals, ok */

var view;

/** Test the SC.View states. */ module(“SC.View:childViewLayout”, {

setup: function () {
  view = SC.View.create();
},

teardown: function () {
  view.destroy();
  view = null;
}

});

test(“basic VERTICAL_STACK”, function () {

SC.run(function() {
  view = SC.View.create({

    childViewLayout: SC.View.VERTICAL_STACK,

    childViewLayoutOptions: {
      paddingBefore: 10,
      paddingAfter: 20,
      spacing: 5
    },
    childViews: ['sectionA', 'sectionB', 'sectionC'],
    layout: { left: 10, right: 10, top: 20 },
    sectionA: SC.View.design({
      layout: { height: 100 }
    }),

    sectionB: SC.View.design({
      layout: { border: 1, height: 50 }
    }),

    sectionC: SC.View.design({
      layout: { left: 10, right: 10, height: 120 }
    })

  });
});

equals(view.sectionA.layout.top, 10, "sectionA top should be 10");
equals(view.sectionB.layout.top, 115, "sectionB top should be 115");
equals(view.sectionC.layout.top, 170, "sectionC top should be 170");
equals(view.layout.height, 310, "view height should be 310");

});

test(“basic HORIZONTAL_STACK”, function () {

SC.run(function() {
  view = SC.View.create({
    childViewLayout: SC.View.HORIZONTAL_STACK,
    childViewLayoutOptions: {
      paddingBefore: 10,
      paddingAfter: 20,
      spacing: 5
    },
    childViews: ['sectionA', 'sectionB', 'sectionC'],
    layout: { left: 10, bottom: 20, top: 20 },

    sectionA: SC.View.design({
      layout: { width: 100 }
    }),

    sectionB: SC.View.design({
      layout: { border: 1, width: 50 }
    }),

    sectionC: SC.View.design({
      layout: { top: 10, bottom: 10, width: 120 }
    })
  });
});

equals(view.sectionA.layout.left, 10, "sectionA left should be 10");
equals(view.sectionB.layout.left, 115, "sectionB left should be 115");
equals(view.sectionC.layout.left, 170, "sectionC left should be 170");
equals(view.layout.width, 310, "view width should be 310");

});

test(“HORIZONTAL_STACK - with fillRatio”, function () {

var view = null;
SC.run(function() {
  view = SC.View.create({
    layout: { height: 10, width: 200 },
    childViewLayout: SC.View.HORIZONTAL_STACK,
    childViewLayoutOptions: {
      resizeToFit: NO,
      paddingBefore: 10,
      paddingAfter: 20,
      spacing: 10
    },
    childViews: [ "c1", "c2", "c3", "c4", "c5" ],

    c1: SC.View.create({
      layout: { height: 10, width: 10 },
    }),
    c2: SC.View.create({
      layout: { height: 10 },
      fillRatio: 1
    }),
    c3: SC.View.create({
      layout: { height: 10, width: 10 },
    }),
    c4: SC.View.create({
      layout: { height: 10 },
      fillRatio: 2
    }),
    c5: SC.View.create({
      layout: { height: 10 },
      border: 1,
      isVisible: NO
    }),
  });
});

equals(view.c1.layout.left, 10, "c1 left should be 10");
equals(view.c2.layout.left, 30, "c2 left should be 10");
equals(view.c2.get( "borderFrame" ).width, 40, "c2 width should be 40");
equals(view.c3.layout.left, 80, "c3 left should be 10");
equals(view.c4.layout.left, 100, "c4 left should be 10");
equals(view.c4.get( "borderFrame" ).width, 80, "c4 width should be 80");

SC.run(function() {
  view.c2.set( "isVisible", NO );
  view.c4.set( "isVisible", NO );
  view.c5.set( "isVisible", YES );
});

equals(view.c1.layout.left, 10, "c1 left should be 10");
equals(view.c3.layout.left, 30, "c3 left should be 30");
equals(view.c5.layout.left, 50, "c5 left should be 50");
equals(view.c5.get( "borderFrame" ).width, 130, "being the last child, c5 will extend to fill the available space, width should be 130");

});

test(“VERTICAL_STACK - with fillRatio”, function () {

var view = null;
SC.run(function() {
  view = SC.View.create({
    layout: { width: 10, height: 200 },
    childViewLayout: SC.View.VERTICAL_STACK,
    childViewLayoutOptions: {
      resizeToFit: NO,
      paddingBefore: 10,
      paddingAfter: 20,
      spacing: 10
    },
    childViews: [ "c1", "c2", "c3", "c4", "c5" ],

    c1: SC.View.create({
      layout: { width: 10, height: 10 },
    }),
    c2: SC.View.create({
      layout: { width: 10 },
      fillRatio: 1
    }),
    c3: SC.View.create({
      layout: { width: 10, height: 10 },
    }),
    c4: SC.View.create({
      layout: { width: 10 },
      fillRatio: 2
    }),
    c5: SC.View.create({
      layout: { width: 10 },
      border: 1,
      isVisible: NO
    }),
  });
});

equals(view.c1.layout.top, 10, "c1 top should be 10");
equals(view.c2.layout.top, 30, "c2 top should be 10");
equals(view.c2.get( "borderFrame" ).height, 40, "c2 height should be 40");
equals(view.c3.layout.top, 80, "c3 top should be 10");
equals(view.c4.layout.top, 100, "c4 top should be 10");
equals(view.c4.get( "borderFrame" ).height, 80, "c4 height should be 80");

SC.run(function() {
  view.c2.set( "isVisible", NO );
  view.c4.set( "isVisible", NO );
  view.c5.set( "isVisible", YES );
});

equals(view.c1.layout.top, 10, "c1 top should be 10");
equals(view.c3.layout.top, 30, "c3 top should be 30");
equals(view.c5.layout.top, 50, "c5 top should be 50");
equals(view.c5.get( "borderFrame" ).height, 130, "being the last child, c5 will extend to fill the available space, height should be 130");

});