Initial commit

lib/assets/test/spec/dashboard/components/table/table.spec.js

@@ -0,0 +1,217 @@
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const RowModel = require('dashboard/data/table/row-model');
+const CartoTableData = require('dashboard/data/table/carto-table-data.js');
+const CartoTableMetadata = require('dashboard/views/public-dataset/carto-table-metadata');
+const Table = require('dashboard/components/table/table');
+const configModel = require('fixtures/dashboard/config-model.fixture');
+
+describe('dashboard/components/table/table', function () {
+  let table, cols, tableMetadata;
+
+  beforeEach(function () {
+    RowModel.url = 'test';
+    cols = new CartoTableData([], { configModel });
+    cols.url = 'test';
+
+    tableMetadata = new CartoTableMetadata({
+      schema: [
+        ['id', 'number'],
+        ['col1', 'number'],
+        ['col2', 'number'],
+        ['col3', 'number']
+      ]
+    }, { configModel });
+
+    cols.reset([
+      new Backbone.Model({'id': 1, 'col1': 1, 'col2': 2, 'col3': 3}),
+      new Backbone.Model({'id': 2, 'col1': 4, 'col2': 5, 'col3': 6})
+    ]);
+
+    cols.fetched = true;
+
+    table = new Table({
+      dataModel: cols,
+      model: tableMetadata
+    });
+
+    cols.table = table;
+  });
+
+  it('should render a table', function () {
+    expect(table.render().$el.is('table')).toEqual(true);
+  });
+
+  it('should render a header', function () {
+    expect(table.render().$('thead')).toBeTruthy();
+  });
+
+  it('should have 2 rows and the header', function () {
+    expect(table.render().$('tr').length).toEqual(3);
+  });
+
+  it('should have 6 cells and header', function () {
+    expect(table.render().$('th').length).toEqual(5);
+    expect(table.render().$('td').length).toEqual(2 * 5);
+  });
+
+  it('each row has an id', function () {
+    expect($(table.render().$('tr')[1]).attr('id')).toEqual('row_' + cols.at(0).id);
+  });
+
+  it('should change value when model changes', function () {
+    table.render();
+    cols.at(0).set('col1', 10);
+    expect(table.$('#cell_1_col1').html()).toEqual(cols.at(0).get('col1').toString());
+  });
+
+  it('should rerender on data reset', function () {
+    expect(table.render().$('tr').length).toEqual(3);
+    cols.reset([
+      {'id': 1, 'col1': 1, 'col2': 2, 'col3': 3}
+    ]);
+    expect(table.$('tr').length).toEqual(2);
+  });
+
+  it('should remove rows on remove', function () {
+    table.render();
+    cols.at(0).destroy();
+    expect(table.$('tr').length).toEqual(2);
+    expect(table.rowViews.length).toEqual(1);
+  });
+
+  it('should add rows', function () {
+    table.render();
+    cols.add({'id': 4, 'col1': 1, 'col2': 2, 'col3': 3});
+    expect(table.$('tr').length).toEqual(4);
+  });
+
+  it('should add rows at index', function () {
+    table.render();
+    cols.add({'id': 10, 'col1': 11, 'col2': 12, 'col3': 13}, {at: 1});
+    expect(table.$('tr').length).toEqual(4);
+    var cell = table.getCell(1, 1);
+    expect(cell.html()).toEqual('10');
+    expect(cell.parent().attr('data-y')).toEqual('1');
+    expect(table.getCell(1, 2).parent().attr('data-y')).toEqual('2');
+  });
+
+  it('should update cell indexes when remove a column', function () {
+    table.render();
+    cols.add({'id': 10, 'col1': 11, 'col2': 12, 'col3': 13}, {at: 1});
+    expect(table.$('tr').length).toEqual(4);
+    cols.remove(cols.at(0));
+    var cell = table.getCell(0, 1);
+    expect(cell.parent().attr('data-y')).toEqual('1');
+    /*
+    var cell = table.getCell(0, 1);
+    expect(cell.html()).toEqual('10');
+    expect(cell.parent().attr('data-y')).toEqual('1');
+    expect(table.getCell(0, 2).parent().attr('data-y')).toEqual('2');
+    */
+  });
+
+  it('should remove rows', function () {
+    table.render();
+    cols.remove(cols.at(0));
+    expect(table.$('tr').length).toEqual(2);
+  });
+
+  it('should return cell x,y', function () {
+    // $('#foo').trigger('click');
+    var cell = table.render().getCell(1, 1);
+    expect(cell.html()).toEqual('2');
+    cell = table.getCell(2, 1);
+    expect(cell.html()).toEqual('4');
+  });
+
+  it('should trigger cell clicked on click and dblclick', function () {
+    var cell = table.render().getCell(0, 1);
+    const spy = {
+      click: function () {},
+      dblClick: function () {}
+    };
+    spyOn(spy, 'click');
+    spyOn(spy, 'dblClick');
+    table.bind('cellClick', spy.click, spy);
+    cell.trigger('click');
+    expect(spy.click).toHaveBeenCalled();
+    expect(spy.click.calls.mostRecent().args[1][0]).toEqual(cell[0]);
+    expect(spy.click.calls.mostRecent().args[2]).toEqual(0);
+    expect(spy.click.calls.mostRecent().args[3]).toEqual(1);
+
+    table.bind('cellDblClick', spy.dblClick, spy);
+    cell.trigger('dblclick');
+    expect(spy.dblClick).toHaveBeenCalled();
+    expect(spy.dblClick.calls.mostRecent().args[1][0]).toEqual(cell[0]);
+    expect(spy.dblClick.calls.mostRecent().args[2]).toEqual(0);
+    expect(spy.dblClick.calls.mostRecent().args[3]).toEqual(1);
+  });
+
+  xit('should render new data on change data source', function () {
+    // TODO: This test fails because resetting the collection sets the
+    // status to unfetched, and table doesn't re-render rows.
+    cols = new CartoTableData({}, { configModel });
+
+    table.setDataSource(cols);
+
+    cols.reset([
+      new Backbone.Model({ 'id': 100, 'col1': 1, 'col2': 2, 'col3': 3 })
+    ], { fetched: true });
+
+    const cell = table.getCell(1, 0);
+    expect(cell.html()).toEqual('100');
+  });
+
+  it('should clear rows after a reset', function () {
+    expect(table.render().$('tr').length).toEqual(3);
+    cols.reset([]);
+    expect(table.$('tr').length).toEqual(1); // only the header
+  });
+
+  it('should call renderEmpty after an error', function () {
+    spyOn(table, '_renderEmpty');
+    cols.reset([], { silent: true });
+    cols.trigger('error');
+    expect(table._renderEmpty).toHaveBeenCalled();
+  });
+
+  it('should render faster than light', function () {
+    var NCOLUMNS = 100;
+    var NROWS = 260;
+    var schema = [];
+    var rows = [];
+
+    _(NCOLUMNS).times(function (n) {
+      schema.push(['column_' + n, 'string']);
+    });
+
+    _(NROWS).times(function (n) {
+      var row = {};
+      _(schema).each(function (c) {
+        row[c[0]] = 'testestestest';
+      });
+      rows.push(row);
+    });
+
+    tableMetadata = new CartoTableMetadata({ schema }, { configModel });
+    cols.reset(rows);
+
+    table = new Table({
+      dataModel: cols,
+      model: tableMetadata
+    });
+
+    var mean = 0;
+    var count = 5;
+    for (var i = 0; i < count; ++i) {
+      var t0 = new Date().getTime();
+      table.render();
+      var t1 = new Date().getTime();
+      mean += t1 - t0;
+    }
+    // God please, forgive me.
+    expect(mean / count).toBeLessThan(10000);
+  });
+});