github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

added tests for timepickers and truncate directives

Browse source
This commit is contained in:
Rashid Khan 2014-05-22 10:01:00 -07:00
parent 46335e3516
commit a6e97dd36f
5 changed files with 255 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/kibana/directives/css_truncate.js
View file

@ -18,15 +18,17 @@ define(function (require) {
if (!_.isUndefined(attrs.cssTruncateExpandable)) {
$elem.css({'cursor': 'pointer'});
$elem.bind('click', function () {
if ($elem.css('white-space') !== 'normal') {
$elem.css({'white-space': 'normal'});
} else {
$elem.css({'white-space': 'nowrap'});
}
});
$elem.bind('click', $scope.toggle);
}
$scope.toggle = function () {
if ($elem.css('white-space') !== 'normal') {
$elem.css({'white-space': 'normal'});
} else {
$elem.css({'white-space': 'nowrap'});
}
};
$scope.$on('$destroy', function () {
$elem.unbind('click');
$elem.unbind('mouseenter');

5
src/kibana/directives/truncated.js
View file

@ -12,7 +12,7 @@ define(function (require) {
template: function ($element, attrs) {
var template = '<span>{{text}}</span>';
if (attrs.length && attrs.orig && attrs.orig.length > attrs.length) {
template += ' <a ng-click="toggle($event)">{{action}}</a>';
template += ' <a ng-click="toggle()">{{action}}</a>';
}
return template;
},
@ -31,8 +31,7 @@ define(function (require) {
$scope.text = truncated;
$scope.action = 'more';
$scope.toggle = function ($event) {
$event.stopPropagation();
$scope.toggle = function () {
$scope.expanded = !$scope.expanded;
$scope.text = $scope.expanded ? fullText : truncated;
$scope.action = $scope.expanded ? 'less' : 'more';

4
src/kibana/partials/timepicker.html
View file

@ -113,7 +113,7 @@
<form role="form">
<label>&nbsp</label>
<div class="form-group">
<button class="btn btn-primary" ng-disabled="!relative.preview" ng-click="applyRelative()">Go</button>
<button class="btn btn-primary kbn-timepicker-go" ng-disabled="!relative.preview" ng-click="applyRelative()">Go</button>
</div>
</form>
</div>
@ -149,7 +149,7 @@
<form role="form">
<label>&nbsp</label>
<div class="form-group">
<button class="btn btn-primary" ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to" ng-click="applyAbsolute()">Go</button>
<button class="btn btn-primary kbn-timepicker-go" ng-disabled="absolute.from > absolute.to || !absolute.from || !absolute.to" ng-click="applyAbsolute()">Go</button>
<span class="small" ng-show="absolute.from > absolute.to"><strong>From</strong> must occur before <strong>To</strong></span>
</div>
</form>

3
test/unit/index.html
View file

@ -31,6 +31,7 @@
exports: 'sinon'
}
},
waitSeconds: 60,
// mark all requested files with instrument query param
urlArgs: COVERAGE ? 'instrument=true' : void 0
});
@ -50,6 +51,8 @@
'sinon/sinon',
//'specs/apps/dashboard/directives/panel',
'specs/directives/timepicker',
'specs/directives/truncate',
'specs/directives/css_truncate',
'specs/utils/datemath',
'specs/utils/interval',
], function (sinon) {

374
test/unit/specs/directives/timepicker.js
View file

@ -57,179 +57,283 @@ define(function (require) {
});
};
describe('mode setting', function () {
beforeEach(function () {
init();
describe('timepicker directive', function () {
describe('mode setting', function () {
beforeEach(function () {
init();
});
it('should be in quick mode by default', function (done) {
expect($scope.mode).to.be('quick');
done();
});
it('should highlight the right mode', function (done) {
expect($elem.find('.kbn-timepicker-modes .active').text()).to.be('quick');
// Each of the 3 modes
var modes = ['absolute', 'relative', 'quick'];
_.each(modes, function (mode) {
$scope.setMode(mode);
$scope.$digest();
expect($elem.find('.kbn-timepicker-modes .active').text()).to.be(mode);
});
done();
});
});
it('should be in quick mode by default', function (done) {
expect($scope.mode).to.be('quick');
done();
});
describe('quick mode', function () {
it('should highlight the right mode', function (done) {
expect($elem.find('.kbn-timepicker-modes .active').text()).to.be('quick');
// Each of the 3 modes
var modes = ['absolute', 'relative', 'quick'];
_.each(modes, function (mode) {
$scope.setMode(mode);
beforeEach(function () {
init();
$scope.setMode('quick');
$scope.$digest();
expect($elem.find('.kbn-timepicker-modes .active').text()).to.be(mode);
});
done();
});
});
describe('quick mode', function () {
beforeEach(function () {
init();
$scope.setMode('quick');
$scope.$digest();
});
it('should contain 3 lists of options', function (done) {
expect($elem.find('.kbn-timepicker-section .list-unstyled').length).to.be(3);
done();
});
it('should have a $scope.setQuick() that sets the to and from variables to strings', function (done) {
$scope.setQuick('now', 'now');
expect($scope.from).to.be('now');
expect($scope.to).to.be('now');
done();
});
});
describe('relative mode', function () {
beforeEach(function () {
init();
$scope.setMode('relative');
$scope.$digest();
});
it('has a preview of the "from" input', function (done) {
var preview = $elem.find('.kbn-timepicker-section span[ng-show="relative.preview"]');
expect(preview.text()).to.be(moment().subtract(1, 'minutes').format($scope.format));
done();
});
it('has a disabled "to" field that contains "Now"', function (done) {
expect($elem.find('.kbn-timepicker-section input[disabled]').val()).to.be('Now');
done();
});
it('has a dropdown bound to relative.unit that contains all of the intervals', function (done) {
var select = $elem.find('.kbn-timepicker-section select[ng-model="relative.unit"]');
expect(select.length).to.be(1);
expect(select.find('option').length).to.be(7);
// Check each relative option, make sure it is in the list
_.each($scope.relativeOptions, function (unit, i) {
expect(select.find('option')[i].text).to.be(unit.text);
it('should contain 3 lists of options', function (done) {
expect($elem.find('.kbn-timepicker-section .list-unstyled').length).to.be(3);
done();
});
it('should have a $scope.setQuick() that sets the to and from variables to strings', function (done) {
$scope.setQuick('now', 'now');
expect($scope.from).to.be('now');
expect($scope.to).to.be('now');
done();
});
done();
});
it('has a checkbox that is checked when rounding is enabled', function (done) {
var checkbox = $elem.find('.kbn-timepicker-section input[ng-model="relative.round"]');
expect(checkbox.length).to.be(1);
describe('relative mode', function () {
// Rounding is disabled by default
expect(checkbox.attr('checked')).to.be(undefined);
beforeEach(function () {
init();
$scope.setMode('relative');
$scope.$digest();
});
// Enable rounding
$scope.relative.round = true;
$scope.$digest();
expect(checkbox.attr('checked')).to.be('checked');
it('has a preview of the "from" input', function (done) {
var preview = $elem.find('.kbn-timepicker-section span[ng-show="relative.preview"]');
expect(preview.text()).to.be(moment().subtract(1, 'minutes').format($scope.format));
done();
});
done();
});
it('has a disabled "to" field that contains "Now"', function (done) {
expect($elem.find('.kbn-timepicker-section input[disabled]').val()).to.be('Now');
done();
});
it('rounds the preview down to the unit when rounding is enabled', function (done) {
// Enable rounding
$scope.relative.round = true;
$scope.relative.count = 0;
it('has a dropdown bound to relative.unit that contains all of the intervals', function (done) {
var select = $elem.find('.kbn-timepicker-section select[ng-model="relative.unit"]');
expect(select.length).to.be(1);
expect(select.find('option').length).to.be(7);
_.each($scope.units, function (longUnit, shortUnit) {
// Check each relative option, make sure it is in the list
_.each($scope.relativeOptions, function (unit, i) {
expect(select.find('option')[i].text).to.be(unit.text);
});
done();
});
it('has a checkbox that is checked when rounding is enabled', function (done) {
var checkbox = $elem.find('.kbn-timepicker-section input[ng-model="relative.round"]');
expect(checkbox.length).to.be(1);
// Rounding is disabled by default
expect(checkbox.attr('checked')).to.be(undefined);
// Enable rounding
$scope.relative.round = true;
$scope.$digest();
expect(checkbox.attr('checked')).to.be('checked');
done();
});
it('rounds the preview down to the unit when rounding is enabled', function (done) {
// Enable rounding
$scope.relative.round = true;
$scope.relative.count = 0;
$scope.relative.unit = shortUnit;
$scope.formatRelative();
// The preview should match the start of the unit eg, the start of the minute
expect($scope.relative.preview).to.be(moment().startOf(longUnit).format($scope.format));
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.count = 0;
$scope.relative.unit = shortUnit;
$scope.formatRelative();
// The preview should match the start of the unit eg, the start of the minute
expect($scope.relative.preview).to.be(moment().startOf(longUnit).format($scope.format));
});
done();
});
done();
});
it('does not round the preview down to the unit when rounding is disable', function (done) {
// Disable rounding
$scope.relative.round = false;
$scope.relative.count = 0;
it('does not round the preview down to the unit when rounding is disable', function (done) {
// Disable rounding
$scope.relative.round = false;
$scope.relative.count = 0;
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
$scope.formatRelative();
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
$scope.formatRelative();
// The preview should match the start of the unit eg, the start of the minute
expect($scope.relative.preview).to.be(moment().format($scope.format));
});
// The preview should match the start of the unit eg, the start of the minute
expect($scope.relative.preview).to.be(moment().format($scope.format));
done();
});
done();
});
it('has a $scope.applyRelative() that sets from and to based on relative.round, relative.count and relative.unit', function (done) {
// Enable rounding
$scope.relative.round = false;
$scope.relative.count = 5;
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
it('has a $scope.applyRelative() that sets from and to based on relative.round, relative.count and relative.unit', function (done) {
// Disable rounding
$scope.relative.round = false;
$scope.relative.count = 1;
$scope.relative.unit = 's';
$scope.applyRelative();
expect($scope.from).to.be('now-1s');
expect($scope.from).to.be('now-' + $scope.relative.count + $scope.relative.unit);
expect($scope.to).to.be('now');
});
$scope.relative.round = true;
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
$scope.relative.count = 2;
$scope.relative.unit = 'm';
$scope.applyRelative();
expect($scope.from).to.be('now-2m');
$scope.relative.count = 3;
$scope.relative.unit = 'h';
$scope.applyRelative();
expect($scope.from).to.be('now-3h');
// Enable rounding
$scope.relative.round = true;
$scope.relative.count = 7;
$scope.relative.unit = 'd';
$scope.applyRelative();
expect($scope.from).to.be('now-7d/d');
done();
});
it('updates the input fields when the scope variables are changed', function (done) {
var input = $elem.find('.kbn-timepicker-section input[ng-model="relative.count"]');
var select = $elem.find('.kbn-timepicker-section select[ng-model="relative.unit"]');
$scope.relative.count = 5;
$scope.$digest();
expect(input.val()).to.be('5');
// Should update the selected option
var i = 0;
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
$scope.$digest();
expect(select.val()).to.be(i.toString());
i++;
});
done();
expect($scope.from).to.be('now-' + $scope.relative.count + $scope.relative.unit + '/' + $scope.relative.unit);
expect($scope.to).to.be('now');
});
done();
});
it('updates the input fields when the scope variables are changed', function (done) {
var input = $elem.find('.kbn-timepicker-section input[ng-model="relative.count"]');
var select = $elem.find('.kbn-timepicker-section select[ng-model="relative.unit"]');
describe('absolute mode', function () {
$scope.relative.count = 5;
$scope.$digest();
expect(input.val()).to.be('5');
var inputs;
// Should update
var i = 0;
_.each($scope.units, function (longUnit, shortUnit) {
$scope.relative.unit = shortUnit;
beforeEach(function () {
init();
$scope.setMode('absolute');
$scope.$digest();
expect(select.val()).to.be(i.toString());
i++;
inputs = {
fromInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.from"]'),
toInput: $elem.find('.kbn-timepicker-section input[ng-model="absolute.to"]'),
fromCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.from"] '),
toCalendar: $elem.find('.kbn-timepicker-section div[ng-model="absolute.to"] '),
};
});
done();
it('should have input boxes for absolute.from and absolute.to', function (done) {
expect(inputs.fromInput.length).to.be(1);
expect(inputs.toInput.length).to.be(1);
done();
});
it('should have divs that contain calendars bound to absolute.from and absolute.to', function (done) {
expect(inputs.fromCalendar.length).to.be(1);
expect(inputs.toCalendar.length).to.be(1);
done();
});
it('should present a timeframe of 15 minutes ago to now if scope.from and scope.to are not set', function (done) {
delete $scope.from;
delete $scope.to;
$scope.setMode('absolute');
$scope.$digest();
expect($scope.absolute.from.valueOf()).to.be(moment().subtract(15, 'minutes').valueOf());
expect($scope.absolute.to.valueOf()).to.be(moment().valueOf());
done();
});
it('should parse the time of scope.from and scope.to to set its own variables', function (done) {
$scope.setQuick('now-30m', 'now');
$scope.setMode('absolute');
$scope.$digest();
expect($scope.absolute.from.valueOf()).to.be(moment().subtract(30, 'minutes').valueOf());
expect($scope.absolute.to.valueOf()).to.be(moment().valueOf());
done();
});
it('should highlight the right day on the calendar', function (done) {
$scope.from = moment('2012-02-05');
$scope.to = moment('2012-02-09');
$scope.setMode('absolute');
$scope.$digest();
expect(inputs.fromCalendar.find('.btn-info').text()).to.be('05');
expect(inputs.toCalendar.find('.btn-info').text()).to.be('09');
done();
});
it('should disable the "Go" button if from > to', function (done) {
$scope.absolute.from = moment('2012-02-01');
$scope.absolute.to = moment('2012-02-11');
$scope.$digest();
expect($elem.find('.kbn-timepicker-section button.kbn-timepicker-go').attr('disabled')).to.be(undefined);
$scope.absolute.from = moment('2012-02-12');
$scope.absolute.to = moment('2012-02-11');
$scope.$digest();
expect($elem.find('.kbn-timepicker-section button.kbn-timepicker-go').attr('disabled')).to.be('disabled');
done();
});
it('should only copy its input to scope.from and scope.to when scope.applyAbsolute() is called', function (done) {
$scope.setQuick('now-30m', 'now');
expect($scope.from).to.be('now-30m');
expect($scope.to).to.be('now');
$scope.absolute.from = moment('2012-02-01');
$scope.absolute.to = moment('2012-02-11');
expect($scope.from).to.be('now-30m');
expect($scope.to).to.be('now');
$scope.applyAbsolute();
expect($scope.from.valueOf()).to.be(moment('2012-02-01').valueOf());
expect($scope.to.valueOf()).to.be(moment('2012-02-11').valueOf());
$scope.$digest();
done();
});
});