dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
252 lines (233 loc) • 9.66 kB
JavaScript
/* global appendChartID, loadDateFixture */
describe('dc.dataTable', function () {
var id, chart, data;
var dateFixture;
var dimension;
var countryDimension;
var valueGroup;
beforeEach(function () {
dateFixture = loadDateFixture();
data = crossfilter(dateFixture);
dimension = data.dimension(function (d) {
return d3.time.day.utc(d.dd);
});
countryDimension = data.dimension(function (d) {
return d.countrycode;
});
valueGroup = function () {
return 'Data Table';
};
id = 'data-table';
appendChartID(id);
chart = dc.dataTable('#' + id)
.dimension(dimension)
.group(valueGroup)
.transitionDuration(0)
.size(3)
.sortBy(function (d) {return d.id;})
.order(d3.descending)
.columns(
[function (d) {
return d.id;
}, function (d) {
return d.status;
}]
);
});
describe('simple table', function () {
beforeEach(function () {
chart.render();
});
describe('creation', function () {
it('generates something', function () {
expect(chart).not.toBeNull();
});
it('registers', function () {
expect(dc.hasChart(chart)).toBeTruthy();
});
it('sets size', function () {
expect(chart.size()).toEqual(3);
});
it('sets sortBy', function () {
expect(chart.sortBy()).not.toBeNull();
});
it('sets order', function () {
expect(chart.order()).toBe(d3.descending);
});
it('group should be set', function () {
expect(chart.group()).toEqual(valueGroup);
});
it('group tr should not be undefined', function () {
expect(typeof(chart.selectAll('tr.dc-table-group')[0][0])).not.toBe('undefined');
});
it('sets column span set on group tr', function () {
expect(chart.selectAll('tr.dc-table-group td')[0][0].getAttribute('colspan')).toEqual('2');
});
it('creates id column', function () {
expect(chart.selectAll('td._0')[0][0].innerHTML).toEqual('9');
expect(chart.selectAll('td._0')[0][1].innerHTML).toEqual('8');
expect(chart.selectAll('td._0')[0][2].innerHTML).toEqual('3');
});
it('creates status column', function () {
expect(chart.selectAll('td._1')[0][0].innerHTML).toEqual('T');
expect(chart.selectAll('td._1')[0][1].innerHTML).toEqual('F');
expect(chart.selectAll('td._1')[0][2].innerHTML).toEqual('T');
});
});
describe('slicing entries', function () {
beforeEach(function () {
chart.beginSlice(1);
chart.redraw();
});
it('slice beginning', function () {
expect(chart.selectAll('tr.dc-table-row')[0].length).toEqual(2);
});
it('slice beginning and end', function () {
chart.endSlice(2);
chart.redraw();
expect(chart.selectAll('tr.dc-table-row')[0].length).toEqual(1);
});
});
describe('external filter', function () {
beforeEach(function () {
countryDimension.filter('CA');
chart.redraw();
});
it('renders only filtered data set', function () {
expect(chart.selectAll('td._0')[0].length).toEqual(2);
});
it('renders the correctly filtered records', function () {
expect(chart.selectAll('td._0')[0][0].innerHTML).toEqual('7');
expect(chart.selectAll('td._0')[0][1].innerHTML).toEqual('5');
});
});
describe('ascending order', function () {
beforeEach(function () {
chart.order(d3.ascending);
chart.redraw();
});
it('uses dimension.bottom() instead of top()', function () {
expect(chart.selectAll('td._0')[0][0].innerHTML).toEqual('1');
});
});
});
describe('renderlet', function () {
var derlet;
beforeEach(function () {
derlet = jasmine.createSpy('renderlet', function (chart) {
chart.selectAll('td.dc-table-label').text('changed');
});
derlet.and.callThrough();
chart.on('renderlet', derlet);
});
it('custom renderlet should be invoked with render', function () {
chart.render();
expect(chart.selectAll('td.dc-table-label').text()).toEqual('changed');
expect(derlet).toHaveBeenCalled();
});
it('custom renderlet should be invoked with redraw', function () {
chart.redraw();
expect(chart.selectAll('td.dc-table-label').text()).toEqual('changed');
expect(derlet).toHaveBeenCalled();
});
});
describe('specifying chart columns with label', function () {
beforeEach(function () {
chart.columns(['state']);
chart.render();
});
it('should render value and capitalized header', function () {
var cols = chart.selectAll('td.dc-table-column')[0].map(function (d) {return d.textContent;});
var expected = ['Mississippi', 'Mississippi', 'Delaware'];
expect(cols.length).toEqual(expected.length);
expected.forEach(function (d) {
expect(cols).toContain(d);
});
var colheader = chart.selectAll('th.dc-table-head')[0].map(function (d) {return d.textContent;});
expect(colheader.length).toEqual(1);
expect(colheader[0]).toEqual('State');
});
});
describe('specifying chart columns with function', function () {
beforeEach(function () {
chart.columns([function (d) {return '' + d.id + 'test';}]);
chart.render();
});
it('should render function result and no header', function () {
var cols = chart.selectAll('td.dc-table-column')[0].map(function (d) {return d.textContent;});
var expected = ['9test', '8test', '3test'];
expect(cols.length).toEqual(expected.length);
expected.forEach(function (d) {
expect(cols).toContain(d);
});
var colheader = chart.selectAll('th.dc-table-head')[0].map(function (d) {return d.textContent;});
expect(colheader.length).toEqual(0);
});
});
describe('specifying chart columns with object', function () {
beforeEach(function () {
chart.columns([{
label: 'Test ID',
format: function (d) {
return 'test' + d.id;
}
}]);
chart.render();
});
it('should produce correct table header with single column', function () {
var thead = chart.selectAll('thead');
expect(thead.length).toBe(1);
var tr = thead.selectAll('tr');
expect(tr.length).toBe(1);
var colheader = tr.selectAll('th.dc-table-head')[0].map(function (d) {return d.textContent;});
expect(colheader.length).toEqual(1);
expect(colheader[0]).toEqual('Test ID');
});
it('should render correct values in rows', function () {
var cols = chart.selectAll('td.dc-table-column')[0].map(function (d) {return d.textContent;});
var expected = ['test9', 'test8', 'test3'];
expect(cols.length).toEqual(expected.length);
expected.forEach(function (d, i) {
expect(cols[i]).toEqual(d);
});
});
});
describe('with existing table header', function () {
beforeEach(function () {
// add some garbage for table to replace
d3.select('#data-table')
.selectAll('thead').data([0]).enter().append('thead')
.selectAll('tr').data([1,2]).enter().append('tr')
.selectAll('th').data([1,2,3]).enter().append('th');
chart.columns([{
label: 'Test ID',
format: function (d) {
return 'test' + d.id;
}
}]);
chart.render();
});
it('should produce correct table header with single column', function () {
var thead = chart.selectAll('thead');
expect(thead.length).toBe(1);
var tr = thead.selectAll('tr');
expect(tr.length).toBe(1);
var colheader = tr.selectAll('th.dc-table-head')[0].map(function (d) {return d.textContent;});
expect(colheader.length).toEqual(1);
expect(colheader[0]).toEqual('Test ID');
});
});
describe('specifying showGroups as false', function () {
beforeEach(function () {
chart.showGroups(false);
chart.render();
});
it('group tr should be undefined', function () {
expect(typeof(chart.selectAll('tr.dc-table-group')[0][0])).toBe('undefined');
});
});
afterEach(function () {
dimension.filterAll();
countryDimension.filterAll();
});
});