Merge pull request #3859 from plotly/flaky-gl-ci-fixes

Reorganise gl tests for less flakiness

Author: etpinard

.circleci/config.yml

@@ -53,7 +53,7 @@ jobs:
     docker:
       # need '-browsers' version to test in real (xvfb-wrapped) browsers
       - image: circleci/node:10.9.0-browsers
-    parallelism: 2
+    parallelism: 3
     working_directory: ~/plotly.js
     steps:
       - attach_workspace:

test/jasmine/tests/gl2d_scatterplot_contour_test.js renamed to test/jasmine/tests/contourgl_test.js

@@ -1,5 +1,3 @@
-'use strict';
-
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 var d3 = require('d3');
@@ -197,25 +195,25 @@ describe('contourgl plots', function() {
         makePlot(gd, mockCopy, done);
     });
 
-    it('render without raising an error (coloring: "lines")', function(done) {
+    it('@gl render without raising an error (coloring: "lines")', function(done) {
         var mock = Lib.extendDeep({}, plotDataElliptical(0));
         mock.data[0].contours.coloring = 'lines'; // 'fill' is the default
         makePlot(gd, mock, done);
     });
 
-    it('render smooth, regular ellipses without raising an error (coloring: "fill")', function(done) {
+    it('@gl render smooth, regular ellipses without raising an error (coloring: "fill")', function(done) {
         var mock = plotDataElliptical(0);
         makePlot(gd, mock, done);
     });
 
-    it('render ellipses with added noise without raising an error (coloring: "fill")', function(done) {
+    it('@gl render ellipses with added noise without raising an error (coloring: "fill")', function(done) {
         var mock = plotDataElliptical(0.5);
         mock.data[0].contours.coloring = 'fill'; // 'fill' is the default
         mock.data[0].line = {smoothing: 0};
         makePlot(gd, mock, done);
     });
 
-    it('should update properly', function(done) {
+    it('@gl should update properly', function(done) {
         var mock = plotDataElliptical(0);
         var scene2d;
 

test/jasmine/tests/gl2d_date_axis_render_test.js

@@ -8,6 +8,115 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test');
 
+describe('Test gl3d axes defaults', function() {
+    'use strict';
+
+    var supplyLayoutDefaults = require('@src/plots/gl3d/layout/axis_defaults');
+
+    describe('supplyLayoutDefaults supplies defaults', function() {
+        var layoutIn,
+            layoutOut;
+
+        var options = {
+            font: 'Open Sans',
+            scene: {id: 'scene'},
+            data: [{x: [], y: []}],
+            bgColor: '#fff',
+            fullLayout: {_dfltTitle: {x: 'xxx', y: 'yyy', colorbar: 'cbbb'}}
+        };
+
+        beforeEach(function() {
+            layoutOut = {};
+        });
+
+        it('should define specific default set with empty initial layout', function() {
+            layoutIn = {};
+
+            var expected = {
+                'xaxis': {
+                    'showline': false,
+                    'showgrid': true,
+                    'gridcolor': 'rgb(204, 204, 204)',
+                    'gridwidth': 1,
+                    'showspikes': true,
+                    'spikesides': true,
+                    'spikethickness': 2,
+                    'spikecolor': '#444',
+                    'showbackground': false,
+                    'showaxeslabels': true
+                },
+                'yaxis': {
+                    'showline': false,
+                    'showgrid': true,
+                    'gridcolor': 'rgb(204, 204, 204)',
+                    'gridwidth': 1,
+                    'showspikes': true,
+                    'spikesides': true,
+                    'spikethickness': 2,
+                    'spikecolor': '#444',
+                    'showbackground': false,
+                    'showaxeslabels': true
+                },
+                'zaxis': {
+                    'showline': false,
+                    'showgrid': true,
+                    'gridcolor': 'rgb(204, 204, 204)',
+                    'gridwidth': 1,
+                    'showspikes': true,
+                    'spikesides': true,
+                    'spikethickness': 2,
+                    'spikecolor': '#444',
+                    'showbackground': false,
+                    'showaxeslabels': true
+                }
+            };
+
+            function checkKeys(validObject, testObject) {
+                var keys = Object.keys(validObject);
+                for(var i = 0; i < keys.length; i++) {
+                    var k = keys[i];
+                    expect(validObject[k]).toBe(testObject[k]);
+                }
+                return true;
+            }
+
+            supplyLayoutDefaults(layoutIn, layoutOut, options);
+            ['xaxis', 'yaxis', 'zaxis'].forEach(function(axis) {
+                checkKeys(expected[axis], layoutOut[axis]);
+            });
+        });
+
+        it('should inherit layout.calendar', function() {
+            layoutIn = {
+                xaxis: {type: 'date'},
+                yaxis: {type: 'date'},
+                zaxis: {type: 'date'}
+            };
+            options.calendar = 'taiwan';
+
+            supplyLayoutDefaults(layoutIn, layoutOut, options);
+
+            expect(layoutOut.xaxis.calendar).toBe('taiwan');
+            expect(layoutOut.yaxis.calendar).toBe('taiwan');
+            expect(layoutOut.zaxis.calendar).toBe('taiwan');
+        });
+
+        it('should accept its own calendar', function() {
+            layoutIn = {
+                xaxis: {type: 'date', calendar: 'hebrew'},
+                yaxis: {type: 'date', calendar: 'ummalqura'},
+                zaxis: {type: 'date', calendar: 'discworld'}
+            };
+            options.calendar = 'taiwan';
+
+            supplyLayoutDefaults(layoutIn, layoutOut, options);
+
+            expect(layoutOut.xaxis.calendar).toBe('hebrew');
+            expect(layoutOut.yaxis.calendar).toBe('ummalqura');
+            expect(layoutOut.zaxis.calendar).toBe('discworld');
+        });
+    });
+});
 
 describe('Test Gl3d layout defaults', function() {
     'use strict';
@@ -277,10 +386,10 @@ describe('Test Gl3d layout defaults', function() {
 describe('Gl3d layout edge cases', function() {
     var gd;
 
-    beforeEach(function() {gd = createGraphDiv(); });
+    beforeEach(function() { gd = createGraphDiv(); });
     afterEach(destroyGraphDiv);
 
-    it('should handle auto aspect ratio correctly on data changes', function(done) {
+    it('@gl should handle auto aspect ratio correctly on data changes', function(done) {
         Plotly.plot(gd, [{x: [1, 2], y: [1, 3], z: [1, 4], type: 'scatter3d'}])
         .then(function() {
             var aspect = gd.layout.scene.aspectratio;

test/jasmine/tests/gl2d_plot_interact_test.js

@@ -9,7 +9,7 @@ describe('Test mesh3d', function() {
     describe('restyle', function() {
         afterEach(destroyGraphDiv);
 
-        it('should clear *cauto* when restyle *cmin* and/or *cmax*', function(done) {
+        it('@gl should clear *cauto* when restyle *cmin* and/or *cmax*', function(done) {
             var gd = createGraphDiv();
 
             function _assert(user, full) {

test/jasmine/tests/gl3d_hover_click_test.js

@@ -1,7 +1,18 @@
-var Scatter3D = require('@src/traces/scatter3d');
+var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
 var Color = require('@src/components/color');
 
+var Scatter3D = require('@src/traces/scatter3d');
+
+var d3 = require('d3');
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+var failTest = require('../assets/fail_test');
+var delay = require('../assets/delay');
+
+function countCanvases() {
+    return d3.selectAll('canvas').size();
+}
 
 describe('Scatter3D defaults', function() {
     'use strict';
@@ -89,3 +100,216 @@ describe('Scatter3D defaults', function() {
         expect(out.zcalendar).toBe('mayan');
     });
 });
+
+describe('Test scatter3d interactions:', function() {
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+        jasmine.DEFAULT_TIMEOUT_INTERVAL = 6000;
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    // lines, markers, text, error bars and surfaces each
+    // correspond to one glplot object
+    var mock = require('@mocks/gl3d_marker-arrays.json');
+    var mock2 = Lib.extendDeep({}, mock);
+    mock2.data[0].mode = 'lines+markers+text';
+    mock2.data[0].error_z = { value: 10 };
+    mock2.data[0].surfaceaxis = 2;
+    mock2.layout.showlegend = true;
+
+    it('@gl should be able to reversibly change trace type', function(done) {
+        var _mock = Lib.extendDeep({}, mock2);
+        var sceneLayout = { aspectratio: { x: 1, y: 1, z: 1 } };
+
+        Plotly.plot(gd, _mock)
+        .then(delay(20))
+        .then(function() {
+            expect(countCanvases()).toEqual(1);
+            expect(gd.layout.scene).toEqual(sceneLayout);
+            expect(gd.layout.xaxis === undefined).toBe(true);
+            expect(gd.layout.yaxis === undefined).toBe(true);
+            expect(gd._fullLayout._has('gl3d')).toBe(true);
+            expect(gd._fullLayout.scene._scene).toBeDefined();
+            expect(gd._fullLayout.scene._scene.camera).toBeDefined(true);
+
+            return Plotly.restyle(gd, 'type', 'scatter');
+        })
+        .then(function() {
+            expect(countCanvases()).toEqual(0);
+            expect(gd.layout.scene).toEqual(sceneLayout);
+            expect(gd.layout.xaxis).toBeDefined();
+            expect(gd.layout.yaxis).toBeDefined();
+            expect(gd._fullLayout._has('gl3d')).toBe(false);
+            expect(gd._fullLayout.scene === undefined).toBe(true);
+
+            return Plotly.restyle(gd, 'type', 'scatter3d');
+        })
+        .then(function() {
+            expect(countCanvases()).toEqual(1);
+            expect(gd.layout.scene).toEqual(sceneLayout);
+            expect(gd.layout.xaxis).toBeDefined();
+            expect(gd.layout.yaxis).toBeDefined();
+            expect(gd._fullLayout._has('gl3d')).toBe(true);
+            expect(gd._fullLayout.scene._scene).toBeDefined();
+        })
+        .then(done);
+    });
+
+    it('@gl should be able to delete the last trace', function(done) {
+        var _mock = Lib.extendDeep({}, mock2);
+
+        Plotly.plot(gd, _mock)
+        .then(delay(20))
+        .then(function() {
+            return Plotly.deleteTraces(gd, [0]);
+        })
+        .then(function() {
+            expect(countCanvases()).toEqual(0);
+            expect(gd._fullLayout._has('gl3d')).toBe(false);
+            expect(gd._fullLayout.scene === undefined).toBe(true);
+        })
+        .then(done);
+    });
+
+    it('@gl should be able to toggle visibility', function(done) {
+        var _mock = Lib.extendDeep({}, mock2);
+        _mock.data[0].x = [0, 1, 3];
+        _mock.data[0].y = [0, 1, 2];
+        _mock.data.push({
+            type: 'surface',
+            z: [[1, 2, 3], [1, 2, 3], [2, 1, 2]]
+        }, {
+            type: 'mesh3d',
+            x: [0, 1, 2, 0], y: [0, 0, 1, 2], z: [0, 2, 0, 1],
+            i: [0, 0, 0, 1], j: [1, 2, 3, 2], k: [2, 3, 1, 3]
+        });
+
+        // scatter3d traces are made of 5 gl-vis objects,
+        // surface and mesh3d are made of 1 gl-vis object each.
+        var order0 = [0, 0, 0, 0, 0, 1, 2];
+
+        function assertObjects(expected) {
+            var objects = gd._fullLayout.scene._scene.glplot.objects;
+            var actual = objects.map(function(o) {
+                return o._trace.data.index;
+            });
+
+            expect(actual).toEqual(expected);
+        }
+
+        Plotly.plot(gd, _mock)
+        .then(delay(20))
+        .then(function() {
+            assertObjects(order0);
+
+            return Plotly.restyle(gd, 'visible', 'legendonly');
+        })
+        .then(function() {
+            assertObjects([]);
+
+            return Plotly.restyle(gd, 'visible', true);
+        })
+        .then(function() {
+            assertObjects(order0);
+
+            return Plotly.restyle(gd, 'visible', false, [0]);
+        })
+        .then(function() {
+            assertObjects([1, 2]);
+
+            return Plotly.restyle(gd, 'visible', true, [0]);
+        })
+        .then(function() {
+            assertObjects(order0);
+
+            return Plotly.restyle(gd, 'visible', 'legendonly', [1]);
+        })
+        .then(function() {
+            assertObjects([0, 0, 0, 0, 0, 2]);
+
+            return Plotly.restyle(gd, 'visible', true, [1]);
+        })
+        .then(function() {
+            assertObjects(order0);
+        })
+        .then(done);
+    });
+
+    it('@gl should avoid passing blank texts to webgl', function(done) {
+        function assertIsFilled(msg) {
+            var fullLayout = gd._fullLayout;
+            expect(fullLayout.scene._scene.glplot.objects[0].glyphBuffer.length).not.toBe(0, msg);
+        }
+        Plotly.plot(gd, [{
+            type: 'scatter3d',
+            mode: 'text',
+            x: [1, 2, 3],
+            y: [2, 3, 1],
+            z: [3, 1, 2]
+        }])
+        .then(function() {
+            assertIsFilled('not to be empty text');
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('@gl should avoid passing empty lines to webgl', function(done) {
+        var obj;
+
+        Plotly.plot(gd, [{
+            type: 'scatter3d',
+            mode: 'lines',
+            x: [1],
+            y: [2],
+            z: [3]
+        }])
+        .then(function() {
+            obj = gd._fullLayout.scene._scene.glplot.objects[0];
+            spyOn(obj.vao, 'draw').and.callThrough();
+
+            expect(obj.vertexCount).toBe(0, '# of vertices');
+
+            return Plotly.restyle(gd, 'line.color', 'red');
+        })
+        .then(function() {
+            expect(obj.vertexCount).toBe(0, '# of vertices');
+            // calling this with no vertex causes WebGL warnings,
+            // see https://github.com/plotly/plotly.js/issues/1976
+            expect(obj.vao.draw).toHaveBeenCalledTimes(0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('@gl should only accept texts for textposition otherwise textposition is set to middle center before passing to webgl', function(done) {
+        Plotly.plot(gd, [{
+            type: 'scatter3d',
+            mode: 'markers+text+lines',
+            x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+            y: [-1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16],
+            z: [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
+            text: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p'],
+            textposition: ['left top', 'right top', 'left bottom', 'right bottom', null, undefined, true, false, [], {}, NaN, Infinity, 0, 1.2]
+        }])
+        .then(function() {
+            var AllTextpositions = gd._fullData[0].textposition;
+
+            expect(AllTextpositions[0]).toBe('top left', 'is not top left');
+            expect(AllTextpositions[1]).toBe('top right', 'is not top right');
+            expect(AllTextpositions[2]).toBe('bottom left', 'is not bottom left');
+            expect(AllTextpositions[3]).toBe('bottom right', 'is not bottom right');
+            for(var i = 4; i < AllTextpositions.length; i++) {
+                expect(AllTextpositions[i]).toBe('middle center', 'is not middle center');
+            }
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});

test/jasmine/tests/gl3d_plot_interact_test.js

@@ -6,76 +6,49 @@ var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var failTest = require('../assets/fail_test.js');
 
-// cartesian click events events use the hover data
-// from the mousemove events and then simulate
-// a click event on mouseup
 var doubleClick = require('../assets/double_click');
 var delay = require('../assets/delay');
 var mouseEvent = require('../assets/mouse_event');
 var readPixel = require('../assets/read_pixel');
 
-// contourgl is not part of the dist plotly.js bundle initially
-Plotly.register([
-    require('@lib/contourgl')
-]);
+function drag(gd, path) {
+    var len = path.length;
+    var el = d3.select(gd).select('rect.nsewdrag').node();
+    var opts = {element: el};
 
-describe('Test gl2d lasso/select:', function() {
-    var mockFancy = require('@mocks/gl2d_14.json');
-    delete mockFancy.layout.xaxis.autorange;
-    delete mockFancy.layout.yaxis.autorange;
-    mockFancy.layout.xaxis.range = [-2.951309064136961, 2.0954721318818916];
-    mockFancy.layout.yaxis.range = [-0.9248866483012275, 1.3232607344525835];
+    Lib.clearThrottle();
+    mouseEvent('mousemove', path[0][0], path[0][1], opts);
+    mouseEvent('mousedown', path[0][0], path[0][1], opts);
 
-    var mockFast = Lib.extendDeep({}, mockFancy, {
-        data: [{mode: 'markers'}],
-        layout: {
-            xaxis: {
-                type: 'linear',
-                range: [-3.869222222222223, 73.55522222222223]
-            },
-            yaxis: {
-                type: 'linear',
-                range: [-0.7402222222222222, 17.144222222222222]
-            }
-        }
+    path.slice(1, len).forEach(function(pt) {
+        Lib.clearThrottle();
+        mouseEvent('mousemove', pt[0], pt[1], opts);
     });
 
+    mouseEvent('mouseup', path[len - 1][0], path[len - 1][1], opts);
+}
+
+function select(gd, path) {
+    return new Promise(function(resolve, reject) {
+        gd.once('plotly_selected', resolve);
+        setTimeout(function() { reject('did not trigger *plotly_selected*');}, 200);
+        drag(gd, path);
+    });
+}
+
+describe('Test gl2d lasso/select:', function() {
     var gd;
     var selectPath = [[98, 193], [108, 193]];
     var selectPath2 = [[118, 193], [128, 193]];
     var lassoPath = [[316, 171], [318, 239], [335, 243], [328, 169]];
     var lassoPath2 = [[98, 193], [108, 193], [108, 500], [98, 500], [98, 193]];
 
-    afterEach(function() {
+    afterEach(function(done) {
         Plotly.purge(gd);
         destroyGraphDiv();
+        setTimeout(done, 500);
     });
 
-    function drag(path) {
-        var len = path.length;
-        var el = d3.select(gd).select('rect.nsewdrag').node();
-        var opts = {element: el};
-
-        Lib.clearThrottle();
-        mouseEvent('mousemove', path[0][0], path[0][1], opts);
-        mouseEvent('mousedown', path[0][0], path[0][1], opts);
-
-        path.slice(1, len).forEach(function(pt) {
-            Lib.clearThrottle();
-            mouseEvent('mousemove', pt[0], pt[1], opts);
-        });
-
-        mouseEvent('mouseup', path[len - 1][0], path[len - 1][1], opts);
-    }
-
-    function select(path) {
-        return new Promise(function(resolve, reject) {
-            gd.once('plotly_selected', resolve);
-            setTimeout(function() { reject('did not trigger *plotly_selected*');}, 200);
-            drag(path);
-        });
-    }
-
     function assertEventData(actual, expected) {
         expect(actual.points.length).toBe(expected.points.length);
 
@@ -88,6 +61,27 @@ describe('Test gl2d lasso/select:', function() {
         });
     }
 
+    var mockFancy = require('@mocks/gl2d_14.json');
+    delete mockFancy.layout.xaxis.autorange;
+    delete mockFancy.layout.yaxis.autorange;
+    mockFancy.layout.xaxis.range = [-2.951309064136961, 2.0954721318818916];
+    mockFancy.layout.yaxis.range = [-0.9248866483012275, 1.3232607344525835];
+
+    var mockFast = Lib.extendDeep({}, mockFancy, {
+        data: [{mode: 'markers'}],
+        layout: {
+            xaxis: {
+                type: 'linear',
+                range: [-3.869222222222223, 73.55522222222223]
+            },
+            yaxis: {
+                type: 'linear',
+                range: [-0.7402222222222222, 17.144222222222222]
+            }
+        }
+    });
+
+
     it('@gl should work under fast mode with *select* dragmode', function(done) {
         var _mock = Lib.extendDeep({}, mockFast);
         _mock.layout.dragmode = 'select';
@@ -98,7 +92,7 @@ describe('Test gl2d lasso/select:', function() {
         .then(function() {
             expect(gd._fullLayout._plots.xy._scene.select2d).not.toBe(undefined, 'scatter2d renderer');
 
-            return select(selectPath);
+            return select(gd, selectPath);
         })
         .then(delay(20))
         .then(function(eventData) {
@@ -122,7 +116,7 @@ describe('Test gl2d lasso/select:', function() {
         Plotly.plot(gd, _mock)
         .then(delay(20))
         .then(function() {
-            return select(lassoPath2);
+            return select(gd, lassoPath2);
         })
         .then(delay(20))
         .then(function(eventData) {
@@ -146,7 +140,7 @@ describe('Test gl2d lasso/select:', function() {
         Plotly.plot(gd, _mock)
         .then(delay(20))
         .then(function() {
-            return select(selectPath2);
+            return select(gd, selectPath2);
         })
         .then(delay(20))
         .then(function(eventData) {
@@ -166,7 +160,7 @@ describe('Test gl2d lasso/select:', function() {
         Plotly.plot(gd, _mock)
         .then(delay(20))
         .then(function() {
-            return select(lassoPath);
+            return select(gd, lassoPath);
         })
         .then(function(eventData) {
             assertEventData(eventData, {
@@ -187,7 +181,7 @@ describe('Test gl2d lasso/select:', function() {
 
         Plotly.plot(gd, fig)
         .then(delay(20))
-        .then(function() { return select([[100, 100], [250, 250]]); })
+        .then(function() { return select(gd, [[100, 100], [250, 250]]); })
         .then(function(eventData) {
             assertEventData(eventData, {
                 points: [
@@ -227,7 +221,7 @@ describe('Test gl2d lasso/select:', function() {
                 ]
             });
         })
-        .then(function() { return select([[100, 100], [250, 250]]); })
+        .then(function() { return select(gd, [[100, 100], [250, 250]]); })
         .then(function(eventData) {
             assertEventData(eventData, {
                 points: [{x: 1, y: 2}]
@@ -256,7 +250,7 @@ describe('Test gl2d lasso/select:', function() {
         .then(function() {
             return Plotly.restyle(gd, 'selected.textfont.color', 'red');
         })
-        .then(function() { return select([[100, 100], [250, 250]]); })
+        .then(function() { return select(gd, [[100, 100], [250, 250]]); })
         .then(function() {
             _assertGlTextOpts('after selection - with set selected.textfont.color', {
                 rgba: [
@@ -317,7 +311,7 @@ describe('Test gl2d lasso/select:', function() {
                 ]
             });
         })
-        .then(function() { return select([[100, 10], [250, 100]]); })
+        .then(function() { return select(gd, [[100, 10], [250, 100]]); })
         .then(function(eventData) {
             assertEventData(eventData, {
                 points: [{x: 1, y: 2}]
@@ -341,7 +335,7 @@ describe('Test gl2d lasso/select:', function() {
         .then(function() {
             return Plotly.restyle(gd, 'selected.textfont.color', 'red');
         })
-        .then(function() { return select([[100, 10], [250, 100]]); })
+        .then(function() { return select(gd, [[100, 10], [250, 100]]); })
         .then(function() {
             _assertGlTextOpts('after selection - with set selected.textfont.color', {
                 rgba: [
@@ -362,10 +356,22 @@ describe('Test gl2d lasso/select:', function() {
         .catch(failTest)
         .then(done);
     });
+});
 
-    it('@gl should work after a width/height relayout', function(done) {
+describe('Test displayed selections:', function() {
+    var gd;
+
+    beforeEach(function() {
         gd = createGraphDiv();
+    });
+
+    afterEach(function(done) {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+        setTimeout(done, 500);
+    });
 
+    it('@gl should work after a width/height relayout', function(done) {
         var w = 500;
         var h = 500;
         var w2 = 800;
@@ -396,7 +402,7 @@ describe('Test gl2d lasso/select:', function() {
             expect(readContext()).toBeGreaterThan(1e4, 'base context');
             expect(readFocus()).toBe(0, 'base focus');
         })
-        .then(function() { return select([[pad, pad], [w - pad, h - pad]]); })
+        .then(function() { return select(gd, [[pad, pad], [w - pad, h - pad]]); })
         .then(function() {
             expect(readContext()).toBe(0, 'select context');
             expect(readFocus()).toBeGreaterThan(1e4, 'select focus');
@@ -411,7 +417,7 @@ describe('Test gl2d lasso/select:', function() {
             expect(readContext()).toBeGreaterThan(1e4, 'update context');
             expect(readFocus()).toBe(0, 'update focus');
         })
-        .then(function() { return select([[pad, pad], [w2 - pad, h2 - pad]]); })
+        .then(function() { return select(gd, [[pad, pad], [w2 - pad, h2 - pad]]); })
         .then(function() {
             // make sure full w2/h2 context canvas is cleared!
             // from https://github.com/plotly/plotly.js/issues/2731<Paste>
@@ -422,6 +428,92 @@ describe('Test gl2d lasso/select:', function() {
         .then(done);
     });
 
+    it('@gl should display selection of big number of regular points', function(done) {
+        // generate large number of points
+        var x = [];
+        var y = [];
+        var n = 2e2;
+        var N = n * n;
+        for(var i = 0; i < N; i++) {
+            x.push((i % n) / n);
+            y.push(i / N);
+        }
+
+        var mock = {
+            data: [{
+                x: x, y: y, type: 'scattergl', mode: 'markers'
+            }],
+            layout: {
+                dragmode: 'select'
+            }
+        };
+
+        Plotly.plot(gd, mock)
+        .then(select(gd, [[160, 100], [180, 100]]))
+        .then(function() {
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 168, 100)[3]).toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 158, 100)[3]).not.toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-focus'), 168, 100)[3]).not.toBe(0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('@gl should display selection of big number of miscellaneous points', function(done) {
+        var colorList = [
+            '#006385', '#F06E75', '#90ed7d', '#f7a35c', '#8085e9',
+            '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1',
+            '#5DA5DA', '#F06E75', '#F15854', '#B2912F', '#B276B2',
+            '#DECF3F', '#FAA43A', '#4D4D4D', '#F17CB0', '#60BD68'
+        ];
+
+        // generate large number of points
+        var x = [];
+        var y = [];
+        var n = 2e2;
+        var N = n * n;
+        var color = [];
+        var symbol = [];
+        var size = [];
+        for(var i = 0; i < N; i++) {
+            x.push((i % n) / n);
+            y.push(i / N);
+            color.push(colorList[i % colorList.length]);
+            symbol.push('x');
+            size.push(6);
+        }
+
+        var mock = {
+            data: [{
+                x: x, y: y, type: 'scattergl', mode: 'markers',
+                marker: {symbol: symbol, size: size, color: color}
+            }],
+            layout: {
+                dragmode: 'select'
+            }
+        };
+
+        Plotly.plot(gd, mock)
+        .then(select(gd, [[160, 100], [180, 100]]))
+        .then(function() {
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 168, 100)[3]).toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-context'), 158, 100)[3]).not.toBe(0);
+            expect(readPixel(gd.querySelector('.gl-canvas-focus'), 168, 100)[3]).not.toBe(0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+});
+
+describe('Test selections during funky scenarios', function() {
+    var gd;
+
+    afterEach(function(done) {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+        setTimeout(done, 500);
+    });
+
     function grabScene() {
         return gd.calcdata[0][0].t._scene;
     }
@@ -514,7 +606,7 @@ describe('Test gl2d lasso/select:', function() {
                     drawArgs: []
                 });
             })
-            .then(function() { return select([[20, 20], [480, 250]]); })
+            .then(function() { return select(gd, [[20, 20], [480, 250]]); })
             .then(function() {
                 var scene = grabScene();
                 _assert('after select', {
@@ -556,7 +648,7 @@ describe('Test gl2d lasso/select:', function() {
                     drawArgs: []
                 });
             })
-            .then(function() { return drag([[200, 200], [250, 250]]); })
+            .then(function() { return drag(gd, [[200, 200], [250, 250]]); })
             .then(function() {
                 var scene = grabScene();
                 _assert('after pan', {
@@ -652,7 +744,7 @@ describe('Test gl2d lasso/select:', function() {
                     drawArgs: []
                 });
             })
-            .then(function() { return select([[20, 20], [480, 250]]); })
+            .then(function() { return select(gd, [[20, 20], [480, 250]]); })
             .then(function() { return doubleClick(250, 250); })
             .then(function() { return Plotly.relayout(gd, 'dragmode', 'pan'); })
             .then(function() { return Plotly.relayout(gd, 'dragmode', 'select'); })
@@ -738,7 +830,7 @@ describe('Test gl2d lasso/select:', function() {
                 ['select2d', [[[], []]]]
             ]);
         })
-        .then(function() { return select([[20, 20], [480, 250]]); })
+        .then(function() { return select(gd, [[20, 20], [480, 250]]); })
         .then(function() {
             _assert('on selection', [
                 ['scatter2d', [[[0, 2], []]]],
@@ -791,7 +883,7 @@ describe('Test gl2d lasso/select:', function() {
             spyOn(scene.scatter2d, 'draw');
             spyOn(scene2.scatter2d, 'draw');
         })
-        .then(function() { return select([[20, 20], [380, 250]]); })
+        .then(function() { return select(gd, [[20, 20], [380, 250]]); })
         .then(function() {
             expect(scene.scatter2d.draw).toHaveBeenCalledTimes(1);
             expect(scene2.scatter2d.draw).toHaveBeenCalledTimes(1);

test/jasmine/tests/gl3daxes_test.js

@@ -108,7 +108,7 @@ describe('Test scatterpolargl hover:', function() {
         name: 'Trial 3'
     }]
     .forEach(function(specs) {
-        it('should generate correct hover labels ' + specs.desc, function(done) {
+        it('@gl should generate correct hover labels ' + specs.desc, function(done) {
             run(specs).catch(failTest).then(done);
         });
     });

test/jasmine/tests/gl3dlayout_test.js

@@ -264,7 +264,7 @@ describe('Test volume', function() {
             destroyGraphDiv();
         });
 
-        it('should clear *cauto* when restyle *cmin* and/or *cmax*', function(done) {
+        it('@gl should clear *cauto* when restyle *cmin* and/or *cmax*', function(done) {
             function _assert(user, full) {
                 var trace = gd.data[0];
                 var fullTrace = gd._fullData[0];