Added a few more tests for the timepicker

This commit is contained in:
Rashid Khan 2014-05-19 13:56:55 -07:00
parent c024963c72
commit 21f883471f
2 changed files with 127 additions and 54 deletions

View file

@ -64,37 +64,38 @@
</ul>
</div>
<!-- TODO: Add a section for custom intervals -->
</div>
<div ng-switch-when="relative">
<div class="kbn-timepicker-section">
<form class="form-inline" role="form">
<label>
From:
From:
<span ng-show="relative.preview">{{relative.preview}}</span><span ng-hide="relative.preview"><i>Invalid Expression</i></span>
</label><br>
<div class="form-group">
<input type="number" class="form-control"
ng-model="relative.count"
<input type="number" class="form-control"
ng-model="relative.count"
ng-change="formatRelative()">
</div>
<div class="form-group">
<select class="form-control col-xs-2"
ng-model="relative.unit"
<select class="form-control col-xs-2"
ng-model="relative.unit"
ng-options="opt.value as opt.text for opt in relativeOptions"
ng-change="formatRelative()">
</select>
</div>
<br>
<div class="small">
<input type="checkbox"
ng-model="relative.round"
ng-checked="relative.round"
<input type="checkbox"
ng-model="relative.round"
ng-checked="relative.round"
ng-change="formatRelative()"/> round to the {{units[relative.unit]}}
</div>
</form>
</div>
<div class="kbn-timepicker-section">
@ -104,7 +105,7 @@
</label><br>
<div class="form-group">
<input type="text" disabled class="form-control" value="Now">
</div>
</div>
</form>
</div>
@ -155,9 +156,9 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View file

@ -18,61 +18,64 @@ define(function (require) {
// TODO: This should not be needed, timefilter is only included here, it should move
require('apps/discover/index');
var $parentScope, $scope, $elem;
var clock, anchor = '2014-01-01T06:06:06.666Z';
describe('Modes', function () {
var $scope, $elem, $isolateScope;
var init = function () {
// Load the application
module('kibana');
var clock, anchor = '2014-01-01T06:06:06.666Z';
// Stub out the clock so 'now' doesn't move
clock = sinon.useFakeTimers(moment(anchor).valueOf());
// Create the scope
inject(function ($rootScope, $compile) {
// Give us a scope
$parentScope = $rootScope;
// Add some parameters to it
$parentScope.time = {
from: moment().subtract(15, 'minutes'),
to: moment(),
mode: undefined // Any isolate scope var using '=' must be passed, even if undefined
};
// Create the element
$elem = angular.element(
'<kbn-timepicker from="time.from" to="time.to" mode="time.mode"></kbn-timepicker>'
);
// And compile it
$compile($elem)($parentScope);
// Fire a digest cycle
$elem.scope().$digest();
// Grab the isolate scope so we can test it
$scope = $elem.isolateScope();
});
};
describe('mode setting', function () {
beforeEach(function () {
// Load the application
module('kibana');
// Stub out the clock so 'now' doesn't move
clock = sinon.useFakeTimers(moment(anchor).valueOf());
// Create the scope
inject(function ($rootScope, $compile) {
// Give us a scope
$scope = $rootScope;
// Add some parameters to it
$scope.time = {
from: moment().subtract(15, 'minutes'),
to: moment(),
mode: undefined // Any isolate scope var using '=' must be passed, even if undefined
};
// Create the element
$elem = angular.element(
'<kbn-timepicker from="time.from" to="time.to" mode="time.mode"></kbn-timepicker>'
);
// And compile it
$compile($elem)($scope);
// Fire a digest cycle
$elem.scope().$apply();
// Grab the isolate scope so we can test it
$isolateScope = $elem.isolateScope();
});
init();
});
it('should be in quick mode by default', function (done) {
expect($isolateScope.mode).to.be('quick');
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) {
$isolateScope.setMode(mode);
$isolateScope.$apply();
$scope.setMode(mode);
$scope.$digest();
expect($elem.find('.kbn-timepicker-modes .active').text()).to.be(mode);
});
@ -81,4 +84,73 @@ define(function (require) {
});
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);
});
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();
});
});
});