162 lines
7.6 KiB
JavaScript
162 lines
7.6 KiB
JavaScript
(function(context, $) {
|
|
|
|
describe("Layout", function() {
|
|
var layout, cardLayout, testOpts;
|
|
|
|
beforeEach(function() {
|
|
layout = new context.JK.Layout();
|
|
});
|
|
|
|
describe("Construct", function() {
|
|
describe("defaults", function() {
|
|
it("headerHeight should be 75", function() {
|
|
expect(layout.getOpts().headerHeight).toEqual(75);
|
|
});
|
|
it("sidebarWidth should be 300", function() {
|
|
expect(layout.getOpts().sidebarWidth).toEqual(300);
|
|
});
|
|
it("gutter should be 60", function() {
|
|
expect(layout.getOpts().gutter).toEqual(60);
|
|
});
|
|
});
|
|
describe("override one default", function() {
|
|
it("headerHeight should be 300", function() {
|
|
testOpts = {
|
|
allowBodyOverflow: true,
|
|
headerHeight: 300
|
|
};
|
|
layout.initialize(testOpts);
|
|
expect(layout.getOpts().headerHeight).toEqual(300);
|
|
});
|
|
it("sidebarWidth should be 300", function() {
|
|
expect(layout.getOpts().sidebarWidth).toEqual(300);
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
describe("getScreenDimensions", function() {
|
|
describe("Description", function() {
|
|
|
|
});
|
|
});
|
|
|
|
describe("CardLayout", function() {
|
|
describe("One cell, zero margins", function() {
|
|
it("should fill space", function() {
|
|
testOpts = { allowBodyOverflow:true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 1, 1, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:100,height:100});
|
|
});
|
|
});
|
|
|
|
describe("Two columns, zero margins", function() {
|
|
it("should be half width each", function() {
|
|
testOpts = { allowBodyOverflow:true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:50,height:100});
|
|
|
|
cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 1, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:50,width:50,height:100});
|
|
});
|
|
});
|
|
|
|
describe("Two rows, zero margins", function() {
|
|
it("should be half height each", function() {
|
|
testOpts = { allowBodyOverflow:true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 1, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:100,height:50});
|
|
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 1, 1, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:50,left:0,width:100,height:50});
|
|
});
|
|
});
|
|
|
|
describe("two cols, colspan 2, zero margins", function() {
|
|
it("should fill width", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 1, 2, 0, 0, 1, 2);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:100,height:100});
|
|
});
|
|
});
|
|
|
|
describe("two rows, rowspan 2, zero margins", function() {
|
|
it("should fill height", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 1, 0, 0, 2, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:100,height:100});
|
|
});
|
|
});
|
|
|
|
describe("4x4, zero margins, row 1, col 1, rowspan 2, colspan 2", function() {
|
|
it("should fill middle 4 cells", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 0, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 4, 4, 1, 1, 2, 2);
|
|
expect(cardLayout).toEqual({top:25,left:25,width:50,height:50});
|
|
});
|
|
});
|
|
|
|
// Outer margins
|
|
describe("1x1, 100x100, outermargin 10", function() {
|
|
it("should be at 0x0, 80x80", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 10, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 1, 1, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:80,height:80});
|
|
});
|
|
});
|
|
describe("2x2, 100x100, outermargin 10", function() {
|
|
it("should be at 0x0, 40x40", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 10, gridPadding: 0};
|
|
layout.initialize(testOpts);
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:40,height:40});
|
|
});
|
|
});
|
|
|
|
// Inner margins
|
|
describe("2x2, 100x100, padding 10", function() {
|
|
it("10 pixels in and 10 pixel gutters", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 0, gridPadding: 10};
|
|
layout.initialize(testOpts);
|
|
// upper left
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:45,height:45});
|
|
// upper right
|
|
cardLayout = layout.getCardLayout(100, 100, 2, 2, 0, 1, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:65,width:45,height:45});
|
|
});
|
|
});
|
|
|
|
// 5 block test like starting home.
|
|
describe("home page test", function() {
|
|
it("5 blocks", function() {
|
|
testOpts = { allowBodyOverflow: true, gridOuterMargin: 10, gridPadding: 10};
|
|
layout.initialize(testOpts);
|
|
// Cell 1
|
|
cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 0, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:0,width:232,height:485});
|
|
// Cell 2
|
|
cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 1, 1, 1);
|
|
expect(cardLayout).toEqual({top:0,left:252,width:232,height:485});
|
|
// Cell 3
|
|
cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 0, 2, 1, 2);
|
|
expect(cardLayout).toEqual({top:0,left:504,width:484,height:485});
|
|
// Cell 4
|
|
cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 1, 0, 1, 2);
|
|
expect(cardLayout).toEqual({top:505,left:0,width:484,height:485});
|
|
// Cell 5
|
|
cardLayout = layout.getCardLayout(1000, 1000, 2, 4, 1, 2, 1, 2);
|
|
expect(cardLayout).toEqual({top:505,left:504,width:484,height:485});
|
|
});
|
|
});
|
|
|
|
});
|
|
});
|
|
}(window, jQuery)); |