describe('ng-table', function() {
|
var dataset = [
|
{ id: 1, name: "Moroni", age: 50, money: -10 },
|
{ id: 2, name: "Tiancum", age: 43, money: 120 },
|
{ id: 3, name: "Jacob", age: 27, money: 5.5 },
|
{ id: 4, name: "Nephi", age: 29, money: -54 },
|
{ id: 5, name: "Enos", age: 34, money: 110 },
|
{ id: 6, name: "Tiancum", age: 43, money: 1000 },
|
{ id: 7, name: "Jacob", age: 27, money: -201 },
|
{ id: 8, name: "Nephi", age: 29, money: 100 },
|
{ id: 9, name: "Enos", age: 34, money: -52.5 },
|
{ id: 10, name: "Tiancum", age: 43, money: 52.1 },
|
{ id: 11, name: "Jacob", age: 27, money: 110 },
|
{ id: 12, name: "Nephi", age: 29, money: -55 },
|
{ id: 13, name: "Enos", age: 34, money: 551 },
|
{ id: 14, name: "Tiancum", age: 43, money: -1410 },
|
{ id: 15, name: "Jacob", age: 27, money: 410 },
|
{ id: 16, name: "Nephi", age: 29, money: 100 },
|
{ id: 17, name: "Enos", age: 34, money: -100 }
|
];
|
var NgTableParams;
|
|
beforeEach(module('ngTable'));
|
|
var scope;
|
beforeEach(inject(function($rootScope, _NgTableParams_) {
|
scope = $rootScope.$new(true);
|
NgTableParams = _NgTableParams_;
|
}));
|
|
function createNgTableParams(settings) {
|
var initialParams;
|
if (arguments.length === 2){
|
initialParams = arguments[0];
|
settings = arguments[1];
|
}
|
|
settings = angular.extend({}, settings);
|
settings.filterOptions = angular.extend({}, {
|
filterDelay: 0
|
}, settings.filterOptions);
|
var tableParams = new NgTableParams(initialParams, settings);
|
spyOn(tableParams.settings(), 'getData').and.callThrough();
|
return tableParams;
|
}
|
|
describe('basics', function(){
|
var elm;
|
beforeEach(inject(function($compile, $q) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td data-header-title="\'Sort by Name\'" data-title="nameTitle()" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass($column)"' +
|
' ng-if="showName">' +
|
'{{user.name}}' +
|
'</td>' +
|
'<td x-data-header-title="\'Sort by Age\'" x-data-title="ageTitle()" sortable="\'age\'" x-data-header-class="getCustomClass($column)"' +
|
' ng-if="showAge">' +
|
'{{user.age}}' +
|
'</td>' +
|
'<td header-title="\'Sort by Money\'" title="moneyTitle()" filter="{ \'action\': \'select\' }" filter-data="money($column)" header-class="getCustomClass($column)"' +
|
' ng-if="showMoney">' +
|
'{{user.money}}' +
|
'</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
scope.nameTitle = function(){
|
return 'Name of person';
|
};
|
scope.ageTitle = function(){
|
return 'Age';
|
};
|
scope.moneyTitle = function(){
|
return 'Money';
|
};
|
|
scope.showName = true;
|
scope.showAge = true;
|
scope.showMoney = true;
|
|
scope.ageTitle = function(){
|
return 'Age';
|
};
|
scope.moneyTitle = function(){
|
return 'Money';
|
};
|
|
scope.getCustomClass = function($column){
|
if ($column.title().indexOf('Money') !== -1){
|
return 'moneyHeaderClass';
|
} else{
|
return 'customClass';
|
}
|
};
|
|
scope.money = function(/*$column*/) {
|
|
var def = $q.defer();
|
|
def.resolve([{
|
'id': 10,
|
'title': '10'
|
}]);
|
return def;
|
};
|
|
$compile(elm)(scope);
|
scope.$digest();
|
}));
|
|
it('should create table header', function() {
|
var thead = elm.find('thead');
|
expect(thead.length).toBe(1);
|
|
var rows = thead.find('tr');
|
expect(rows.length).toBe(2);
|
|
var titles = angular.element(rows[0]).find('th');
|
|
expect(titles.length).toBe(3);
|
expect(angular.element(titles[0]).text().trim()).toBe('Name of person');
|
expect(angular.element(titles[1]).text().trim()).toBe('Age');
|
expect(angular.element(titles[2]).text().trim()).toBe('Money');
|
|
expect(angular.element(rows[1]).hasClass('ng-table-filters')).toBeTruthy();
|
var filters = angular.element(rows[1]).find('th');
|
expect(filters.length).toBe(3);
|
expect(angular.element(filters[0]).hasClass('filter')).toBeTruthy();
|
expect(angular.element(filters[1]).hasClass('filter')).toBeTruthy();
|
expect(angular.element(filters[2]).hasClass('filter')).toBeTruthy();
|
});
|
|
it('should create table header classes', function() {
|
|
var thead = elm.find('thead');
|
var rows = thead.find('tr');
|
var titles = angular.element(rows[0]).find('th');
|
|
expect(angular.element(titles[0]).hasClass('header')).toBe(true);
|
expect(angular.element(titles[1]).hasClass('header')).toBe(true);
|
expect(angular.element(titles[2]).hasClass('header')).toBe(true);
|
|
expect(angular.element(titles[0]).hasClass('sortable')).toBe(true);
|
expect(angular.element(titles[1]).hasClass('sortable')).toBe(true);
|
expect(angular.element(titles[2]).hasClass('sortable')).toBe(false);
|
|
expect(angular.element(titles[0]).hasClass('customClass')).toBe(true);
|
expect(angular.element(titles[1]).hasClass('customClass')).toBe(true);
|
expect(angular.element(titles[2]).hasClass('moneyHeaderClass')).toBe(true);
|
|
|
var filterCells = angular.element(rows[1]).find('th');
|
|
expect(angular.element(filterCells[0]).hasClass('filter')).toBe(true);
|
expect(angular.element(filterCells[1]).hasClass('filter')).toBe(true);
|
expect(angular.element(filterCells[2]).hasClass('filter')).toBe(true);
|
|
expect(angular.element(filterCells[0]).hasClass('customClass')).toBe(true);
|
expect(angular.element(filterCells[1]).hasClass('customClass')).toBe(true);
|
expect(angular.element(filterCells[2]).hasClass('moneyHeaderClass')).toBe(true);
|
});
|
|
it('should create table header titles', function() {
|
|
var thead = elm.find('thead');
|
var rows = thead.find('tr');
|
var titles = angular.element(rows[0]).find('th');
|
|
expect(angular.element(titles[0]).attr('title').trim()).toBe('Sort by Name');
|
expect(angular.element(titles[1]).attr('title').trim()).toBe('Sort by Age');
|
expect(angular.element(titles[2]).attr('title').trim()).toBe('Sort by Money');
|
});
|
|
|
it('should show scope data', function() {
|
var tbody = elm.find('tbody');
|
expect(tbody.length).toBe(1);
|
|
var rows = tbody.find('tr');
|
expect(rows.length).toBe(0);
|
|
var params = new NgTableParams({
|
count: 10 // count per page
|
}, {
|
dataset: dataset
|
});
|
|
scope.tableParams = params;
|
scope.$digest();
|
|
rows = tbody.find('tr');
|
expect(rows.length).toBe(10);
|
|
scope.tableParams.page(2);
|
scope.$digest();
|
|
rows = tbody.find('tr');
|
expect(rows.length).toBe(7);
|
|
params.total(20);
|
scope.$digest();
|
|
rows = tbody.find('tr');
|
expect(rows.length).toBe(7);
|
});
|
|
it('should show data-title-text', function() {
|
var tbody = elm.find('tbody');
|
|
var params = new NgTableParams({}, {
|
dataset: dataset
|
});
|
scope.tableParams = params;
|
scope.$digest();
|
|
var filterRow = angular.element(elm.find('thead').find('tr')[1]);
|
var filterCells = filterRow.find('th');
|
expect(angular.element(filterCells[0]).attr('data-title-text').trim()).toBe('Name of person');
|
expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
|
expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('Money');
|
|
var dataRows = elm.find('tbody').find('tr');
|
var dataCells = angular.element(dataRows[0]).find('td');
|
expect(angular.element(dataCells[0]).attr('data-title-text').trim()).toBe('Name of person');
|
expect(angular.element(dataCells[1]).attr('data-title-text').trim()).toBe('Age');
|
expect(angular.element(dataCells[2]).attr('data-title-text').trim()).toBe('Money');
|
});
|
|
|
it('should show/hide columns', function() {
|
var tbody = elm.find('tbody');
|
|
scope.tableParams = new NgTableParams({}, {
|
dataset: dataset
|
});
|
scope.$digest();
|
|
var headerRow = angular.element(elm.find('thead').find('tr')[0]);
|
expect(headerRow.find('th').length).toBe(3);
|
|
var filterRow = angular.element(elm.find('thead').find('tr')[1]);
|
expect(filterRow.find('th').length).toBe(3);
|
|
var dataRow = angular.element(elm.find('tbody').find('tr')[0]);
|
expect(dataRow.find('td').length).toBe(3);
|
|
scope.showName = false;
|
scope.$digest();
|
expect(headerRow.find('th').length).toBe(2);
|
expect(filterRow.find('th').length).toBe(2);
|
expect(dataRow.find('td').length).toBe(2);
|
expect(angular.element(headerRow.find('th')[0]).text().trim()).toBe('Age');
|
expect(angular.element(headerRow.find('th')[1]).text().trim()).toBe('Money');
|
expect(angular.element(filterRow.find('th')[0]).find('input').length).toBe(0);
|
expect(angular.element(filterRow.find('th')[1]).find('select').length).toBe(1);
|
});
|
});
|
|
describe('title-alt', function() {
|
|
var elm;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Name of person\'" title-alt="\'Name\'">{{user.name}}</td>' +
|
'<td title="\'Age of person\'" data-title-alt="\'Age\'">{{user.age}}</td>' +
|
'<td title="\'Money earned\'" x-data-title-alt="\'£\'">{{user.money}}</td>' +
|
'</tr>' +
|
'</table>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
var params = new NgTableParams({}, {
|
dataset: dataset
|
});
|
scope.tableParams = params;
|
scope.$digest();
|
}));
|
|
it('should show as data-title-text', inject(function($compile) {
|
var filterRow = angular.element(elm.find('thead').find('tr')[1]);
|
var filterCells = filterRow.find('th');
|
|
expect(angular.element(filterCells[0]).attr('data-title-text').trim()).toBe('Name');
|
expect(angular.element(filterCells[1]).attr('data-title-text').trim()).toBe('Age');
|
expect(angular.element(filterCells[2]).attr('data-title-text').trim()).toBe('£');
|
|
var dataRows = elm.find('tbody').find('tr');
|
var dataCells = angular.element(dataRows[0]).find('td');
|
expect(angular.element(dataCells[0]).attr('data-title-text').trim()).toBe('Name');
|
expect(angular.element(dataCells[1]).attr('data-title-text').trim()).toBe('Age');
|
expect(angular.element(dataCells[2]).attr('data-title-text').trim()).toBe('£');
|
}));
|
});
|
|
describe('sorting', function() {
|
|
it('should provide $column definition', inject(function($compile) {
|
var columnDef;
|
var elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Age\'" sortable="captureColumn($column)">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>');
|
|
scope.captureColumn = function($column){
|
columnDef = $column;
|
return 'age'
|
};
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
expect(columnDef).toBeDefined();
|
}));
|
|
it('should apply initial sort', inject(function ($compile) {
|
var elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data"><td title="\'Age\'" sortable="\'age\'">{{user.age}}</td></tr>' +
|
'</table>');
|
$compile(elm)(scope);
|
|
var actualSort;
|
scope.tableParams = new NgTableParams({
|
sorting: { age: 'desc' }
|
}, {
|
getData: function($defer, params){
|
actualSort = params.sorting();
|
$defer.resolve([]);
|
}});
|
scope.$digest();
|
|
expect(actualSort.age).toBe('desc');
|
}));
|
|
it('when sorting changes should trigger reload of table', inject(function ($compile) {
|
var elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data"><td title="\'Age\'" sortable="\'age\'">{{user.age}}</td></tr>' +
|
'</table>');
|
$compile(elm)(scope);
|
|
var params = createNgTableParams();
|
scope.tableParams = params;
|
scope.$digest();
|
params.settings().getData.calls.reset();
|
|
params.sorting()['age'] = 'desc';
|
scope.$digest();
|
expect(params.settings().getData.calls.count()).toBe(1);
|
|
params.sorting()['age'] = 'asc';
|
scope.$digest();
|
expect(params.settings().getData.calls.count()).toBe(2);
|
|
// setting the same sort order should not trigger reload
|
params.sorting({ age: 'asc'});
|
scope.$digest();
|
expect(params.settings().getData.calls.count()).toBe(2);
|
}));
|
});
|
|
describe('paging', function() {
|
|
var elm;
|
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Age\'">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>');
|
|
dataCallCount = 0;
|
$compile(elm)(scope);
|
scope.$digest();
|
}));
|
|
function verifyPageWas(expectedPage){
|
expect(scope.tableParams.settings().getData.calls.argsFor(0)[0].page()).toBe(expectedPage);
|
}
|
|
it('should use initial NgTableParams constructor value', function(){
|
var params = createNgTableParams({ page: 2}, null);
|
scope.tableParams = params;
|
scope.$digest();
|
verifyPageWas(2);
|
expect(params.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should use initial NgTableParams constructor value combined with filter', function(){
|
var params = createNgTableParams({ page: 2, filter: { age: 5}}, null);
|
scope.tableParams = params;
|
scope.$digest();
|
verifyPageWas(2);
|
expect(params.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('changing page # should trigger reload of data', function(){
|
var params = createNgTableParams({ page: 3}, null);
|
scope.tableParams = params;
|
scope.$digest();
|
verifyPageWas(3);
|
params.settings().getData.calls.reset();
|
|
scope.tableParams.page(5);
|
scope.$digest();
|
verifyPageWas(5);
|
});
|
});
|
|
describe('filters', function(){
|
|
var $capturedColumn;
|
beforeEach(inject(function() {
|
// stash a reference to $column definition so that its available in asserts
|
scope.captureColumn = function ($column) {
|
$capturedColumn = $column;
|
};
|
}));
|
|
describe('filter specified as alias', function(){
|
|
var elm,
|
tp;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
|
'filter="usernameFilter">{{user.name}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
// 'text' is a shortcut alias for the template ng-table/filters/text
|
scope.usernameFilter = {username: 'text'};
|
tp = scope.tableParams = createNgTableParams({ filterOptions: { filterDelay: 10 } });
|
scope.$digest();
|
}));
|
|
it('should render named filter template', function() {
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.length).toBe(1);
|
expect(inputs.eq(0).attr('type')).toBe('text');
|
expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
|
expect(inputs.eq(0).attr('name')).toBe('username');
|
});
|
|
it('should databind ngTableParams.filter to filter input', function () {
|
scope.tableParams.filter()['username'] = 'my name is...';
|
scope.$digest();
|
|
var input = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(input.val()).toBe('my name is...');
|
});
|
|
it('should make filter def available on $column', function () {
|
expect($capturedColumn).toBeDefined();
|
expect($capturedColumn.filter).toBeDefined();
|
expect($capturedColumn.filter()['username']).toBe('text');
|
});
|
|
it('when filter changes should trigger reload of table', inject(function ($timeout) {
|
tp.settings().getData.calls.reset();
|
|
tp.filter()['username'] = 'new value';
|
scope.$digest();
|
$timeout.flush(); // trigger delayed filter
|
tp.filter()['username'] = 'another value';
|
scope.$digest();
|
$timeout.flush(); // trigger delayed filter
|
expect(tp.settings().getData.calls.count()).toBe(2);
|
|
// same value - should not trigger reload
|
tp.filter()['username'] = 'another value';
|
scope.$digest();
|
try{
|
$timeout.flush(); // trigger delayed filter
|
} catch (ex) {
|
|
}
|
expect(tp.settings().getData.calls.count()).toBe(2);
|
}));
|
|
it('when filter changes should reset page number to 1', inject(function ($timeout) {
|
// trigger initial load of data so that subsequent changes to filter will trigger reset of page #
|
tp.filter()['username'] = 'initial value';
|
scope.$digest();
|
$timeout.flush(); // trigger delayed filter
|
|
// set page to something other than 1
|
tp.page(5);
|
expect(tp.page()).toBe(5); // checking assumptions
|
|
// when
|
tp.filter()['username'] = 'new value';
|
scope.$digest();
|
$timeout.flush(); // trigger delayed filter
|
|
expect(tp.page()).toBe(1);
|
}));
|
});
|
|
describe('filter specified with url', function(){
|
|
var elm;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<script type="text/ng-template" id="ng-table/filters/customNum.html"><input type="number" id="{{name}}"/></script>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td header-class="captureColumn($column)" title="\'Age\'" ' +
|
'filter="{ \'age\': \'ng-table/filters/customNum.html\' }">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should render filter template specified by url', function() {
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.length).toBe(1);
|
|
expect(inputs.eq(0).attr('type')).toBe('number');
|
expect(inputs.eq(0).attr('id')).toBe('age');
|
});
|
});
|
|
describe('multiple filter inputs', function(){
|
|
var elm;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
|
'filter="{ \'name\': \'text\', \'age\': \'text\' }">{{user.name}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should render filter template for each key/value pair ordered by key', function() {
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.length).toBe(2);
|
expect(inputs.eq(0).attr('type')).toBe('text');
|
expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
|
expect(inputs.eq(1).attr('type')).toBe('text');
|
expect(inputs.eq(1).attr('ng-model')).not.toBeUndefined();
|
});
|
|
it('should databind ngTableParams.filter to filter inputs', function () {
|
scope.tableParams.filter()['name'] = 'my name is...';
|
scope.tableParams.filter()['age'] = '10';
|
scope.$digest();
|
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.eq(0).val()).toBe('my name is...');
|
expect(inputs.eq(1).val()).toBe('10');
|
});
|
|
it('should make filter def available on $column', function () {
|
expect($capturedColumn).toBeDefined();
|
expect($capturedColumn.filter).toBeDefined();
|
expect($capturedColumn.filter()['name']).toBe('text');
|
expect($capturedColumn.filter()['age']).toBe('text');
|
});
|
});
|
describe('dynamic filter', function(){
|
|
var elm, ageFilter;
|
beforeEach(inject(function($compile) {
|
|
ageFilter = {age: 'text'};
|
|
elm = angular.element(
|
'<div>' +
|
'<script type="text/ng-template" id="ng-table/filters/number.html"><input type="number" name="{{name}}"/></script>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Name\'" filter="getFilter($column)">{{user.name}}</td>' +
|
'<td title="\'Age\'" filter="getFilter($column)">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
scope.getFilter = function(colDef){
|
if (colDef.id === 0) {
|
return {username: 'text'};
|
} else if (colDef.id === 1) {
|
return ageFilter;
|
}
|
};
|
scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should render named filter template', function() {
|
var usernameInput = elm.find('thead').find('tr').eq(1).find('th').eq(0).find('input');
|
expect(usernameInput.attr('type')).toBe('text');
|
expect(usernameInput.attr('name')).toBe('username');
|
|
var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
|
expect(ageInput.attr('type')).toBe('text');
|
expect(ageInput.attr('name')).toBe('age');
|
});
|
|
it('should databind ngTableParams.filter to filter input', function () {
|
scope.tableParams.filter()['username'] = 'my name is...';
|
scope.tableParams.filter()['age'] = '10';
|
scope.$digest();
|
|
var usernameInput = elm.find('thead').find('tr').eq(1).find('th').eq(0).find('input');
|
expect(usernameInput.val()).toBe('my name is...');
|
var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
|
expect(ageInput.val()).toBe('10');
|
});
|
|
it('should render new template as filter changes', function() {
|
ageFilter.age = 'number';
|
scope.$digest();
|
|
var ageInput = elm.find('thead').find('tr').eq(1).find('th').eq(1).find('input');
|
expect(ageInput.attr('type')).toBe('number');
|
expect(ageInput.attr('name')).toBe('age');
|
});
|
});
|
|
describe('filter with placeholder value and alias', function(){
|
|
var elm,
|
tp;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td header-class="captureColumn($column)" title="\'Name\'" '
|
+ 'filter="usernameFilter">{{user.name}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
// 'text' is a shortcut alias for the template ng-table/filters/text
|
scope.usernameFilter = {
|
username: { id: 'text', placeholder: 'User name'}
|
};
|
tp = scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should render named filter template with placeholder value', function() {
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.length).toBe(1);
|
expect(inputs.eq(0).attr('type')).toBe('text');
|
expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
|
expect(inputs.eq(0).attr('name')).toBe('username');
|
expect(inputs.eq(0).attr('placeholder')).toBe('User name');
|
});
|
|
it('should databind placeholder value to filter input', function () {
|
scope.usernameFilter.username.placeholder = 'Name of user';
|
scope.$digest();
|
|
var input = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(input.attr('placeholder')).toBe('Name of user');
|
});
|
|
it('should make filter def available on $column', function () {
|
expect($capturedColumn).toBeDefined();
|
expect($capturedColumn.filter).toBeDefined();
|
expect($capturedColumn.filter()).toBe(scope.usernameFilter);
|
});
|
});
|
|
describe('filter with placeholder value and url', function(){
|
|
var elm,
|
tp;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td header-class="captureColumn($column)" title="\'Age\'" '
|
+ 'filter="ageFilter">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
scope.ageFilter = {
|
age: { id: 'ng-table/filters/number.html', placeholder: 'User age'}
|
};
|
tp = scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should render named filter template with placeholder value', function() {
|
var inputs = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(inputs.length).toBe(1);
|
expect(inputs.eq(0).attr('type')).toBe('number');
|
expect(inputs.eq(0).attr('ng-model')).not.toBeUndefined();
|
expect(inputs.eq(0).attr('name')).toBe('age');
|
expect(inputs.eq(0).attr('placeholder')).toBe('User age');
|
});
|
|
it('should databind placeholder value to filter input', function () {
|
scope.ageFilter.age.placeholder = 'Age of user';
|
scope.$digest();
|
|
var input = elm.find('thead').find('tr').eq(1).find('th').find('input');
|
expect(input.attr('placeholder')).toBe('Age of user');
|
});
|
|
it('should make filter def available on $column', function () {
|
expect($capturedColumn).toBeDefined();
|
expect($capturedColumn.filter).toBeDefined();
|
expect($capturedColumn.filter()).toBe(scope.ageFilter);
|
});
|
});
|
});
|
|
describe('show-filter', function(){
|
var elm;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams" show-filter="showFilterRow">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Age\'" filter="{ age: \'number\'}">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
scope.showFilterRow = true;
|
scope.tableParams = createNgTableParams();
|
|
$compile(elm)(scope);
|
scope.$digest();
|
}));
|
|
it('when true, should display filter row', function() {
|
var filterRow = elm.find('thead').find('tr').eq(1);
|
expect(filterRow.hasClass('ng-table-filters')).toBe(true);
|
expect(filterRow.hasClass('ng-hide')).toBe(false);
|
});
|
|
it('when false, should hide filter row', function() {
|
// given
|
scope.showFilterRow = false;
|
|
// when
|
scope.$digest();
|
|
// then
|
var filterRow = elm.find('thead').find('tr').eq(1);
|
expect(filterRow.hasClass('ng-table-filters')).toBe(true);
|
expect(filterRow.hasClass('ng-hide')).toBe(true);
|
});
|
});
|
|
describe('$columns', function(){
|
var elm,
|
tp;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="ageTitle" ng-if="isAgeVisible" filter="ageFilter">{{user.age}}</td>' +
|
'<td title="\'Name\'" groupable="\'name\'" sortable="\'name\'">{{user.name}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
scope.ageFilter = {
|
age: 'text'
|
};
|
scope.isAgeVisible = true;
|
scope.ageTitle = 'Age';
|
tp = scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should make $columns available on the scope created for ng-table', function(){
|
// check that the scope is indeed the one created for out NgTableParams
|
expect(scope.$$childHead.params).toBe(tp);
|
|
expect(scope.$$childHead.$columns).toBeDefined();
|
});
|
|
it('should NOT polute the outer scope with a reference to $columns ', function(){
|
expect(scope.$columns).toBeUndefined();
|
});
|
|
it('$scolumns should contain a column definition for each `td` element', function(){
|
expect(scope.$$childHead.$columns.length).toBe(2);
|
});
|
|
it('each column definition should have getters for each column attribute', function(){
|
var ageCol = scope.$$childHead.$columns[0];
|
expect(ageCol.title()).toBe('Age');
|
expect(ageCol.show()).toBe(true);
|
expect(ageCol.filter()).toBe(scope.ageFilter);
|
expect(ageCol.class()).toBe('');
|
expect(ageCol.filterData).toBeUndefined();
|
expect(ageCol.groupable()).toBe(false);
|
expect(ageCol.headerTemplateURL()).toBe(false);
|
expect(ageCol.headerTitle()).toBe('');
|
expect(ageCol.sortable()).toBe(false);
|
expect(ageCol.titleAlt()).toBe('');
|
|
var nameCol = scope.$$childHead.$columns[1];
|
expect(nameCol.title()).toBe('Name');
|
expect(nameCol.show()).toBe(true);
|
expect(nameCol.filter()).toBe(false);
|
expect(nameCol.class()).toBe('');
|
expect(nameCol.filterData).toBeUndefined();
|
expect(nameCol.groupable()).toBe('name');
|
expect(nameCol.headerTemplateURL()).toBe(false);
|
expect(nameCol.headerTitle()).toBe('');
|
expect(nameCol.sortable()).toBe('name');
|
expect(nameCol.titleAlt()).toBe('');
|
});
|
|
it('each column attribute should be assignable', function(){
|
var ageCol = scope.$$childHead.$columns[0];
|
|
ageCol.title.assign(scope.$$childHead, 'Age of person');
|
expect(ageCol.title()).toBe('Age of person');
|
expect(scope.ageTitle).toBe('Age of person');
|
|
ageCol.show.assign(scope.$$childHead, false);
|
expect(ageCol.show()).toBe(false);
|
expect(scope.isAgeVisible).toBe(false);
|
|
var newFilter = {age: 'select'};
|
ageCol.filter.assign(scope.$$childHead, newFilter);
|
expect(ageCol.filter()).toBe(newFilter);
|
expect(scope.ageFilter).toBe(newFilter);
|
|
ageCol.class.assign(scope.$$childHead, 'amazing');
|
expect(ageCol.class()).toBe('amazing');
|
|
ageCol.groupable.assign(scope.$$childHead, 'age');
|
expect(ageCol.groupable()).toBe('age');
|
|
ageCol.headerTemplateURL.assign(scope.$$childHead, 'some.html');
|
expect(ageCol.headerTemplateURL()).toBe('some.html');
|
|
ageCol.headerTitle.assign(scope.$$childHead, 'wow');
|
expect(ageCol.headerTitle()).toBe('wow');
|
|
ageCol.sortable.assign(scope.$$childHead, 'incredible');
|
expect(ageCol.sortable()).toBe('incredible');
|
|
ageCol.titleAlt.assign(scope.$$childHead, 'really');
|
expect(ageCol.titleAlt()).toBe('really');
|
|
|
var nameCol = scope.$$childHead.$columns[1];
|
|
nameCol.groupable.assign(scope.$$childHead, false);
|
expect(nameCol.groupable()).toBe(false);
|
|
nameCol.sortable.assign(scope.$$childHead, false);
|
expect(nameCol.sortable()).toBe(false);
|
});
|
});
|
|
|
describe('groups', function(){
|
|
var $capturedColumn;
|
beforeEach(inject(function() {
|
// stash a reference to $column definition so that its available in asserts
|
scope.captureColumn = function ($column) {
|
$capturedColumn = $column;
|
};
|
}));
|
|
describe('one groupable column', function(){
|
|
var elm,
|
tp;
|
beforeEach(inject(function($compile) {
|
elm = angular.element(
|
'<div>' +
|
'<table ng-table="tableParams">' +
|
'<tr class="ng-table-group" ng-repeat-start="group in $groups"></tr>' +
|
'<tr ng-repeat-end="user in group.data">' +
|
'<td title="\'Name\'" groupable="\'name\'">{{user.name}}</td>' +
|
'</tr>' +
|
'</table>' +
|
'</div>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
|
tp = scope.tableParams = createNgTableParams();
|
scope.$digest();
|
}));
|
|
it('should not render group row until group assigned', function() {
|
var groupRow = elm.find('thead').find('.ng-table-group-header');
|
expect(groupRow.length).toBe(0);
|
});
|
|
xit('should render group row once group assigned', function() {
|
// todo: not sure why this test is not working as manually testing shows that it does :-(
|
tp.group('name');
|
scope.$digest();
|
var groupRow = elm.find('thead').find('.ng-table-group-header');
|
expect(groupRow.length).toBe(1);
|
});
|
});
|
});
|
|
describe('internals', function(){
|
|
var elm,
|
$timeout;
|
|
beforeEach(inject(function($compile, _$timeout_) {
|
$timeout = _$timeout_;
|
elm = angular.element(
|
'<table ng-table="tableParams">' +
|
'<tr ng-repeat="user in $data">' +
|
'<td title="\'Age\'">{{user.age}}</td>' +
|
'</tr>' +
|
'</table>');
|
|
$compile(elm)(scope);
|
scope.$digest();
|
}));
|
|
it('should reload when binding a new tableParams to scope', function(){
|
var tp = createNgTableParams();
|
scope.tableParams = tp;
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload 1 time when binding a new tableParams that has an initial settings dataset field', function(){
|
var tp = createNgTableParams({ dataset: [1,2,3] });
|
scope.tableParams = tp;
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload 1 time when binding a new tableParams with initial filter that has an initial settings dataset field', function(){
|
var tp = createNgTableParams({filter: {age: 1}}, { dataset: [1,2,3] });
|
scope.tableParams = tp;
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload when binding a new tableParams to scope multiple times', function(){
|
var tp1 = createNgTableParams();
|
scope.tableParams = tp1;
|
scope.$digest();
|
|
expect(tp1.settings().getData.calls.count()).toBe(1);
|
|
var tp2 = createNgTableParams();
|
scope.tableParams = tp2;
|
scope.$digest();
|
|
expect(tp2.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload 1 time when binding a new settings dataset value and changing the filter', function(){
|
// given
|
var tp = createNgTableParams({filterOptions: { filterDelay: 100 }, dataset: [{age: 1}, {age: 2}]});
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 1 });
|
tp.settings({ dataset: [{ age: 1 }, { age: 11 }, { age: 22 }]});
|
scope.$digest();
|
$timeout.flush(); // trigger the delayed reload
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload 1 time when multiple filter changes are debounced', function(){
|
// given
|
var tp = createNgTableParams({filterOptions: { filterDelay: 100 }, dataset: [{age: 1}, {age: 2}]});
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 1 });
|
scope.$digest();
|
tp.filter({ age: 2 });
|
scope.$digest();
|
$timeout.flush(); // trigger the delayed reload
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload 1 time when initial load fails', inject(function($q){
|
// given
|
var tp = createNgTableParams({ getData: function(){
|
return $q.reject('BANG!');
|
}});
|
|
// when
|
scope.tableParams = tp;
|
scope.$digest();
|
|
// then
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
}));
|
|
it('should reload 1 time with page reset to 1 when binding a new settings dataset value and changing the filter', function(){
|
var settings = {
|
counts: [1],
|
dataset: [{age: 1}, {age: 2}],
|
filterOptions: { filterDelay: 100 }
|
};
|
var tp = createNgTableParams({ count: 1, page: 2 }, settings);
|
scope.tableParams = tp;
|
scope.$digest();
|
expect(tp.page()).toBe(2); // checking assumptions
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 1 });
|
tp.settings({ dataset: [{ age: 1 }, { age: 11 }, { age: 22 }]});
|
scope.$digest();
|
$timeout.flush(); // trigger the delayed reload
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
expect(tp.page()).toBe(1);
|
});
|
|
it('changing filter, orderBy, or page and then calling reload should not invoke getData twice', function(){
|
var tp = createNgTableParams();
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 5 });
|
tp.reload();
|
scope.$digest();
|
|
// then
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('change to filter that fails to load should not cause infinite reload loop', inject(function($q){
|
var tp = createNgTableParams({ getData: function(){
|
if (tp.settings().getData.calls.count() > 1){
|
return $q.reject('BANG!');
|
}
|
return [1,2]
|
}});
|
scope.tableParams = tp;
|
scope.$digest();
|
expect(tp.settings().getData.calls.count()).toBe(1); // checking assumptions
|
expect(tp.isDataReloadRequired()).toBe(false); // checking assumptions
|
|
// when
|
tp.filter({ age: 5 });
|
expect(tp.isDataReloadRequired()).toBe(true); // checking assumptions
|
scope.$digest();
|
|
// then
|
expect(tp.isDataReloadRequired()).toBe(false);
|
expect(tp.settings().getData.calls.count()).toBe(2);
|
}));
|
|
it('changing filter, orderBy, or page in a callback to reload should re-invoke getData 1 time only', function(){
|
var tp = createNgTableParams();
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 5 });
|
tp.reload().then(function(){
|
tp.sorting({ age: 'desc'});
|
// note: better to call tp.reload() here rather than rely on a watch firing later to do it for us
|
// that way the second reload is chained to the first and returned as a single promise
|
});
|
scope.$digest();
|
|
// then
|
// ie calls.count() === (1 x reload) + (1 x sorting)
|
expect(tp.settings().getData.calls.count()).toBe(2);
|
});
|
|
it('changing filter, orderBy, or page then reload in a callback to reload should re-invoke getData 1 time only', function(){
|
|
// todo: refactor the watches in ngTableController to handle this case
|
|
var tp = createNgTableParams();
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 5 });
|
tp.reload().then(function(){
|
tp.sorting({ age: 'desc'});
|
return tp.reload();
|
});
|
scope.$digest();
|
|
// then
|
// ie calls.count() === (1 x reload) + (1 x sorting)
|
expect(tp.settings().getData.calls.count()).toBe(2);
|
});
|
|
it('should not reload when filter value is assigned the same value', function(){
|
// given
|
var tp = createNgTableParams({ filter: {age: 10} }, { });
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 10});
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(0);
|
});
|
|
it('should reload when filter value changes', function(){
|
// given
|
var tp = createNgTableParams({ filter: {age: 10} }, {});
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.filter({ age: 12});
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
|
it('should reload when new dataset supplied', function(){
|
// given
|
var initialDataset = [
|
{age: 1},
|
{age: 2}
|
];
|
var tp = createNgTableParams();
|
scope.tableParams = tp;
|
scope.$digest();
|
tp.settings().getData.calls.reset();
|
|
// when
|
tp.settings({ dataset: [{ age: 10}, { age: 11}, { age: 12}]});
|
scope.$digest();
|
|
expect(tp.settings().getData.calls.count()).toBe(1);
|
});
|
});
|
});
|
