adding more tests, refactoring directive
This commit is contained in:
parent
00f5527f9d
commit
b968b0b6e0
|
@ -3,126 +3,162 @@ import expect from 'expect.js';
|
|||
import ngMock from 'ng_mock';
|
||||
import _ from 'lodash';
|
||||
|
||||
var list = [
|
||||
var objectList = [
|
||||
{ title: 'apple' },
|
||||
{ title: 'orange' },
|
||||
{ title: 'coconut' },
|
||||
{ title: 'banana' },
|
||||
{ title: 'grapes' }
|
||||
];
|
||||
|
||||
var stringList = [
|
||||
'apple',
|
||||
'orange',
|
||||
'coconut',
|
||||
'banana',
|
||||
'grapes'
|
||||
];
|
||||
|
||||
var lists = [objectList, stringList, []];
|
||||
|
||||
var $scope;
|
||||
var $element;
|
||||
var $isolatedScope;
|
||||
|
||||
function test(val) {
|
||||
return val;
|
||||
}
|
||||
|
||||
var init = function (arr) {
|
||||
// Load the application
|
||||
ngMock.module('kibana');
|
||||
|
||||
// Create the scope
|
||||
ngMock.inject(function ($rootScope, $compile) {
|
||||
$scope = $rootScope.$new();
|
||||
$scope.perPage = 5;
|
||||
$scope.list = list;
|
||||
$scope.listProperty = 'title';
|
||||
$scope.test = test;
|
||||
|
||||
// Create the element
|
||||
$element = angular.element('<paginated-selectable-list perPage="perPage" list="list"' +
|
||||
'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
|
||||
|
||||
// And compile it
|
||||
$compile($element)($scope);
|
||||
|
||||
// Fire a digest cycle
|
||||
$element.scope().$digest();
|
||||
|
||||
// Grab the isolate scope so we can test it
|
||||
$isolatedScope = $element.isolateScope();
|
||||
lists.forEach(function (list) {
|
||||
var isArrayOfObjects = list.every((item) => {
|
||||
return _.isPlainObject(item);
|
||||
});
|
||||
};
|
||||
|
||||
describe('paginatedSelectableList', function () {
|
||||
describe('$scope.hits', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
var init = function (arr) {
|
||||
// Load the application
|
||||
ngMock.module('kibana');
|
||||
|
||||
// Create the scope
|
||||
ngMock.inject(function ($rootScope, $compile) {
|
||||
$scope = $rootScope.$new();
|
||||
$scope.perPage = 5;
|
||||
$scope.list = list;
|
||||
$scope.listProperty = isArrayOfObjects ? 'title' : undefined;
|
||||
$scope.test = function (val) {
|
||||
return val;
|
||||
};
|
||||
|
||||
// Create the element
|
||||
$element = angular.element('<paginated-selectable-list perPage="perPage" list="list"' +
|
||||
'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
|
||||
|
||||
// And compile it
|
||||
$compile($element)($scope);
|
||||
|
||||
// Fire a digest cycle
|
||||
$element.scope().$digest();
|
||||
|
||||
// Grab the isolate scope so we can test it
|
||||
$isolatedScope = $element.isolateScope();
|
||||
});
|
||||
};
|
||||
|
||||
it('should initially sort an array of objects in ascending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = _.sortBy(list, property);
|
||||
describe('paginatedSelectableList', function () {
|
||||
|
||||
expect($isolatedScope.hits).to.be.an('array');
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
expect(hit[property]).to.equal(sortedList[index][property]);
|
||||
describe('$scope.hits', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('$scope.sortHits', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
it('should initially sort an array of objects in ascending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
|
||||
|
||||
it('should sort an array of objects in ascending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = _.sortBy(list, property);
|
||||
expect($isolatedScope.hits).to.be.an('array');
|
||||
|
||||
$isolatedScope.isAscending = false;
|
||||
$isolatedScope.sortHits(list);
|
||||
|
||||
expect($isolatedScope.isAscending).to.be(true);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
expect(hit[property]).to.equal(sortedList[index][property]);
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
if (property) {
|
||||
expect(hit[property]).to.equal(sortedList[index][property]);
|
||||
} else {
|
||||
expect(hit).to.equal(sortedList[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('should sort an array of objects in descending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var reversedList = _.sortBy(list, property).reverse();
|
||||
describe('$scope.sortHits', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
|
||||
$isolatedScope.isAscending = true;
|
||||
$isolatedScope.sortHits(list);
|
||||
it('should sort an array of objects in ascending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
|
||||
|
||||
expect($isolatedScope.isAscending).to.be(false);
|
||||
$isolatedScope.isAscending = false;
|
||||
$isolatedScope.sortHits(list);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
expect(hit[property]).to.equal(reversedList[index][property]);
|
||||
expect($isolatedScope.isAscending).to.be(true);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
if (property) {
|
||||
expect(hit[property]).to.equal(sortedList[index][property]);
|
||||
} else {
|
||||
expect(hit).to.equal(sortedList[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should sort an array of objects in descending order', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var reversedList = property ? _.sortBy(list, property).reverse() : _.sortBy(list).reverse();
|
||||
|
||||
$isolatedScope.isAscending = true;
|
||||
$isolatedScope.sortHits(list);
|
||||
|
||||
expect($isolatedScope.isAscending).to.be(false);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
if (property) {
|
||||
expect(hit[property]).to.equal(reversedList[index][property]);
|
||||
} else {
|
||||
expect(hit).to.equal(reversedList[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('$scope.makeUrl', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
describe('$scope.makeUrl', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
|
||||
it('should return the result of the function its passed', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = _.sortBy(list, property);
|
||||
it('should return the result of the function its passed', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
if (property) {
|
||||
expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
|
||||
} else {
|
||||
expect($isolatedScope.makeUrl(hit)).to.equal(sortedList[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('$scope.onSelect', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
describe('$scope.onSelect', function () {
|
||||
beforeEach(function () {
|
||||
init(list);
|
||||
});
|
||||
|
||||
it('should return the result of the function its passed', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = _.sortBy(list, property);
|
||||
it('should return the result of the function its passed', function () {
|
||||
var property = $isolatedScope.listProperty;
|
||||
var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
|
||||
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
|
||||
$isolatedScope.hits.forEach(function (hit, index) {
|
||||
if (property) {
|
||||
expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
|
||||
} else {
|
||||
expect($isolatedScope.onSelect(hit)).to.equal(sortedList[index]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -18,8 +18,8 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
|
|||
template: paginatedSelectableListTemplate,
|
||||
controller: function ($scope, $element, $filter) {
|
||||
$scope.perPage = $scope.perPage || 10;
|
||||
$scope.hits = $scope.list = _.sortBy($scope.list, accessor) || [];
|
||||
$scope.filterCount = $scope.hitCount = $scope.hits.length;
|
||||
$scope.hits = $scope.list = _.sortBy($scope.list, accessor);
|
||||
$scope.hitCount = $scope.hits.length;
|
||||
|
||||
/**
|
||||
* Boolean that keeps track of whether hits are sorted ascending (true)
|
||||
|
@ -52,11 +52,6 @@ module.directive('paginatedSelectableList', function (kbnUrl) {
|
|||
}
|
||||
};
|
||||
|
||||
$scope.$watch('query', function (val) {
|
||||
$scope.hits = $filter('filter')($scope.list, val);
|
||||
$scope.filterCount = $scope.hits.length;
|
||||
});
|
||||
|
||||
function accessor(val) {
|
||||
const prop = $scope.listProperty;
|
||||
return prop ? val[prop] : val;
|
||||
|
|
|
@ -15,36 +15,30 @@
|
|||
autocomplete="off" />
|
||||
</div>
|
||||
<div class="finder-hit-count col-md-3">
|
||||
<span>{{filterCount}} of {{hitCount}}</span>
|
||||
<span>{{ (hits | filter: query).length }} of {{ hitCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<paginate list="hits" per-page="{{perPage}}">
|
||||
<paginate list="hits | filter: query" per-page="{{ perPage }}">
|
||||
<ul class="li-striped list-group list-group-menu">
|
||||
<li class="list-group-item list-group-menu-item">
|
||||
<li class="list-group-item list-group-menu-item" ng-click="sortHits(hits)">
|
||||
<span class="paginate-heading">
|
||||
Name
|
||||
<i
|
||||
class="fa"
|
||||
ng-click="sortHits(hits)"
|
||||
ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
</i>
|
||||
<i class="fa" ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'"></i>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item list-group-menu-item"
|
||||
ng-repeat="hit in page | filter: query">
|
||||
<li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
|
||||
<div>
|
||||
<a ng-show="userMakeUrl" kbn-href="{{makeUrl(hit)}}">
|
||||
<span>{{hit}}</span>
|
||||
<a ng-show="userMakeUrl" kbn-href="{{ makeUrl(hit) }}">
|
||||
<span>{{ hit }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
|
||||
<span>{{hit}}</span>
|
||||
<span>{{ hit }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item list-group-no-results" ng-if="hits.length === 0">
|
||||
<li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
|
||||
<p>No matches found.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -19,19 +19,20 @@
|
|||
<span>{{finder.hitCount}} of {{finder.hitCount}}</span>
|
||||
</div>
|
||||
<div class="finder-manage-object col-md-2">
|
||||
<a class="small" ng-click="finder.manageObjects(finder.properties.name)">Manage {{finder.properties.nouns}}</a>
|
||||
<a class="small" ng-click="finder.manageObjects(finder.properties.name)">
|
||||
Manage {{finder.properties.nouns}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<paginate list="finder.hits" per-page="20">
|
||||
<ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
|
||||
<li class="list-group-item list-group-menu-item">
|
||||
<li class="list-group-item list-group-menu-item" ng-click="finder.sortHits(finder.hits)">
|
||||
<span class="paginate-heading">
|
||||
Name
|
||||
<i
|
||||
class="fa"
|
||||
ng-click="finder.sortHits(finder.hits)"
|
||||
ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
|
||||
</i>
|
||||
</span>
|
||||
|
@ -51,12 +52,10 @@
|
|||
<p ng-if="hit.description" ng-bind="hit.description"></p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="list-group-item list-group-no-results"
|
||||
ng-if="finder.hits.length === 0">
|
||||
<p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</paginate>
|
||||
|
|
|
@ -353,7 +353,6 @@ paginated-selectable-list {
|
|||
border: none;
|
||||
padding: 5px 0px;
|
||||
border-radius: @border-radius-base;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
Loading…
Reference in a new issue