data-table-spec.js

/* 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();
    });
});