Add tests for table trace type with Plotly.restyle and Plotly.relayout

test/image/mocks/workspace_starter_state.json

@@ -0,0 +1,11 @@
+{
+    "data": [
+        {
+            "mode": "markers",
+            "type": "scatter"
+        }
+    ],
+    "layout": {
+        "hovermode": "closest"
+    }
+}

test/jasmine/tests/table_test.js

@@ -0,0 +1,135 @@
+var Plotly = require('@lib');
+var Lib = require('@src/lib');
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+describe('table plots', function() {
+    'use strict';
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function initialize(mock, gd) {
+        return Plotly.plot(gd, mock.data, mock.layout);
+    }
+
+    function countCells() {
+        return d3.selectAll('.cell-rect').size();
+    }
+
+    it('should be able switch to table trace from another plot type', function(done) {
+        var mock = Lib.extendDeep({}, require('@mocks/workspace_starter_state.json'));
+        initialize(mock, gd)
+            .then(function() {
+                return Plotly.restyle(gd, {type: 'table'})
+                    .then(function() {
+                        return Plotly.restyle(
+                            gd, {'header.values[0]': ['First Column']}
+                        );
+                    })
+                    .then(function() {
+                        return Plotly.restyle(
+                            gd, {'header.values[1]': ['Second Column']}
+                        );
+                    })
+                    .then(function() {
+                        return Plotly.restyle(gd,
+                            {
+                                'cells.values': [
+                                    ['First Row First Col', 'First Row Second Col'],
+                                    ['Second Row First Col', 'Second Row Second Col']
+                                ]
+                            }
+                        );
+                    });
+            })
+            .then(function() {
+                expect(gd.data[0].type).toBe('table');
+                expect(countCells()).toBe(6);
+            })
+            .then(done);
+    });
+
+    it('should be able to use Plotly.restyle on an existing table', function(done) {
+        var mock = Lib.extendDeep({}, require('@mocks/table_plain_birds.json'));
+        var newColors = ['yellow', 'gray'];
+
+        initialize(mock, gd)
+            .then(function() {
+                return Plotly.restyle(gd, {'cells.fill': newColors})
+                    .then(function() {
+                        Plotly.restyle(gd, {'header.font.size': 20});
+                    });
+            })
+            .then(function() {
+                expect(gd.data[0].cells[0]).toBe('yellow');
+                expect(gd.data[0].cells[1]).toBe('gray');
+                expect(gd.data[0].header.font.size).toBe(20);
+            })
+            .then(done);
+    });
+
+    it('should work with Plotly.restyle for a specific trace index', function(done) {
+        var mock = Lib.extendDeep({}, require('@mocks/table_latex_multitrace.json'));
+        var initialFontSizeFirstTrace;
+        var initialFontSizeSecondTrace;
+
+        initialize(mock, gd)
+            .then(function() {
+                initialFontSizeFirstTrace = gd.data[0].header.font.size;
+                initialFontSizeSecondTrace = gd.data[1].header.font.size;
+
+                expect(initialFontSizeFirstTrace === initialFontSizeSecondTrace).toBe(true);
+
+                return Plotly.restyle(gd, {'header.font.size': initialFontSizeFirstTrace + 1}, 0)
+                    .then(function() {
+                        Plotly.restyle(gd, {'header.font.size': initialFontSizeSecondTrace + 2}, 1);
+                    });
+            })
+            .then(function() {
+                expect(gd.data[0].header.font.size).toBe(initialFontSizeFirstTrace + 1);
+                expect(gd.data[1].header.font.size).toBe(initialFontSizeFirstTrace + 2);
+                expect(initialFontSizeFirstTrace !== initialFontSizeSecondTrace).toBe(true);
+            })
+            .then(done);
+    });
+
+    it('should work with Plotly.relayout', function(done) {
+        var mock = Lib.extendDeep({}, require('@mocks/table_latex_multitrace.json'));
+        var newTitle = 'New Title';
+
+        initialize(mock, gd)
+            .then(function() {
+                return Plotly.relayout(gd, {'title': newTitle});
+            })
+            .then(function() {
+                expect(gd.layout.title).toBe(newTitle);
+            })
+            .then(done);
+    });
+
+    it('should work with Plotly.update', function(done) {
+        var mock = Lib.extendDeep({}, require('@mocks/table_plain_birds.json'));
+        var newTitle = 'New Title';
+        var initialFontSize;
+
+        initialize(mock, gd)
+            .then(function() {
+                initialFontSize = gd.data[0].header.font.size;
+                return Plotly.update(gd,
+                    {'header.font.size': initialFontSize + 1},
+                    {'title': newTitle}
+                );
+            })
+            .then(function() {
+                expect(gd.layout.title).toBe(newTitle);
+                expect(gd.data[0].header.font.size).toBe(initialFontSize + 1);
+            })
+            .then(done);
+    });
+});