Skip to content

Commit

Permalink
Add some tests on renderer [WiP]
Browse files Browse the repository at this point in the history
  • Loading branch information
l-lin committed Oct 3, 2014
1 parent c25b040 commit bc83686
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 1 deletion.
7 changes: 7 additions & 0 deletions dist/angular-datatables.js
Original file line number Diff line number Diff line change
Expand Up @@ -848,6 +848,9 @@
function (DTLoadingTemplate) {
var $loading = angular.element(DTLoadingTemplate.html);
return {
getLoadingElem: function () {
return $loading;
},
showLoading: function ($elem) {
$elem.after($loading);
$elem.hide();
Expand Down Expand Up @@ -896,6 +899,7 @@
return {
create: function (options) {
var renderer = Object.create(DTRenderer);
renderer.name = 'DTDefaultRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this;
Expand Down Expand Up @@ -924,6 +928,7 @@
return {
create: function (options) {
var renderer = Object.create(DTRenderer);
renderer.name = 'DTNGRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem, staticHTML) {
var _this = this, expression = $elem.find('tbody').html(),
Expand Down Expand Up @@ -982,6 +987,7 @@
}, 0, false);
};
var renderer = Object.create(DTRenderer);
renderer.name = 'DTPromiseRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this, _loadedPromise = null, _whenLoaded = function (data) {
Expand Down Expand Up @@ -1064,6 +1070,7 @@
}, 0, false);
};
var renderer = Object.create(DTRenderer);
renderer.name = 'DTAjaxRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this;
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-datatables.min.js

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/angular-datatables.renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ angular.module('datatables.renderer', ['datatables.factory', 'datatables.options
.factory('DTRendererService', function(DTLoadingTemplate) {
var $loading = angular.element(DTLoadingTemplate.html);
return {
getLoadingElem: function() {
return $loading;
},
showLoading: function ($elem) {
$elem.after($loading);
$elem.hide();
Expand Down Expand Up @@ -44,6 +47,7 @@ angular.module('datatables.renderer', ['datatables.factory', 'datatables.options
return {
create: function (options) {
var renderer = Object.create(DTRenderer);
renderer.name = 'DTDefaultRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this;
Expand All @@ -67,6 +71,7 @@ angular.module('datatables.renderer', ['datatables.factory', 'datatables.options
return {
create: function (options) {
var renderer = Object.create(DTRenderer);
renderer.name = 'DTNGRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem, staticHTML) {
var _this = this,
Expand Down Expand Up @@ -130,6 +135,7 @@ angular.module('datatables.renderer', ['datatables.factory', 'datatables.options
};

var renderer = Object.create(DTRenderer);
renderer.name = 'DTPromiseRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this,
Expand Down Expand Up @@ -211,6 +217,7 @@ angular.module('datatables.renderer', ['datatables.factory', 'datatables.options
}, 0, false);
};
var renderer = Object.create(DTRenderer);
renderer.name = 'DTAjaxRenderer';
renderer.options = options;
renderer.render = function ($scope, $elem) {
var _this = this;
Expand Down
200 changes: 200 additions & 0 deletions test/spec/angular-datatables.renderer.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
describe('datatables.renderer', function () {
'use strict';

beforeEach(module('datatables.renderer'));

describe('DTRendererService', function () {
var DTRendererService, $loading, $elem, $scope;

beforeEach(inject(function ($injector, $rootScope) {
DTRendererService = $injector.get('DTRendererService');
$loading = DTRendererService.getLoadingElem();
$elem = $(
'<table id="foobar">' +
' <thead>' +
' <tr>' +
' <th>Foo</th>' +
' <th>Bar</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' </tbody>' +
'</table>'
);
$scope = $rootScope.$new();
}));

describe(', when showing the loading,', function () {
beforeEach(function () {
spyOn($.fn, 'after').andCallThrough();
spyOn($.fn, 'hide').andCallThrough();
spyOn($.fn, 'show').andCallThrough();
});

it('should hide the given element and show the loading', function () {
DTRendererService.showLoading($elem);
expect($elem.after).toHaveBeenCalledWith($loading);
expect($elem.hide).toHaveBeenCalled();
expect($loading.show).toHaveBeenCalled();
});
});
describe(', when hiding the loading,', function () {
beforeEach(function () {
spyOn($.fn, 'show').andCallThrough();
spyOn($.fn, 'hide').andCallThrough();
});

it('should show the given element and hide the loading', function () {
DTRendererService.hideLoading($elem);
expect($elem.show).toHaveBeenCalled();
expect($loading.hide).toHaveBeenCalled();
});
});
describe(', when rendering the DataTable and emitting an event,', function () {
var options, oTable;
beforeEach(function () {
options = {};
spyOn($.fn, 'attr').andCallThrough();
spyOn($scope, '$emit').andCallThrough();
oTable = DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
});
it('should retrieve the id of the element', function () {
expect($elem.attr).toHaveBeenCalledWith('id');
});
it('should not have the option "destroy" set to true', function () {
expect(options.destroy).not.toBeTruthy();
});
it('should return the DT API instance', function () {
expect(oTable).toBeDefined();
});
it('should emit an event with the appropriate parameters', function () {
expect($scope.$emit).toHaveBeenCalledWith(
'event:dataTableLoaded', {
id: $elem.attr('id'),
DataTable: oTable,
dataTable: $elem.dataTable()
});
});
it('should set the "destroy" option to true if we render again', inject(function ($timeout) {
// add $timeout in order to "wait" the DataTables to be renderer before calling the following codes
$timeout(function () {
DTRendererService.renderDataTableAndEmitEvent($elem, options, $scope);
expect(options.destroy).toBeTruthy();
}, 0, false);
}));
});
describe(', when rendering the DataTable,', function () {
var options;
beforeEach(function () {
options = {};
spyOn(DTRendererService, 'hideLoading').andCallThrough();
spyOn(DTRendererService, 'renderDataTableAndEmitEvent').andCallThrough();
});

it('should hide, render and emit an event', function () {
var oTable = DTRendererService.doRenderDataTable($elem, options, $scope);
expect(DTRendererService.hideLoading).toHaveBeenCalledWith($elem);
expect(DTRendererService.renderDataTableAndEmitEvent).toHaveBeenCalledWith($elem, options, $scope);
expect(oTable).toBeDefined();
});
});
});

describe('DTRenderer', function () {
var DTRenderer;

beforeEach(inject(function ($injector) {
DTRenderer = $injector.get('DTRenderer');
}));

it('should not have any options by default', function () {
var renderer = Object.create(DTRenderer);
expect(renderer.options).toBeUndefined();
});
it('should have any options when set', function () {
var renderer = Object.create(DTRenderer);
renderer.withOptions({});
expect(renderer.options).toBeDefined();
});
});

describe('DTRendererFactory', function () {
var DTRendererFactory;

beforeEach(inject(function ($injector) {
DTRendererFactory = $injector.get('DTRendererFactory');
}));

it('should return the DTDefaultRenderer if no options is provided', function () {
var renderer = DTRendererFactory.fromOptions();
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTDefaultRenderer');
});
it('should return the DTDefaultRenderer if the options does not contain any promise or ajax options', function () {
var renderer = DTRendererFactory.fromOptions({});
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTDefaultRenderer');
});
it('should return the DTNGRenderer if the flag "isNgDisplay" is set to true', function () {
var renderer = DTRendererFactory.fromOptions({}, true);
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTNGRenderer');
});
it('should return the DTPromiseRenderer if a promise is provided', function () {
var renderer = DTRendererFactory.fromOptions({
fnPromise: function () {
}
});
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTPromiseRenderer');
});
it('should return the DTAjaxRenderer if the ajax source is provided', function () {
var renderer = DTRendererFactory.fromOptions({
sAjaxSource: 'ajaxSource'
});
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTAjaxRenderer');
});
it('should return the DTAjaxRenderer if the ajax options is provided', function () {
var renderer = DTRendererFactory.fromOptions({
ajax: 'ajaxSource'
});
expect(renderer).toBeDefined();
expect(renderer.name).toBe('DTAjaxRenderer');
});
});

describe('DTDefaultRenderer', function () {
var DTDefaultRenderer, DTRendererService, options, renderer, $scope, $elem, $timeout;

beforeEach(inject(function ($injector, $rootScope) {
$timeout = $injector.get('$timeout');
DTDefaultRenderer = $injector.get('DTDefaultRenderer');
DTRendererService = $injector.get('DTRendererService');
options = {};
$scope = $rootScope.$new();
$elem = $(
'<table id="foobar">' +
' <thead>' +
' <tr>' +
' <th>Foo</th>' +
' <th>Bar</th>' +
' </tr>' +
' </thead>' +
' <tbody>' +
' </tbody>' +
'</table>'
);
spyOn(DTRendererService, 'doRenderDataTable').andCallThrough();
}));

it('should render the DataTable', function () {
$timeout(function () {
renderer = DTDefaultRenderer.create();
var oTable = renderer.render($scope, $elem);
expect(DTRendererService.doRenderDataTable).toHaveBeenCalledWith($elem, options, $scope);
expect(oTable).toBeDefined();
}, 0, false);
});
});
});

0 comments on commit bc83686

Please sign in to comment.