better tests for height/contentHeight. considers "auto"

This commit is contained in:
Adam Shaw
2014-08-24 19:22:39 -07:00
parent 4ee02bdbe5
commit bed9f94d66
4 changed files with 257 additions and 98 deletions
-49
View File
@@ -1,49 +0,0 @@
describe('contentHeight', function() {
beforeEach(function() {
affix('#cal');
$('#cal').width(900);
});
describe('when the default options are used', function() {
it('should set the height', function() {
$('#cal').width(1350);
$('#cal').fullCalendar();
var height = $('.fc-view-container').height();
expect(height).toEqual(1000);
});
});
describe('when the content height is set', function() {
it('should set the content height', function() {
$('#cal').fullCalendar({
contentHeight: 1000
});
var height = $('.fc-view-container').height();
expect(height).toEqual(1000);
});
it('should not change the container width', function() {
$('#cal').fullCalendar({
contentHeight: 1000
});
var width = $('#cal').width();
expect(width).toEqual(900);
});
});
describe('when the content height setter is used', function() {
it('should set the content height', function() {
$('#cal').fullCalendar();
$('#cal').fullCalendar('option', 'contentHeight', 1137);
var height = $('.fc-view-container').height();
expect(height).toEqual(1137);
});
it('should not change the container width', function() {
$('#cal').fullCalendar();
$('#cal').fullCalendar('option', 'contentHeight', 1137);
var width = $('#cal').width();
expect(width).toEqual(900);
});
});
});
+241
View File
@@ -0,0 +1,241 @@
(function() {
[ 'height', 'contentHeight' ].forEach(function(heightProp) { describe(heightProp, function() {
var options;
var heightElm;
var asAMethod;
beforeEach(function() {
affix('#cal');
$('#cal').width(900);
options = {
defaultDate: '2014-08-01'
};
});
function init(heightVal) {
if (asAMethod) {
$('#cal').fullCalendar(options);
$('#cal').fullCalendar('option', heightProp, heightVal);
}
else {
options[heightProp] = heightVal;
$('#cal').fullCalendar(options);
}
if (heightProp === 'height') {
heightElm = $('.fc');
}
else {
heightElm = $('.fc-view');
}
}
$.each({
'as an init option': false,
'as a method': true
}, function(desc, bool) { describe(desc, function() {
beforeEach(function() {
asAMethod = bool;
});
describe('when in month view', function() {
beforeEach(function() {
options.defaultView = 'month';
});
describe('as a number, when there are no events', function() {
it('should be the specified height, with no scrollbars', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect('.fc-day-grid-container').not.toHaveScrollbars();
});
});
describe('as a number, when there is one tall row of events', function() {
beforeEach(function() {
options.events = repeatClone({ title: 'event', start: '2014-08-04' }, 9);
});
it('should take away height from other rows, but not do scrollbars', function() {
init(600);
var rows = $('.fc-day-grid .fc-row');
var tallRow = rows.eq(1);
var shortRows = rows.not(tallRow); // 0, 2, 3, 4, 5
var shortHeight = shortRows.eq(0).outerHeight();
expect(heightElm.outerHeight()).toBe(600);
shortRows.each(function(i, node) {
var rowHeight = $(node).outerHeight();
var diff = Math.abs(rowHeight - shortHeight);
expect(diff).toBeLessThan(10); // all roughly the same
});
expect(tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2); // much taller
expect('.fc-day-grid-container').not.toHaveScrollbars();
});
});
describe('as a number, when there are many tall rows of events', function() {
beforeEach(function() {
options.events = [].concat(
repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
);
});
it('height is correct and scrollbars show up', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect($('.fc-day-grid-container')).toHaveScrollbars();
});
});
describe('as "auto", when there are many tall rows of events', function() {
beforeEach(function() {
options.events = [].concat(
repeatClone({ title: 'event0', start: '2014-07-28' }, 9),
repeatClone({ title: 'event1', start: '2014-08-04' }, 9),
repeatClone({ title: 'event2', start: '2014-08-11' }, 9),
repeatClone({ title: 'event3', start: '2014-08-18' }, 9),
repeatClone({ title: 'event4', start: '2014-08-25' }, 9),
repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
);
});
it('height is really tall and there are no scrollbars', function() {
init('auto');
expect(heightElm.outerHeight()).toBeGreaterThan(1000); // pretty tall
expect($('.fc-day-grid-container')).not.toHaveScrollbars();
});
});
});
[ 'basicWeek', 'basicDay' ].forEach(function(viewName) {
describe('in ' + viewName + ' view', function() {
beforeEach(function() {
options.defaultView = viewName;
});
describe('as a number, when there are no events', function() {
it('should be the specified height, with no scrollbars', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect('.fc-day-grid-container').not.toHaveScrollbars();
});
});
describe('as a number, when there are many events', function() {
beforeEach(function() {
options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
});
it('should have the correct height, with scrollbars', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect('.fc-day-grid-container').toHaveScrollbars();
});
});
describe('as "auto", when there are many events', function() {
beforeEach(function() {
options.events = repeatClone({ title: 'event', start: '2014-08-01' }, 100);
});
it('should be really tall with no scrollbars', function() {
init('auto');
expect(heightElm.outerHeight()).toBeGreaterThan(1000); // pretty tall
expect('.fc-day-grid-container').not.toHaveScrollbars();
});
});
});
});
[ 'agendaWeek', 'agendaDay' ].forEach(function(viewName) {
describe('in ' + viewName + ' view', function() {
beforeEach(function() {
options.defaultView = viewName;
});
$.each({
'with no all-day section': { allDaySlot: false },
'with no all-day events': { },
'with some all-day events': { events: repeatClone({ title: 'event', start: '2014-08-01' }, 6) }
}, function(desc, moreOptions) {
describe(desc, function() {
beforeEach(function() {
$.extend(options, moreOptions);
});
describe('as a number, with only a few slots', function() {
beforeEach(function() {
options.minTime = '06:00:00';
options.maxTime = '10:00:00';
});
it('should be the correct height, with a horizontal rule to occupy space', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect($('.fc-time-grid > hr')).toBeVisible();
});
});
describe('as a number, with many slots', function() {
beforeEach(function() {
options.minTime = '00:00:00';
options.maxTime = '24:00:00';
});
it('should be the correct height, with scrollbars and no filler hr', function() {
init(600);
expect(heightElm.outerHeight()).toBe(600);
expect($('.fc-time-grid-container')).toHaveScrollbars();
expect($('.fc-time-grid > hr')).not.toBeVisible();
});
});
describe('as "auto", with only a few slots', function() {
beforeEach(function() {
options.minTime = '06:00:00';
options.maxTime = '10:00:00';
});
it('should be really short with no scrollbars nor horizontal rule', function() {
init('auto');
expect(heightElm.outerHeight()).toBeLessThan(500); // pretty short
expect($('.fc-time-grid-container')).not.toHaveScrollbars();
expect($('.fc-time-grid > hr')).not.toBeVisible();
});
});
describe('as a "auto", with many slots', function() {
beforeEach(function() {
options.minTime = '00:00:00';
options.maxTime = '24:00:00';
});
it('should be really tall with no scrollbars nor horizontal rule', function() {
init('auto');
expect(heightElm.outerHeight()).toBeGreaterThan(900); // pretty tall
expect($('.fc-time-grid-container')).not.toHaveScrollbars();
expect($('.fc-time-grid > hr')).not.toBeVisible();
});
});
});
});
});
});
}); });
}); });
function repeatClone(srcObj, times) {
var a = [];
var i;
for (i = 0; i < times; i++) {
a.push($.extend({}, srcObj));
}
return a;
}
})();
-49
View File
@@ -1,49 +0,0 @@
describe('height', function() {
beforeEach(function() {
affix('#cal');
});
describe('when using default height', function() {
it('should use default height based on default aspect ratio of 1:35', function() {
$('#cal').width(1350);
$('#cal').fullCalendar();
var height = $('.fc-view-container').height();
expect(height).toEqual(1000);
});
});
describe('when setting height with the setter', function() {
beforeEach(function() {
$('#cal').width(673);
$('#cal').fullCalendar();
$('#cal').fullCalendar('option', 'height', 751);
});
it('should not change the width of the block level container', function() {
var width = $('#cal').width();
expect(width).toEqual(673);
});
it('should set the size of the block level container to the height', function() {
var height = $('#cal').height();
expect(height).toEqual(751);
});
});
describe('when setting height at instantiation', function() {
beforeEach(function() {
$('#cal').width(673);
$('#cal').fullCalendar({
height: 751
});
});
it('should not change the width of the block level container', function() {
var width = $('#cal').width();
expect(width).toEqual(673);
});
it('should set the size of the block level container to the height', function() {
var height = $('#cal').height();
expect(height).toEqual(751);
});
});
});
+16
View File
@@ -57,6 +57,22 @@ beforeEach(function() {
},
// DOM
toHaveScrollbars: function() {
return {
compare: function(actual) {
var elm = $(actual);
var result = {
pass: elm.width() !== elm[0].clientWidth ||
elm.height() !== elm[0].clientHeight
};
return result;
}
};
},
// Geometry
toBeBoundedBy: function() {