diff --git a/devtools/image_viewer/viewer.js b/devtools/image_viewer/viewer.js index 7a287b11379..c993ef93229 100644 --- a/devtools/image_viewer/viewer.js +++ b/devtools/image_viewer/viewer.js @@ -1,7 +1,7 @@ var fs = require('fs'); var path = require('path'); -var d3 = require('@plotly/d3'); +var d3Json = require('../../test/strict_d3').json; var $plotlist = document.getElementById('plot-list'); var $toggles = document.getElementById('plot-toggles'); @@ -55,7 +55,7 @@ function createButton(imageName) { button.style.cursor = 'pointer'; button.addEventListener('click', function() { - d3.json(dirMocks + imageName + '.json', function(err, mock) { + d3Json(dirMocks + imageName + '.json', function(err, mock) { $toggles.style.display = 'block'; $images.style.display = 'block'; diff --git a/devtools/test_dashboard/devtools.js b/devtools/test_dashboard/devtools.js index a8228ec08c5..961cf01dd7a 100644 --- a/devtools/test_dashboard/devtools.js +++ b/devtools/test_dashboard/devtools.js @@ -6,7 +6,8 @@ var Fuse = require('fuse.js/dist/fuse.common.js'); var mocks = require('../../build/test_dashboard_mocks.json'); var credentials = require('../../build/credentials.json'); var Lib = require('@src/lib'); -var d3 = Plotly.d3; +var d3 = require('../../test/strict_d3'); +var d3Json = d3.json; require('./perf'); @@ -59,7 +60,7 @@ var Tabs = { plotMock: function(mockName, id) { var mockURL = '/test/image/mocks/' + mockName + '.json'; - d3.json(mockURL, function(err, fig) { + d3Json(mockURL, function(err, fig) { Plotly.newPlot(Tabs.fresh(id), fig); console.warn('Plotting:', mockURL); @@ -69,7 +70,7 @@ var Tabs = { getMock: function(mockName, callback) { var mockURL = '/test/image/mocks/' + mockName + '.json'; - d3.json(mockURL, function(err, fig) { + d3Json(mockURL, function(err, fig) { if(typeof callback !== 'function') { window.mock = fig; } else { diff --git a/src/core.js b/src/core.js index dccc6f73258..c5c8d8624b0 100644 --- a/src/core.js +++ b/src/core.js @@ -79,6 +79,3 @@ exports.Fx = require('./components/fx'); exports.Snapshot = require('./snapshot'); exports.PlotSchema = require('./plot_api/plot_schema'); exports.Queue = require('./lib/queue'); - -// export d3 used in the bundle -exports.d3 = require('@plotly/d3'); diff --git a/tasks/util/constants.js b/tasks/util/constants.js index ea9cc95213c..9180c8406f5 100644 --- a/tasks/util/constants.js +++ b/tasks/util/constants.js @@ -5,6 +5,7 @@ var pathToRoot = path.join(__dirname, '../../'); var pathToSrc = path.join(pathToRoot, 'src/'); var pathToLib = path.join(pathToRoot, 'lib/'); var pathToImageTest = path.join(pathToRoot, 'test/image'); +var pathToStrictD3Module = path.join(pathToRoot, 'test/strict-d3.js'); var pathToDist = path.join(pathToRoot, 'dist/'); var pathToBuild = path.join(pathToRoot, 'build/'); @@ -77,6 +78,8 @@ module.exports = { pathToTestImagesDiff: path.join(pathToBuild, 'test_images_diff/'), pathToTestImagesDiffList: path.join(pathToBuild, 'list_of_incorrect_images.txt'), + pathToStrictD3Module: pathToStrictD3Module, + pathToJasmineTests: path.join(pathToRoot, 'test/jasmine/tests'), pathToJasmineBundleTests: path.join(pathToRoot, 'test/jasmine/bundle_tests'), pathToRequireJS: path.join(pathToRoot, 'node_modules', 'requirejs', 'require.js'), diff --git a/tasks/util/strict_d3.js b/tasks/util/strict_d3.js index 75159d9f34a..b06e15d5ccf 100644 --- a/tasks/util/strict_d3.js +++ b/tasks/util/strict_d3.js @@ -1,11 +1,6 @@ -var path = require('path'); var transformTools = require('browserify-transform-tools'); -var constants = require('./constants'); +var pathToStrictD3Module = require('./constants').pathToStrictD3Module; -var pathToStrictD3Module = path.join( - constants.pathToImageTest, - 'strict-d3.js' -); /** * Transform `require('@plotly/d3')` expressions to `require(/path/to/strict-d3.js)` */ diff --git a/tasks/util/watchified_bundle.js b/tasks/util/watchified_bundle.js index 05fb07c9526..95253e58747 100644 --- a/tasks/util/watchified_bundle.js +++ b/tasks/util/watchified_bundle.js @@ -6,7 +6,6 @@ var prettySize = require('prettysize'); var constants = require('./constants'); var common = require('./common'); -var strictD3 = require('./strict_d3'); /** * Make a plotly.js browserify bundle function watched by watchify. @@ -22,7 +21,7 @@ module.exports = function makeWatchifiedBundle(onFirstBundleCallback) { var b = browserify(constants.pathToPlotlyIndex, { debug: true, standalone: 'Plotly', - transform: [strictD3], + transform: [], cache: {}, packageCache: {}, plugin: [watchify] diff --git a/test/jasmine/assets/check_component.js b/test/jasmine/assets/check_component.js index 1a2b6bc9a9b..24d826af171 100644 --- a/test/jasmine/assets/check_component.js +++ b/test/jasmine/assets/check_component.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -44,7 +44,7 @@ module.exports = function checkComponent(Plotly) { afterEach(destroyGraphDiv); it('should graph scatter traces with calendar attributes', function() { - var nodes = d3.selectAll('g.trace.scatter'); + var nodes = d3SelectAll('g.trace.scatter'); expect(nodes.size()).toEqual(1); @@ -55,7 +55,7 @@ module.exports = function checkComponent(Plotly) { }); it('should graph bar traces with calendar attributes', function() { - var nodes = d3.selectAll('g.trace.bars'); + var nodes = d3SelectAll('g.trace.bars'); expect(nodes.size()).toEqual(1); expect(gd._fullData[1].xcalendar).toBe('gregorian'); diff --git a/test/jasmine/assets/check_texttemplate.js b/test/jasmine/assets/check_texttemplate.js index 1fbe202b9a8..5ae380fc60b 100644 --- a/test/jasmine/assets/check_texttemplate.js +++ b/test/jasmine/assets/check_texttemplate.js @@ -4,6 +4,8 @@ var Plotly = require('@lib/index'); var Registry = require('@src/registry'); var Lib = require('@src/lib'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var failTest = require('../assets/fail_test'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -127,10 +129,10 @@ module.exports = function checkTextTemplate(mock, selector, tests, skipExtra) { dataCopy[0].texttemplate = test[0]; Plotly.newPlot(gd, dataCopy, Lib.extendDeep({}, layout)) .then(function() { - var pts = Plotly.d3.selectAll(selector); + var pts = d3SelectAll(selector); expect(pts.size()).toBe(test[1].length); pts.each(function() { - expect(test[1]).toContain(Plotly.d3.select(this).text()); + expect(test[1]).toContain(d3Select(this).text()); }); }) .catch(failTest) diff --git a/test/jasmine/assets/check_transitions.js b/test/jasmine/assets/check_transitions.js index 235e6aec49d..4eb6ed53f56 100644 --- a/test/jasmine/assets/check_transitions.js +++ b/test/jasmine/assets/check_transitions.js @@ -2,7 +2,9 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Timer = require('../../strict-d3').timer; +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var delay = require('./delay.js'); var reNumbers = /([\d\.]+)/gm; @@ -19,7 +21,7 @@ function clockTick(currentNow, milliseconds) { Date.now = function() { return currentNow + milliseconds; }; - d3.timer.flush(); + d3Timer.flush(); } // Using the methodology from http://eng.wealthfront.com/2017/10/26/testing-d3-transitions/ @@ -87,11 +89,11 @@ module.exports = function checkTransition(gd, mock, animateOpts, transitionOpts, function assert(test) { var msg = 'at ' + test[0] + 'ms, selection ' + test[1] + ' has ' + test[3]; var cur = []; - d3.selectAll(test[1]).each(function(d, i) { + d3SelectAll(test[1]).each(function(d, i) { if(test[2] === 'style') cur[i] = this.style[test[3]]; - else if(test[2] === 'attr') cur[i] = d3.select(this).attr(test[3]); + else if(test[2] === 'attr') cur[i] = d3Select(this).attr(test[3]); else if(test[2] === 'datum') { - cur[i] = d3.select(this).datum()[test[3]]; + cur[i] = d3Select(this).datum()[test[3]]; } }); switch(test[3]) { diff --git a/test/jasmine/assets/custom_assertions.js b/test/jasmine/assets/custom_assertions.js index 2aa67651956..93f41d7c058 100644 --- a/test/jasmine/assets/custom_assertions.js +++ b/test/jasmine/assets/custom_assertions.js @@ -1,16 +1,17 @@ 'use strict'; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var negateIf = require('./negate_if'); exports.assertDims = function(dims) { - var traces = d3.selectAll('.trace'); + var traces = d3SelectAll('.trace'); expect(traces.size()) .toEqual(dims.length, 'to have correct number of traces'); traces.each(function(_, i) { - var trace = d3.select(this); + var trace = d3Select(this); var points = trace.selectAll('.point'); expect(points.size()) @@ -23,15 +24,15 @@ exports.assertStyle = function(dims, color, opacity) { return a + b; }); - var traces = d3.selectAll('.trace'); + var traces = d3SelectAll('.trace'); expect(traces.size()) .toEqual(dims.length, 'to have correct number of traces'); - expect(d3.selectAll('.point').size()) + expect(d3SelectAll('.point').size()) .toEqual(N, 'to have correct total number of points'); traces.each(function(_, i) { - var trace = d3.select(this); + var trace = d3Select(this); var points = trace.selectAll('.point'); expect(points.size()) @@ -72,7 +73,7 @@ function getLabelContent(label) { } if(lines.size()) { - lines.each(function() { fill(d3.select(this)); }); + lines.each(function() { fill(d3Select(this)); }); } else { fill(label); } @@ -88,7 +89,7 @@ function assertLabelContent(label, expectation, msg) { } function count(selector) { - return d3.selectAll(selector).size(); + return d3SelectAll(selector).size(); } /** @@ -115,7 +116,7 @@ exports.assertHoverLabelContent = function(expectation, msg) { var reRotate = /(\brotate\(.*?\);?)/; if(ptCnt === 1) { - var g = d3.select(ptSelector); + var g = d3Select(ptSelector); var numsSel = g.select('text.nums'); var nameSel = g.select('text.name'); @@ -142,8 +143,8 @@ exports.assertHoverLabelContent = function(expectation, msg) { order: (expectation.hOrder || expectation.vOrder || []).indexOf(i) }; }); - d3.selectAll(ptSelector).each(function(_, i) { - var g = d3.select(this); + d3SelectAll(ptSelector).each(function(_, i) { + var g = d3Select(this); var numsSel = g.select('text.nums'); var nameSel = g.select('text.name'); @@ -201,7 +202,7 @@ exports.assertHoverLabelContent = function(expectation, msg) { if(axCnt) { assertLabelContent( - d3.select(axSelector + '> text'), + d3Select(axSelector + '> text'), expectation.axis, axMsg ); @@ -222,7 +223,7 @@ exports.assertClip = function(sel, isClipped, size, msg) { expect(sel.size()).toBe(size, msg + ' clip path (selection size)'); sel.each(function(d, i) { - var clipPath = d3.select(this).attr('clip-path'); + var clipPath = d3Select(this).attr('clip-path'); if(isClipped) { expect(String(clipPath).substr(0, 5)) @@ -239,16 +240,16 @@ exports.assertNodeDisplay = function(sel, expectation, msg) { .toBe(expectation.length, msg + ' display (selection size)'); sel.each(function(d, i) { - expect(d3.select(this).attr('display')) + expect(d3Select(this).attr('display')) .toBe(expectation[i], msg + ' display ' + '(item ' + i + ')'); }); }; exports.checkTicks = function(axLetter, vals, msg) { - var selection = d3.selectAll('.' + axLetter + 'tick text'); + var selection = d3SelectAll('.' + axLetter + 'tick text'); expect(selection.size()).toBe(vals.length); selection.each(function(d, i) { - expect(d3.select(this).text()).toBe(vals[i], msg + ': ' + i); + expect(d3Select(this).text()).toBe(vals[i], msg + ': ' + i); }); }; @@ -294,7 +295,7 @@ exports.assertPlotSize = function(opts, msg) { var widthLessThan = opts.widthLessThan; var heightLessThan = opts.heightLessThan; - var plotBB = d3.select('.plotclip > rect').node().getBoundingClientRect(); + var plotBB = d3Select('.plotclip > rect').node().getBoundingClientRect(); var actualWidth = plotBB.width; var actualHeight = plotBB.height; diff --git a/test/jasmine/assets/domain_ref/domain_ref_base.json b/test/jasmine/assets/domain_ref_base.json similarity index 100% rename from test/jasmine/assets/domain_ref/domain_ref_base.json rename to test/jasmine/assets/domain_ref_base.json diff --git a/test/jasmine/assets/domain_ref/components.js b/test/jasmine/assets/domain_ref_components.js similarity index 97% rename from test/jasmine/assets/domain_ref/components.js rename to test/jasmine/assets/domain_ref_components.js index f8b3e9f6371..31a030b42b2 100644 --- a/test/jasmine/assets/domain_ref/components.js +++ b/test/jasmine/assets/domain_ref_components.js @@ -10,18 +10,19 @@ // promise is followed by .then(done, done.fail) 'use strict'; -var Plotly = require('../../../../lib/index'); -var d3 = require('@plotly/d3'); -var pixelCalc = require('../../assets/pixel_calc'); -var getSVGElemScreenBBox = require('../../assets/get_svg_elem_screen_bbox'); -// var SVGTools = require('../../assets/svg_tools'); -var Lib = require('../../../../src/lib'); -var Axes = require('../../../../src/plots/cartesian/axes'); -var axisIds = require('../../../../src/plots/cartesian/axis_ids'); +var Plotly = require('@lib/index'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; +var pixelCalc = require('../assets/pixel_calc'); +var getSVGElemScreenBBox = require('../assets/get_svg_elem_screen_bbox'); +// var SVGTools = require('../assets/svg_tools'); +var Lib = require('@src/lib'); +var Axes = require('@src/plots/cartesian/axes'); +var axisIds = require('@src/plots/cartesian/axis_ids'); var testImage = 'https://images.plot.ly/language-icons/api-home/js-logo.png'; var iterable = require('extra-iterable'); -var testMock = require('./domain_ref_base.json'); +var testMock = require('../assets/domain_ref_base.json'); // NOTE: this tolerance is in pixels var EQUALITY_TOLERANCE = 1e-2; @@ -116,7 +117,7 @@ var xAnchors = ['left', 'center', 'right']; var yAnchors = ['top', 'middle', 'bottom']; // this color chosen so it can easily be found with d3 // NOTE: for images color cannot be set but it will be the only image in the -// plot so you can use d3.select('g image').node() +// plot so you can use d3Select('g image').node() var aroColor = 'rgb(50, 100, 150)'; // acts on an Object representing a aro which could be a line or a rect @@ -461,7 +462,7 @@ function findAROByColor(color, id, type, colorAttribute) { type = (type === undefined) ? 'path' : type; colorAttribute = (colorAttribute === undefined) ? 'stroke' : colorAttribute; var selector = id + type; - var ret = d3.selectAll(selector).filter(function() { + var ret = d3SelectAll(selector).filter(function() { return this.style[colorAttribute] === color; }).node(); return ret; @@ -470,7 +471,7 @@ function findAROByColor(color, id, type, colorAttribute) { function findImage(id) { id = (id === undefined) ? '' : id + ' '; var selector = id + 'g image'; - var ret = d3.select(selector).node(); + var ret = d3Select(selector).node(); return ret; } diff --git a/test/jasmine/assets/domain_ref/domain_refs_editable.json b/test/jasmine/assets/domain_refs_editable.json similarity index 100% rename from test/jasmine/assets/domain_ref/domain_refs_editable.json rename to test/jasmine/assets/domain_refs_editable.json diff --git a/test/jasmine/assets/get_bbox.js b/test/jasmine/assets/get_bbox.js index 0f7683f7610..e3ed22fe5c0 100644 --- a/test/jasmine/assets/get_bbox.js +++ b/test/jasmine/assets/get_bbox.js @@ -1,6 +1,6 @@ 'use strict'; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var ATTRS = ['x', 'y', 'width', 'height']; @@ -9,7 +9,7 @@ var ATTRS = ['x', 'y', 'width', 'height']; module.exports = function getBBox(element) { var elementBBox = element.getBBox(); - var s = d3.select(element); + var s = d3Select(element); var clipPathAttr = s.attr('clip-path'); if(!clipPathAttr) return elementBBox; @@ -22,7 +22,7 @@ module.exports = function getBBox(element) { }; function getClipBBox(clipPathId) { - var clipPath = d3.select('#' + clipPathId); + var clipPath = d3Select('#' + clipPathId); var clipBBox; try { @@ -30,7 +30,7 @@ function getClipBBox(clipPathId) { clipBBox = clipPath.node().getBBox(); } catch(e) { // use DOM attributes as fallback - var path = d3.select(clipPath.node().firstChild); + var path = d3Select(clipPath.node().firstChild); clipBBox = {}; diff --git a/test/jasmine/assets/modebar_button.js b/test/jasmine/assets/modebar_button.js index 7e94cb1d1e8..3a0f218591a 100644 --- a/test/jasmine/assets/modebar_button.js +++ b/test/jasmine/assets/modebar_button.js @@ -1,6 +1,6 @@ 'use strict'; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var modeBarButtons = require('@src/components/modebar/buttons'); module.exports = function selectButton(modeBar, name) { @@ -12,7 +12,7 @@ module.exports = function selectButton(modeBar, name) { title = title(modeBar.graphInfo); } - var node = button.node = d3.select(modeBar.element) + var node = button.node = d3Select(modeBar.element) .select('[data-title="' + title + '"]') .node(); @@ -22,7 +22,7 @@ module.exports = function selectButton(modeBar, name) { }; button.isActive = function() { - return d3.select(node).classed('active'); + return d3Select(node).classed('active'); }; return button; diff --git a/test/jasmine/bundle_tests/bar_test.js b/test/jasmine/bundle_tests/bar_test.js index c893a1c9c30..03ab0f667d4 100644 --- a/test/jasmine/bundle_tests/bar_test.js +++ b/test/jasmine/bundle_tests/bar_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/core'); var PlotlyBar = require('@lib/bar'); @@ -21,13 +21,13 @@ describe('Bundle with bar', function() { afterEach(destroyGraphDiv); it('should graph scatter traces', function() { - var nodes = d3.selectAll('g.trace.scatter'); + var nodes = d3SelectAll('g.trace.scatter'); expect(nodes.size()).toEqual(1); }); it('should graph bar traces', function() { - var nodes = d3.selectAll('g.trace.bars'); + var nodes = d3SelectAll('g.trace.bars'); expect(nodes.size()).toEqual(1); }); diff --git a/test/jasmine/bundle_tests/choropleth_test.js b/test/jasmine/bundle_tests/choropleth_test.js index 1efc4e206f7..221b742c77b 100644 --- a/test/jasmine/bundle_tests/choropleth_test.js +++ b/test/jasmine/bundle_tests/choropleth_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/core'); var PlotlyChoropleth = require('@lib/choropleth'); @@ -28,7 +28,7 @@ describe('Bundle with choropleth', function() { it('should graph choropleth traces', function(done) { Plotly.newPlot(gd, mock.data, mock.layout) .then(function() { - var nodes = d3.selectAll('g.trace.choropleth'); + var nodes = d3SelectAll('g.trace.choropleth'); expect(nodes.size()).toEqual(4); }) diff --git a/test/jasmine/bundle_tests/contour_test.js b/test/jasmine/bundle_tests/contour_test.js index 3d9ba77f081..96a225b5a59 100644 --- a/test/jasmine/bundle_tests/contour_test.js +++ b/test/jasmine/bundle_tests/contour_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/core'); var PlotlyContour = require('@lib/contour'); @@ -21,13 +21,13 @@ describe('Bundle with contour', function() { afterEach(destroyGraphDiv); it('should graph scatter traces', function() { - var nodes = d3.selectAll('g.trace.scatter'); + var nodes = d3SelectAll('g.trace.scatter'); expect(nodes.size()).toEqual(1); }); it('should graph contour traces', function() { - var nodes = d3.selectAll('g.contour'); + var nodes = d3SelectAll('g.contour'); expect(nodes.size()).toEqual(1); }); diff --git a/test/jasmine/bundle_tests/core_test.js b/test/jasmine/bundle_tests/core_test.js index 65610b9c5a5..9140dbbe075 100644 --- a/test/jasmine/bundle_tests/core_test.js +++ b/test/jasmine/bundle_tests/core_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/core'); @@ -20,13 +20,13 @@ describe('Bundle with core only', function() { afterEach(destroyGraphDiv); it('should graph scatter traces', function() { - var nodes = d3.selectAll('g.trace.scatter'); + var nodes = d3SelectAll('g.trace.scatter'); expect(nodes.size()).toEqual(mock.data.length); }); it('should not graph bar traces', function() { - var nodes = d3.selectAll('g.trace.bars'); + var nodes = d3SelectAll('g.trace.bars'); expect(nodes.size()).toEqual(0); }); diff --git a/test/jasmine/bundle_tests/dynamic_import_test.js b/test/jasmine/bundle_tests/dynamic_import_test.js index 031b02b9cbd..5dc42374ded 100644 --- a/test/jasmine/bundle_tests/dynamic_import_test.js +++ b/test/jasmine/bundle_tests/dynamic_import_test.js @@ -1,6 +1,6 @@ var Plotly = require('@lib/core'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -30,7 +30,7 @@ describe('Dynamic @lib/ module imports', function() { }]); }) .then(function() { - var polarLayer = d3.select('.polarlayer'); + var polarLayer = d3Select('.polarlayer'); expect(polarLayer.size()).toBe(1, 'one polar layer'); expect(polarLayer.selectAll('.trace').size()).toBe(1, 'one scatterpolar trace'); }) diff --git a/test/jasmine/bundle_tests/finance_test.js b/test/jasmine/bundle_tests/finance_test.js index f78b76df327..a2e9e8de15a 100644 --- a/test/jasmine/bundle_tests/finance_test.js +++ b/test/jasmine/bundle_tests/finance_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/core'); var ohlc = require('@lib/ohlc'); var candlestick = require('@lib/candlestick'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -29,7 +29,7 @@ describe('Bundle with finance trace type', function() { it('should graph ohlc and candlestick traces', function(done) { Plotly.newPlot(createGraphDiv(), mock.data, mock.layout).then(function() { - var gSubplot = d3.select('g.cartesianlayer'); + var gSubplot = d3Select('g.cartesianlayer'); expect(gSubplot.selectAll('g.trace.ohlc').size()).toEqual(1); expect(gSubplot.selectAll('g.trace.boxes').size()).toEqual(1); diff --git a/test/jasmine/bundle_tests/histogram2dcontour_test.js b/test/jasmine/bundle_tests/histogram2dcontour_test.js index acd1c2fb322..d65868e050d 100644 --- a/test/jasmine/bundle_tests/histogram2dcontour_test.js +++ b/test/jasmine/bundle_tests/histogram2dcontour_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/core'); var PlotlyHistogram2dContour = require('@lib/histogram2dcontour'); @@ -22,19 +22,19 @@ describe('Bundle with histogram2dcontour and histogram', function() { afterEach(destroyGraphDiv); it('should graph scatter traces', function() { - var nodes = d3.selectAll('g.trace.scatter'); + var nodes = d3SelectAll('g.trace.scatter'); expect(nodes.size()).toEqual(1); }); it('should graph contour traces', function() { - var nodes = d3.selectAll('g.contour'); + var nodes = d3SelectAll('g.contour'); expect(nodes.size()).toEqual(1); }); it('should graph histogram traces', function() { - var nodes = d3.selectAll('g.bars'); + var nodes = d3SelectAll('g.bars'); expect(nodes.size()).toEqual(2); }); diff --git a/test/jasmine/bundle_tests/mathjax_test.js b/test/jasmine/bundle_tests/mathjax_test.js index e082a37e6b3..5aaa28770bb 100644 --- a/test/jasmine/bundle_tests/mathjax_test.js +++ b/test/jasmine/bundle_tests/mathjax_test.js @@ -1,5 +1,5 @@ var Plotly = require('@lib/index'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -38,7 +38,7 @@ describe('Test MathJax:', function() { afterEach(destroyGraphDiv); function assertNoIntersect(msg) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var xTitle = gd3.select('.g-xtitle'); var xTicks = gd3.selectAll('.xtick > text'); diff --git a/test/jasmine/tests/animate_test.js b/test/jasmine/tests/animate_test.js index 1b2a0e08ec0..ca45a692a2c 100644 --- a/test/jasmine/tests/animate_test.js +++ b/test/jasmine/tests/animate_test.js @@ -3,7 +3,8 @@ var Lib = require('@src/lib'); var Registry = require('@src/registry'); var Plots = Plotly.Plots; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var failTest = require('../assets/fail_test'); @@ -915,7 +916,7 @@ describe('animating scatter traces', function() { y: [4, 5, 6], opacity: 1 }]).then(function() { - trace = Plotly.d3.selectAll('g.scatter.trace'); + trace = d3SelectAll('g.scatter.trace'); // d3 style getter is disallowed by strict-d3 expect(trace.node().style.opacity).toEqual('1'); @@ -952,7 +953,7 @@ describe('animating scatter traces', function() { it('should animate axis ranges using the less number of steps', function(done) { // sanity-check that scatter points and bars are still there function _assertNodeCnt() { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.select('.scatterlayer').selectAll('.point').size()) .toBe(3, '# of pts on graph'); expect(gd3.select('.barlayer').selectAll('.point').size()) @@ -961,7 +962,7 @@ describe('animating scatter traces', function() { // assert what Cartesian.transitionAxes does function getSubplotTranslate() { - var sp = d3.select(gd).select('.subplot.xy > .plot'); + var sp = d3Select(gd).select('.subplot.xy > .plot'); return sp.attr('transform') .split('translate(')[1].split(')')[0] .split(',') diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js index 25b8893f094..8860f31ef84 100644 --- a/test/jasmine/tests/annotations_test.js +++ b/test/jasmine/tests/annotations_test.js @@ -9,7 +9,8 @@ var Axes = require('@src/plots/cartesian/axes'); var HOVERMINTIME = require('@src/components/fx').constants.HOVERMINTIME; var DBLCLICKDELAY = require('@src/plot_api/plot_config').dfltConfig.doubleClickDelay; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -206,12 +207,12 @@ describe('annotations relayout', function() { (gd.layout.annotations || []).forEach(function(ann, i) { expect(JSON.stringify(ann)).not.toBe(JSON.stringify({}), i); }); - return d3.selectAll('g.annotation').size(); + return d3SelectAll('g.annotation').size(); } function assertText(index, expected) { var query = '.annotation[data-index="' + index + '"]'; - var actual = d3.select(query).select('text').text(); + var actual = d3Select(query).select('text').text(); expect(actual).toEqual(expected); } @@ -649,7 +650,7 @@ describe('annotations autorange', function() { // results either way, showing that the annotation is or isn't drawn. for(var i = 0; i < gd.layout.annotations.length; i++) { var selectorBase = '.annotation[data-index="' + i + '"]'; - var annotationGraphicalItems = d3.selectAll( + var annotationGraphicalItems = d3SelectAll( selectorBase + ' text,' + selectorBase + ' rect,' + selectorBase + ' path'); @@ -1299,27 +1300,27 @@ describe('annotation effects', function() { {x: 20, y: 20, text: 'bye', height: 40, showarrow: false}, {x: 80, y: 80, text: 'why?', ax: 0, ay: -20} ]).then(function() { - expect(d3.select(gd).selectAll('.annclip').size()).toBe(2); + expect(d3Select(gd).selectAll('.annclip').size()).toBe(2); return Plotly.relayout(gd, {'annotations[0].visible': false}); }) .then(function() { - expect(d3.select(gd).selectAll('.annclip').size()).toBe(1); + expect(d3Select(gd).selectAll('.annclip').size()).toBe(1); return Plotly.relayout(gd, {'annotations[2].width': 20}); }) .then(function() { - expect(d3.select(gd).selectAll('.annclip').size()).toBe(2); + expect(d3Select(gd).selectAll('.annclip').size()).toBe(2); return Plotly.relayout(gd, {'annotations[1].height': null}); }) .then(function() { - expect(d3.select(gd).selectAll('.annclip').size()).toBe(1); + expect(d3Select(gd).selectAll('.annclip').size()).toBe(1); return Plotly.relayout(gd, {'annotations[2]': null}); }) .then(function() { - expect(d3.select(gd).selectAll('.annclip').size()).toBe(0); + expect(d3Select(gd).selectAll('.annclip').size()).toBe(0); }) .then(done, done.fail); }); @@ -1365,7 +1366,7 @@ describe('annotation effects', function() { mouseEvent('mouseover', pos[0], pos[1]); setTimeout(function() { - var hoverText = d3.selectAll('g.hovertext'); + var hoverText = d3SelectAll('g.hovertext'); expect(hoverText.size()).toEqual(text ? 1 : 0, msg); if(text && hoverText.size()) { @@ -1528,7 +1529,7 @@ describe('annotation effects', function() { click(pos[0], pos[1]); setTimeout(function() { - var input = d3.select('.plugin-editable.editable'); + var input = d3Select('.plugin-editable.editable'); if(input.node()) { input.node().dispatchEvent(new KeyboardEvent('blur')); } @@ -1574,10 +1575,10 @@ describe('annotation effects', function() { ]) .then(function() { function checkBoxLink(index, isLink) { - var boxLink = d3.selectAll('.annotation[data-index="' + index + '"] g>a'); + var boxLink = d3SelectAll('.annotation[data-index="' + index + '"] g>a'); expect(boxLink.size()).toBe(isLink ? 1 : 0); - var textLink = d3.selectAll('.annotation[data-index="' + index + '"] text a'); + var textLink = d3SelectAll('.annotation[data-index="' + index + '"] text a'); expect(textLink.size()).toBe(1); checkLink(textLink); @@ -1663,16 +1664,16 @@ describe('animating annotations', function() { it('updates annotations when no axis update present', function(done) { function assertAnnotations(expected) { - var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text'); + var texts = d3Select(gd).selectAll('.annotation .annotation-text'); expect(expected.length).toEqual(texts.size()); texts.each(function(d, i) { - expect(Plotly.d3.select(this).text()).toEqual(expected[i]); + expect(d3Select(this).text()).toEqual(expected[i]); }); } function assertShapes(expected) { - var paths = Plotly.d3.select(gd).selectAll('.shapelayer path'); + var paths = d3Select(gd).selectAll('.shapelayer path'); expect(expected.length).toEqual(paths.size()); @@ -1682,12 +1683,12 @@ describe('animating annotations', function() { } function assertImages(expected) { - var imgs = Plotly.d3.select(gd).selectAll('.imagelayer image'); + var imgs = d3Select(gd).selectAll('.imagelayer image'); expect(expected.length).toEqual(imgs.size()); imgs.each(function(d, i) { - expect(Plotly.d3.select(this).attr('href')).toEqual(expected[i]); + expect(d3Select(this).attr('href')).toEqual(expected[i]); }); } diff --git a/test/jasmine/tests/axes_test.js b/test/jasmine/tests/axes_test.js index 8199b50cbbf..88113fa191b 100644 --- a/test/jasmine/tests/axes_test.js +++ b/test/jasmine/tests/axes_test.js @@ -1,5 +1,6 @@ var Plotly = require('@lib/index'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var utcFormat = require('d3-time-format').utcFormat; var Plots = require('@src/plots/plots'); @@ -4237,8 +4238,8 @@ describe('Test axes', function() { function assertZeroLines(expectedIDs) { var sortedIDs = expectedIDs.slice().sort(); var zlIDs = []; - d3.select(gd).selectAll('.zl').each(function() { - var cls = d3.select(this).attr('class'); + d3Select(gd).selectAll('.zl').each(function() { + var cls = d3Select(this).attr('class'); var clsMatch = cls.match(/[xy]\d*(?=zl)/g)[0]; zlIDs.push(clsMatch); }); @@ -4389,7 +4390,7 @@ describe('Test axes', function() { it('should respond to relayout', function(done) { function getPositions(query) { var pos = []; - d3.selectAll(query).each(function() { + d3SelectAll(query).each(function() { pos.push(this.getBoundingClientRect().x); }); return pos; @@ -4453,12 +4454,12 @@ describe('Test axes', function() { it('should rotate labels to avoid overlaps', function(done) { function _assert(msg, exp) { - var tickLabels = d3.selectAll('.xtick > text'); + var tickLabels = d3SelectAll('.xtick > text'); expect(tickLabels.size()).toBe(exp.angle.length, msg + ' - # of tick labels'); tickLabels.each(function(_, i) { - var t = d3.select(this).attr('transform'); + var t = d3Select(this).attr('transform'); var rotate = (t.split('rotate(')[1] || '').split(')')[0]; var angle = rotate.split(',')[0]; expect(Number(angle)).toBe(exp.angle[i], msg + ' - node ' + i); @@ -6693,10 +6694,10 @@ describe('Test tickformatstops:', function() { expect(hoverTrace.x).toEqual('2005-04-01'); expect(hoverTrace.y).toEqual(0); - expect(d3.selectAll('g.axistext').size()).toEqual(1); - expect(d3.selectAll('g.hovertext').size()).toEqual(1); - expect(d3.selectAll('g.axistext').select('text').html()).toEqual(formatter(new Date(hoverTrace.x))); - expect(d3.selectAll('g.hovertext').select('text').html()).toEqual('0'); + expect(d3SelectAll('g.axistext').size()).toEqual(1); + expect(d3SelectAll('g.hovertext').size()).toEqual(1); + expect(d3SelectAll('g.axistext').select('text').html()).toEqual(formatter(new Date(hoverTrace.x))); + expect(d3SelectAll('g.hovertext').select('text').html()).toEqual('0'); }) .then(done, done.fail); }); @@ -6941,19 +6942,19 @@ describe('category preservation tests on gd passed to Plotly.react()', function( }) .then(function() { _hover(gd, { xval: fig.data[0].x.indexOf('a') }); - expect(d3.selectAll('g.axistext').select('text').html()).toEqual('a'); + expect(d3SelectAll('g.axistext').select('text').html()).toEqual('a'); }) .then(function() { _hover(gd, { xval: fig.data[0].x.indexOf('b') }); - expect(d3.selectAll('g.axistext').select('text').html()).toEqual('b'); + expect(d3SelectAll('g.axistext').select('text').html()).toEqual('b'); }) .then(function() { _hover(gd, { xval: fig.data[0].x.indexOf('c') }); - expect(d3.selectAll('g.axistext').select('text').html()).toEqual('c'); + expect(d3SelectAll('g.axistext').select('text').html()).toEqual('c'); }) .then(function() { _hover(gd, { xval: fig.data[0].x.indexOf('d') }); - expect(d3.selectAll('g.axistext').select('text').html()).toEqual('d'); + expect(d3SelectAll('g.axistext').select('text').html()).toEqual('d'); }) .then(done, done.fail); diff --git a/test/jasmine/tests/bar_test.js b/test/jasmine/tests/bar_test.js index 2563fe2eb27..1d852eb04f0 100644 --- a/test/jasmine/tests/bar_test.js +++ b/test/jasmine/tests/bar_test.js @@ -29,7 +29,8 @@ var checkTextTemplate = require('../assets/check_texttemplate'); var checkTransition = require('../assets/check_transitions'); var Fx = require('@src/components/fx'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var BAR_TEXT_SELECTOR = '.bars .bartext'; @@ -1119,7 +1120,7 @@ describe('A bar plot', function() { function assertTextFontColors(expFontColors, label) { return function() { - var selection = d3.selectAll(BAR_TEXT_SELECTOR); + var selection = d3SelectAll(BAR_TEXT_SELECTOR); expect(selection.size()).toBe(expFontColors.length); selection.each(function(d, i) { @@ -1136,7 +1137,7 @@ describe('A bar plot', function() { function assertTextFontFamilies(expFontFamilies) { return function() { - var selection = d3.selectAll(BAR_TEXT_SELECTOR); + var selection = d3SelectAll(BAR_TEXT_SELECTOR); expect(selection.size()).toBe(expFontFamilies.length); selection.each(function(d, i) { expect(this.style.fontFamily).toBe(expFontFamilies[i]); @@ -1146,7 +1147,7 @@ describe('A bar plot', function() { function assertTextFontSizes(expFontSizes) { return function() { - var selection = d3.selectAll(BAR_TEXT_SELECTOR); + var selection = d3SelectAll(BAR_TEXT_SELECTOR); expect(selection.size()).toBe(expFontSizes.length); selection.each(function(d, i) { expect(this.style.fontSize).toBe(expFontSizes[i] + 'px'); @@ -1794,7 +1795,7 @@ describe('A bar plot', function() { it('can change orientation and correctly sets axis types', function(done) { function checkBarsMatch(dims, msg) { - var bars = d3.selectAll('.bars .point'); + var bars = d3SelectAll('.bars .point'); var bbox1 = bars.node().getBoundingClientRect(); bars.each(function(d, i) { if(!i) return; @@ -1859,7 +1860,7 @@ describe('A bar plot', function() { it('should be able to add/remove text node on restyle', function(done) { function _assertNumberOfBarTextNodes(cnt) { - var sel = d3.select(gd).select('.barlayer').selectAll('text'); + var sel = d3Select(gd).select('.barlayer').selectAll('text'); expect(sel.size()).toBe(cnt); } @@ -1964,7 +1965,7 @@ describe('A bar plot', function() { } function _assert(layerClips, barDisplays, barTextDisplays, barClips) { - var subplotLayer = d3.select('.plot'); + var subplotLayer = d3Select('.plot'); var barLayer = subplotLayer.select('.barlayer'); _assertClip(subplotLayer, layerClips[0], 1, 'subplot layer'); @@ -2235,7 +2236,7 @@ describe('bar visibility toggling:', function() { function _assert(traceorder, yRange, legendCount) { expect(gd._fullLayout.legend.traceorder).toBe(traceorder); expect(gd._fullLayout.yaxis.range).toBeCloseToArray(yRange, 2); - expect(d3.select(gd).selectAll('.legend .traces').size()).toBe(legendCount); + expect(d3Select(gd).selectAll('.legend .traces').size()).toBe(legendCount); } Plotly.newPlot(gd, [ {type: 'bar', y: [1, 2, 3]}, @@ -3099,7 +3100,7 @@ describe('bar uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(BAR_TEXT_SELECTOR); + var selection = d3SelectAll(BAR_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); diff --git a/test/jasmine/tests/box_test.js b/test/jasmine/tests/box_test.js index 261dbf8d657..d2234f56113 100644 --- a/test/jasmine/tests/box_test.js +++ b/test/jasmine/tests/box_test.js @@ -4,7 +4,7 @@ var Plots = require('@src/plots/plots'); var Box = require('@src/traces/box'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -1087,7 +1087,7 @@ describe('Test box restyle:', function() { } function _assert(msg, exp) { - var trace3 = d3.select(gd).select('.boxlayer > .trace'); + var trace3 = d3Select(gd).select('.boxlayer > .trace'); _assertOne(msg, exp, trace3, 'boxCnt', 'path.box'); _assertOne(msg, exp, trace3, 'meanlineCnt', 'path.mean'); _assertOne(msg, exp, trace3, 'ptsCnt', 'path.point'); diff --git a/test/jasmine/tests/carpet_test.js b/test/jasmine/tests/carpet_test.js index 7f55eab366a..093e0318210 100644 --- a/test/jasmine/tests/carpet_test.js +++ b/test/jasmine/tests/carpet_test.js @@ -6,7 +6,8 @@ var Carpet = require('@src/traces/carpet'); var smoothFill2D = require('@src/traces/carpet/smooth_fill_2d_array'); var smoothFill = require('@src/traces/carpet/smooth_fill_array'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -500,11 +501,11 @@ describe('Test carpet interactions:', function() { afterEach(destroyGraphDiv); function countCarpets() { - return d3.select(gd).selectAll('.carpetlayer').selectAll('.trace').size(); + return d3Select(gd).selectAll('.carpetlayer').selectAll('.trace').size(); } function countContourTraces() { - return d3.select(gd).selectAll('.contour').size(); + return d3Select(gd).selectAll('.contour').size(); } it('should restyle visible attribute properly', function(done) { @@ -583,7 +584,7 @@ describe('Test carpet interactions:', function() { var mock = Lib.extendDeep({}, require('@mocks/scattercarpet.json')); function _assert(exp) { - expect(d3.selectAll('.point').size()) + expect(d3SelectAll('.point').size()) .toBe(exp, 'number of scatter pts on graph'); } @@ -607,7 +608,7 @@ describe('Test carpet interactions:', function() { it('preserves order of carpets on the same subplot after hide/show', function(done) { function getIndices() { var out = []; - d3.selectAll('.carpetlayer .trace').each(function(d) { out.push(d[0].trace.index); }); + d3SelectAll('.carpetlayer .trace').each(function(d) { out.push(d[0].trace.index); }); return out; } @@ -808,7 +809,7 @@ describe('contourcarpet plotting & editing', function() { it('keeps the correct ordering after hide and show', function(done) { function getIndices() { var out = []; - d3.selectAll('.contour').each(function(d) { out.push(d[0].trace.index); }); + d3SelectAll('.contour').each(function(d) { out.push(d[0].trace.index); }); return out; } diff --git a/test/jasmine/tests/cartesian_interact_test.js b/test/jasmine/tests/cartesian_interact_test.js index 3da6ed0b148..cfa829c18e0 100644 --- a/test/jasmine/tests/cartesian_interact_test.js +++ b/test/jasmine/tests/cartesian_interact_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Lib = require('@src/lib'); @@ -44,22 +45,22 @@ describe('zoom box element', function() { var y1 = 200; mouseEvent('mousemove', x0, y0); - expect(d3.selectAll('.zoomlayer > .zoombox').size()) + expect(d3SelectAll('.zoomlayer > .zoombox').size()) .toEqual(0); - expect(d3.selectAll('.zoomlayer > .zoombox-corners').size()) + expect(d3SelectAll('.zoomlayer > .zoombox-corners').size()) .toEqual(0); mouseEvent('mousedown', x0, y0); mouseEvent('mousemove', x1, y1); - expect(d3.selectAll('.zoomlayer > .zoombox').size()) + expect(d3SelectAll('.zoomlayer > .zoombox').size()) .toEqual(1); - expect(d3.selectAll('.zoomlayer > .zoombox-corners').size()) + expect(d3SelectAll('.zoomlayer > .zoombox-corners').size()) .toEqual(1); mouseEvent('mouseup', x1, y1); - expect(d3.selectAll('.zoomlayer > .zoombox').size()) + expect(d3SelectAll('.zoomlayer > .zoombox').size()) .toEqual(0); - expect(d3.selectAll('.zoomlayer > .zoombox-corners').size()) + expect(d3SelectAll('.zoomlayer > .zoombox-corners').size()) .toEqual(0); }); }); @@ -216,7 +217,7 @@ describe('main plot pan', function() { it('should show/hide `cliponaxis: false` pts according to range', function(done) { function _assert(markerDisplay, textDisplay, barTextDisplay) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); assertNodeDisplay( gd3.select('.scatterlayer').selectAll('.point'), @@ -579,7 +580,7 @@ describe('axis zoom/pan and main plot zoom', function() { it('updates axis layout when the constraints require it', function(done) { function _assert(xGridCnt) { - var xGrid = d3.select(gd).selectAll('.gridlayer > .x > path.xgrid'); + var xGrid = d3Select(gd).selectAll('.gridlayer > .x > path.xgrid'); expect(xGrid.size()).toEqual(xGridCnt); } @@ -614,7 +615,7 @@ describe('axis zoom/pan and main plot zoom', function() { var drag = makeDragFns('xy', 'nsew', dp[0], dp[1], 170, 170); return drag.start().then(function() { - var zl = d3.select(gd).select('g.zoomlayer'); + var zl = d3Select(gd).select('g.zoomlayer'); var d = zl.select('.zoombox-corners').attr('d'); if(exp.cornerCnt) { @@ -777,21 +778,21 @@ describe('axis zoom/pan and main plot zoom', function() { var fig = Lib.extendDeep({}, require('@mocks/multicategory.json')); function _assertLabels(msg, exp) { - var tickLabels = d3.select(gd).selectAll('.xtick > text'); + var tickLabels = d3Select(gd).selectAll('.xtick > text'); expect(tickLabels.size()).toBe(exp.angle.length, msg + ' - # of tick labels'); tickLabels.each(function(_, i) { - var t = d3.select(this).attr('transform'); + var t = d3Select(this).attr('transform'); var rotate = (t.split('rotate(')[1] || '').split(')')[0]; var angle = rotate.split(',')[0]; expect(Number(angle)).toBe(exp.angle[i], msg + ' - node ' + i); }); - var tickLabels2 = d3.select(gd).selectAll('.xtick2 > text'); + var tickLabels2 = d3Select(gd).selectAll('.xtick2 > text'); expect(tickLabels2.size()).toBe(exp.y.length, msg + ' - # of secondary labels'); tickLabels2.each(function(_, i) { - var y = d3.select(this).attr('y'); + var y = d3Select(this).attr('y'); expect(Number(y)).toBeWithin(exp.y[i], 5.5, msg + ' - node ' + i); }); } @@ -888,7 +889,7 @@ describe('axis zoom/pan and main plot zoom', function() { } function assertSubplotTranslateAndScale(msg, spIds, trans, scale) { - var gClips = d3.select(gd).select('g.clips'); + var gClips = d3Select(gd).select('g.clips'); var uid = gd._fullLayout._uid; var transActual = []; var scaleActual = []; @@ -1425,7 +1426,7 @@ describe('axis zoom/pan and main plot zoom', function() { var drag = makeDragFns(s.drag[0], s.drag[1], s.drag[2], s.drag[3]); return drag.start().then(function() { if(s.drag[1] === 'nsew') { - var zb = d3.select(gd).select('g.zoomlayer > path.zoombox'); + var zb = d3Select(gd).select('g.zoomlayer > path.zoombox'); var d = zb.attr('d'); var v = Number(d.split('v')[1].split('h')[0]); var h = Number(d.split('h')[1].split('v')[0]); @@ -1591,7 +1592,7 @@ describe('axis zoom/pan and main plot zoom', function() { [['yaxis'], [-0.318, 3.318]], [['xaxis2', 'yaxis2'], [-0.588, 8.824]] ]); - x2y2 = d3.select('.subplot.x2y2 .plot'); + x2y2 = d3Select('.subplot.x2y2 .plot'); expect(x2y2.attr('transform')).toBe('translate(50,50)'); mx = gd._fullLayout.xaxis._m; my = gd._fullLayout.yaxis._m; @@ -1695,7 +1696,7 @@ describe('axis zoom/pan and main plot zoom', function() { describe('redrag behavior', function() { function _assertZoombox(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var zb = gd3.select('g.zoomlayer').select('.zoombox-corners'); if(zb.size()) { @@ -1706,7 +1707,7 @@ describe('axis zoom/pan and main plot zoom', function() { } function _assertClipRect(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var uid = gd._fullLayout._uid; var clipRect = gd3.select('#clip' + uid + 'xyplot > rect'); var xy = Drawing.getTranslate(clipRect); @@ -1726,7 +1727,7 @@ describe('axis zoom/pan and main plot zoom', function() { expect(fullLayout.xaxis.range).toBeCloseToArray(exp.xrng === 'previous' ? xrngPrev : exp.xrng, 2, msg + '|xaxis range'); - expect(d3.select(gd).selectAll('.point').size()).toBe(exp.nodeCnt, msg + '|pt cnt'); + expect(d3Select(gd).selectAll('.point').size()).toBe(exp.nodeCnt, msg + '|pt cnt'); expect(Boolean(gd._dragdata)).toBe(exp.hasDragData, msg + '|has gd._dragdata?'); _assertZoombox(msg, exp); _assertClipRect(msg, exp); @@ -1985,14 +1986,14 @@ describe('axis zoom/pan and main plot zoom', function() { function _assert(msg, exp) { return function() { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.selectAll('.point').size()).toBe(exp.nodeCnt, msg + '|pt cnt'); expect(Boolean(gd._dragdata)).toBe(exp.hasDragData, msg + '|has gd._dragdata?'); expect(selectingTracker.length).toBe(exp.selectingCnt, msg + '| selecting cnt'); expect(selectedTracker.length).toBe(exp.selectedCnt, msg + '| selected cnt'); - var outline = d3.select('.zoomlayer > .select-outline'); + var outline = d3Select('.zoomlayer > .select-outline'); if(outline.size()) { expect(outline.attr('d')).toBe(exp.selectOutline, msg + '| selection outline path'); } else { @@ -2082,7 +2083,7 @@ describe('axis zoom/pan and main plot zoom', function() { var fns = drag.makeFns({node: node, pos0: [200, 200], dpos: dpos}); return fns.start().then(function() { - var zl = d3.select(gd).select('g.zoomlayer'); + var zl = d3Select(gd).select('g.zoomlayer'); var d = zl.select('.zoombox-corners').attr('d'); if(exp === 'nozoom') { expect(d).toBe('M0,0Z', 'blank path | ' + msg); @@ -2479,7 +2480,7 @@ describe('Cartesian plots with css transforms', function() { startPos = Lib.apply3DTransform(gd._fullLayout._invTransform)(startPos[0], startPos[1]); endPos = Lib.apply3DTransform(gd._fullLayout._invTransform)(endPos[0], endPos[1]); var size = [endPos[0] - startPos[0], endPos[1] - startPos[1]]; - var zb = d3.select(gd).select('g.zoomlayer > path.zoombox'); + var zb = d3Select(gd).select('g.zoomlayer > path.zoombox'); var zoomboxRect = _getZoomlayerPathRect(zb.attr('d')); expect(zoomboxRect.left).toBeCloseTo(startPos[0], -1); expect(zoomboxRect.top).toBeCloseTo(startPos[1]); diff --git a/test/jasmine/tests/cartesian_test.js b/test/jasmine/tests/cartesian_test.js index 87d58488f9a..c15dcd05fa5 100644 --- a/test/jasmine/tests/cartesian_test.js +++ b/test/jasmine/tests/cartesian_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Lib = require('@src/lib'); @@ -23,7 +24,7 @@ describe('restyle', function() { var fills, firstToZero, secondToZero, firstToNext, secondToNext; var mock = Lib.extendDeep({}, require('@mocks/basic_area.json')); function getFills() { - return d3.selectAll('g.trace.scatter .fills>g'); + return d3SelectAll('g.trace.scatter .fills>g'); } Plotly.newPlot(gd, mock.data, mock.layout).then(function() { @@ -60,7 +61,7 @@ describe('restyle', function() { return Plotly.restyle(gd, 'visible', false); }).then(function() { - expect(d3.selectAll('g.trace.scatter').size()).toBe(0); + expect(d3SelectAll('g.trace.scatter').size()).toBe(0); }) .then(done, done.fail); }); @@ -70,7 +71,7 @@ describe('restyle', function() { var mock = Lib.extendDeep({}, require('@mocks/basic_line.json')); Plotly.newPlot(gd, mock.data, mock.layout).then(function() { - lines = d3.selectAll('g.scatter.trace .js-line'); + lines = d3SelectAll('g.scatter.trace .js-line'); firstLine1 = lines[0][0]; firstLine2 = lines[0][1]; @@ -80,7 +81,7 @@ describe('restyle', function() { }).then(function() { return Plotly.restyle(gd, {visible: [false]}, [0]); }).then(function() { - lines = d3.selectAll('g.scatter.trace .js-line'); + lines = d3SelectAll('g.scatter.trace .js-line'); // Only one line now and it's equal to the second trace's line from above: expect(lines.size()).toEqual(1); @@ -88,7 +89,7 @@ describe('restyle', function() { }).then(function() { return Plotly.restyle(gd, {visible: [true]}, [0]); }).then(function() { - lines = d3.selectAll('g.scatter.trace .js-line'); + lines = d3SelectAll('g.scatter.trace .js-line'); secondLine1 = lines[0][0]; secondLine2 = lines[0][1]; @@ -108,7 +109,7 @@ describe('restyle', function() { var mock = Lib.extendDeep({}, require('@mocks/text_chart_basic.json')); function assertScatterModeSizes(lineSize, pointSize, textSize) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var lines = gd3.selectAll('g.scatter.trace .js-line'); var points = gd3.selectAll('g.scatter.trace path.point'); var texts = gd3.selectAll('g.scatter.trace text'); @@ -161,15 +162,15 @@ describe('restyle', function() { height: 400 }) .then(function() { - expect(d3.select('.scatter').size()).toBe(1); + expect(d3Select('.scatter').size()).toBe(1); return Plotly.restyle(gd, {visible: 'legendonly'}, 1); }) .then(function() { - expect(d3.select('.scatter').size()).toBe(0); + expect(d3Select('.scatter').size()).toBe(0); return Plotly.restyle(gd, {visible: true}, 1); }) .then(function() { - expect(d3.select('.scatter').size()).toBe(1); + expect(d3Select('.scatter').size()).toBe(1); }) .then(done, done.fail); }); @@ -216,8 +217,8 @@ describe('relayout', function() { it('should response to \'categoryarray\' and \'categoryorder\' updates', function(done) { function assertCategories(list) { - d3.selectAll('g.xtick').each(function(_, i) { - var tick = d3.select(this).select('text'); + d3SelectAll('g.xtick').each(function(_, i) { + var tick = d3Select(this).select('text'); expect(tick.html()).toEqual(list[i]); }); } @@ -271,7 +272,7 @@ describe('relayout', function() { function assertPointTranslate(pointT, textT) { var TOLERANCE = 10; - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var points = gd3.selectAll('g.scatter.trace path.point'); var texts = gd3.selectAll('g.scatter.trace text'); @@ -380,14 +381,14 @@ describe('subplot creation / deletion:', function() { it('should clear orphan subplot when adding traces to blank graph', function(done) { function assertOrphanSubplot(len) { - expect(d3.select('.subplot.xy').size()).toEqual(len); - expect(d3.select('.ytitle').size()).toEqual(len); - expect(d3.select('.ytitle').size()).toEqual(len); + expect(d3Select('.subplot.xy').size()).toEqual(len); + expect(d3Select('.ytitle').size()).toEqual(len); + expect(d3Select('.ytitle').size()).toEqual(len); // we only make one orphan subplot now - expect(d3.select('.subplot.x2y2').size()).toEqual(0); - expect(d3.select('.x2title').size()).toEqual(0); - expect(d3.select('.x2title').size()).toEqual(0); + expect(d3Select('.subplot.x2y2').size()).toEqual(0); + expect(d3Select('.x2title').size()).toEqual(0); + expect(d3Select('.x2title').size()).toEqual(0); } Plotly.newPlot(gd, [], { @@ -608,9 +609,9 @@ describe('subplot creation / deletion:', function() { var fig = Lib.extendDeep({}, require('@mocks/overlaying-axis-lines.json')); function _assert(xyCnt, x2y2Cnt) { - expect(d3.select('.subplot.xy').select('.plot').selectAll('.trace').size()) + expect(d3Select('.subplot.xy').select('.plot').selectAll('.trace').size()) .toBe(xyCnt, 'has correct xy subplot trace count'); - expect(d3.select('.overplot').select('.x2y2').selectAll('.trace').size()) + expect(d3Select('.overplot').select('.x2y2').selectAll('.trace').size()) .toBe(x2y2Cnt, 'has correct x2y2 oveylaid subplot trace count'); } @@ -644,7 +645,7 @@ describe('subplot creation / deletion:', function() { } function _assert(xBelow, yBelow, xAbove, yAbove) { - var g = d3.select('.subplot.xy'); + var g = d3Select('.subplot.xy'); assertPathDatum(g.select('.xlines-below'), xBelow[0], 'xlines below'); assertChildrenCnt(g.select('.xaxislayer-below'), xBelow[1], 'xaxislayer below'); @@ -789,8 +790,8 @@ describe('subplot creation / deletion:', function() { it('clear axis ticks, labels and title when relayout an axis to `*visible:false*', function(done) { function _assert(xaxis, yaxis) { - var g = d3.select('.subplot.xy'); - var info = d3.select('.infolayer'); + var g = d3Select('.subplot.xy'); + var info = d3Select('.infolayer'); expect(g.selectAll('.xtick').size()).toBe(xaxis[0], 'x tick cnt'); expect(g.selectAll('.gridlayer .xgrid').size()).toBe(xaxis[1], 'x gridline cnt'); @@ -830,7 +831,7 @@ describe('subplot creation / deletion:', function() { it('clears secondary labels and divider when updating out of axis type multicategory', function(done) { function _assert(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.selectAll('.xtick > text').size()) .toBe(exp.tickCnt, msg + ' # labels'); expect(gd3.selectAll('.xtick2 > text').size()) @@ -887,7 +888,7 @@ describe('subplot creation / deletion:', function() { it('clears secondary labels and divider when updating out of axis type multicategory (y-axis case)', function(done) { function _assert(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.selectAll('.ytick > text').size()) .toBe(exp.tickCnt, msg + ' # labels'); expect(gd3.selectAll('.ytick2 > text').size()) diff --git a/test/jasmine/tests/choropleth_test.js b/test/jasmine/tests/choropleth_test.js index a5b423bd733..7e79160f6d4 100644 --- a/test/jasmine/tests/choropleth_test.js +++ b/test/jasmine/tests/choropleth_test.js @@ -5,7 +5,8 @@ var Plots = require('@src/plots/plots'); var Lib = require('@src/lib'); var loggers = require('@src/lib/loggers'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -189,7 +190,7 @@ describe('Test choropleth hover:', function() { name: content[1] }); assertHoverLabelStyle( - d3.select('g.hovertext'), + d3Select('g.hovertext'), style ); }); @@ -385,7 +386,7 @@ describe('choropleth drawing', function() { it('preserves order after hide/show', function(done) { function getIndices() { var out = []; - d3.selectAll('.choropleth').each(function(d) { out.push(d[0].trace.index); }); + d3SelectAll('.choropleth').each(function(d) { out.push(d[0].trace.index); }); return out; } diff --git a/test/jasmine/tests/click_test.js b/test/jasmine/tests/click_test.js index 9825b67b81e..5bf53e9bc5f 100644 --- a/test/jasmine/tests/click_test.js +++ b/test/jasmine/tests/click_test.js @@ -3,7 +3,8 @@ var Lib = require('@src/lib'); var Drawing = require('@src/components/drawing'); var DBLCLICKDELAY = require('@src/plot_api/plot_config').dfltConfig.doubleClickDelay; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -1105,23 +1106,23 @@ describe('dragbox', function() { } Plotly.newPlot(createGraphDiv(), mock).then(function() { - var node = d3.select('rect.nedrag').node(); + var node = d3Select('rect.nedrag').node(); var pos = getRectCenter(node); var fns = drag.makeFns({pos0: pos, dpos: [50, 0]}); - assertScale(d3.select('.plot').node(), 1, 1); + assertScale(d3Select('.plot').node(), 1, 1); - d3.selectAll('.point').each(function() { + d3SelectAll('.point').each(function() { assertScale(this, 1, 1); }); fns.start().then(function() { - assertScale(d3.select('.plot').node(), 1.14, 1); + assertScale(d3Select('.plot').node(), 1.14, 1); - d3.select('.scatterlayer').selectAll('.point').each(function() { + d3Select('.scatterlayer').selectAll('.point').each(function() { assertScale(this, 0.87, 1); }); - d3.select('.barlayer').selectAll('.point').each(function() { + d3Select('.barlayer').selectAll('.point').each(function() { assertScale(this, 1, 1); }); }) diff --git a/test/jasmine/tests/colorbar_test.js b/test/jasmine/tests/colorbar_test.js index 1d43888d171..6971c976471 100644 --- a/test/jasmine/tests/colorbar_test.js +++ b/test/jasmine/tests/colorbar_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var Plotly = require('@lib/index'); var Colorbar = require('@src/components/colorbar'); @@ -101,7 +101,7 @@ describe('Test colorbar:', function() { var cbTop = opts.top; var cbHeight = opts.height; var multiFill = opts.multiFill; - var colorbars = d3.select(gd).selectAll('.colorbar'); + var colorbars = d3Select(gd).selectAll('.colorbar'); expect(colorbars.size()).toBe(present ? 1 : 0); // check that the displayed object has the right size, @@ -326,10 +326,10 @@ describe('Test colorbar:', function() { // also tests impliedEdits for colorbars in containers it('can show and hide parcoords colorbars', function(done) { function assertParcoordsCB(present, expandedMargin) { - var colorbars = d3.select(gd).selectAll('.colorbar'); + var colorbars = d3Select(gd).selectAll('.colorbar'); expect(colorbars.size()).toBe(present ? 1 : 0); - var yAxes = d3.select(gd).selectAll('.parcoords .y-axis'); + var yAxes = d3Select(gd).selectAll('.parcoords .y-axis'); expect(yAxes.size()).toBe(2); var transform = yAxes[0][1].getAttribute('transform'); if(expandedMargin) expect(transform).not.toBe('translate(400,0)'); @@ -458,7 +458,7 @@ describe('Test colorbar:', function() { } function _assert(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var cb0 = gd3.select('.cbtrace0'); var cb1 = gd3.select('.cbcoloraxis'); @@ -517,7 +517,7 @@ describe('Test colorbar:', function() { it('creates the same colorbars attributes in newPlot and react', function(done) { function getCBFillAttributes() { var attrs = []; - var colorbars = d3.select(gd).selectAll('.colorbar'); + var colorbars = d3Select(gd).selectAll('.colorbar'); colorbars.selectAll('.cbfill').each(function() { var attrsForElem = {}; for(var i = 0; i < this.attributes.length; i++) { diff --git a/test/jasmine/tests/colorscale_test.js b/test/jasmine/tests/colorscale_test.js index 632aae72603..6b13bba80ec 100644 --- a/test/jasmine/tests/colorscale_test.js +++ b/test/jasmine/tests/colorscale_test.js @@ -7,7 +7,8 @@ var Plots = require('@src/plots/plots'); var Heatmap = require('@src/traces/heatmap'); var Scatter = require('@src/traces/scatter'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -746,14 +747,14 @@ describe('Test colorscale restyle calls:', function() { }); function getFill(q) { - return d3.select(q).node().style.fill; + return d3Select(q).node().style.fill; } it('should be able to toggle between autocolorscale true/false and set colorscales (contour case)', function(done) { function _assert(msg, exp) { var cc = []; cc.push(getFill('.contourbg > path')); - d3.selectAll('.contourfill > path').each(function() { + d3SelectAll('.contourfill > path').each(function() { cc.push(getFill(this)); }); expect(cc).toEqual(exp.contourColors); @@ -861,7 +862,7 @@ describe('Test colorscale restyle calls:', function() { it('should be able to toggle between autocolorscale true/false and set colorscales (scatter marker case)', function(done) { function _assert(msg, exp) { var mcc = []; - d3.selectAll('path.point').each(function() { + d3SelectAll('path.point').each(function() { mcc.push(getFill(this)); }); expect(mcc).toEqual(exp.mcc); @@ -939,8 +940,8 @@ describe('Test colorscale restyle calls:', function() { function _assert(msg, exp) { var mlcc = []; - d3.selectAll('path.point').each(function() { - mlcc.push(d3.select(this).node().style.stroke); + d3SelectAll('path.point').each(function() { + mlcc.push(d3Select(this).node().style.stroke); }); expect(mlcc).toEqual(exp.mlcc); @@ -1021,7 +1022,7 @@ describe('Test colorscale restyle calls:', function() { it('should be able to toggle between autocolorscale true/false and set colorscales (coloraxis case)', function(done) { function _assert(msg, exp) { var mcc = []; - d3.selectAll('path.point').each(function() { mcc.push(getFill(this)); }); + d3SelectAll('path.point').each(function() { mcc.push(getFill(this)); }); expect(mcc).toEqual(exp.mcc); expect(gd._fullLayout.coloraxis.colorscale).toEqual(exp.colorscale); @@ -1135,7 +1136,7 @@ describe('Test colorscale restyle calls:', function() { it('should work with templates', function(done) { function _assert(msg, exp) { var mcc = []; - d3.selectAll('path.point').each(function() { + d3SelectAll('path.point').each(function() { mcc.push(getFill(this)); }); diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index 9c37804d031..19947764eda 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/index'); var Plots = Plotly.Plots; var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var click = require('../assets/click'); @@ -884,7 +884,7 @@ describe('config argument', function() { afterEach(destroyGraphDiv); function _scroll() { - var mainDrag = d3.select('.nsewdrag[data-subplot="xy"]').node(); + var mainDrag = d3Select('.nsewdrag[data-subplot="xy"]').node(); mouseEvent('scroll', 200, 200, {deltaY: -200, element: mainDrag}); } diff --git a/test/jasmine/tests/contour_test.js b/test/jasmine/tests/contour_test.js index 208c2f7cde0..340a8ecdb47 100644 --- a/test/jasmine/tests/contour_test.js +++ b/test/jasmine/tests/contour_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); @@ -560,7 +560,7 @@ describe('contour plotting and editing', function() { it('keeps the correct ordering after hide and show', function(done) { function getIndices() { var out = []; - d3.selectAll('.contour').each(function(d) { out.push(d[0].trace.index); }); + d3SelectAll('.contour').each(function(d) { out.push(d[0].trace.index); }); return out; } diff --git a/test/jasmine/tests/contourgl_test.js b/test/jasmine/tests/contourgl_test.js index 578f12f2a47..580c834a7a5 100644 --- a/test/jasmine/tests/contourgl_test.js +++ b/test/jasmine/tests/contourgl_test.js @@ -1,6 +1,6 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Range = require('../../strict-d3').range; var supplyDefaults = require('@src/traces/heatmapgl').supplyDefaults; var Plots = require('@src/plots/plots'); @@ -108,8 +108,8 @@ function rotate(rad, point) { } function generate(maxJitter) { - var x = d3.range(-1, 1.5, 0.5); // left closed, right open interval - var y = d3.range(-1, 1.5, 0.5); // left closed, right open interval + var x = d3Range(-1, 1.5, 0.5); // left closed, right open interval + var y = d3Range(-1, 1.5, 0.5); // left closed, right open interval var z = new Array(x.length); var i, j, p; diff --git a/test/jasmine/tests/domain_ref_interact_test.js b/test/jasmine/tests/domain_ref_interact_test.js index 7db72882e21..83ac2ba7992 100644 --- a/test/jasmine/tests/domain_ref_interact_test.js +++ b/test/jasmine/tests/domain_ref_interact_test.js @@ -1,13 +1,13 @@ 'use strict'; -var domainRefComponents = require('../assets/domain_ref/components'); +var domainRefComponents = require('../assets/domain_ref_components'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var Plotly = require('../../../lib/index'); var Lib = require('../../../src/lib'); var getSVGElemScreenBBox = require( '../assets/get_svg_elem_screen_bbox'); -var testMock = require('../assets/domain_ref/domain_refs_editable.json'); +var testMock = require('../assets/domain_refs_editable.json'); var delay = require('../assets/delay'); var mouseEvent = require('../assets/mouse_event'); // we have to use drag to move annotations for some reason diff --git a/test/jasmine/tests/domain_ref_test.js b/test/jasmine/tests/domain_ref_test.js index fbc75b649bb..5d207c63938 100644 --- a/test/jasmine/tests/domain_ref_test.js +++ b/test/jasmine/tests/domain_ref_test.js @@ -1,6 +1,6 @@ 'use strict'; -var domainRefComponents = require('../assets/domain_ref/components'); +var domainRefComponents = require('../assets/domain_ref_components'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var Plotly = require('../../../lib/index'); diff --git a/test/jasmine/tests/dragelement_test.js b/test/jasmine/tests/dragelement_test.js index 9b9313cba3b..96cd664fb21 100644 --- a/test/jasmine/tests/dragelement_test.js +++ b/test/jasmine/tests/dragelement_test.js @@ -1,6 +1,7 @@ var dragElement = require('@src/components/dragelement'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -16,7 +17,7 @@ describe('dragElement', function() { this.gd.className = 'js-plotly-plot'; this.gd._fullLayout = { - _hoverlayer: d3.select(this.hoverlayer) + _hoverlayer: d3Select(this.hoverlayer) }; this.gd._context = { doubleClickDelay: 300 @@ -34,7 +35,7 @@ describe('dragElement', function() { afterEach(destroyGraphDiv); function countCoverSlip() { - return d3.selectAll('.dragcover').size(); + return d3SelectAll('.dragcover').size(); } it('should init drag element', function() { diff --git a/test/jasmine/tests/draw_newshape_test.js b/test/jasmine/tests/draw_newshape_test.js index a7ad41620c7..4fcef175a37 100644 --- a/test/jasmine/tests/draw_newshape_test.js +++ b/test/jasmine/tests/draw_newshape_test.js @@ -3,6 +3,7 @@ var parseSvgPath = require('parse-svg-path'); var Plotly = require('@lib/index'); var Lib = require('@src/lib'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -1493,25 +1494,25 @@ describe('Activate and edit editable shapes', function() { }) .then(function() { - var el = Plotly.d3.selectAll('.shapelayer path')[0][0]; + var el = d3SelectAll('.shapelayer path')[0][0]; expect(el.style['pointer-events']).toBe(''); expect(el.style.stroke).toBe('rgb(0, 0, 0)'); // no color expect(el.style['stroke-opacity']).toBe('0'); // invisible expect(el.style['stroke-width']).toBe('0px'); // no pixel - el = Plotly.d3.selectAll('.shapelayer path')[0][1]; + el = d3SelectAll('.shapelayer path')[0][1]; expect(el.style['pointer-events']).toBe(''); expect(el.style.stroke).toBe('rgb(0, 0, 0)'); // no color expect(el.style['stroke-opacity']).toBe('0'); // invisible expect(el.style['stroke-width']).toBe('0px'); // no pixel - el = Plotly.d3.selectAll('.shapelayer path')[0][2]; + el = d3SelectAll('.shapelayer path')[0][2]; expect(el.style['pointer-events']).toBe(''); expect(el.style.stroke).toBe('rgb(0, 128, 0)'); // custom color expect(el.style['stroke-opacity']).toBe('1'); // visible expect(el.style['stroke-width']).toBe('3px'); // custom pixel - el = Plotly.d3.selectAll('.shapelayer path')[0][3]; + el = d3SelectAll('.shapelayer path')[0][3]; expect(el.style['pointer-events']).toBe(''); expect(el.style.stroke).toBe('rgb(0, 128, 0)'); // custom color expect(el.style['stroke-opacity']).toBe('1'); // visible @@ -1583,25 +1584,25 @@ describe('Activate and edit editable shapes', function() { }) .then(function() { - var el = Plotly.d3.selectAll('.shapelayer path')[0][0]; + var el = d3SelectAll('.shapelayer path')[0][0]; expect(el.style['pointer-events']).toBe('stroke'); expect(el.style.stroke).toBe('rgb(0, 0, 0)'); // no color expect(el.style['stroke-opacity']).toBe('0'); // invisible expect(el.style['stroke-width']).toBe('5px'); // some pixels to activate shape - el = Plotly.d3.selectAll('.shapelayer path')[0][1]; + el = d3SelectAll('.shapelayer path')[0][1]; expect(el.style['pointer-events']).toBe('stroke'); expect(el.style.stroke).toBe('rgb(0, 0, 0)'); // no color expect(el.style['stroke-opacity']).toBe('0'); // invisible expect(el.style['stroke-width']).toBe('5px'); // some pixels to activate shape - el = Plotly.d3.selectAll('.shapelayer path')[0][2]; + el = d3SelectAll('.shapelayer path')[0][2]; expect(el.style['pointer-events']).toBe('all'); expect(el.style.stroke).toBe('rgb(0, 128, 0)'); // custom color expect(el.style['stroke-opacity']).toBe('1'); // visible expect(el.style['stroke-width']).toBe('3px'); // custom pixel - el = Plotly.d3.selectAll('.shapelayer path')[0][3]; + el = d3SelectAll('.shapelayer path')[0][3]; expect(el.style['pointer-events']).toBe('stroke'); expect(el.style.stroke).toBe('rgb(0, 128, 0)'); // custom color expect(el.style['stroke-opacity']).toBe('1'); // visible @@ -1640,7 +1641,7 @@ describe('Activate and edit editable shapes', function() { }) .then(function() { - var el = Plotly.d3.selectAll('.shapelayer path')[0][0]; + var el = d3SelectAll('.shapelayer path')[0][0]; expect(el.style['pointer-events']).toBe('all'); expect(el.style.stroke).toBe('rgb(0, 0, 0)'); // no color expect(el.style['stroke-opacity']).toBe('0'); // invisible diff --git a/test/jasmine/tests/drawing_test.js b/test/jasmine/tests/drawing_test.js index 274873e897d..40c39fe34dd 100644 --- a/test/jasmine/tests/drawing_test.js +++ b/test/jasmine/tests/drawing_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var Plotly = require('@lib/index'); var Drawing = require('@src/components/drawing'); var svgTextUtils = require('@src/lib/svg_text_utils'); @@ -11,7 +11,7 @@ describe('Drawing', function() { describe('setClipUrl', function() { beforeEach(function() { - this.svg = d3.select('body').append('svg'); + this.svg = d3Select('body').append('svg'); this.g = this.svg.append('g'); }); @@ -38,7 +38,7 @@ describe('Drawing', function() { it('should append window URL to clip-path if is present', function() { // append with href - var base = d3.select('body') + var base = d3Select('body') .append('base') .attr('href', 'https://chart-studio.plotly.com'); @@ -54,7 +54,7 @@ describe('Drawing', function() { }); it('should append window URL w/o hash to clip-path if is present', function() { - var base = d3.select('body') + var base = d3Select('body') .append('base') .attr('href', 'https://chart-studio.plotly.com/#hash'); @@ -99,7 +99,7 @@ describe('Drawing', function() { }); it('should work with d3 elements', function() { - var el = d3.select(document.createElement('div')); + var el = d3Select(document.createElement('div')); el.attr('transform', 'translate(123.45px,67)'); expect(Drawing.getTranslate(el)).toEqual({ x: 123.45, y: 67 }); @@ -119,7 +119,7 @@ describe('Drawing', function() { it('should work with negative values', function() { var el = document.createElement('div'); - var el3 = d3.select(document.createElement('div')); + var el3 = d3Select(document.createElement('div')); expect(Drawing.getTranslate(el)).toEqual({ x: 0, y: 0 }); @@ -173,7 +173,7 @@ describe('Drawing', function() { }); it('should work with d3 elements', function() { - var el = d3.select(document.createElement('div')); + var el = d3Select(document.createElement('div')); Drawing.setTranslate(el, 5); expect(el.attr('transform')).toBe('translate(5,0)'); @@ -216,7 +216,7 @@ describe('Drawing', function() { }); it('should work with d3 elements', function() { - var el = d3.select(document.createElement('div')); + var el = d3Select(document.createElement('div')); el.attr('transform', 'scale(1.23,45)'); expect(Drawing.getScale(el)).toEqual({ x: 1.23, y: 45 }); @@ -254,7 +254,7 @@ describe('Drawing', function() { }); it('should work with d3 elements', function() { - var el = d3.select(document.createElement('div')); + var el = d3Select(document.createElement('div')); Drawing.setScale(el, 5); expect(el.attr('transform')).toBe('scale(5,1)'); @@ -276,7 +276,7 @@ describe('Drawing', function() { beforeEach(function() { el = document.createElement('div'); - sel = d3.select(el); + sel = d3Select(el); }); it('sets the scale of a point', function() { @@ -313,7 +313,7 @@ describe('Drawing', function() { var svg, g, text; beforeEach(function() { - svg = d3.select(document.createElement('svg')); + svg = d3Select(document.createElement('svg')); g = svg.append('g'); text = g.append('text'); }); @@ -378,7 +378,7 @@ describe('Drawing', function() { width: 500 }) .then(function() { - var node = d3.select('text.annotation-text').node(); + var node = d3Select('text.annotation-text').node(); assertBBox(Drawing.bBox(node), { height: 14, width: 27.671875, @@ -392,7 +392,7 @@ describe('Drawing', function() { return Plotly.relayout(gd, 'annotations[0].text', 'HELLO'); }) .then(function() { - var node = d3.select('text.annotation-text').node(); + var node = d3Select('text.annotation-text').node(); assertBBox(Drawing.bBox(node), { height: 14, width: 41.015625, @@ -406,7 +406,7 @@ describe('Drawing', function() { return Plotly.relayout(gd, 'annotations[0].font.size', 20); }) .then(function() { - var node = d3.select('text.annotation-text').node(); + var node = d3Select('text.annotation-text').node(); assertBBox(Drawing.bBox(node), { height: 22, width: 66.015625, @@ -461,12 +461,12 @@ describe('gradients', function() { var typesOut = []; var c1Out = []; var c2Out = []; - var gradients = d3.select(gd).selectAll('radialGradient,linearGradient'); + var gradients = d3Select(gd).selectAll('radialGradient,linearGradient'); gradients.each(function() { gids.push(this.id); typesOut.push(this.nodeName.replace('Gradient', '')); - c1Out.push(d3.select(this).select('stop[offset="100%"]').attr('stop-color')); - c2Out.push(d3.select(this).select('stop[offset="0%"]').attr('stop-color')); + c1Out.push(d3Select(this).select('stop[offset="100%"]').attr('stop-color')); + c2Out.push(d3Select(this).select('stop[offset="0%"]').attr('stop-color')); }); gids.sort(); @@ -543,7 +543,7 @@ describe('gradients', function() { }); it('should append window URL to gradient ref if is present', function(done) { - var base = d3.select('body') + var base = d3Select('body') .append('base') .attr('href', 'https://chart-studio.plotly.com'); @@ -554,7 +554,7 @@ describe('gradients', function() { z: [[1, 3], [2, 3]] }]) .then(function() { - var cbfills = d3.select(gd).select('.cbfills > rect'); + var cbfills = d3Select(gd).select('.cbfills > rect'); expect(cbfills.node().style.fill).toBe([ 'url("', window.location.href, diff --git a/test/jasmine/tests/errorbars_test.js b/test/jasmine/tests/errorbars_test.js index a26bbc7a40b..83260f14482 100644 --- a/test/jasmine/tests/errorbars_test.js +++ b/test/jasmine/tests/errorbars_test.js @@ -1,6 +1,6 @@ var Plotly = require('@lib/index'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -15,8 +15,8 @@ describe('errorbar plotting', function() { afterEach(destroyGraphDiv); function countBars(xCount, yCount) { - expect(d3.select(gd).selectAll('.xerror').size()).toBe(xCount); - expect(d3.select(gd).selectAll('.yerror').size()).toBe(yCount); + expect(d3Select(gd).selectAll('.xerror').size()).toBe(xCount); + expect(d3Select(gd).selectAll('.yerror').size()).toBe(yCount); } function checkCalcdata(cdTrace, errorBarData) { diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js index 6869a63cc86..6bc3bcbc6d2 100644 --- a/test/jasmine/tests/finance_test.js +++ b/test/jasmine/tests/finance_test.js @@ -2,7 +2,8 @@ var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var supplyAllDefaults = require('../assets/supply_defaults'); @@ -696,15 +697,15 @@ describe('finance charts updates:', function() { }); function countOHLCTraces() { - return d3.select('g.cartesianlayer').selectAll('g.trace.ohlc').size(); + return d3Select('g.cartesianlayer').selectAll('g.trace.ohlc').size(); } function countBoxTraces() { - return d3.select('g.cartesianlayer').selectAll('g.trace.boxes').size(); + return d3Select('g.cartesianlayer').selectAll('g.trace.boxes').size(); } function countRangeSliders() { - return d3.select('g.rangeslider-rangeplot').size(); + return d3Select('g.rangeslider-rangeplot').size(); } it('Plotly.restyle should work', function(done) { @@ -732,13 +733,13 @@ describe('finance charts updates:', function() { }); }) .then(function() { - path0 = d3.select('path.box').attr('d'); + path0 = d3Select('path.box').attr('d'); expect(path0).toBeDefined(); return Plotly.restyle(gd, 'whiskerwidth', 0.2); }) .then(function() { - expect(d3.select('path.box').attr('d')).not.toEqual(path0); + expect(d3Select('path.box').attr('d')).not.toEqual(path0); }) .then(done, done.fail); }); @@ -972,7 +973,7 @@ describe('finance charts updates:', function() { var tickLen = gd.calcdata[0][0].t.tickLen; expect(tickLen) .toBe(exp.tickLen, 'tickLen val in calcdata - ' + msg); - var pathd = d3.select(gd).select('.ohlc > path').attr('d'); + var pathd = d3Select(gd).select('.ohlc > path').attr('d'); expect(pathd) .toBe(exp.pathd, 'path d attr - ' + msg); } @@ -1057,11 +1058,11 @@ describe('finance charts *special* handlers:', function() { var gd = createGraphDiv(); function editText(itemNumber, newText) { - var textNode = d3.selectAll('text.legendtext') + var textNode = d3SelectAll('text.legendtext') .filter(function(_, i) { return i === itemNumber; }).node(); textNode.dispatchEvent(new window.MouseEvent('click')); - var editNode = d3.select('.plugin-editable.editable').node(); + var editNode = d3Select('.plugin-editable.editable').node(); editNode.dispatchEvent(new window.FocusEvent('focus')); editNode.textContent = newText; diff --git a/test/jasmine/tests/funnel_test.js b/test/jasmine/tests/funnel_test.js index 2467a3a859a..c7d10c7c3b5 100644 --- a/test/jasmine/tests/funnel_test.js +++ b/test/jasmine/tests/funnel_test.js @@ -20,7 +20,8 @@ var checkTextTemplate = require('../assets/check_texttemplate'); var checkTransition = require('../assets/check_transitions'); var Fx = require('@src/components/fx'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var FUNNEL_TEXT_SELECTOR = '.bars .bartext'; @@ -620,7 +621,7 @@ describe('A funnel plot', function() { function assertTextFontColors(expFontColors, label) { return function() { - var selection = d3.selectAll(FUNNEL_TEXT_SELECTOR); + var selection = d3SelectAll(FUNNEL_TEXT_SELECTOR); expect(selection.size()).toBe(expFontColors.length); selection.each(function(d, i) { @@ -956,7 +957,7 @@ describe('A funnel plot', function() { it('should be able to add/remove connector line nodes on restyle', function(done) { function _assertNumberOfFunnelConnectorNodes(cnt) { - var sel = d3.select(gd).select('.funnellayer').selectAll('.line'); + var sel = d3Select(gd).select('.funnellayer').selectAll('.line'); expect(sel.size()).toBe(cnt); } @@ -998,7 +999,7 @@ describe('A funnel plot', function() { it('should be able to add/remove connector region nodes on restyle', function(done) { function _assertNumberOfFunnelConnectorNodes(cnt) { - var sel = d3.select(gd).select('.funnellayer').selectAll('.region'); + var sel = d3Select(gd).select('.funnellayer').selectAll('.region'); expect(sel.size()).toBe(cnt); } @@ -1188,7 +1189,7 @@ describe('A funnel plot', function() { it('should be able to add/remove text node on restyle', function(done) { function _assertNumberOfFunnelTextNodes(cnt) { - var sel = d3.select(gd).select('.funnellayer').selectAll('text'); + var sel = d3Select(gd).select('.funnellayer').selectAll('text'); expect(sel.size()).toBe(cnt); } @@ -1408,7 +1409,7 @@ describe('funnel hover', function() { Plotly.newPlot(gd, mock) .then(_hover) .then(function() { - expect(d3.selectAll('g.hovertext').size()).toBe(0); + expect(d3SelectAll('g.hovertext').size()).toBe(0); }) .then(done, done.fail); }); @@ -1652,7 +1653,7 @@ describe('funnel uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(FUNNEL_TEXT_SELECTOR); + var selection = d3SelectAll(FUNNEL_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); diff --git a/test/jasmine/tests/funnelarea_test.js b/test/jasmine/tests/funnelarea_test.js index 1e35bec532a..2afb934e434 100644 --- a/test/jasmine/tests/funnelarea_test.js +++ b/test/jasmine/tests/funnelarea_test.js @@ -1,7 +1,8 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -176,11 +177,11 @@ describe('Funnelarea traces', function() { expect(this.style.stroke.replace(/\s/g, '')).toBe('rgb(100,100,100)'); expect(this.style.strokeOpacity).toBe('0.7'); } - var slices = d3.selectAll(SLICES_SELECTOR); + var slices = d3SelectAll(SLICES_SELECTOR); slices.each(checkPath); expect(slices.size()).toBe(5); - var legendEntries = d3.selectAll(LEGEND_ENTRIES_SELECTOR); + var legendEntries = d3SelectAll(LEGEND_ENTRIES_SELECTOR); legendEntries.each(checkPath); expect(legendEntries.size()).toBe(5); }) @@ -215,7 +216,7 @@ describe('Funnelarea traces', function() { function _checkSliceColors(colors) { return function() { - d3.select(gd).selectAll(SLICES_SELECTOR).each(function(d, i) { + d3Select(gd).selectAll(SLICES_SELECTOR).each(function(d, i) { expect(this.style.fill.replace(/(\s|rgb\(|\))/g, '')).toBe(colors[i], i); }); }; @@ -223,7 +224,7 @@ describe('Funnelarea traces', function() { function _checkFontColors(expFontColors) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fill).toBe(rgb(expFontColors[i]), 'fill color of ' + i); }); }; @@ -231,7 +232,7 @@ describe('Funnelarea traces', function() { function _checkFontFamilies(expFontFamilies) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fontFamily).toBe(expFontFamilies[i], 'fontFamily of ' + i); }); }; @@ -239,7 +240,7 @@ describe('Funnelarea traces', function() { function _checkFontSizes(expFontSizes) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fontSize).toBe(expFontSizes[i] + 'px', 'fontSize of ' + i); }); }; @@ -281,10 +282,10 @@ describe('Funnelarea traces', function() { function _verifyTitle(checkLeft, checkRight, checkTop, checkBottom, checkMiddleX) { return function() { - var title = d3.selectAll('.titletext text'); + var title = d3SelectAll('.titletext text'); expect(title.size()).toBe(1); - var titleBox = d3.select('g.titletext').node().getBoundingClientRect(); - var funnelareaBox = d3.select('g.trace').node().getBoundingClientRect(); + var titleBox = d3Select('g.titletext').node().getBoundingClientRect(); + var funnelareaBox = d3Select('g.trace').node().getBoundingClientRect(); // check that margins agree. we leave an error margin of 2. if(checkLeft) expect(Math.abs(titleBox.left - funnelareaBox.left)).toBeLessThan(2); if(checkRight) expect(Math.abs(titleBox.right - funnelareaBox.right)).toBeLessThan(2); @@ -393,10 +394,10 @@ describe('Funnelarea traces', function() { .then(function() { var expWidths = ['3', '0', '0']; - d3.selectAll(SLICES_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_SELECTOR).each(function(d, i) { expect(this.style.strokeWidth).toBe(expWidths[d.pointNumber], 'sector #' + i); }); - d3.selectAll(LEGEND_ENTRIES_SELECTOR).each(function(d, i) { + d3SelectAll(LEGEND_ENTRIES_SELECTOR).each(function(d, i) { expect(this.style.strokeWidth).toBe(expWidths[d[0].i], 'item #' + i); }); }) @@ -537,7 +538,7 @@ describe('Funnelarea traces', function() { }); function _assertTitle(msg, expText, expColor) { - var title = d3.select('.titletext > text'); + var title = d3Select('.titletext > text'); expect(title.text()).toBe(expText, msg + ' text'); expect(title.node().style.fill).toBe(expColor, msg + ' color'); } @@ -643,7 +644,7 @@ describe('Funnelarea traces', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.funnelarealayer'); + var layer = d3Select(gd).select('.funnelarealayer'); expect(layer.selectAll('.trace').size()).toBe(exp, msg); }; } @@ -837,7 +838,7 @@ describe('funnelarea hovering', function() { assertHoverLabelContent({nums: content}, msg); if(style) { - assertHoverLabelStyle(d3.select('.hovertext'), { + assertHoverLabelStyle(d3Select('.hovertext'), { bgcolor: style[0], bordercolor: style[1], fontSize: style[2], @@ -1288,7 +1289,7 @@ describe('funnelarea relayout', function() { return Plotly.relayout(gd, 'colorway', relayoutColors); }) .then(function() { - var slices = d3.selectAll(SLICES_SELECTOR); + var slices = d3SelectAll(SLICES_SELECTOR); slices.each(checkRelayoutColor); }) .then(done, done.fail); @@ -1304,7 +1305,7 @@ describe('Test funnelarea interactions edge cases:', function() { function _mouseEvent(type, v) { return function() { - var el = d3.select(gd).select('.slice:nth-child(' + v + ')').node(); + var el = d3Select(gd).select('.slice:nth-child(' + v + ')').node(); mouseEvent(type, 0, 0, {element: el}); }; } @@ -1328,7 +1329,7 @@ describe('Test funnelarea interactions edge cases:', function() { expect(hoverCnt).toBe(exp.hoverCnt, msg + ' - hover cnt'); expect(unhoverCnt).toBe(exp.unhoverCnt, msg + ' - unhover cnt'); - var label = d3.select(gd).select('g.hovertext'); + var label = d3Select(gd).select('g.hovertext'); expect(label.size()).toBe(exp.hoverLabel, msg + ' - hover label cnt'); hoverCnt = 0; @@ -1755,7 +1756,7 @@ describe('funnelarea uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); diff --git a/test/jasmine/tests/fx_test.js b/test/jasmine/tests/fx_test.js index a2566ed89d9..7caf1c10037 100644 --- a/test/jasmine/tests/fx_test.js +++ b/test/jasmine/tests/fx_test.js @@ -1,6 +1,7 @@ var Plotly = require('@lib/index'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var supplyAllDefaults = require('../assets/supply_defaults'); @@ -223,8 +224,8 @@ describe('relayout', function() { it('should update main drag with correct', function(done) { function assertMainDrag(cursor, isActive) { - expect(d3.selectAll('rect.nsewdrag').size()).toEqual(1, 'number of nodes'); - var mainDrag = d3.select('rect.nsewdrag'); + expect(d3SelectAll('rect.nsewdrag').size()).toEqual(1, 'number of nodes'); + var mainDrag = d3Select('rect.nsewdrag'); var node = mainDrag.node(); expect(window.getComputedStyle(node).cursor).toBe(cursor, 'cursor ' + cursor); diff --git a/test/jasmine/tests/geo_test.js b/test/jasmine/tests/geo_test.js index 4090b17327d..268ce55a126 100644 --- a/test/jasmine/tests/geo_test.js +++ b/test/jasmine/tests/geo_test.js @@ -8,6 +8,8 @@ var geoLocationUtils = require('@src/lib/geo_location_utils'); var topojsonUtils = require('@src/lib/topojson_utils'); var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -817,15 +819,15 @@ describe('Test geo interactions', function() { } function countTraces(type) { - return d3.selectAll('g.trace.' + type).size(); + return d3SelectAll('g.trace.' + type).size(); } function countGeos() { - return d3.select('g.geolayer').selectAll('.geo').size(); + return d3Select('g.geolayer').selectAll('.geo').size(); } function countColorBars() { - return d3.select('g.infolayer').selectAll('.cbbg').size(); + return d3Select('g.infolayer').selectAll('.cbbg').size(); } beforeEach(function(done) { @@ -1143,25 +1145,25 @@ describe('Test geo interactions', function() { }); function countScatterGeoLines() { - return d3.selectAll('g.trace.scattergeo') + return d3SelectAll('g.trace.scattergeo') .selectAll('path.js-line') .size(); } function countScatterGeoMarkers() { - return d3.selectAll('g.trace.scattergeo') + return d3SelectAll('g.trace.scattergeo') .selectAll('path.point') .size(); } function countScatterGeoTextGroups() { - return d3.selectAll('g.trace.scattergeo') + return d3SelectAll('g.trace.scattergeo') .selectAll('g') .size(); } function countScatterGeoTextNodes() { - return d3.selectAll('g.trace.scattergeo') + return d3SelectAll('g.trace.scattergeo') .selectAll('g') .select('text') .size(); @@ -1169,13 +1171,13 @@ describe('Test geo interactions', function() { function checkScatterGeoOrder() { var order = ['js-path', 'point', null]; - var nodes = d3.selectAll('g.trace.scattergeo'); + var nodes = d3SelectAll('g.trace.scattergeo'); nodes.each(function() { var list = []; - d3.select(this).selectAll('*').each(function() { - var className = d3.select(this).attr('class'); + d3Select(this).selectAll('*').each(function() { + var className = d3Select(this).attr('class'); list.push(className); }); @@ -1188,7 +1190,7 @@ describe('Test geo interactions', function() { } function countChoroplethPaths() { - return d3.selectAll('g.trace.choropleth') + return d3SelectAll('g.trace.choropleth') .selectAll('path.choroplethlocation') .size(); } @@ -1346,7 +1348,7 @@ describe('Test geo interactions', function() { Plotly.newPlot(gd, fig).then(function() { mouseEvent('mousemove', 350, 250); - expect(d3.selectAll('g.hovertext').size()).toEqual(1); + expect(d3SelectAll('g.hovertext').size()).toEqual(1); }) .then(done, done.fail); }); @@ -1356,7 +1358,7 @@ describe('Test geo interactions', function() { var fig = Lib.extendDeep({}, require('@mocks/geo_orthographic.json')); function _assert(msg, hoverLabelCnt) { - expect(d3.selectAll('g.hovertext').size()) + expect(d3SelectAll('g.hovertext').size()) .toBe(hoverLabelCnt, msg); } @@ -1404,7 +1406,7 @@ describe('Test geo interactions', function() { var invert = gd._fullLayout.geo._subplot.projection.invert; var lonlat = invert(p); - expect(d3.selectAll('g.hovertext').size()) + expect(d3SelectAll('g.hovertext').size()) .toBe(hoverLabelCnt, 'for ' + lonlat); Lib.clearThrottle(); @@ -1487,7 +1489,7 @@ describe('Test geo interactions', function() { var px = projection(lonlat); mouseEvent('mousemove', px[0], px[1]); - expect(d3.selectAll('g.hovertext').size()).toBe(hoverLabelCnt, msg); + expect(d3SelectAll('g.hovertext').size()).toBe(hoverLabelCnt, msg); Lib.clearThrottle(); } @@ -2003,7 +2005,7 @@ describe('Test geo base layers', function() { expect(Object.keys(subplot.layers).length).toEqual(layers.length, '# of layers'); - d3.select(gd).selectAll('.geo > .layer').each(function(d, i) { + d3Select(gd).selectAll('.geo > .layer').each(function(d, i) { expect(d).toBe(layers[i], 'layer ' + d + ' at position ' + i); }); } @@ -2050,7 +2052,7 @@ describe('Test geo base layers', function() { it('should be able to relayout axis grid *tick0* / *dtick*', function(done) { function findGridPath(axisName) { - return d3.select(gd).select(axisName + ' > path').attr('d'); + return d3Select(gd).select(axisName + ' > path').attr('d'); } function first(parts) { diff --git a/test/jasmine/tests/gl2d_click_test.js b/test/jasmine/tests/gl2d_click_test.js index 47e9bd75474..14c61c0db42 100644 --- a/test/jasmine/tests/gl2d_click_test.js +++ b/test/jasmine/tests/gl2d_click_test.js @@ -1,7 +1,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -151,7 +151,7 @@ describe('Test hover and click interactions', function() { .then(function(eventData) { assertEventData(eventData, expected, opts.msg); - var g = d3.select('g.hovertext'); + var g = d3Select('g.hovertext'); if(g.node() === null) { expect(expected.noHoverLabel).toBe(true); } else { diff --git a/test/jasmine/tests/gl2d_plot_interact_test.js b/test/jasmine/tests/gl2d_plot_interact_test.js index 156cd063ead..40a7cff9aef 100644 --- a/test/jasmine/tests/gl2d_plot_interact_test.js +++ b/test/jasmine/tests/gl2d_plot_interact_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); @@ -14,7 +15,7 @@ var selectButton = require('../assets/modebar_button'); var delay = require('../assets/delay'); function countCanvases() { - return d3.selectAll('canvas').size(); + return d3SelectAll('canvas').size(); } describe('Test removal of gl contexts', function() { @@ -126,7 +127,7 @@ describe('Test gl plot side effects', function() { it('@gl should be able to replot from a blank graph', function(done) { function countCanvases(cnt) { - var nodes = d3.selectAll('canvas'); + var nodes = d3SelectAll('canvas'); expect(nodes.size()).toEqual(cnt); } @@ -179,12 +180,12 @@ describe('Test gl plot side effects', function() { ] }]) .then(function() { - expect(d3.selectAll('canvas').size()).toEqual(3); + expect(d3SelectAll('canvas').size()).toEqual(3); return Plotly.restyle(gd, 'type', 'scatter'); }) .then(function() { - expect(d3.selectAll('canvas').size()).toEqual(0); + expect(d3SelectAll('canvas').size()).toEqual(0); }) .then(done, done.fail); }); @@ -312,19 +313,19 @@ describe('Test gl plot side effects', function() { }]) .then(function() { expect(countCanvases()).toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); return Plotly.restyle(gd, 'type', 'scattergl'); }) .then(function() { expect(countCanvases()).toBe(3); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(0); return Plotly.restyle(gd, 'type', 'scatter'); }) .then(function() { expect(countCanvases()).toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); }) .then(done, done.fail); }); @@ -334,7 +335,7 @@ describe('Test gl plot side effects', function() { Plotly.newPlot(gd, fig).then(function() { var cnt = 0; - d3.select(gd).selectAll('canvas').each(function(d) { + d3Select(gd).selectAll('canvas').each(function(d) { if(d.regl) cnt++; }); expect(cnt).toBe(2); @@ -392,7 +393,7 @@ describe('Test gl2d plot interactions:', function() { }); function mouseTo(p0, p1) { - var node = d3.select('.nsewdrag[data-subplot="xy"]').node(); + var node = d3Select('.nsewdrag[data-subplot="xy"]').node(); var dx = p1[0] - p0[0]; var dy = p1[1] - p0[1]; return drag({node: node, dpos: [dx, dy], pos0: p0}); @@ -623,7 +624,7 @@ describe('Test gl2d plot interactions:', function() { it('@gl data-referenced annotations should update on drag', function(done) { function assertAnnotation(xy) { - var ann = d3.select('g.annotation-text-g').select('g'); + var ann = d3Select('g.annotation-text-g').select('g'); var translate = Drawing.getTranslate(ann); expect(translate.x).toBeWithin(xy[0], 8); diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 8a200302bd5..c1c7e9504ef 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -1,7 +1,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -149,7 +149,7 @@ describe('Test gl3d trace click/hover:', function() { 'marker.color': 'blue', 'marker.line.color': 'black' }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(0, 0, 255)', bordercolor: 'rgb(255, 255, 255)', fontSize: 13, @@ -223,7 +223,7 @@ describe('Test gl3d trace click/hover:', function() { .then(_hover) .then(delay(20)) .then(function() { - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 0, 0)', bordercolor: 'rgb(255, 255, 255)', fontSize: 20, @@ -241,7 +241,7 @@ describe('Test gl3d trace click/hover:', function() { .then(_hover) .then(delay(20)) .then(function() { - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 0, 0)', bordercolor: 'rgb(255, 255, 0)', fontSize: 20, @@ -255,7 +255,7 @@ describe('Test gl3d trace click/hover:', function() { .then(_hover) .then(delay(20)) .then(function() { - var label = d3.selectAll('g.hovertext'); + var label = d3SelectAll('g.hovertext'); expect(label.size()).toEqual(1); expect(label.select('text').text()).toEqual('x: 二 4, 2017y: az: 10Apple'); @@ -316,7 +316,7 @@ describe('Test gl3d trace click/hover:', function() { .then(function() { assertHoverText('x: 0.2', 'y: 2', 'z: 1,001.25'); assertEventData(0.2, 2, 1001.25, 0, [1, 2]); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(68, 68, 68)', bordercolor: 'rgb(255, 255, 255)', fontSize: 13, @@ -347,7 +347,7 @@ describe('Test gl3d trace click/hover:', function() { .then(function() { assertHoverText('x: 1', 'y: 2', 'z: 43', 'one two'); assertEventData(1, 2, 43, 0, [1, 2]); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(68, 68, 68)', bordercolor: 'rgb(255, 255, 255)', fontSize: 13, @@ -378,7 +378,7 @@ describe('Test gl3d trace click/hover:', function() { 'hoverinfo': 'y', 'hoverlabel.font.color': 'cyan' }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 255, 255)', bordercolor: 'rgb(68, 68, 68)', fontSize: 9, @@ -386,7 +386,7 @@ describe('Test gl3d trace click/hover:', function() { fontColor: 'rgb(0, 255, 255)' }, 'restyle'); - var label = d3.selectAll('g.hovertext'); + var label = d3SelectAll('g.hovertext'); expect(label.size()).toEqual(1); expect(label.select('text').text()).toEqual('2'); @@ -983,7 +983,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 'red' }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 0, 0)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1003,7 +1003,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': [0, 255, 0] }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(0, 255, 0)', bordercolor: 'rgb(68, 68, 68)', fontColor: 'rgb(68, 68, 68)', @@ -1023,7 +1023,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 'rgba(0,0,255,0.5)' }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(0, 0, 255)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1043,7 +1043,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': orange }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 127, 0)', bordercolor: 'rgb(68, 68, 68)', fontColor: 'rgb(68, 68, 68)', @@ -1063,7 +1063,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 'yellow' }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(255, 255, 0)', bordercolor: 'rgb(68, 68, 68)', fontColor: 'rgb(68, 68, 68)', @@ -1083,7 +1083,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': undefined }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(68, 68, 68)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1154,7 +1154,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 2 }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(217, 30, 30)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1174,7 +1174,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 1 }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(242, 143, 56)', bordercolor: 'rgb(68, 68, 68)', fontColor: 'rgb(68, 68, 68)', @@ -1194,7 +1194,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': 0 }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(242, 211, 56)', bordercolor: 'rgb(68, 68, 68)', fontColor: 'rgb(68, 68, 68)', @@ -1214,7 +1214,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': -1 }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(10, 136, 186)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1234,7 +1234,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': -2 }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(12, 51, 131)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', @@ -1254,7 +1254,7 @@ describe('Test gl3d trace click/hover:', function() { } : { 'line.color': undefined }); - assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + assertHoverLabelStyle(d3SelectAll('g.hovertext'), { bgcolor: 'rgb(68, 68, 68)', bordercolor: 'rgb(255, 255, 255)', fontColor: 'rgb(255, 255, 255)', diff --git a/test/jasmine/tests/gl3d_plot_interact_test.js b/test/jasmine/tests/gl3d_plot_interact_test.js index 3099e7f9b2f..92913a5c769 100644 --- a/test/jasmine/tests/gl3d_plot_interact_test.js +++ b/test/jasmine/tests/gl3d_plot_interact_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); @@ -1725,24 +1726,24 @@ describe('Test gl3d annotations', function() { }); function assertAnnotationText(expectations, msg) { - var anns = d3.selectAll('g.annotation-text-g'); + var anns = d3SelectAll('g.annotation-text-g'); expect(anns.size()).toBe(expectations.length, msg); anns.each(function(_, i) { - var tx = d3.select(this).select('text').text(); + var tx = d3Select(this).select('text').text(); expect(tx).toEqual(expectations[i], msg + ' - ann ' + i); }); } function assertAnnotationsXY(expectations, msg) { var TOL = 2.5; - var anns = d3.selectAll('g.annotation-text-g'); + var anns = d3SelectAll('g.annotation-text-g'); expect(anns.size()).toBe(expectations.length, msg); anns.each(function(_, i) { - var ann = d3.select(this).select('g'); + var ann = d3Select(this).select('g'); var translate = Drawing.getTranslate(ann); expect(translate.x).toBeWithin(expectations[i][0], TOL, msg + ' - ann ' + i + ' x'); @@ -1885,7 +1886,7 @@ describe('Test gl3d annotations', function() { it('@gl should work across multiple scenes', function(done) { function assertAnnotationCntPerScene(id, cnt) { - expect(d3.selectAll('g.annotation-' + id).size()).toEqual(cnt); + expect(d3SelectAll('g.annotation-' + id).size()).toEqual(cnt); } Plotly.newPlot(gd, [{ @@ -1976,10 +1977,10 @@ describe('Test gl3d annotations', function() { setTimeout(resolve, 0); }); - var clickNode = d3.select('g.annotation-text-g').select('g').node(); + var clickNode = d3Select('g.annotation-text-g').select('g').node(); clickNode.dispatchEvent(new window.MouseEvent('click')); - var editNode = d3.select('.plugin-editable.editable').node(); + var editNode = d3Select('.plugin-editable.editable').node(); editNode.dispatchEvent(new window.FocusEvent('focus')); editNode.textContent = newText; @@ -2035,7 +2036,7 @@ describe('Test gl3d annotations', function() { it('@gl should display hover labels and trigger *plotly_clickannotation* event', function(done) { function dispatch(eventType) { - var target = d3.select('g.annotation-text-g').select('g').node(); + var target = d3Select('g.annotation-text-g').select('g').node(); target.dispatchEvent(new MouseEvent(eventType)); } @@ -2062,7 +2063,7 @@ describe('Test gl3d annotations', function() { }) .then(function() { dispatch('mouseover'); - expect(d3.select('.hovertext').size()).toEqual(1); + expect(d3Select('.hovertext').size()).toEqual(1); }) .then(function() { return new Promise(function(resolve, reject) { diff --git a/test/jasmine/tests/heatmap_test.js b/test/jasmine/tests/heatmap_test.js index 43a44304931..5325c55753e 100644 --- a/test/jasmine/tests/heatmap_test.js +++ b/test/jasmine/tests/heatmap_test.js @@ -6,7 +6,8 @@ var setConvert = require('@src/plots/cartesian/set_convert'); var convertColumnXYZ = require('@src/traces/heatmap/convert_column_xyz'); var Heatmap = require('@src/traces/heatmap'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var supplyAllDefaults = require('../assets/supply_defaults'); @@ -672,7 +673,7 @@ describe('heatmap plot', function() { var mockCopy = Lib.extendDeep({}, mock); function assertImageCnt(cnt) { - var images = d3.selectAll('.hm image'); + var images = d3SelectAll('.hm image'); expect(images.size()).toEqual(cnt); } @@ -694,7 +695,7 @@ describe('heatmap plot', function() { it('keeps the correct ordering after hide and show', function(done) { function getIndices() { var out = []; - d3.selectAll('.hm image').each(function(d) { out.push(d.trace.index); }); + d3SelectAll('.hm image').each(function(d) { out.push(d.trace.index); }); return out; } @@ -725,7 +726,7 @@ describe('heatmap plot', function() { var mockCopy = Lib.extendDeep({}, mock); function getImageURL() { - return d3.select('.hm > image').attr('href'); + return d3Select('.hm > image').attr('href'); } var imageURLs = []; diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 466c8331982..f98b9af9f5c 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Fx = require('@src/components/fx'); @@ -210,12 +211,12 @@ describe('hover info', function() { expect(hoverTrace.y).toBe(1); expect(hoverTrace.text).toBe(0); - var txs = d3.select(gd).selectAll('.textpoint text'); + var txs = d3Select(gd).selectAll('.textpoint text'); expect(txs.size()).toBe(1); txs.each(function() { - expect(d3.select(this).text()).toBe('0'); + expect(d3Select(this).text()).toBe('0'); }); assertHoverLabelContent({ @@ -951,8 +952,8 @@ describe('hover info', function() { fontFamily: 'Arial', fontColor: 'rgb(68, 68, 68)' }]; - d3.selectAll('g.hovertext').each(function(_, i) { - assertHoverLabelStyle(d3.select(this), styles[i]); + d3SelectAll('g.hovertext').each(function(_, i) { + assertHoverLabelStyle(d3Select(this), styles[i]); }); }) .then(done, done.fail); @@ -1514,7 +1515,7 @@ describe('hover info', function() { }); function labelCount() { - return d3.select(gd).selectAll('g.hovertext').size(); + return d3Select(gd).selectAll('g.hovertext').size(); } it('shows as many labels as will fit on the div, not on the subplot', function(done) { @@ -1539,8 +1540,8 @@ describe('hover info', function() { beforeEach(function() { gd = createGraphDiv(); }); function hoverInfoNodes(traceName) { - var g = d3.selectAll('g.hoverlayer g.hovertext').filter(function() { - return !d3.select(this).select('[data-unformatted="' + traceName + '"]').empty(); + var g = d3SelectAll('g.hoverlayer g.hovertext').filter(function() { + return !d3Select(this).select('[data-unformatted="' + traceName + '"]').empty(); }); return { @@ -1744,7 +1745,7 @@ describe('hover info', function() { it('hovermode:x common label should fit in the graph div width', function(done) { function _assert(msg, exp) { return function() { - var label = d3.select('g.axistext'); + var label = d3Select('g.axistext'); if(label.node()) { expect(label.text()).toBe(exp.txt, 'common label text| ' + msg); expect(Drawing.getTranslate(label).x) @@ -1787,7 +1788,7 @@ describe('hover info', function() { it('hovermode:y common label should shift and clip text start into graph div', function(done) { function _assert(msg, exp) { return function() { - var label = d3.select('g.axistext'); + var label = d3Select('g.axistext'); if(label.node()) { var ltext = label.select('text'); expect(ltext.text()).toBe(exp.txt, 'common label text| ' + msg); @@ -1797,14 +1798,14 @@ describe('hover info', function() { var fullLayout = gd._fullLayout; var clipId = 'clip' + fullLayout._uid + 'commonlabely'; - var clipPath = d3.select('#' + clipId); + var clipPath = d3Select('#' + clipId); negateIf(exp.clip, expect(clipPath.node())).toBe(null, 'text clip path|' + msg); if(exp.tspanX) { var tspans = label.selectAll('tspan'); if(tspans.size()) { tspans.each(function(d, i) { - var s = d3.select(this); + var s = d3Select(this); expect(s.attr('x')).toBeWithin(exp.tspanX[i], 5, i + '- tspan shift| ' + msg); }); } else { @@ -2114,7 +2115,7 @@ describe('hover info', function() { var gd = createGraphDiv(); function _assert(msg, exp) { - var tx = d3.select('g.hovertext').select('text'); + var tx = d3Select('g.hovertext').select('text'); expect(tx.attr('text-anchor')).toBe(exp.textAnchor, 'text anchor|' + msg); expect(Number(tx.attr('x'))).toBeWithin(exp.posX, 3, 'x position|' + msg); } @@ -2161,7 +2162,7 @@ describe('hover info', function() { var gd = createGraphDiv(); function _assert(msg, exp) { - var tx = d3.select('g.hovertext').select('text.nums'); + var tx = d3Select('g.hovertext').select('text.nums'); expect(tx.attr('text-anchor')).toBe(exp.textAnchor, 'text anchor|' + msg); expect(Number(tx.attr('x'))).toBeWithin(exp.posX, 3, 'x position|' + msg); delete gd._hoverdata; @@ -2252,7 +2253,7 @@ describe('hover info on stacked subplots', function() { // ensure the hover label bounding boxes don't overlap, except a little margin of 5 px // testing #2370 var bBoxes = []; - d3.selectAll('g.hovertext').each(function() { + d3SelectAll('g.hovertext').each(function() { bBoxes.push(this.getBoundingClientRect()); }); expect(bBoxes.length).toBe(2); @@ -2351,8 +2352,8 @@ describe('hover on many lines+bars', function() { mouseEvent('mousemove', 200, 100); Lib.clearThrottle(); - expect(d3.select(gd).selectAll('g.hovertext').size()).toBe(2); - expect(d3.select(gd).selectAll('g.axistext').size()).toBe(1); + expect(d3Select(gd).selectAll('g.hovertext').size()).toBe(2); + expect(d3Select(gd).selectAll('g.axistext').size()).toBe(1); }) .then(done, done.fail); }); @@ -2453,7 +2454,7 @@ describe('hover on fill', function() { Lib.clearThrottle(); mouseEvent('mousemove', mousePos[0], mousePos[1]); - var hoverText = d3.selectAll('g.hovertext'); + var hoverText = d3SelectAll('g.hovertext'); expect(hoverText.size()).toEqual(1); expect(hoverText.text()).toEqual(labelText); @@ -3472,7 +3473,7 @@ describe('hover updates', function() { mouseEvent('mousemove', mousePos[0], mousePos[1]); } - var hoverText = d3.selectAll('g.hovertext'); + var hoverText = d3SelectAll('g.hovertext'); if(labelPos) { expect(hoverText.size()).toBe(1, msg); expect(hoverText.text()).toBe(labelText, msg); @@ -3637,7 +3638,7 @@ describe('Test hover label custom styling:', function() { afterEach(destroyGraphDiv); function assertLabel(className, expectation) { - var g = d3.select('g.' + className); + var g = d3Select('g.' + className); if(expectation === null) { expect(g.size()).toBe(0); @@ -3839,7 +3840,7 @@ describe('Test hover label custom styling:', function() { var gd = createGraphDiv(); function assertNameLabel(expectation) { - var g = d3.selectAll('g.hovertext > text.name'); + var g = d3SelectAll('g.hovertext > text.name'); if(expectation === null) { expect(g.size()).toBe(0); @@ -4517,12 +4518,12 @@ describe('hovermode: (x|y)unified', function() { } function getHoverLabel() { - var hoverLayer = d3.select('g.hoverlayer'); + var hoverLayer = d3Select('g.hoverlayer'); return hoverLayer.select('g.legend'); } function assertElementCount(selector, size) { - var g = d3.selectAll(selector); + var g = d3SelectAll(selector); expect(g.size()).toBe(size); } @@ -4537,7 +4538,7 @@ describe('hovermode: (x|y)unified', function() { expect(traces.size()).toBe(expectation.items.length, 'has the incorrect number of items'); traces.each(function(_, i) { - var e = d3.select(this); + var e = d3Select(this); expect(e.select('text').text()).toBe(expectation.items[i]); }); } @@ -4555,9 +4556,9 @@ describe('hovermode: (x|y)unified', function() { expect(traces.size()).toBe(exp.length); traces.each(function(d, i) { - var pts = d3.select(this).selectAll('g.legendpoints path'); + var pts = d3Select(this).selectAll('g.legendpoints path'); pts.each(function() { - var node = d3.select(this).node(); + var node = d3Select(this).node(); expect(node.style.fill).toBe(exp[i][0], 'wrong fill for point ' + i); expect(node.style.strokeWidth).toBe(exp[i][1], 'wrong stroke-width for point ' + i); expect(node.style.stroke).toBe(exp[i][2], 'wrong stroke for point ' + i); diff --git a/test/jasmine/tests/hover_spikeline_test.js b/test/jasmine/tests/hover_spikeline_test.js index b8de3d88c25..7553721eef7 100644 --- a/test/jasmine/tests/hover_spikeline_test.js +++ b/test/jasmine/tests/hover_spikeline_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Fx = require('@src/components/fx'); @@ -47,14 +48,14 @@ describe('spikeline hover', function() { function _assert(lineExpect, circleExpect) { var TOL = 5; - var lines = d3.selectAll('line.spikeline'); - var circles = d3.selectAll('circle.spikeline'); + var lines = d3SelectAll('line.spikeline'); + var circles = d3SelectAll('circle.spikeline'); expect(lines.size()).toBe(lineExpect.length * 2, '# of line nodes'); expect(circles.size()).toBe(circleExpect.length, '# of circle nodes'); lines.each(function(_, i) { - var sel = d3.select(this); + var sel = d3Select(this); ['x1', 'y1', 'x2', 'y2'].forEach(function(d, j) { expect(sel.attr(d)) // we always have 2 lines with identical coords @@ -63,7 +64,7 @@ describe('spikeline hover', function() { }); circles.each(function(_, i) { - var sel = d3.select(this); + var sel = d3Select(this); ['cx', 'cy'].forEach(function(d, j) { expect(sel.attr(d)) .toBeWithin(circleExpect[i][j], TOL, 'circle ' + i + ' attr ' + d); @@ -428,12 +429,12 @@ describe('spikeline hover', function() { Plotly.newPlot(gd, mockCopy) .then(function() { _hover({xpx: 600, ypx: 400}); - var lines = d3.selectAll('line.spikeline'); + var lines = d3SelectAll('line.spikeline'); expect(lines.size()).toBe(4); expect(lines[0][1].getAttribute('stroke')).toBe('#2ca02c'); _hover({xpx: 600, ypx: 200}); - lines = d3.selectAll('line.spikeline'); + lines = d3SelectAll('line.spikeline'); expect(lines.size()).toBe(4); expect(lines[0][1].getAttribute('stroke')).toBe('#1f77b4'); }) @@ -638,7 +639,7 @@ describe('spikeline hover', function() { .then(function() { _hover({xpx: 150, ypx: 250}); - var lines = d3.selectAll('line.spikeline'); + var lines = d3SelectAll('line.spikeline'); expect(lines.size()).toBe(4); expect(lines[0][1].getAttribute('stroke')).toBe('red'); expect(lines[0][3].getAttribute('stroke')).toBe('red'); @@ -748,7 +749,7 @@ describe('spikeline hover', function() { .then(function() { _hover({xpx: 200, ypx: 100}); - var lines = d3.selectAll('line.spikeline'); + var lines = d3SelectAll('line.spikeline'); expect(lines.size()).toBe(4); }) .then(done, done.fail); diff --git a/test/jasmine/tests/image_test.js b/test/jasmine/tests/image_test.js index 6bc780f47d6..37bd07198f4 100644 --- a/test/jasmine/tests/image_test.js +++ b/test/jasmine/tests/image_test.js @@ -4,7 +4,8 @@ var Lib = require('@src/lib'); var Image = require('@src/traces/image'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -257,7 +258,7 @@ describe('image plot', function() { var mockCopy = Lib.extendDeep({}, mock); function assertImageCnt(cnt) { - var images = d3.selectAll(sel); + var images = d3SelectAll(sel); expect(images.size()).toEqual(cnt); } @@ -277,7 +278,7 @@ describe('image plot', function() { }); function getImageURL() { - return d3.select(sel).attr('href'); + return d3Select(sel).attr('href'); } [ @@ -332,20 +333,20 @@ describe('image plot', function() { var x = []; var y = []; Plotly.newPlot(gd, mockCopy).then(function() { - x.push(d3.select(sel).attr('x')); - y.push(d3.select(sel).attr('y')); + x.push(d3Select(sel).attr('x')); + y.push(d3Select(sel).attr('y')); return Plotly.restyle(gd, {x0: 50, y0: 50}); }).then(function() { - x.push(d3.select(sel).attr('x')); - y.push(d3.select(sel).attr('y')); + x.push(d3Select(sel).attr('x')); + y.push(d3Select(sel).attr('y')); expect(x[1]).not.toEqual(x[0], 'image element should have a different x position'); expect(y[1]).not.toEqual(y[0], 'image element should have a different y position'); return Plotly.restyle(gd, {x0: 0, y0: 0}); }).then(function() { - x.push(d3.select(sel).attr('x')); - y.push(d3.select(sel).attr('y')); + x.push(d3Select(sel).attr('x')); + y.push(d3Select(sel).attr('y')); expect(x[2]).not.toEqual(x[1], 'image element should have a different x position (step 2)'); expect(y[2]).not.toEqual(y[1], 'image element should have a different y position (step 2)'); @@ -363,13 +364,13 @@ describe('image plot', function() { Plotly.newPlot(gd, mockCopy).then(function() { return Plotly.restyle(gd, {x0: 50, y0: 50}); }).then(function() { - x.push(d3.select(sel).attr('x')); - y.push(d3.select(sel).attr('y')); + x.push(d3Select(sel).attr('x')); + y.push(d3Select(sel).attr('y')); return Plotly.restyle(gd, {x0: 'A', y0: 'F'}); }).then(function() { - x.push(d3.select(sel).attr('x')); - y.push(d3.select(sel).attr('y')); + x.push(d3Select(sel).attr('x')); + y.push(d3Select(sel).attr('y')); expect(x[1]).toEqual(x[0], 'image element should have same x position'); expect(y[1]).toEqual(y[0], 'image element should have same y position'); }) @@ -379,7 +380,7 @@ describe('image plot', function() { it('keeps the correct ordering after hide and show', function(done) { function getIndices() { var out = []; - d3.selectAll('.im image').each(function(d) { if(d[0].trace) out.push(d[0].trace.index); }); + d3SelectAll('.im image').each(function(d) { if(d[0].trace) out.push(d[0].trace.index); }); return out; } diff --git a/test/jasmine/tests/indicator_test.js b/test/jasmine/tests/indicator_test.js index 358f1ec5977..53924360a29 100644 --- a/test/jasmine/tests/indicator_test.js +++ b/test/jasmine/tests/indicator_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); // var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var delay = require('../assets/delay'); @@ -150,7 +150,7 @@ describe('Indicator plot', function() { describe('numbers', function() { function checkNumbersScale(value, msg) { - var numbers = d3.selectAll('g.numbers'); + var numbers = d3SelectAll('g.numbers'); expect(numbers.length).toBe(1); var transform = numbers.attr('transform'); @@ -227,7 +227,7 @@ describe('Indicator plot', function() { describe('number', function() { function assertContent(txt) { - var sel = d3.selectAll('text.number'); + var sel = d3SelectAll('text.number'); expect(sel.length).toBe(1); expect(sel.text()).toBe(txt); } @@ -280,7 +280,7 @@ describe('Indicator plot', function() { describe('delta', function() { function assertContent(txt) { - var sel = d3.selectAll('text.delta'); + var sel = d3SelectAll('text.delta'); expect(sel.length).toBe(1); expect(sel.text()).toBe(txt); } @@ -368,10 +368,10 @@ describe('Indicator plot', function() { .then(function() { gd.style.display = 'block'; - var t = d3.selectAll('text.title').node(); + var t = d3SelectAll('text.title').node(); var titleBBox = t.getBoundingClientRect(); - var numbers = d3.selectAll('g.numbers').node(); + var numbers = d3SelectAll('g.numbers').node(); var numbersBBox = numbers.getBoundingClientRect(); expect(titleBBox.bottom).toBeCloseTo(numbersBBox.top - cn.titlePadding, 0); @@ -389,10 +389,10 @@ describe('Indicator plot', function() { }]) .then(function() { gd.style.display = 'block'; - var t = d3.selectAll('text.title').node(); + var t = d3SelectAll('text.title').node(); var titleBBox = t.getBoundingClientRect(); - var ax = d3.selectAll('g.angularaxis').node(); + var ax = d3SelectAll('g.angularaxis').node(); var axBBox = ax.getBoundingClientRect(); expect(titleBBox.bottom).toBeCloseTo(axBBox.top - cn.titlePadding, 0); }) @@ -409,10 +409,10 @@ describe('Indicator plot', function() { }]) .then(function() { gd.style.display = 'block'; - var t = d3.selectAll('text.title').node(); + var t = d3SelectAll('text.title').node(); var titleBBox = t.getBoundingClientRect(); - var ax = d3.selectAll('g.bulletaxis').node(); + var ax = d3SelectAll('g.bulletaxis').node(); var axBBox = ax.getBoundingClientRect(); expect(titleBBox.right < axBBox.left).toBe(true); }) @@ -422,7 +422,7 @@ describe('Indicator plot', function() { it('restyle between modes', function(done) { function assertElementCnt(sel, cnt) { - var el = d3.selectAll(sel); + var el = d3SelectAll(sel); expect(el.size()).toBe(cnt, 'selection "' + sel + '" does not have size ' + cnt); } function assertGauge(shape, cnt) { @@ -476,11 +476,11 @@ describe('Indicator plot', function() { it('should draw blank path when value is NaN', function(done) { function getArcPath() { - return d3.selectAll('g.value-arc > path').attr('d'); + return d3SelectAll('g.value-arc > path').attr('d'); } function getBulletRect() { - return d3.selectAll('g.value-bullet > rect').attr('width'); + return d3SelectAll('g.value-bullet > rect').attr('width'); } Plotly.newPlot(gd, [{ diff --git a/test/jasmine/tests/layout_images_test.js b/test/jasmine/tests/layout_images_test.js index 4806bffdda2..f0350fc09bf 100644 --- a/test/jasmine/tests/layout_images_test.js +++ b/test/jasmine/tests/layout_images_test.js @@ -3,7 +3,8 @@ var Plots = require('@src/plots/plots'); var Images = require('@src/components/images'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -167,7 +168,7 @@ describe('Layout images', function() { describe('with anchors and sizing', function() { function testAspectRatio(expected) { - var image = Plotly.d3.select('image'); + var image = d3Select('image'); var parValue = image.attr('preserveAspectRatio'); expect(parValue).toBe(expected); @@ -180,7 +181,7 @@ describe('Layout images', function() { yanchor: 'middle' }]}) .then(function() { - expect(Plotly.d3.select('image').attr('preserveAspectRatio')).toBe('xMidYMid'); + expect(d3Select('image').attr('preserveAspectRatio')).toBe('xMidYMid'); }) .then(done, done.fail); }); @@ -264,7 +265,7 @@ describe('Layout images', function() { width: 600, height: 400 }).then(function() { - var img = Plotly.d3.select('image').node(); + var img = d3Select('image').node(); var oldPos = img.getBoundingClientRect(); mouseEvent('mousedown', 250, 200); @@ -297,7 +298,7 @@ describe('Layout images', function() { width: 600, height: 400 }).then(function() { - var img = Plotly.d3.select('image').node(); + var img = d3Select('image').node(); var oldPos = img.getBoundingClientRect(); mouseEvent('mousedown', 250, 200); @@ -361,12 +362,12 @@ describe('Layout images', function() { }); it('should update the image if changed', function(done) { - var img = Plotly.d3.select('image'); + var img = d3Select('image'); var url = img.attr('xlink:href'); Plotly.relayout(gd, 'images[0].source', pythonLogo) .then(function() { - var newImg = Plotly.d3.select('image'); + var newImg = d3Select('image'); var newUrl = newImg.attr('xlink:href'); expect(url).not.toBe(newUrl); }) @@ -379,25 +380,25 @@ describe('Layout images', function() { 'images[0].y': 1 }; - var img = Plotly.d3.select('image'); + var img = d3Select('image'); expect([+img.attr('x'), +img.attr('y')]).toEqual([760, -120]); Plotly.relayout(gd, update) .then(function() { - var newImg = Plotly.d3.select('image'); + var newImg = d3Select('image'); expect([+newImg.attr('x'), +newImg.attr('y')]).toEqual([80, 100]); }) .then(done, done.fail); }); it('should remove the image tag if an invalid source', function(done) { - var selection = Plotly.d3.select('image'); + var selection = d3Select('image'); expect(selection.size()).toBe(1); Plotly.relayout(gd, 'images[0].source', 'invalidUrl') .then(function() { - var newSelection = Plotly.d3.select('image'); + var newSelection = d3Select('image'); expect(newSelection.size()).toBe(0); }) .then(done, done.fail); @@ -423,7 +424,7 @@ describe('Layout images', function() { } function assertImages(cnt) { - expect(d3.selectAll('image').size()).toEqual(cnt); + expect(d3SelectAll('image').size()).toEqual(cnt); } Plotly.newPlot(gd, data, layout).then(function() { @@ -523,14 +524,14 @@ describe('images log/linear axis changes', function() { // automatically when you change xref / yref, we leave it to the caller. // initial clip path should end in 'xy' to match xref/yref - expect(d3.select('image').attr('clip-path') || '').toMatch(/xy\'\)$/); + expect(d3Select('image').attr('clip-path') || '').toMatch(/xy\'\)$/); // linear to log Plotly.relayout(gd, {'images[0].yref': 'y2'}) .then(function() { expect(gd.layout.images[0].y).toBe(1); - expect(d3.select('image').attr('clip-path') || '').toMatch(/xy2\'\)$/); + expect(d3Select('image').attr('clip-path') || '').toMatch(/xy2\'\)$/); // log to paper return Plotly.relayout(gd, {'images[0].yref': 'paper'}); @@ -538,13 +539,13 @@ describe('images log/linear axis changes', function() { .then(function() { expect(gd.layout.images[0].y).toBe(1); - expect(d3.select('image').attr('clip-path') || '').toMatch(/x\'\)$/); + expect(d3Select('image').attr('clip-path') || '').toMatch(/x\'\)$/); // change to full paper-referenced, to make sure the clip path disappears return Plotly.relayout(gd, {'images[0].xref': 'paper'}); }) .then(function() { - expect(d3.select('image').attr('clip-path')).toBe(null); + expect(d3Select('image').attr('clip-path')).toBe(null); // paper to log return Plotly.relayout(gd, {'images[0].yref': 'y2'}); @@ -552,7 +553,7 @@ describe('images log/linear axis changes', function() { .then(function() { expect(gd.layout.images[0].y).toBe(1); - expect(d3.select('image').attr('clip-path') || '').toMatch(/^[^x]+y2\'\)$/); + expect(d3Select('image').attr('clip-path') || '').toMatch(/^[^x]+y2\'\)$/); // log to linear return Plotly.relayout(gd, {'images[0].yref': 'y'}); diff --git a/test/jasmine/tests/legend_scroll_test.js b/test/jasmine/tests/legend_scroll_test.js index 563d29cc149..f0171763290 100644 --- a/test/jasmine/tests/legend_scroll_test.js +++ b/test/jasmine/tests/legend_scroll_test.js @@ -4,7 +4,7 @@ var Drawing = require('@src/components/drawing'); var constants = require('@src/components/legend/constants'); var DBLCLICKDELAY = require('@src/plot_api/plot_config').dfltConfig.doubleClickDelay; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraph = require('../assets/create_graph_div'); var destroyGraph = require('../assets/destroy_graph_div'); @@ -31,24 +31,24 @@ describe('The legend', function() { } function getLegendHeight(gd) { - var bg = d3.select('g.legend').select('.bg').node(); + var bg = d3Select('g.legend').select('.bg').node(); return gd._fullLayout.legend.borderwidth + getBBox(bg).height; } function getLegend() { - return d3.select('g.legend').node(); + return d3Select('g.legend').node(); } function getScrollBox() { - return d3.select('g.legend').select('.scrollbox').node(); + return d3Select('g.legend').select('.scrollbox').node(); } function getScrollBar() { - return d3.select('g.legend').select('.scrollbar').node(); + return d3Select('g.legend').select('.scrollbar').node(); } function getToggle() { - return d3.select('g.legend').select('.legendtoggle').node(); + return d3Select('g.legend').select('.legendtoggle').node(); } function getScroll(gd) { diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js index 3ae8bf32fae..a4599f9e6b8 100644 --- a/test/jasmine/tests/legend_test.js +++ b/test/jasmine/tests/legend_test.js @@ -7,7 +7,8 @@ var Legend = require('@src/components/legend'); var getLegendData = require('@src/components/legend/get_legend_data'); var helpers = require('@src/components/legend/helpers'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var failTest = require('../assets/fail_test'); var mouseEvent = require('../assets/mouse_event'); var delay = require('../assets/delay'); @@ -646,23 +647,23 @@ describe('legend relayout update', function() { Plotly.newPlot(gd, mockCopy.data, mockCopy.layout) .then(function() { - expect(d3.selectAll('g.legend').size()).toBe(1); + expect(d3SelectAll('g.legend').size()).toBe(1); // check that the margins changed assertPlotSize({widthLessThan: 400}); return Plotly.relayout(gd, {showlegend: false}); }) .then(function() { - expect(d3.selectAll('g.legend').size()).toBe(0); + expect(d3SelectAll('g.legend').size()).toBe(0); assertPlotSize({width: 400}); return Plotly.relayout(gd, {showlegend: true}); }) .then(function() { - expect(d3.selectAll('g.legend').size()).toBe(1); + expect(d3SelectAll('g.legend').size()).toBe(1); assertPlotSize({widthLessThan: 400}); return Plotly.relayout(gd, {'legend.x': 0.7}); }) .then(function() { - expect(d3.selectAll('g.legend').size()).toBe(1); + expect(d3SelectAll('g.legend').size()).toBe(1); assertPlotSize({width: 400}); }) .then(done, done.fail); @@ -672,7 +673,7 @@ describe('legend relayout update', function() { var mockCopy = Lib.extendDeep({}, require('@mocks/0.json')); function assertLegendStyle(bgColor, borderColor, borderWidth) { - var node = d3.select('g.legend').select('rect').node(); + var node = d3Select('g.legend').select('rect').node(); expect(node.style.fill).toEqual(bgColor); expect(node.style.stroke).toEqual(borderColor); @@ -706,7 +707,7 @@ describe('legend relayout update', function() { describe('should update legend valign', function() { function markerOffsetY() { - var translate = Drawing.getTranslate(d3.select('.legend .traces .layers')); + var translate = Drawing.getTranslate(d3Select('.legend .traces .layers')); return translate.y; } @@ -757,7 +758,7 @@ describe('legend relayout update', function() { function _assert(msg, xy, wh) { return function() { var fullLayout = gd._fullLayout; - var legend3 = d3.select('g.legend'); + var legend3 = d3Select('g.legend'); var bg3 = legend3.select('rect.bg'); var translate = Drawing.getTranslate(legend3); var x = translate.x; @@ -789,7 +790,7 @@ describe('legend relayout update', function() { function _assert(msg, xy, wh) { return function() { var fullLayout = gd._fullLayout; - var legend3 = d3.select('g.legend'); + var legend3 = d3Select('g.legend'); var bg3 = legend3.select('rect.bg'); var translate = Drawing.getTranslate(legend3); var x = translate.x; @@ -832,7 +833,7 @@ describe('legend relayout update', function() { } }) .then(function() { - expect(d3.selectAll('.legendtitletext')[0].length).toBe(1); + expect(d3SelectAll('.legendtitletext')[0].length).toBe(1); }) .then(function() { return Plotly.react(gd, { @@ -843,7 +844,7 @@ describe('legend relayout update', function() { }); }) .then(function() { - expect(d3.selectAll('.legendtitletext')[0].length).toBe(0); + expect(d3SelectAll('.legendtitletext')[0].length).toBe(0); }) .then(done, done.fail); }); @@ -888,14 +889,14 @@ describe('legend restyle update', function() { mockCopy.data[1].showlegend = false; function countLegendItems() { - return d3.select(gd).selectAll('rect.legendtoggle').size(); + return d3Select(gd).selectAll('rect.legendtoggle').size(); } function assertTraceToggleRect() { - var nodes = d3.selectAll('rect.legendtoggle'); + var nodes = d3SelectAll('rect.legendtoggle'); nodes.each(function() { - var node = d3.select(this); + var node = d3Select(this); expect(node.attr('x')).toEqual('0'); expect(node.attr('y')).toEqual('-9.5'); @@ -936,8 +937,8 @@ describe('legend interaction', function() { gd = createGraphDiv(); Plotly.newPlot(gd, mockCopy.data, mockCopy.layout).then(function() { - legendItems = d3.selectAll('rect.legendtoggle')[0]; - legendLabels = d3.selectAll('text.legendtext')[0]; + legendItems = d3SelectAll('rect.legendtoggle')[0]; + legendLabels = d3SelectAll('text.legendtext')[0]; legendItem = legendItems[testEntry]; legendLabel = legendLabels[testEntry].innerHTML; done(); @@ -1031,7 +1032,7 @@ describe('legend interaction', function() { gd = createGraphDiv(); Plotly.newPlot(gd, mockCopy.data, mockCopy.layout).then(function() { - legendItems = d3.selectAll('rect.legendtoggle')[0]; + legendItems = d3SelectAll('rect.legendtoggle')[0]; legendItem = legendItems[testEntry]; done(); }); @@ -1125,7 +1126,7 @@ describe('legend interaction', function() { function _click(index) { return function() { - var item = d3.selectAll('rect.legendtoggle')[0][index || 0]; + var item = d3SelectAll('rect.legendtoggle')[0][index || 0]; return new Promise(function(resolve) { item.dispatchEvent(new MouseEvent('mousedown')); item.dispatchEvent(new MouseEvent('mouseup')); @@ -1136,7 +1137,7 @@ describe('legend interaction', function() { function _dblclick(index) { return function() { - var item = d3.selectAll('rect.legendtoggle')[0][index || 0]; + var item = d3SelectAll('rect.legendtoggle')[0][index || 0]; return new Promise(function(resolve) { item.dispatchEvent(new MouseEvent('mousedown')); item.dispatchEvent(new MouseEvent('mouseup')); @@ -1205,10 +1206,10 @@ describe('legend interaction', function() { afterEach(destroyGraphDiv); function _setValue(index, str) { - var item = d3.selectAll('text.legendtext')[0][index || 0]; + var item = d3SelectAll('text.legendtext')[0][index || 0]; item.dispatchEvent(new MouseEvent('click')); return delay(20)().then(function() { - var input = d3.select('.plugin-editable.editable'); + var input = d3Select('.plugin-editable.editable'); input.text(str); input.node().dispatchEvent(new KeyboardEvent('blur')); }).then(delay(20)); @@ -1216,7 +1217,7 @@ describe('legend interaction', function() { function assertLabels(expected) { var labels = []; - d3.selectAll('text.legendtext').each(function() { + d3SelectAll('text.legendtext').each(function() { labels.push(this.textContent); }); expect(labels).toEqual(expected); @@ -1290,7 +1291,7 @@ describe('legend interaction', function() { afterEach(destroyGraphDiv); function toggleTrace() { - var toggle = d3.select('.legendtoggle').node(); + var toggle = d3Select('.legendtoggle').node(); expect(toggle).not.toEqual(null); toggle.dispatchEvent(new MouseEvent('mousedown')); @@ -1302,7 +1303,7 @@ describe('legend interaction', function() { function assertToggled(toggled) { return function() { - var container = d3.select('g.traces').node(); + var container = d3Select('g.traces').node(); expect(container).not.toEqual(null); expect(container.style.opacity).toBe(toggled ? '0.5' : '1'); }; @@ -1339,7 +1340,7 @@ describe('legend interaction', function() { function clickAt(p) { return function() { return new Promise(function(resolve) { - var el = d3.select('g.legend').node(); + var el = d3Select('g.legend').node(); var opts = {element: el}; mouseEvent('mousedown', p[0], p[1], opts); mouseEvent('mouseup', p[0], p[1], opts); @@ -1406,7 +1407,7 @@ describe('legend interaction', function() { function click(index, clicks) { return function() { return new Promise(function(resolve) { - var item = d3.selectAll('rect.legendtoggle')[0][index || 0]; + var item = d3SelectAll('rect.legendtoggle')[0][index || 0]; for(var i = 0; i < (clicks || 1); i++) { item.dispatchEvent(new MouseEvent('mousedown')); item.dispatchEvent(new MouseEvent('mouseup')); @@ -1963,7 +1964,7 @@ describe('legend with custom doubleClickDelay', function() { function click(index) { return function() { - var item = d3.selectAll('rect.legendtoggle')[0][index]; + var item = d3SelectAll('rect.legendtoggle')[0][index]; item.dispatchEvent(new MouseEvent('mousedown')); item.dispatchEvent(new MouseEvent('mouseup')); }; diff --git a/test/jasmine/tests/lib_test.js b/test/jasmine/tests/lib_test.js index f0b111c2367..78af4c275b8 100644 --- a/test/jasmine/tests/lib_test.js +++ b/test/jasmine/tests/lib_test.js @@ -3,7 +3,8 @@ var setCursor = require('@src/lib/setcursor'); var overrideCursor = require('@src/lib/override_cursor'); var config = require('@src/plot_api/plot_config').dfltConfig; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib'); var Plots = require('@src/plots/plots'); var createGraphDiv = require('../assets/create_graph_div'); @@ -1364,7 +1365,7 @@ describe('Test lib.js:', function() { describe('setCursor', function() { beforeEach(function() { - this.el3 = d3.select(createGraphDiv()); + this.el3 = d3Select(createGraphDiv()); }); afterEach(destroyGraphDiv); @@ -1412,7 +1413,7 @@ describe('Test lib.js:', function() { describe('overrideCursor', function() { beforeEach(function() { - this.el3 = d3.select(createGraphDiv()); + this.el3 = d3Select(createGraphDiv()); }); afterEach(destroyGraphDiv); @@ -1639,11 +1640,11 @@ describe('Test lib.js:', function() { it('recognizes real and duck typed selections', function() { var yesSelections = [ - d3.select(gd), + d3Select(gd), // this is what got us into trouble actually - d3 selections can // contain non-nodes - say for example d3 selections! then they // don't work correctly. But it makes a convenient test! - d3.select(1) + d3Select(1) ]; yesSelections.forEach(function(v) { @@ -1751,8 +1752,8 @@ describe('Test lib.js:', function() { var query = '.notifier-note'; beforeEach(function(done) { - d3.selectAll(query).each(function() { - d3.select(this).select('button').node().click(); + d3SelectAll(query).each(function() { + d3Select(this).select('button').node().click(); }); setTimeout(done, 1000); }); @@ -1764,13 +1765,13 @@ describe('Test lib.js:', function() { Lib.warn('warn'); Lib.error('error!'); - var notes = d3.selectAll(query); + var notes = d3SelectAll(query); expect(notes.size()).toBe(exp.length, '# of notifier notes'); var actual = []; notes.each(function() { - actual.push(d3.select(this).select('p').text()); + actual.push(d3Select(this).select('p').text()); }); expect(actual).toEqual(exp); } diff --git a/test/jasmine/tests/localize_test.js b/test/jasmine/tests/localize_test.js index 256f0ae078f..1a02a12945f 100644 --- a/test/jasmine/tests/localize_test.js +++ b/test/jasmine/tests/localize_test.js @@ -2,7 +2,7 @@ var Lib = require('@src/lib'); var _ = Lib._; var Registry = require('@src/registry'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var utcFormat = require('d3-time-format').utcFormat; var Plotly = require('@lib'); @@ -39,11 +39,11 @@ describe('localization', function() { } function firstXLabel() { - return d3.select(gd).select('.xtick').text(); + return d3Select(gd).select('.xtick').text(); } function firstYLabel() { - return d3.select(gd).select('.ytick').text(); + return d3Select(gd).select('.ytick').text(); } var monthNums = ['!1', '!2', '!3', '!4', '!5', '!6', '!7', '!8', '!9', '!10', '!11', '!12']; @@ -64,8 +64,8 @@ describe('localization', function() { function getLabels(axLetter) { var out = []; - var s = d3.select(gd).selectAll('.' + axLetter + 'tick'); - s.each(function() { out.push(d3.select(this).text()); }); + var s = d3Select(gd).selectAll('.' + axLetter + 'tick'); + s.each(function() { out.push(d3Select(this).text()); }); return out; } diff --git a/test/jasmine/tests/mapbox_test.js b/test/jasmine/tests/mapbox_test.js index bb6aee219e7..6d3f72982ae 100644 --- a/test/jasmine/tests/mapbox_test.js +++ b/test/jasmine/tests/mapbox_test.js @@ -5,7 +5,8 @@ var Fx = require('@src/components/fx'); var constants = require('@src/plots/mapbox/constants'); var supplyLayoutDefaults = require('@src/plots/mapbox/layout_defaults'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -1185,7 +1186,7 @@ describe('mapbox plots', function() { it('@gl should display to hover labels on mouse over', function(done) { function assertMouseMove(pos, len) { return _mouseEvent('mousemove', pos, function() { - var hoverLabels = d3.select('.hoverlayer').selectAll('g'); + var hoverLabels = d3Select('.hoverlayer').selectAll('g'); expect(hoverLabels.size()).toEqual(len); }); @@ -1204,7 +1205,7 @@ describe('mapbox plots', function() { return assertMouseMove(pointPos, 1); }) .then(function() { - assertHoverLabelStyle(d3.select('g.hovertext'), { + assertHoverLabelStyle(d3Select('g.hovertext'), { bgcolor: 'rgb(255, 255, 0)', bordercolor: 'rgb(68, 68, 68)', fontSize: 20, @@ -1270,7 +1271,7 @@ describe('mapbox plots', function() { spyOn(Fx, 'hover').and.callThrough(); function countHoverLabels() { - return d3.select('.hoverlayer').selectAll('g').size(); + return d3Select('.hoverlayer').selectAll('g').size(); } Promise.resolve() @@ -1473,7 +1474,7 @@ describe('mapbox plots', function() { it('@gl should be displayed for style "open-street-map"', function(done) { Plotly.newPlot(gd, [{type: 'scattermapbox'}], {mapbox: {style: 'open-street-map'}}) .then(function() { - var s = Plotly.d3.selectAll('.mapboxgl-ctrl-attrib'); + var s = d3SelectAll('.mapboxgl-ctrl-attrib'); expect(s.size()).toBe(1); expect(s.text()).toEqual('© OpenStreetMap'); }) @@ -1483,7 +1484,7 @@ describe('mapbox plots', function() { it('@gl should be displayed for style from Mapbox', function(done) { Plotly.newPlot(gd, [{type: 'scattermapbox'}], {mapbox: {style: 'basic'}}) .then(function() { - var s = Plotly.d3.selectAll('.mapboxgl-ctrl-attrib'); + var s = d3SelectAll('.mapboxgl-ctrl-attrib'); expect(s.size()).toBe(1); expect(s.text()).toEqual('© Mapbox © OpenStreetMap Improve this map'); }) @@ -1523,7 +1524,7 @@ describe('mapbox plots', function() { it('@gl should not be displayed for custom style without attribution', function(done) { Plotly.newPlot(gd, [{type: 'scattermapbox'}], mockLayoutCustomStyle()) .then(function() { - var s = Plotly.d3.selectAll('.mapboxgl-ctrl-attrib'); + var s = d3SelectAll('.mapboxgl-ctrl-attrib'); expect(s.size()).toBe(1); expect(s.text()).toEqual(''); }) @@ -1536,7 +1537,7 @@ describe('mapbox plots', function() { layout.mapbox.style.sources['simple-tiles'].attribution = attr; Plotly.newPlot(gd, [{type: 'scattermapbox'}], layout) .then(function() { - var s = Plotly.d3.selectAll('.mapboxgl-ctrl-attrib'); + var s = d3SelectAll('.mapboxgl-ctrl-attrib'); expect(s.size()).toBe(1); expect(s.text()).toEqual(attr); }) @@ -1554,7 +1555,7 @@ describe('mapbox plots', function() { Plotly.newPlot(gd, customMock) .then(function() { - var s = Plotly.d3.selectAll('.mapboxgl-ctrl-attrib'); + var s = d3SelectAll('.mapboxgl-ctrl-attrib'); expect(s.size()).toBe(1); expect(s.text()).toEqual([XSS + attr, '© Mapbox © OpenStreetMap Improve this map'].join(' | ')); expect(s.html().indexOf('')).toBe(-1); diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js index 77efc345a99..a6b52bd45b1 100644 --- a/test/jasmine/tests/modebar_test.js +++ b/test/jasmine/tests/modebar_test.js @@ -1,4 +1,4 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createModeBar = require('@src/components/modebar/modebar'); var manageModeBar = require('@src/components/modebar/manage'); @@ -37,8 +37,8 @@ describe('ModeBar', function() { _fullLayout: { _uid: '6ea6a7', dragmode: 'zoom', - _paperdiv: d3.select(getMockContainerTree()), - _modebardiv: d3.select(getMockModeBarTree()), + _paperdiv: d3Select(getMockContainerTree()), + _modebardiv: d3Select(getMockModeBarTree()), _has: Plots._hasPlotType, _subplots: {xaxis: xaxes || [], yaxis: yaxes || []}, modebar: { @@ -63,20 +63,20 @@ describe('ModeBar', function() { } function countGroups(modeBar) { - return d3.select(modeBar.element).selectAll('div.modebar-group').size(); + return d3Select(modeBar.element).selectAll('div.modebar-group').size(); } function countButtons(modeBar) { - return d3.select(modeBar.element).selectAll('a.modebar-btn').size(); + return d3Select(modeBar.element).selectAll('a.modebar-btn').size(); } function countLogo(modeBar) { - return d3.select(modeBar.element).selectAll('a.plotlyjsicon').size(); + return d3Select(modeBar.element).selectAll('a.plotlyjsicon').size(); } function checkBtnAttr(modeBar, index, attr) { - var buttons = d3.select(modeBar.element).selectAll('a.modebar-btn'); - return d3.select(buttons[0][index]).attr(attr); + var buttons = d3Select(modeBar.element).selectAll('a.modebar-btn'); + return d3Select(buttons[0][index]).attr(attr); } var buttons = [[{ @@ -159,7 +159,7 @@ describe('ModeBar', function() { return undefined; } var button = modeBar.buttonElements[0]; - return d3.select(button).select('svg'); + return d3Select(button).select('svg'); } it('with a Plotly icon', function() { diff --git a/test/jasmine/tests/page_test.js b/test/jasmine/tests/page_test.js index 046b00189e1..0b505b04960 100644 --- a/test/jasmine/tests/page_test.js +++ b/test/jasmine/tests/page_test.js @@ -1,7 +1,7 @@ var Plotly = require('@lib'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -59,7 +59,7 @@ describe('page rendering', function() { mock.layout.showlegend = true; return Plotly.newPlot(gd, mock.data, mock.layout).then(function() { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var allPresentationElements = gd3.selectAll('path,text,rect,image,canvas'); gd3.style('visibility', 'hidden'); diff --git a/test/jasmine/tests/parcats_test.js b/test/jasmine/tests/parcats_test.js index 927e2d18b5a..271470462d3 100644 --- a/test/jasmine/tests/parcats_test.js +++ b/test/jasmine/tests/parcats_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); var strTranslate = Lib.strTranslate; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var failTest = require('../assets/fail_test'); @@ -60,7 +60,7 @@ function checkParcatsModelView(gd) { expect(size.w).toEqual(512); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); // Check location/size of this trace inside overall traces area expect(parcatsViewModel.x).toEqual(64 + margin.r); @@ -102,7 +102,7 @@ function checkParcatsSvg(gd) { expect(size.w).toEqual(512); // Check trace transform - var parcatsTraceSelection = d3.select('g.trace.parcats'); + var parcatsTraceSelection = d3Select('g.trace.parcats'); expect(parcatsTraceSelection.attr('transform')).toEqual( strTranslate( @@ -118,16 +118,16 @@ function checkParcatsSvg(gd) { var expectedX = categoryLabelPad + dimInd * dimDx; var expectedY = 0; var expectedTransform = strTranslate(expectedX, expectedY); - expect(d3.select(this).attr('transform')).toEqual(expectedTransform); + expect(d3Select(this).attr('transform')).toEqual(expectedTransform); }); // Check category transforms dimensionSelection.each(function(dimension, dimDisplayInd) { - var categorySelection = d3.select(this).selectAll('g.category'); + var categorySelection = d3Select(this).selectAll('g.category'); var nextY = (3 - categorySelection.size()) * catSpacing / 2; categorySelection.each(function(category) { - var catSel = d3.select(this); + var catSel = d3Select(this); var catWidth = catSel.datum().width; var catHeight = catSel.datum().height; @@ -552,7 +552,7 @@ describe('Drag to reordered dimensions', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); var dragDimStartX = parcatsViewModel.dimensions[1].x; var pos = getMousePositions(parcatsViewModel); @@ -625,7 +625,7 @@ describe('Drag to reordered dimensions', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); var dragDimStartX = parcatsViewModel.dimensions[1].x; var pos = getMousePositions(parcatsViewModel); @@ -699,7 +699,7 @@ describe('Drag to reordered dimensions', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); var pos = getMousePositions(parcatsViewModel); // Check initial dimension order @@ -892,7 +892,7 @@ describe('Drag to reordered categories', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); // Compute Mouse positions // ----------------------- @@ -978,7 +978,7 @@ describe('Drag to reordered categories', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); // Compute Mouse positions // ----------------------- @@ -1060,7 +1060,7 @@ describe('Drag to reordered categories', function() { gd.on('plotly_restyle', restyleCallback); /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); // Compute Mouse positions // ----------------------- @@ -1141,7 +1141,7 @@ describe('Click events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1186,7 +1186,7 @@ describe('Click events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1215,7 +1215,7 @@ describe('Click events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1259,7 +1259,7 @@ describe('Click events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1304,7 +1304,7 @@ describe('Click events with hoveron color', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1347,7 +1347,7 @@ describe('Click events with hoveron color', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_click', function(data) { clickData = data; @@ -1409,7 +1409,7 @@ describe('Hover events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_hover', function(data) { hoverData = data; @@ -1478,7 +1478,7 @@ describe('Hover events', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_hover', function(data) { hoverData = data; @@ -1561,7 +1561,7 @@ describe('Hover events with hoveron color', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_hover', function(data) { hoverData = data; @@ -1626,7 +1626,7 @@ describe('Hover events with hoveron color', function() { Plotly.newPlot(gd, mock) .then(function() { /** @type {ParcatsViewModel} */ - var parcatsViewModel = d3.select('g.trace.parcats').datum(); + var parcatsViewModel = d3Select('g.trace.parcats').datum(); gd.on('plotly_hover', function(data) { hoverData = data; diff --git a/test/jasmine/tests/parcoords_test.js b/test/jasmine/tests/parcoords_test.js index 742d9de0624..e287eccdb31 100644 --- a/test/jasmine/tests/parcoords_test.js +++ b/test/jasmine/tests/parcoords_test.js @@ -1,6 +1,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plots = require('@src/plots/plots'); var Parcoords = require('@src/traces/parcoords'); var attributes = require('@src/traces/parcoords/attributes'); @@ -53,7 +54,7 @@ function mostOfDrag(x1, y1, x2, y2) { } function purgeGraphDiv(done) { - var gd = d3.select('.js-plotly-plot').node(); + var gd = d3Select('.js-plotly-plot').node(); if(gd) Plotly.purge(gd); destroyGraphDiv(); @@ -61,7 +62,7 @@ function purgeGraphDiv(done) { } function getAvgPixelByChannel(id) { - var canvas = d3.select(id).node(); + var canvas = d3Select(id).node(); var imgData = readPixel(canvas, 0, 0, canvas.width, canvas.height); var n = imgData.length * 0.25; @@ -650,7 +651,7 @@ describe('parcoords Lifecycle methods', function() { expect(gd.data.length).toEqual(1); return Plotly.deleteTraces(gd, 0).then(function() { - expect(d3.selectAll('.gl-canvas').node(0)).toEqual(null); + expect(d3SelectAll('.gl-canvas').node(0)).toEqual(null); expect(gd.data.length).toEqual(0); }); }) @@ -690,7 +691,7 @@ describe('parcoords Lifecycle methods', function() { function _assertVisibleData(visible, msg) { return function() { - var canvases = d3.selectAll('.gl-canvas'); + var canvases = d3SelectAll('.gl-canvas'); expect(canvases.size()).toBe(3, msg); canvases.each(function() { var imageArray = readPixel(this, 0, 0, this.width, this.height); @@ -915,7 +916,7 @@ describe('parcoords basic use', function() { Plotly.react(gd, mockCopy) .then(function() { var cnt = 0; - d3.select(gd).selectAll('canvas').each(function(d) { + d3Select(gd).selectAll('canvas').each(function(d) { if(d.regl) cnt++; }); expect(cnt).toBe(3); @@ -1244,7 +1245,7 @@ describe('parcoords react more attributes', function() { return Plotly.react(gd, mockCopy.data); }) .then(function() { - var allParcoords = d3.selectAll('.' + PC.cn.parcoords); + var allParcoords = d3SelectAll('.' + PC.cn.parcoords); var allLabels = allParcoords.selectAll('.' + PC.cn.axisTitle); expect(allLabels.size()).toBe(3); @@ -1291,7 +1292,7 @@ describe('parcoords react more attributes', function() { expect(allHighlights.size()).toBe(3); var nHighlight = []; allHighlights.each(function() { - var highlight = d3.select(this)[0][0]; + var highlight = d3Select(this)[0][0]; nHighlight.push( highlight.getAttribute('stroke-dasharray').split(',').length ); @@ -1310,7 +1311,7 @@ describe('parcoords react more attributes', function() { m0.dimensions[1].visible = false; Plotly.react(gd, mockCopy.data).then(function() { - var allParcoords = d3.selectAll('.' + PC.cn.parcoords); + var allParcoords = d3SelectAll('.' + PC.cn.parcoords); var allLabels = allParcoords.selectAll('.' + PC.cn.axisTitle); expect(allLabels.size()).toBe(2); @@ -1319,7 +1320,7 @@ describe('parcoords react more attributes', function() { }) .then(function() { return Plotly.react(gd, mockCopy.data).then(function() { - var allParcoords = d3.selectAll('.' + PC.cn.parcoords); + var allParcoords = d3SelectAll('.' + PC.cn.parcoords); var allLabels = allParcoords.selectAll('.' + PC.cn.axisTitle); expect(allLabels.size()).toBe(3); diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js index 2f30782b982..eedb6974d26 100644 --- a/test/jasmine/tests/pie_test.js +++ b/test/jasmine/tests/pie_test.js @@ -1,7 +1,8 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -198,11 +199,11 @@ describe('Pie traces', function() { expect(this.style.stroke.replace(/\s/g, '')).toBe('rgb(100,100,100)'); expect(this.style.strokeOpacity).toBe('0.7'); } - var slices = d3.selectAll(SLICES_SELECTOR); + var slices = d3SelectAll(SLICES_SELECTOR); slices.each(checkPath); expect(slices.size()).toBe(5); - var legendEntries = d3.selectAll(LEGEND_ENTRIES_SELECTOR); + var legendEntries = d3SelectAll(LEGEND_ENTRIES_SELECTOR); legendEntries.each(checkPath); expect(legendEntries.size()).toBe(5); }) @@ -237,7 +238,7 @@ describe('Pie traces', function() { function _checkSliceColors(colors) { return function() { - d3.select(gd).selectAll(SLICES_SELECTOR).each(function(d, i) { + d3Select(gd).selectAll(SLICES_SELECTOR).each(function(d, i) { expect(this.style.fill.replace(/(\s|rgb\(|\))/g, '')).toBe(colors[i], i); }); }; @@ -245,7 +246,7 @@ describe('Pie traces', function() { function _checkFontColors(expFontColors) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fill).toBe(rgb(expFontColors[i]), 'fill color of ' + i); }); }; @@ -253,7 +254,7 @@ describe('Pie traces', function() { function _checkFontFamilies(expFontFamilies) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fontFamily).toBe(expFontFamilies[i], 'fontFamily of ' + i); }); }; @@ -261,7 +262,7 @@ describe('Pie traces', function() { function _checkFontSizes(expFontSizes) { return function() { - d3.selectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_TEXT_SELECTOR).each(function(d, i) { expect(this.style.fontSize).toBe(expFontSizes[i] + 'px', 'fontSize of ' + i); }); }; @@ -310,7 +311,7 @@ describe('Pie traces', function() { textinfo: 'none' }], {height: 300, width: 300}) .then(function() { - var title = d3.selectAll('.titletext text'); + var title = d3SelectAll('.titletext text'); expect(title.size()).toBe(1); var titlePos = getClientPosition('g.titletext'); var pieCenterPos = getClientPosition('g.trace'); @@ -338,10 +339,10 @@ describe('Pie traces', function() { textinfo: 'none' }], {height: 300, width: 300}) .then(function() { - var title = d3.selectAll('.titletext text'); + var title = d3SelectAll('.titletext text'); expect(title.size()).toBe(1); - var titleBox = d3.select('g.titletext').node().getBoundingClientRect(); - var pieBox = d3.select('g.trace').node().getBoundingClientRect(); + var titleBox = d3Select('g.titletext').node().getBoundingClientRect(); + var pieBox = d3Select('g.trace').node().getBoundingClientRect(); var radius = 0.1 * Math.min(pieBox.width / 2, pieBox.height / 2); var pieCenterPos = getClientPosition('g.trace'); // unfortunately boundingClientRect is inaccurate and so we allow an error of 3 @@ -359,10 +360,10 @@ describe('Pie traces', function() { function _verifyTitle(checkLeft, checkRight, checkTop, checkBottom, checkMiddleX) { return function() { - var title = d3.selectAll('.titletext text'); + var title = d3SelectAll('.titletext text'); expect(title.size()).toBe(1); - var titleBox = d3.select('g.titletext').node().getBoundingClientRect(); - var pieBox = d3.select('g.trace').node().getBoundingClientRect(); + var titleBox = d3Select('g.titletext').node().getBoundingClientRect(); + var pieBox = d3Select('g.trace').node().getBoundingClientRect(); // check that margins agree. we leave an error margin of 2. if(checkLeft) expect(Math.abs(titleBox.left - pieBox.left)).toBeLessThan(2); if(checkRight) expect(Math.abs(titleBox.right - pieBox.right)).toBeLessThan(2); @@ -531,12 +532,12 @@ describe('Pie traces', function() { textinfo: 'none' }], {height: 300, width: 300}) .then(function() { - var title = d3.selectAll('.titletext text'); + var title = d3SelectAll('.titletext text'); expect(title.size()).toBe(1); - var titleBox = d3.select('g.titletext').node().getBoundingClientRect(); + var titleBox = d3Select('g.titletext').node().getBoundingClientRect(); var minSliceTop = Infinity; - d3.selectAll('g.slice').each(function() { - var sliceTop = d3.select(this).node().getBoundingClientRect().top; + d3SelectAll('g.slice').each(function() { + var sliceTop = d3Select(this).node().getBoundingClientRect().top; minSliceTop = Math.min(minSliceTop, sliceTop); }); expect(titleBox.bottom).toBeLessThan(minSliceTop); @@ -582,10 +583,10 @@ describe('Pie traces', function() { .then(function() { var expWidths = ['3', '0', '0']; - d3.selectAll(SLICES_SELECTOR).each(function(d, i) { + d3SelectAll(SLICES_SELECTOR).each(function(d, i) { expect(this.style.strokeWidth).toBe(expWidths[d.pointNumber], 'sector #' + i); }); - d3.selectAll(LEGEND_ENTRIES_SELECTOR).each(function(d, i) { + d3SelectAll(LEGEND_ENTRIES_SELECTOR).each(function(d, i) { expect(this.style.strokeWidth).toBe(expWidths[d[0].i], 'item #' + i); }); }) @@ -768,7 +769,7 @@ describe('Pie traces', function() { }); function _assertTitle(msg, expText, expColor) { - var title = d3.select('.titletext > text'); + var title = d3Select('.titletext > text'); expect(title.text()).toBe(expText, msg + ' text'); expect(title.node().style.fill).toBe(expColor, msg + ' color'); } @@ -894,7 +895,7 @@ describe('Pie traces', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.pielayer'); + var layer = d3Select(gd).select('.pielayer'); expect(layer.selectAll('.trace').size()).toBe(exp, msg); }; } @@ -1175,7 +1176,7 @@ describe('pie hovering', function() { assertHoverLabelContent({nums: content}, msg); if(style) { - assertHoverLabelStyle(d3.select('.hovertext'), { + assertHoverLabelStyle(d3Select('.hovertext'), { bgcolor: style[0], bordercolor: style[1], fontSize: style[2], @@ -1381,7 +1382,7 @@ describe('pie hovering', function() { it('should honor *hoverlabel.align*', function(done) { function _assert(msg, exp) { - var tx = d3.select('g.hovertext').select('text'); + var tx = d3Select('g.hovertext').select('text'); expect(tx.attr('text-anchor')).toBe(exp.textAnchor, 'text anchor|' + msg); expect(Number(tx.attr('x'))).toBeWithin(exp.posX, 3, 'x position|' + msg); } @@ -1461,7 +1462,7 @@ describe('pie hovering', function() { nums: 'label 3 - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16\n$2,865.21\n9.58%' }, 'long label to the left'); - var label = d3.select('g.hovertext'); + var label = d3Select('g.hovertext'); var bbox = label.node().getBoundingClientRect(); expect(bbox.left).toBeWithin(1, 10, 'bbox left bound'); @@ -1473,7 +1474,7 @@ describe('pie hovering', function() { nums: 'label 1 - another long text label\n$22,238.58\n74.3%' }, 'long label to the right'); - var label = d3.select('g.hovertext'); + var label = d3Select('g.hovertext'); var bbox = label.node().getBoundingClientRect(); expect(bbox.left).toBeWithin(30, 10, 'bbox left bound'); @@ -1729,7 +1730,7 @@ describe('pie relayout', function() { return Plotly.relayout(gd, 'colorway', relayoutColors); }) .then(function() { - var slices = d3.selectAll(SLICES_SELECTOR); + var slices = d3SelectAll(SLICES_SELECTOR); slices.each(checkRelayoutColor); }) .then(done, done.fail); @@ -1745,7 +1746,7 @@ describe('Test pie interactions edge cases:', function() { function _mouseEvent(type, v) { return function() { - var el = d3.select(gd).select('.slice:nth-child(' + v + ')').node(); + var el = d3Select(gd).select('.slice:nth-child(' + v + ')').node(); mouseEvent(type, 0, 0, {element: el}); }; } @@ -1769,7 +1770,7 @@ describe('Test pie interactions edge cases:', function() { expect(hoverCnt).toBe(exp.hoverCnt, msg + ' - hover cnt'); expect(unhoverCnt).toBe(exp.unhoverCnt, msg + ' - unhover cnt'); - var label = d3.select(gd).select('g.hovertext'); + var label = d3Select(gd).select('g.hovertext'); expect(label.size()).toBe(exp.hoverLabel, msg + ' - hover label cnt'); hoverCnt = 0; @@ -1830,7 +1831,7 @@ describe('pie inside text orientation', function() { function assertTextRotations(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['rotations'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); @@ -1925,7 +1926,7 @@ describe('pie uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); @@ -2101,7 +2102,7 @@ describe('pie value format', function() { '1.23456789e-8' ]; - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); for(var i = 0; i < selection[0].length; i++) { var text = selection[0][i].getAttribute('data-unformatted'); expect(text).toBe(exp[i]); @@ -2141,7 +2142,7 @@ describe('pie value format', function() { '9e-8%' ]; - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); for(var i = 0; i < selection[0].length; i++) { var text = selection[0][i].innerHTML; expect(text).toBe(exp[i]); diff --git a/test/jasmine/tests/plot_api_react_test.js b/test/jasmine/tests/plot_api_react_test.js index 5f01df5b92d..51bc4f07a35 100644 --- a/test/jasmine/tests/plot_api_react_test.js +++ b/test/jasmine/tests/plot_api_react_test.js @@ -7,7 +7,8 @@ var annotations = require('@src/components/annotations'); var images = require('@src/components/images'); var Registry = require('@src/registry'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var failTest = require('../assets/fail_test'); @@ -102,17 +103,17 @@ describe('@noCIdep Plotly.react', function() { Plotly.newPlot(gd, data1, layout) .then(countPlots) .then(function() { - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); return Plotly.react(gd, data2, layout); }) .then(function() { - expect(d3.selectAll('.point').size()).toBe(6); + expect(d3SelectAll('.point').size()).toBe(6); return Plotly.react(gd, data1, layout); }) .then(function() { - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); }) .then(done, done.fail); }); @@ -124,14 +125,14 @@ describe('@noCIdep Plotly.react', function() { Plotly.newPlot(gd, data, layout) .then(countPlots) .then(function() { - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); data[0].y.push(4); return Plotly.react(gd, data, layout); }) .then(function() { // didn't pick it up, as we modified in place!!! - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); countCalls({plot: 0}); data[0].y = [1, 2, 3, 4, 5]; @@ -139,7 +140,7 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { // new object, we picked it up! - expect(d3.selectAll('.point').size()).toBe(5); + expect(d3SelectAll('.point').size()).toBe(5); countCalls({plot: 1}); }) .then(done, done.fail); @@ -152,14 +153,14 @@ describe('@noCIdep Plotly.react', function() { Plotly.newPlot(gd, data, layout) .then(countPlots) .then(function() { - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); data[0].y.push(4); return Plotly.react(gd, data, layout); }) .then(function() { // didn't pick it up, as we didn't modify datarevision - expect(d3.selectAll('.point').size()).toBe(3); + expect(d3SelectAll('.point').size()).toBe(3); countCalls({plot: 0}); data[0].y.push(5); @@ -168,7 +169,7 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { // new revision, we picked it up! - expect(d3.selectAll('.point').size()).toBe(5); + expect(d3SelectAll('.point').size()).toBe(5); countCalls({plot: 1}); }) @@ -189,8 +190,8 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { countCalls({layoutStyles: 1, doTraceStyle: 1, doModeBar: 1}); - expect(d3.select('.gtitle').text()).toBe('XXXXX'); - var points = d3.selectAll('.point'); + expect(d3Select('.gtitle').text()).toBe('XXXXX'); + var points = d3SelectAll('.point'); expect(points.size()).toBe(3); points.each(function() { expect(window.getComputedStyle(this).fill).toBe('rgb(0, 100, 200)'); @@ -245,7 +246,7 @@ describe('@noCIdep Plotly.react', function() { var layout = {}; function countLines() { - var path = d3.select(gd).select('.lataxis > path'); + var path = d3Select(gd).select('.lataxis > path'); return path.attr('d').split('M').length; } @@ -314,14 +315,14 @@ describe('@noCIdep Plotly.react', function() { .then(function() { // autoranged - so we get a full replot countCalls({plot: 1}); - expect(d3.selectAll('.annotation').size()).toBe(2); + expect(d3SelectAll('.annotation').size()).toBe(2); layout.annotations[1].bgcolor = 'rgb(200, 100, 0)'; return Plotly.react(gd, data, layout); }) .then(function() { countCalls({annotationDrawOne: 1}); - expect(window.getComputedStyle(d3.select('.annotation[data-index="1"] .bg').node()).fill) + expect(window.getComputedStyle(d3Select('.annotation[data-index="1"] .bg').node()).fill) .toBe('rgb(200, 100, 0)'); expect(layout.yaxis.range[1]).not.toBeCloseTo(ymax, 0); @@ -331,9 +332,9 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { countCalls({annotationDrawOne: 2}); - expect(window.getComputedStyle(d3.select('.annotation[data-index="0"] text').node()).fill) + expect(window.getComputedStyle(d3Select('.annotation[data-index="0"] text').node()).fill) .toBe('rgb(0, 255, 0)'); - expect(window.getComputedStyle(d3.select('.annotation[data-index="1"] .bg').node()).fill) + expect(window.getComputedStyle(d3Select('.annotation[data-index="1"] .bg').node()).fill) .toBe('rgb(0, 0, 255)'); Lib.extendFlat(layout.annotations[0], {yref: 'paper', y: 0.8}); @@ -378,9 +379,9 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { countCalls({imageDraw: 1}); - expect(d3.selectAll('image').size()).toBe(2); + expect(d3SelectAll('image').size()).toBe(2); - var n = d3.selectAll('image').node(); + var n = d3SelectAll('image').node(); x = n.attributes.x.value; y = n.attributes.y.value; height = n.attributes.height.value; @@ -392,7 +393,7 @@ describe('@noCIdep Plotly.react', function() { }) .then(function() { countCalls({imageDraw: 1}); - var n = d3.selectAll('image').node(); + var n = d3SelectAll('image').node(); expect(n.attributes.x.value).toBe(x); expect(n.attributes.width.value).toBe(width); expect(n.attributes.y.value).not.toBe(y); @@ -408,28 +409,28 @@ describe('@noCIdep Plotly.react', function() { Plotly.newPlot(gd, data, layout) .then(countPlots) .then(function() { - expect(d3.selectAll('.drag').size()).toBe(11); - expect(d3.selectAll('.gtitle').size()).toBe(0); + expect(d3SelectAll('.drag').size()).toBe(11); + expect(d3SelectAll('.gtitle').size()).toBe(0); return Plotly.react(gd, data, layout, {editable: true}); }) .then(function() { - expect(d3.selectAll('.drag').size()).toBe(11); - expect(d3.selectAll('.gtitle').text()).toBe('Click to enter Plot title'); + expect(d3SelectAll('.drag').size()).toBe(11); + expect(d3SelectAll('.gtitle').text()).toBe('Click to enter Plot title'); countCalls({plot: 1}); return Plotly.react(gd, data, layout, {staticPlot: true}); }) .then(function() { - expect(d3.selectAll('.drag').size()).toBe(0); - expect(d3.selectAll('.gtitle').size()).toBe(0); + expect(d3SelectAll('.drag').size()).toBe(0); + expect(d3SelectAll('.gtitle').size()).toBe(0); countCalls({plot: 1}); return Plotly.react(gd, data, layout, {}); }) .then(function() { - expect(d3.selectAll('.drag').size()).toBe(11); - expect(d3.selectAll('.gtitle').size()).toBe(0); + expect(d3SelectAll('.drag').size()).toBe(11); + expect(d3SelectAll('.gtitle').size()).toBe(0); countCalls({plot: 1}); }) .then(done, done.fail); @@ -445,17 +446,17 @@ describe('@noCIdep Plotly.react', function() { Plotly.newPlot(gd, data, layout) .then(countPlots) .then(function() { - expect(d3.select(gd).selectAll('.drag').size()).toBe(4); + expect(d3Select(gd).selectAll('.drag').size()).toBe(4); return Plotly.react(gd, data, layout, {staticPlot: true}); }) .then(function() { - expect(d3.select(gd).selectAll('.drag').size()).toBe(0); + expect(d3Select(gd).selectAll('.drag').size()).toBe(0); return Plotly.react(gd, data, layout, {}); }) .then(function() { - expect(d3.select(gd).selectAll('.drag').size()).toBe(4); + expect(d3Select(gd).selectAll('.drag').size()).toBe(4); }) .then(done, done.fail); }); @@ -932,7 +933,7 @@ describe('clear bglayer react', function() { afterEach(destroyGraphDiv); function hasBgRect() { - var bgLayer = d3.selectAll('.bglayer .bg'); + var bgLayer = d3SelectAll('.bglayer .bg'); return bgLayer[0][0] !== undefined; // i.e. background rect } @@ -2066,7 +2067,7 @@ describe('Plotly.react and uirevision attributes', function() { assertLevel('no set level at start', undefined); }) .then(function() { - var nodeSeth = d3.select('.slice:nth-child(2)').node(); + var nodeSeth = d3Select('.slice:nth-child(2)').node(); mouseEvent('click', 0, 0, {element: nodeSeth}); }) .then(function() { @@ -2101,7 +2102,7 @@ describe('Plotly.react and uirevision attributes', function() { assertLevel('no set level at start', undefined); }) .then(function() { - var nodeSeth = d3.select('.slice:nth-child(2)').node(); + var nodeSeth = d3Select('.slice:nth-child(2)').node(); mouseEvent('click', 0, 0, {element: nodeSeth}); }) .then(function() { diff --git a/test/jasmine/tests/plot_api_test.js b/test/jasmine/tests/plot_api_test.js index f4d430bd2e5..35dfb1b7b45 100644 --- a/test/jasmine/tests/plot_api_test.js +++ b/test/jasmine/tests/plot_api_test.js @@ -13,7 +13,8 @@ var manageArrays = require('@src/plot_api/manage_arrays'); var helpers = require('@src/plot_api/helpers'); var editTypes = require('@src/plot_api/edit_types'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -277,15 +278,15 @@ describe('Test plot api', function() { } function getAnnotationPos() { - return getPos(d3.select('.annotation')); + return getPos(d3Select('.annotation')); } function getShapePos() { - return getPos(d3.select('.layer-above').select('.shapelayer').select('path')); + return getPos(d3Select('.layer-above').select('.shapelayer').select('path')); } function getImagePos() { - return getPos(d3.select('.layer-above').select('.imagelayer').select('image')); + return getPos(d3Select('.layer-above').select('.imagelayer').select('image')); } Plotly.newPlot(gd, [{ @@ -1496,17 +1497,17 @@ describe('Test plot api', function() { Plotly.newPlot(gd, mock.data, mock.layout) .then(function() { - expect(d3.select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); + expect(d3Select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'marker.colorbar.tickfont.color': 'rgb(255, 0, 0)'}); }) .then(function() { - expect(d3.select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); + expect(d3Select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'marker.showscale': false}); }) .then(function() { - expect(d3.select('.cbaxis').size()).toBe(0); + expect(d3Select('.cbaxis').size()).toBe(0); }) .then(done, done.fail); }); @@ -1514,17 +1515,17 @@ describe('Test plot api', function() { it('updates colorbars when editing gl3d plots', function(done) { Plotly.newPlot(gd, [{z: [[1, 2], [3, 6]], type: 'surface'}]) .then(function() { - expect(d3.select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); + expect(d3Select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'colorbar.tickfont.color': 'rgb(255, 0, 0)'}); }) .then(function() { - expect(d3.select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); + expect(d3Select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'showscale': false}); }) .then(function() { - expect(d3.select('.cbaxis').size()).toBe(0); + expect(d3Select('.cbaxis').size()).toBe(0); }) .then(done, done.fail); }); @@ -2316,7 +2317,7 @@ describe('Test plot api', function() { return Plotly.redraw(gd); }) .then(function() { - expect(d3.selectAll('g.trace.scatter').size()).toEqual(3); + expect(d3SelectAll('g.trace.scatter').size()).toEqual(3); }) .then(done, done.fail); }); diff --git a/test/jasmine/tests/plot_interact_test.js b/test/jasmine/tests/plot_interact_test.js index be497b06e63..f650e6c1d4b 100644 --- a/test/jasmine/tests/plot_interact_test.js +++ b/test/jasmine/tests/plot_interact_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Lib = require('@src/lib'); @@ -25,23 +26,23 @@ describe('Test plot structure', function() { describe('cartesian plots', function() { function countSubplots() { - return d3.selectAll('g.subplot').size(); + return d3SelectAll('g.subplot').size(); } function countScatterTraces() { - return d3.selectAll('g.trace.scatter').size(); + return d3SelectAll('g.trace.scatter').size(); } function countColorBars() { - return d3.selectAll('rect.cbbg').size(); + return d3SelectAll('rect.cbbg').size(); } function countClipPaths() { - return d3.selectAll('defs').selectAll('.axesclip,.plotclip').size(); + return d3SelectAll('defs').selectAll('.axesclip,.plotclip').size(); } function countDraggers() { - return d3.selectAll('g.draglayer').selectAll('g').size(); + return d3SelectAll('g.draglayer').selectAll('g').size(); } describe('scatter traces', function() { @@ -70,7 +71,7 @@ describe('Test plot structure', function() { }); it('has one *scatterlayer* node', function() { - var nodes = d3.selectAll('g.scatterlayer'); + var nodes = d3SelectAll('g.scatterlayer'); expect(nodes.size()).toEqual(1); }); @@ -79,7 +80,7 @@ describe('Test plot structure', function() { }); it('has as many *point* nodes as there are traces', function() { - var nodes = d3.selectAll('path.point'); + var nodes = d3SelectAll('path.point'); var Npts = 0; mock.data.forEach(function(trace) { @@ -90,7 +91,7 @@ describe('Test plot structure', function() { }); it('has the correct name spaces', function() { - var mainSVGs = d3.selectAll('.main-svg'); + var mainSVGs = d3SelectAll('.main-svg'); mainSVGs.each(function() { var node = this; @@ -180,15 +181,15 @@ describe('Test plot structure', function() { } function assertHeatmapNodes(expectedCnt) { - var hmNodes = d3.selectAll('g.hm'); + var hmNodes = d3SelectAll('g.hm'); expect(hmNodes.size()).toEqual(expectedCnt); - var imageNodes = d3.selectAll('image'); + var imageNodes = d3SelectAll('image'); expect(imageNodes.size()).toEqual(expectedCnt); } function assertContourNodes(expectedCnt) { - var nodes = d3.selectAll('g.contour'); + var nodes = d3SelectAll('g.contour'); expect(nodes.size()).toEqual(expectedCnt); } @@ -392,11 +393,11 @@ describe('Test plot structure', function() { var gd; function countPieTraces() { - return d3.select('g.pielayer').selectAll('g.trace').size(); + return d3Select('g.pielayer').selectAll('g.trace').size(); } function countBarTraces() { - return d3.selectAll('g.trace.bars').size(); + return d3SelectAll('g.trace.bars').size(); } beforeEach(function(done) { @@ -409,7 +410,7 @@ describe('Test plot structure', function() { }); it('has as many *slice* nodes as there are pie items', function() { - var nodes = d3.selectAll('g.slice'); + var nodes = d3SelectAll('g.slice'); var Npts = 0; mock.data.forEach(function(trace) { @@ -420,14 +421,14 @@ describe('Test plot structure', function() { }); it('has the correct name spaces', function() { - var mainSVGs = d3.selectAll('.main-svg'); + var mainSVGs = d3SelectAll('.main-svg'); mainSVGs.each(function() { var node = this; assertNamespaces(node); }); - var testerSVG = d3.selectAll('#js-plotly-tester'); + var testerSVG = d3SelectAll('#js-plotly-tester'); assertNamespaces(testerSVG.node()); }); @@ -471,7 +472,7 @@ describe('Test plot structure', function() { }); it('has as many *choroplethlocation* nodes as there are choropleth locations', function() { - var nodes = d3.selectAll('path.choroplethlocation'); + var nodes = d3SelectAll('path.choroplethlocation'); var Npts = 0; mock.data.forEach(function(trace) { @@ -483,7 +484,7 @@ describe('Test plot structure', function() { }); it('has as many *point* nodes as there are marker points', function() { - var nodes = d3.selectAll('path.point'); + var nodes = d3SelectAll('path.point'); var Npts = 0; mock.data.forEach(function(trace) { @@ -495,14 +496,14 @@ describe('Test plot structure', function() { }); it('has the correct name spaces', function() { - var mainSVGs = d3.selectAll('.main-svg'); + var mainSVGs = d3SelectAll('.main-svg'); mainSVGs.each(function() { var node = this; assertNamespaces(node); }); - var geoSVGs = d3.select('#geo').selectAll('svg'); + var geoSVGs = d3Select('#geo').selectAll('svg'); geoSVGs.each(function() { var node = this; @@ -541,8 +542,8 @@ describe('plot svg clip paths', function() { it('should set clip path url to ids (base case)', function(done) { plot().then(function() { - d3.selectAll('[clip-path]').each(function() { - var cp = d3.select(this).attr('clip-path'); + d3SelectAll('[clip-path]').each(function() { + var cp = d3Select(this).attr('clip-path'); expect(cp.substring(0, 6)).toEqual('url(\'#'); expect(cp.substring(cp.length - 2)).toEqual('\')'); @@ -556,7 +557,7 @@ describe('plot svg clip paths', function() { // https://github.com/angular/angular.js/issues/8934 // append with href - var base = d3.select('body') + var base = d3Select('body') .append('base') .attr('href', 'https://chart-studio.plotly.com'); @@ -564,8 +565,8 @@ describe('plot svg clip paths', function() { var href = window.location.href.split('#')[0]; plot().then(function() { - d3.selectAll('[clip-path]').each(function() { - var cp = d3.select(this).attr('clip-path'); + d3SelectAll('[clip-path]').each(function() { + var cp = d3Select(this).attr('clip-path'); expect(cp.substring(0, 6 + href.length)).toEqual('url(\'' + href + '#'); expect(cp.substring(cp.length - 2)).toEqual('\')'); diff --git a/test/jasmine/tests/plots_test.js b/test/jasmine/tests/plots_test.js index 5bc7be2f6ff..3191ff11d2c 100644 --- a/test/jasmine/tests/plots_test.js +++ b/test/jasmine/tests/plots_test.js @@ -3,7 +3,8 @@ var Plots = require('@src/plots/plots'); var Lib = require('@src/lib'); var Registry = require('@src/registry'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var supplyAllDefaults = require('../assets/supply_defaults'); @@ -779,7 +780,7 @@ describe('Test Plots', function() { lat: [20, 10] }]) .then(function() { - expect(d3.selectAll('g.trace.scattergeo').size()).toEqual(1); + expect(d3SelectAll('g.trace.scattergeo').size()).toEqual(1); destroyGraphDiv(); }) @@ -798,7 +799,7 @@ describe('Test Plots', function() { b: [0.2, 0.1] }]) .then(function() { - expect(d3.selectAll('g.trace.scatter').size()).toEqual(1); + expect(d3SelectAll('g.trace.scatter').size()).toEqual(1); destroyGraphDiv(); }) @@ -863,11 +864,11 @@ describe('Test Plots', function() { function assertCartesian(subplotsSVG, subplotsGL2D, msg) { var subplotsAll = subplotsSVG.concat(subplotsGL2D); - var subplots3 = d3.select(gd).selectAll('.cartesianlayer .subplot'); + var subplots3 = d3Select(gd).selectAll('.cartesianlayer .subplot'); expect(subplots3.size()).toBe(subplotsAll.length, msg); subplotsAll.forEach(function(subplot) { - expect(d3.select(gd).selectAll('.cartesianlayer .subplot.' + subplot).size()) + expect(d3Select(gd).selectAll('.cartesianlayer .subplot.' + subplot).size()) .toBe(1, msg + ' - ' + subplot); }); @@ -893,7 +894,7 @@ describe('Test Plots', function() { }; function assertSubplot(type, n, msg) { - expect(d3.select(gd).selectAll(subplotSelectors[type]).size()) + expect(d3Select(gd).selectAll(subplotSelectors[type]).size()) .toBe(n, msg + ' - ' + type); } diff --git a/test/jasmine/tests/pointcloud_test.js b/test/jasmine/tests/pointcloud_test.js index b3bb1d68abd..3fba5e52381 100644 --- a/test/jasmine/tests/pointcloud_test.js +++ b/test/jasmine/tests/pointcloud_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; // Test utilities var createGraphDiv = require('../assets/create_graph_div'); @@ -195,7 +195,7 @@ describe('pointcloud traces', function() { Plotly.newPlot(gd, _mock) .then(delay(20)) .then(function() { - var canvas = d3.select('.gl-canvas-context').node(); + var canvas = d3Select('.gl-canvas-context').node(); var RGBA = readPixel(canvas, canvas.width / 2 - 1, canvas.height / 2 - 1, 1, 1); diff --git a/test/jasmine/tests/polar_test.js b/test/jasmine/tests/polar_test.js index 21ac4b3f17d..bda000620a6 100644 --- a/test/jasmine/tests/polar_test.js +++ b/test/jasmine/tests/polar_test.js @@ -3,7 +3,8 @@ var Lib = require('@src/lib'); var Polar = require('@src/plots/polar'); var constants = require('@src/plots/polar/constants'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -226,12 +227,12 @@ describe('Test relayout on polar subplots:', function() { var dflt = constants.layerNames; function _assert(expected) { - var actual = d3.selectAll('g.polar > .polarsublayer'); + var actual = d3SelectAll('g.polar > .polarsublayer'); expect(actual.size()).toBe(expected.length, '# of layer'); actual.each(function(d, i) { - var className = d3.select(this) + var className = d3Select(this) .attr('class') .split('polarsublayer ')[1]; @@ -314,15 +315,15 @@ describe('Test relayout on polar subplots:', function() { var pos1 = []; Plotly.newPlot(gd, fig).then(function() { - d3.selectAll('.angularaxistick > text').each(function() { - var tx = d3.select(this); + d3SelectAll('.angularaxistick > text').each(function() { + var tx = d3Select(this); pos0.push([tx.attr('x'), tx.attr('y')]); }); return Plotly.relayout(gd, 'polar.angularaxis.rotation', 90); }) .then(function() { - d3.selectAll('.angularaxistick > text').each(function() { - var tx = d3.select(this); + d3SelectAll('.angularaxistick > text').each(function() { + var tx = d3Select(this); pos1.push([tx.attr('x'), tx.attr('y')]); }); @@ -337,11 +338,11 @@ describe('Test relayout on polar subplots:', function() { var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json')); function check(cnt, expected) { - var ticks = d3.selectAll('path.angularaxistick'); + var ticks = d3SelectAll('path.angularaxistick'); expect(ticks.size()).toBe(cnt, '# of ticks'); ticks.each(function() { - expect(d3.select(this).attr('d')).toBe(expected); + expect(d3Select(this).attr('d')).toBe(expected); }); } @@ -372,17 +373,17 @@ describe('Test relayout on polar subplots:', function() { var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json')); function assertCnt(selector, expected, msg) { - var sel = d3.select(gd).selectAll(selector); + var sel = d3Select(gd).selectAll(selector); expect(sel.size()).toBe(expected, msg); } function assertDisplay(selector, expected, msg) { - var sel = d3.select(gd).selectAll(selector); + var sel = d3Select(gd).selectAll(selector); if(!sel.size()) fail(selector + ' not found'); sel.each(function() { - expect(d3.select(this).attr('display')).toBe(expected, msg); + expect(d3Select(this).attr('display')).toBe(expected, msg); }); } @@ -451,7 +452,7 @@ describe('Test relayout on polar subplots:', function() { var lastBBox; function assertTitle(content, didBBoxChanged) { - var radialAxisTitle = d3.select('g.g-polartitle'); + var radialAxisTitle = d3Select('g.g-polartitle'); var txt = radialAxisTitle.select('text'); var bb = radialAxisTitle.node().getBBox(); var newBBox = [bb.x, bb.y, bb.width, bb.height]; @@ -508,11 +509,11 @@ describe('Test relayout on polar subplots:', function() { var inds = traces.map(function(_, i) { return i; }); function _assert(exp) { - expect(d3.selectAll('g.polar').size()).toBe(exp.subplot, '# subplot layer'); - expect(d3.selectAll('g.g-polartitle').size()).toBe(exp.rtitle, '# radial title'); + expect(d3SelectAll('g.polar').size()).toBe(exp.subplot, '# subplot layer'); + expect(d3SelectAll('g.g-polartitle').size()).toBe(exp.rtitle, '# radial title'); var clipCnt = 0; - d3.selectAll('clipPath').each(function() { + d3SelectAll('clipPath').each(function() { if(/polar-for-traces/.test(this.id)) clipCnt++; }); expect(clipCnt).toBe(exp.clip, '# clip paths'); @@ -548,7 +549,7 @@ describe('Test relayout on polar subplots:', function() { expect(gd._fullLayout.polar._subplot.angularAxis.range) .toBeCloseToArray([0, exp.period], 2, 'range in mocked angular axis - ' + msg); - expect(d3.selectAll('path.angularaxistick').size()) + expect(d3SelectAll('path.angularaxistick').size()) .toBe(exp.nTicks, '# of visible angular ticks - ' + msg); expect([gd.calcdata[0][5].x, gd.calcdata[0][5].y]) @@ -597,7 +598,7 @@ describe('Test relayout on polar subplots:', function() { // check number of arcs ('A') or lines ('L') in svg paths function _assert(msg, exp) { - var sp = d3.select(gd).select('g.polar'); + var sp = d3Select(gd).select('g.polar'); function assertLetterCount(query) { var d = sp.select(query).attr('d'); @@ -640,7 +641,7 @@ describe('Test relayout on polar subplots:', function() { function _assert(msg, showing) { var exp = showing ? null : 'none'; - var sp3 = d3.select(gd).select('.polarlayer > .polar'); + var sp3 = d3Select(gd).select('.polarlayer > .polar'); queries.forEach(function(q) { assertNodeDisplay(sp3.selectAll(q), [exp], msg + ' ' + q); }); @@ -869,7 +870,7 @@ describe('Test polar interactions:', function() { var resetNumber = 0; function _drag(p0, dp) { - var node = d3.select('.polar > .draglayer > .maindrag').node(); + var node = d3Select('.polar > .draglayer > .maindrag').node(); return drag({node: node, dpos: dp, pos0: p0}); } @@ -978,7 +979,7 @@ describe('Test polar interactions:', function() { // use 'special' drag method - as we need two mousemove events // to activate the radial drag mode function _drag(p0, dp) { - var node = d3.select('.polar > .draglayer > .radialdrag').node(); + var node = d3Select('.polar > .draglayer > .radialdrag').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: 2}); } @@ -1059,7 +1060,7 @@ describe('Test polar interactions:', function() { // use 'special' drag method - as we need two mousemove events // to activate the radial drag mode function _drag(p0, dp) { - var node = d3.select('.polar > .draglayer > .radialdrag-inner').node(); + var node = d3Select('.polar > .draglayer > .radialdrag-inner').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: 2}); } @@ -1097,7 +1098,7 @@ describe('Test polar interactions:', function() { var resetNumber = 0; function _drag(p0, dp) { - var node = d3.select('.polar > .draglayer > .angulardrag').node(); + var node = d3Select('.polar > .draglayer > .angulardrag').node(); return drag({node: node, dpos: dp, pos0: p0}); } @@ -1150,14 +1151,14 @@ describe('Test polar interactions:', function() { var scene, gl, nTraces; function _dragRadial() { - var node = d3.select('.polar > .draglayer > .radialdrag').node(); + var node = d3Select('.polar > .draglayer > .radialdrag').node(); var p0 = [375, 200]; var dp = [-50, 0]; return drag({node: node, dpos: dp, pos0: p0, nsteps: 2}); } function _dragAngular() { - var node = d3.select('.polar > .draglayer > .angulardrag').node(); + var node = d3Select('.polar > .draglayer > .angulardrag').node(); var p0 = [350, 150]; var dp = [-20, 20]; return drag({node: node, dpos: dp, pos0: p0}); @@ -1256,7 +1257,7 @@ describe('Test polar interactions:', function() { fig.layout.margin = {l: 50, t: 50, b: 50, r: 50}; function _drag(p0, dp, nsteps) { - var node = d3.select('.polar > .draglayer > .radialdrag').node(); + var node = d3Select('.polar > .draglayer > .radialdrag').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: nsteps}); } @@ -1289,7 +1290,7 @@ describe('Test polar interactions:', function() { var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json')); function _drag(p0, dp, nsteps) { - var node = d3.select('.polar > .draglayer > .maindrag').node(); + var node = d3Select('.polar > .draglayer > .maindrag').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: nsteps}); } @@ -1320,7 +1321,7 @@ describe('Test polar interactions:', function() { var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json')); function _drag(p0, dp, nsteps) { - var node = d3.select('.polar > .draglayer > .angulardrag').node(); + var node = d3Select('.polar > .draglayer > .angulardrag').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: nsteps}); } @@ -1368,7 +1369,7 @@ describe('Test polar *gridshape linear* interactions', function() { // use 'special' drag method - as we need two mousemove events // to activate the radial drag mode function _drag(p0, dp) { - var node = d3.select('.polar > .draglayer > .radialdrag').node(); + var node = d3Select('.polar > .draglayer > .radialdrag').node(); return drag({node: node, dpos: dp, pos0: p0, nsteps: 2}); } @@ -1416,7 +1417,7 @@ describe('Test polar *gridshape linear* interactions', function() { var layersRotateFromRadialAxis = ['.radial-axis', '.radial-line > line']; function _assertTransformRotate(msg, query, rot) { - var sp = d3.select(gd).select('g.polar'); + var sp = d3Select(gd).select('g.polar'); var t = sp.select(query).attr('transform'); var rotate = (t.split('rotate(')[1] || '').split(')')[0]; if(rot === null) { @@ -1427,7 +1428,7 @@ describe('Test polar *gridshape linear* interactions', function() { } function _run(msg, p0, dp, exp) { - var node = d3.select('.polar > .draglayer > .angulardrag').node(); + var node = d3Select('.polar > .draglayer > .angulardrag').node(); var dragFns = drag.makeFns({node: node, dpos: dp, pos0: p0}); return dragFns.start().then(function() { @@ -1502,11 +1503,11 @@ describe('Test polar *gridshape linear* interactions', function() { } function _run(msg, p0, dp, exp) { - var node = d3.select('.polar > .draglayer > .maindrag').node(); + var node = d3Select('.polar > .draglayer > .maindrag').node(); var dragFns = drag.makeFns({node: node, dpos: dp, pos0: p0}); return dragFns.start().then(function() { - var zl = d3.select(gd).select('g.zoomlayer'); + var zl = d3Select(gd).select('g.zoomlayer'); expect(path2coords(zl.select('.zoombox'))) .toBeCloseTo2DArray(exp.zoombox, 2, msg + ' - zoombox'); @@ -1607,7 +1608,7 @@ describe('Polar plots with css transforms', function() { } function _drag(start, dp) { - var node = d3.select('.polar > .draglayer > .maindrag').node(); + var node = d3Select('.polar > .draglayer > .maindrag').node(); var localStart = _getLocalPos(gd, start); return drag({node: node, dpos: dp, pos0: localStart}); } diff --git a/test/jasmine/tests/range_selector_test.js b/test/jasmine/tests/range_selector_test.js index 97b2333bd2a..a921f5e2d7b 100644 --- a/test/jasmine/tests/range_selector_test.js +++ b/test/jasmine/tests/range_selector_test.js @@ -1,7 +1,8 @@ var RangeSelector = require('@src/components/rangeselector'); var getUpdateObject = require('@src/components/rangeselector/get_update_object'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib'); var Lib = require('@src/lib'); var Color = require('@src/components/color'); @@ -473,18 +474,18 @@ describe('range selector interactions:', function() { afterEach(destroyGraphDiv); function assertNodeCount(query, cnt) { - expect(d3.selectAll(query).size()).toEqual(cnt); + expect(d3SelectAll(query).size()).toEqual(cnt); } function checkActiveButton(activeIndex, msg) { - d3.selectAll('.button').each(function(d, i) { + d3SelectAll('.button').each(function(d, i) { expect(d._isActive).toBe(activeIndex === i, msg + ': button #' + i); }); } function checkButtonColor(bgColor, activeColor) { - d3.selectAll('.button').each(function(d) { - var rect = d3.select(this).select('rect'); + d3SelectAll('.button').each(function(d) { + var rect = d3Select(this).select('rect'); expect(rect.node().style.fill).toEqual( d._isActive ? activeColor : bgColor @@ -554,7 +555,7 @@ describe('range selector interactions:', function() { it('should update range and active button when clicked', function() { var range0 = gd.layout.xaxis.range[0]; - var buttons = d3.selectAll('.button').select('rect'); + var buttons = d3SelectAll('.button').select('rect'); checkActiveButton(buttons.size() - 1); @@ -573,7 +574,7 @@ describe('range selector interactions:', function() { }); it('should change color on mouse over', function() { - var button = d3.select('.button').select('rect'); + var button = d3Select('.button').select('rect'); var pos = getRectCenter(button.node()); var fillColor = Color.rgb(gd._fullLayout.xaxis.rangeselector.bgcolor); @@ -589,7 +590,7 @@ describe('range selector interactions:', function() { }); it('should update is active relayout calls', function(done) { - var buttons = d3.selectAll('.button').select('rect'); + var buttons = d3SelectAll('.button').select('rect'); // 'all' should be active at first checkActiveButton(buttons.size() - 1, 'initial'); diff --git a/test/jasmine/tests/range_slider_test.js b/test/jasmine/tests/range_slider_test.js index 4900842479b..197d46f946d 100644 --- a/test/jasmine/tests/range_slider_test.js +++ b/test/jasmine/tests/range_slider_test.js @@ -7,7 +7,7 @@ var RangeSlider = require('@src/components/rangeslider'); var constants = require('@src/components/rangeslider/constants'); var mock = require('../../image/mocks/range_slider.json'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -201,7 +201,7 @@ describe('Visible rangesliders', function() { Plotly.newPlot(gd, mockCopy.data, mockCopy.layout, { staticPlot: true }) .then(function() { // Try move minimum handle - var minHandle = d3.select('.' + constants.grabberMinClassName).node(); + var minHandle = d3Select('.' + constants.grabberMinClassName).node(); expect(minHandle).not.toEqual(null); var minHandleRect = minHandle.getBoundingClientRect(); var x = minHandleRect.x + minHandleRect.width / 2; @@ -210,7 +210,7 @@ describe('Visible rangesliders', function() { }) .then(function() { // Try move maximum handle - var maxHandle = d3.select('.' + constants.grabberMaxClassName).node(); + var maxHandle = d3Select('.' + constants.grabberMaxClassName).node(); expect(maxHandle).not.toEqual(null); var maxHandleRect = maxHandle.getBoundingClientRect(); var x = maxHandleRect.x + maxHandleRect.width / 2; @@ -219,7 +219,7 @@ describe('Visible rangesliders', function() { }) .then(function() { // Slidebox should not exist - var slidebox = d3.select('.' + constants.slideBoxClassName).node(); + var slidebox = d3Select('.' + constants.slideBoxClassName).node(); expect(slidebox).toEqual(null); }) .then(function() { @@ -548,7 +548,7 @@ describe('Rangeslider visibility property', function() { it('should clear traces in range plot when needed', function(done) { function count(query) { - return d3.select(getRangeSlider()).selectAll(query).size(); + return d3Select(getRangeSlider()).selectAll(query).size(); } Plotly.newPlot(gd, [{ diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 01fa0c75f5c..2f83014fb6a 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -1,7 +1,8 @@ var Plotly = require('@lib/index'); var attributes = require('@src/traces/sankey/attributes'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var d3sankey = require('@plotly/d3-sankey'); var d3SankeyCircular = require('@plotly/d3-sankey-circular'); var mock = require('@mocks/sankey_energy.json'); @@ -362,22 +363,22 @@ describe('sankey tests', function() { Plotly.newPlot(gd, mockCopy) .then(function() { expect(gd.data.length).toEqual(1); - expect(d3.selectAll('.sankey').size()).toEqual(1); + expect(d3SelectAll('.sankey').size()).toEqual(1); return Plotly.addTraces(gd, mockCopy2.data[0]); }) .then(function() { expect(gd.data.length).toEqual(2); - expect(d3.selectAll('.sankey').size()).toEqual(2); + expect(d3SelectAll('.sankey').size()).toEqual(2); return Plotly.deleteTraces(gd, [0]); }) .then(function() { expect(gd.data.length).toEqual(1); - expect(d3.selectAll('.sankey').size()).toEqual(1); + expect(d3SelectAll('.sankey').size()).toEqual(1); return Plotly.deleteTraces(gd, 0); }) .then(function() { expect(gd.data.length).toEqual(0); - expect(d3.selectAll('.sankey').size()).toEqual(0); + expect(d3SelectAll('.sankey').size()).toEqual(0); }) .then(done, done.fail); }); @@ -401,17 +402,17 @@ describe('sankey tests', function() { Plotly.newPlot(gd, mockCopy) .then(function() { expect(gd.data.length).toEqual(1); - expect(d3.selectAll('.sankey').size()).toEqual(1); + expect(d3SelectAll('.sankey').size()).toEqual(1); return Plotly.restyle(gd, 'visible', false); }) .then(function() { expect(gd.data.length).toEqual(1); - expect(d3.selectAll('.sankey').size()).toEqual(0); + expect(d3SelectAll('.sankey').size()).toEqual(0); return Plotly.restyle(gd, 'visible', true); }) .then(function() { expect(gd.data.length).toEqual(1); - expect(d3.selectAll('.sankey').size()).toEqual(1); + expect(d3SelectAll('.sankey').size()).toEqual(1); }) .then(done, done.fail); }); @@ -430,8 +431,8 @@ describe('sankey tests', function() { }]; Plotly.newPlot(gd, minimock) .then(function() { - expect(d3.selectAll('.sankey .node-rect')[0].reduce(function(prevMin, rect) { - return Math.min(prevMin, d3.select(rect).attr('height')); + expect(d3SelectAll('.sankey .node-rect')[0].reduce(function(prevMin, rect) { + return Math.min(prevMin, d3Select(rect).attr('height')); }, Infinity)).toEqual(0.5); }) .then(done, done.fail); @@ -491,7 +492,7 @@ describe('sankey tests', function() { expect(gd._fullData[0].node.groups).toEqual(newGroup); // Check that all links have updated their links - d3.selectAll('.sankey .sankey-link').each(function(d, i) { + d3SelectAll('.sankey .sankey-link').each(function(d, i) { var path = this.getAttribute('d'); expect(path).toBe(d.linkPath()(d), 'link ' + i + ' has wrong `d` attribute'); }); @@ -499,7 +500,7 @@ describe('sankey tests', function() { // Check that ghost nodes used for animations: // 1) are drawn first so they apear behind var seeRealNode = false; - var sankeyNodes = d3.selectAll('.sankey .sankey-node'); + var sankeyNodes = d3SelectAll('.sankey .sankey-node'); sankeyNodes.each(function(d, i) { if(d.partOfGroup) { if(seeRealNode) fail('node ' + i + ' is a ghost node and should be behind'); @@ -783,7 +784,7 @@ describe('sankey tests', function() { ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'] ); - var g = d3.select('.hovertext'); + var g = d3Select('.hovertext'); var pos = g.node().getBoundingClientRect(); expect(pos.x).toBeCloseTo(555, -1.5, 'it should have correct x position'); expect(pos.y).toBeCloseTo(196, -1.5, 'it should have correct y position'); @@ -797,7 +798,7 @@ describe('sankey tests', function() { ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'] ); - var g = d3.select('.hovertext'); + var g = d3Select('.hovertext'); var pos = g.node().getBoundingClientRect(); expect(pos.x).toBeCloseTo(279, -1.5, 'it should have correct x position'); expect(pos.y).toBeCloseTo(500, -1.5, 'it should have correct y position'); @@ -935,7 +936,7 @@ describe('sankey tests', function() { ['rgb(144, 238, 144)', 'rgb(68, 68, 68)', 13, 'Arial', 'rgb(68, 68, 68)'] ); - var g = d3.selectAll('.hovertext'); + var g = d3SelectAll('.hovertext'); expect(g.size()).toBe(1); return Plotly.relayout(gd, 'hovermode', 'x'); }) @@ -957,7 +958,7 @@ describe('sankey tests', function() { ] ); - var g = d3.select('.hovertext:nth-child(3)'); + var g = d3Select('.hovertext:nth-child(3)'); var domRect = g.node().getBoundingClientRect(); expect((domRect.bottom + domRect.top) / 2).toBeCloseTo(203, 0, 'it should center the hoverlabel associated with hovered link'); }) @@ -1467,10 +1468,10 @@ function assertLabel(content, style) { } function assertMultipleLabels(contentArray, styleArray) { - var g = d3.selectAll('.hovertext'); + var g = d3SelectAll('.hovertext'); expect(g.size()).toEqual(contentArray.length, 'wrong number of hoverlabels, expected to find ' + contentArray.length); g.each(function(el, i) { - _assertLabelGroup(d3.select(this), contentArray[i], styleArray[i]); + _assertLabelGroup(d3Select(this), contentArray[i], styleArray[i]); }); } @@ -1486,7 +1487,7 @@ function _assertLabelGroup(g, content, style) { expect(lines.size()).toBe(content.length - 1); lines.each(function(_, i) { - expect(d3.select(this).text()).toBe(content[i]); + expect(d3Select(this).text()).toBe(content[i]); }); expect(name.text()).toBe(content[content.length - 1]); @@ -1501,7 +1502,7 @@ function _assertLabelGroup(g, content, style) { } function assertNoLabel() { - var g = d3.selectAll('.hovertext'); + var g = d3SelectAll('.hovertext'); expect(g.size()).toBe(0); } diff --git a/test/jasmine/tests/scatter3d_test.js b/test/jasmine/tests/scatter3d_test.js index 3c4f147151e..577492252fa 100644 --- a/test/jasmine/tests/scatter3d_test.js +++ b/test/jasmine/tests/scatter3d_test.js @@ -4,14 +4,14 @@ var Color = require('@src/components/color'); var Scatter3D = require('@src/traces/scatter3d'); -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var delay = require('../assets/delay'); function countCanvases() { - return d3.selectAll('canvas').size(); + return d3SelectAll('canvas').size(); } describe('Scatter3D defaults', function() { diff --git a/test/jasmine/tests/scatter_test.js b/test/jasmine/tests/scatter_test.js index 5f6667c6acc..4006d0b640f 100644 --- a/test/jasmine/tests/scatter_test.js +++ b/test/jasmine/tests/scatter_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Scatter = require('@src/traces/scatter'); var makeBubbleSizeFn = require('@src/traces/scatter/make_bubble_size_func'); var linePoints = require('@src/traces/scatter/line_points'); @@ -28,7 +29,7 @@ var getColor = function(node) { return node.style.fill; }; var getMarkerSize = function(node) { // find path arc multiply by 2 to get the corresponding marker.size value // (works for circles only) - return d3.select(node).attr('d').split('A')[1].split(',')[0] * 2; + return d3Select(node).attr('d').split('A')[1].split(',')[0] * 2; }; describe('Test scatter', function() { @@ -663,7 +664,7 @@ describe('end-to-end scatter tests', function() { y: [2, 3, 4, 5, 6, 7, 8], customdata: [null, undefined, 0, false, {foo: 'bar'}, 'a'] }]).then(function() { - var points = d3.selectAll('g.scatterlayer').selectAll('.point'); + var points = d3SelectAll('g.scatterlayer').selectAll('.point'); // Rather than just duplicating the logic, let's be explicit about // what's expected. Specifially, only null and undefined (the default) @@ -671,17 +672,17 @@ describe('end-to-end scatter tests', function() { var expected = [false, false, true, true, true, true, false]; points.each(function(cd, i) { - expect(d3.select(this).classed('plotly-customdata')).toBe(expected[i]); + expect(d3Select(this).classed('plotly-customdata')).toBe(expected[i]); }); return Plotly.animate(gd, [{ data: [{customdata: []}] }], {frame: {redraw: false, duration: 0}}); }).then(function() { - var points = d3.selectAll('g.scatterlayer').selectAll('.point'); + var points = d3SelectAll('g.scatterlayer').selectAll('.point'); points.each(function() { - expect(d3.select(this).classed('plotly-customdata')).toBe(false); + expect(d3Select(this).classed('plotly-customdata')).toBe(false); }); }).then(done, done.fail); }); @@ -693,19 +694,19 @@ describe('end-to-end scatter tests', function() { y: [2, 3, 4], text: ['a', 'b', 'c'] }]).then(function() { - expect(Plotly.d3.selectAll('.textpoint').size()).toBe(3); + expect(d3SelectAll('.textpoint').size()).toBe(3); }).then(done, done.fail); }); it('should remove all point and text nodes on blank data', function(done) { function assertNodeCnt(ptCnt, txCnt) { - expect(d3.selectAll('.point').size()).toEqual(ptCnt); - expect(d3.selectAll('.textpoint').size()).toEqual(txCnt); + expect(d3SelectAll('.point').size()).toEqual(ptCnt); + expect(d3SelectAll('.textpoint').size()).toEqual(txCnt); } function assertText(content) { - d3.selectAll('.textpoint').each(function(_, i) { - var tx = d3.select(this).select('text'); + d3SelectAll('.textpoint').each(function(_, i) { + var tx = d3Select(this).select('text'); expect(tx.text()).toEqual(content[i]); }); } @@ -839,8 +840,8 @@ describe('end-to-end scatter tests', function() { }); function _assertNodes(ptStyle, txContent) { - var pts = d3.selectAll('.point'); - var txs = d3.selectAll('.textpoint'); + var pts = d3SelectAll('.point'); + var txs = d3SelectAll('.textpoint'); expect(pts.size()).toEqual(ptStyle.length); expect(txs.size()).toEqual(txContent.length); @@ -850,7 +851,7 @@ describe('end-to-end scatter tests', function() { }); txs.each(function(_, i) { - expect(d3.select(this).select('text').text()).toEqual(txContent[i], 'tx ' + i); + expect(d3Select(this).select('text').text()).toEqual(txContent[i], 'tx ' + i); }); } @@ -975,7 +976,7 @@ describe('end-to-end scatter tests', function() { it('animates fillcolor', function(done) { function fill() { - return d3.selectAll('.js-fill').node().style.fill; + return d3SelectAll('.js-fill').node().style.fill; } Plotly.newPlot(gd, [{ @@ -1000,7 +1001,7 @@ describe('end-to-end scatter tests', function() { var trace2 = {y: [3, 4, 5, 6], fill: 'tonexty', mode: 'none'}; function checkFill(visible, msg) { - var fillSelection = d3.select(gd).selectAll('.scatterlayer .js-fill'); + var fillSelection = d3Select(gd).selectAll('.scatterlayer .js-fill'); expect(fillSelection.size()).toBe(1, msg); negateIf(visible, expect(fillSelection.attr('d'))).toBe('M0,0Z', msg); } @@ -1063,7 +1064,7 @@ describe('end-to-end scatter tests', function() { it('should work with typed arrays', function(done) { function _assert(colors, sizes) { - var pts = d3.selectAll('.point'); + var pts = d3SelectAll('.point'); expect(pts.size()).toBe(3, '# of pts'); pts.each(function(_, i) { @@ -1112,7 +1113,7 @@ describe('end-to-end scatter tests', function() { [40, 30, 20] ); - var legendPts = d3.select('.legend').selectAll('.scatterpts'); + var legendPts = d3Select('.legend').selectAll('.scatterpts'); expect(legendPts.size()).toBe(1, '# legend items'); expect(getColor(legendPts.node())).toBe('rgb(0, 255, 0)', 'legend pt color'); expect(getMarkerSize(legendPts.node())).toBe(16, 'legend pt size'); @@ -1193,7 +1194,7 @@ describe('end-to-end scatter tests', function() { it('should be able to start from visible:false', function(done) { function _assert(msg, cnt) { - var layer = d3.select(gd).select('g.scatterlayer'); + var layer = d3Select(gd).select('g.scatterlayer'); expect(layer.selectAll('.point').size()).toBe(cnt, msg + '- scatter pts cnt'); } @@ -1222,8 +1223,8 @@ describe('end-to-end scatter tests', function() { fill: 'tonexty' }]) .then(function() { - expect(d3.selectAll('.js-fill').size()).toBe(1, 'js-fill is there'); - expect(d3.select('.js-fill').attr('d')).toBe('M0,0Z', 'js-fill has an empty path'); + expect(d3SelectAll('.js-fill').size()).toBe(1, 'js-fill is there'); + expect(d3Select('.js-fill').attr('d')).toBe('M0,0Z', 'js-fill has an empty path'); }) .then(done, done.fail); }); @@ -1491,8 +1492,8 @@ describe('Test Scatter.style', function() { function assertPts(attr, getterFn, expectation, msg2) { var selector = attr.indexOf('textfont') === 0 ? '.textpoint > text' : '.point'; - d3.select(gd).selectAll('.trace').each(function(_, i) { - var pts = d3.select(this).selectAll(selector); + d3Select(gd).selectAll('.trace').each(function(_, i) { + var pts = d3Select(this).selectAll(selector); var expi = expectation[i]; expect(pts.size()) @@ -1848,7 +1849,7 @@ describe('Test scatter *clipnaxis*:', function() { } function _assert(layerClips, nodeDisplays, errorBarClips, lineClips) { - var subplotLayer = d3.select('.plot'); + var subplotLayer = d3Select('.plot'); var scatterLayer = subplotLayer.select('.scatterlayer'); _assertClip(subplotLayer, layerClips[0], 1, 'subplot layer'); diff --git a/test/jasmine/tests/scattergeo_test.js b/test/jasmine/tests/scattergeo_test.js index bdfc1897cf5..4a57113c9ab 100644 --- a/test/jasmine/tests/scattergeo_test.js +++ b/test/jasmine/tests/scattergeo_test.js @@ -5,7 +5,8 @@ var loggers = require('@src/lib/loggers'); var ScatterGeo = require('@src/traces/scattergeo'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var mouseEvent = require('../assets/mouse_event'); @@ -335,7 +336,7 @@ describe('Test scattergeo hover', function() { name: content[1] }); assertHoverLabelStyle( - d3.select('g.hovertext'), + d3Select('g.hovertext'), style ); } @@ -479,7 +480,7 @@ describe('scattergeo drawing', function() { it('preserves order after hide/show', function(done) { function getIndices() { var out = []; - d3.selectAll('.scattergeo').each(function(d) { out.push(d[0].trace.index); }); + d3SelectAll('.scattergeo').each(function(d) { out.push(d[0].trace.index); }); return out; } diff --git a/test/jasmine/tests/scattergl_select_test.js b/test/jasmine/tests/scattergl_select_test.js index 2afd06325e9..af2bb572000 100644 --- a/test/jasmine/tests/scattergl_select_test.js +++ b/test/jasmine/tests/scattergl_select_test.js @@ -1,7 +1,7 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -13,7 +13,7 @@ var readPixel = require('../assets/read_pixel'); function drag(gd, path) { var len = path.length; - var el = d3.select(gd).select('rect.nsewdrag').node(); + var el = d3Select(gd).select('rect.nsewdrag').node(); var opts = {element: el}; Lib.clearThrottle(); diff --git a/test/jasmine/tests/scatterpolargl_test.js b/test/jasmine/tests/scatterpolargl_test.js index d8c654922af..14b603018f1 100644 --- a/test/jasmine/tests/scatterpolargl_test.js +++ b/test/jasmine/tests/scatterpolargl_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib'); var Lib = require('@src/lib'); var ScatterPolarGl = require('@src/traces/scatterpolargl'); -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -124,7 +124,7 @@ describe('Test scatterpolargl interactions:', function() { }); function countCanvases() { - return d3.selectAll('canvas').size(); + return d3SelectAll('canvas').size(); } function totalPixels() { @@ -146,14 +146,14 @@ describe('Test scatterpolargl interactions:', function() { }) .then(function() { expect(countCanvases()).toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); return Plotly.restyle(gd, 'type', 'scatterpolargl'); }) .then(function() { expect(countCanvases()).toBe(3); expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(0); scene = gd._fullLayout.polar._subplot._scene; spyOn(scene, 'destroy').and.callThrough(); @@ -164,7 +164,7 @@ describe('Test scatterpolargl interactions:', function() { expect(countCanvases()).toBe(0); expect(scene.destroy).toHaveBeenCalledTimes(1); expect(gd._fullLayout.polar._subplot._scene).toBe(null); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); return Plotly.restyle(gd, 'type', 'scatterpolargl'); }) @@ -174,7 +174,7 @@ describe('Test scatterpolargl interactions:', function() { // https://github.com/plotly/plotly.js/issues/3094 // got fixed expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(0); }) .then(done, done.fail); }); @@ -200,7 +200,7 @@ describe('Test scatterpolargl interactions:', function() { .then(function() { expect(countCanvases()).toBe(3); expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(0); sceneXY = gd._fullLayout._plots.xy._scene; spyOn(sceneXY, 'destroy').and.callThrough(); @@ -213,7 +213,7 @@ describe('Test scatterpolargl interactions:', function() { .then(function() { expect(countCanvases()).toBe(3); expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); expect(sceneXY.destroy).toHaveBeenCalledTimes(0); expect(gd._fullLayout._plots.xy._scene).not.toBe(null); @@ -228,14 +228,14 @@ describe('Test scatterpolargl interactions:', function() { .then(function() { expect(countCanvases()).toBe(3); expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(0); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(0); return Plotly.restyle(gd, 'type', 'scatter', [0]); }) .then(function() { expect(countCanvases()).toBe(3); expect(totalPixels()).not.toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(1); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(1); // Similarly, does not destroy scene in this case, // we don't need as the same gl canvases are still there @@ -249,7 +249,7 @@ describe('Test scatterpolargl interactions:', function() { }) .then(function() { expect(countCanvases()).toBe(0); - expect(d3.selectAll('.scatterlayer > .trace').size()).toBe(2); + expect(d3SelectAll('.scatterlayer > .trace').size()).toBe(2); expect(sceneXY.destroy).toHaveBeenCalledTimes(1); expect(gd._fullLayout._plots.xy._scene).toBe(null); diff --git a/test/jasmine/tests/scatterternary_test.js b/test/jasmine/tests/scatterternary_test.js index 316239ad008..495d1e33974 100644 --- a/test/jasmine/tests/scatterternary_test.js +++ b/test/jasmine/tests/scatterternary_test.js @@ -2,7 +2,8 @@ var Plotly = require('@lib'); var Lib = require('@src/lib'); var ScatterTernary = require('@src/traces/scatterternary'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -314,19 +315,19 @@ describe('scatterternary plot and hover', function() { }); it('should put scatterternary trace in \'frontplot\' node', function() { - var nodes = d3.select('.frontplot').selectAll('.scatter'); + var nodes = d3Select('.frontplot').selectAll('.scatter'); expect(nodes.size()).toEqual(1); }); it('should generate one line path per trace', function() { - var nodes = d3.selectAll('path.js-line'); + var nodes = d3SelectAll('path.js-line'); expect(nodes.size()).toEqual(mock.data.length); }); it('should generate as many points as there are data points', function() { - var nodes = d3.selectAll('path.point'); + var nodes = d3SelectAll('path.point'); expect(nodes.size()).toEqual(mock.data[0].a.length); }); @@ -456,8 +457,8 @@ describe('Test scatterternary *cliponaxis*', function() { var fig = Lib.extendDeep({}, require('@mocks/ternary_markers.json')); function _assert(layerClips, nodeDisplays, lineClips) { - var frontLayer = d3.select('.frontplot'); - var scatterLayer = d3.select('.scatterlayer'); + var frontLayer = d3Select('.frontplot'); + var scatterLayer = d3Select('.scatterlayer'); assertClip(frontLayer, layerClips[0], 1, 'front layer'); assertClip(scatterLayer, layerClips[1], 1, 'scatter layer'); diff --git a/test/jasmine/tests/select_test.js b/test/jasmine/tests/select_test.js index 859df9d0676..889cd178cff 100644 --- a/test/jasmine/tests/select_test.js +++ b/test/jasmine/tests/select_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var Lib = require('@src/lib'); @@ -49,9 +50,9 @@ function drag(path, options) { function assertSelectionNodes(cornerCnt, outlineCnt, _msg) { var msg = _msg ? ' - ' + _msg : ''; - expect(d3.selectAll('.zoomlayer > .zoombox-corners').size()) + expect(d3SelectAll('.zoomlayer > .zoombox-corners').size()) .toBe(cornerCnt, 'selection corner count' + msg); - expect(d3.selectAll('.zoomlayer > .select-outline').size()) + expect(d3SelectAll('.zoomlayer > .select-outline').size()) .toBe(outlineCnt, 'selection outline count' + msg); } @@ -718,9 +719,9 @@ describe('Click-to-select', function() { assertSelectionCleared(); }) .then(function() { - d3.select(gd).select('g.plot').each(function() { - d3.select(this).selectAll('g.errorbar').selectAll('path').each(function() { - expect(d3.select(this).attr('style')) + d3Select(gd).select('g.plot').each(function() { + d3Select(this).selectAll('g.errorbar').selectAll('path').each(function() { + expect(d3Select(this).attr('style')) .toBe('vector-effect: non-scaling-stroke; stroke-width: 2px; stroke: rgb(68, 68, 68); stroke-opacity: 1; opacity: 1; fill: rgb(255, 255, 0); fill-opacity: 1;', 'to be visible' ); }); @@ -1591,7 +1592,7 @@ describe('Test select box and lasso in general:', function() { } function _assert(msg, exp) { - var outline = d3.select(gd).select('.zoomlayer').select('.select-outline-1'); + var outline = d3Select(gd).select('.zoomlayer').select('.select-outline-1'); if(exp.outline) { expect(outline2coords(outline)).toBeCloseTo2DArray(exp.outline, 2, msg); @@ -2068,11 +2069,11 @@ describe('Test select box and lasso per trace:', function() { var assertLassoPoints = makeAssertLassoPoints('geo'); function assertNodeOpacity(exp) { - var traces = d3.select(gd).selectAll('.scatterlayer > .trace'); + var traces = d3Select(gd).selectAll('.scatterlayer > .trace'); expect(traces.size()).toBe(Object.keys(exp).length, 'correct # of trace '); traces.each(function(_, i) { - d3.select(this).selectAll('path.point').each(function(_, j) { + d3Select(this).selectAll('path.point').each(function(_, j) { expect(Number(this.style.opacity)) .toBe(exp[i][j], 'node opacity - trace ' + i + ' pt ' + j); }); @@ -2868,7 +2869,7 @@ describe('Test select box and lasso per trace:', function() { function countUnSelectedPaths(selector) { var unselected = 0; - d3.select(gd).selectAll(selector).each(function() { + d3Select(gd).selectAll(selector).each(function() { var opacity = this.style.opacity; if(opacity < 1) unselected++; }); @@ -2977,7 +2978,7 @@ describe('Test select box and lasso per trace:', function() { var assertSelectedPoints = makeAssertSelectedPoints(); function assertFillOpacity(exp, msg) { - var txtPts = d3.select(gd).select('g.plot').selectAll('text'); + var txtPts = d3Select(gd).select('g.plot').selectAll('text'); expect(txtPts.size()).toBe(exp.length, '# of text nodes: ' + msg); @@ -3096,7 +3097,7 @@ describe('Test that selections persist:', function() { afterEach(destroyGraphDiv); function assertPtOpacity(selector, expected) { - d3.selectAll(selector).each(function(_, i) { + d3SelectAll(selector).each(function(_, i) { var style = Number(this.style.opacity); expect(style).toBe(expected.style[i], 'style for pt ' + i); }); @@ -3238,7 +3239,7 @@ describe('Test that selection styles propagate to range-slider plot:', function( function makeAssertFn(query) { return function(msg, expected) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var mainPlot3 = gd3.select('.cartesianlayer'); var rangePlot3 = gd3.select('.rangeslider-rangeplot'); diff --git a/test/jasmine/tests/shapes_test.js b/test/jasmine/tests/shapes_test.js index 5fbdcf4bdaf..1bbab85dffd 100644 --- a/test/jasmine/tests/shapes_test.js +++ b/test/jasmine/tests/shapes_test.js @@ -7,7 +7,7 @@ var Lib = require('@src/lib'); var Plots = require('@src/plots/plots'); var Axes = require('@src/plots/cartesian/axes'); -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -33,17 +33,17 @@ var dyToEnlargeHeight = { n: -10, s: 10, w: 0, e: 0, nw: -10, se: 10, ne: -10, s // Helper functions function getMoveLineDragElement(index) { index = index || 0; - return d3.selectAll('.shapelayer g[data-index="' + index + '"] path').node(); + return d3SelectAll('.shapelayer g[data-index="' + index + '"] path').node(); } function getResizeLineOverStartPointElement(index) { index = index || 0; - return d3.selectAll('.shapelayer g[data-index="' + index + '"] circle[data-line-point="start-point"]').node(); + return d3SelectAll('.shapelayer g[data-index="' + index + '"] circle[data-line-point="start-point"]').node(); } function getResizeLineOverEndPointElement(index) { index = index || 0; - return d3.selectAll('.shapelayer g[data-index="' + index + '"] circle[data-line-point="end-point"]').node(); + return d3SelectAll('.shapelayer g[data-index="' + index + '"] circle[data-line-point="end-point"]').node(); } describe('Test shapes defaults:', function() { @@ -185,15 +185,15 @@ function isShapeInSubplot(shape) { } function countShapeLowerLayerNodes() { - return d3.selectAll('.layer-below > .shapelayer').size(); + return d3SelectAll('.layer-below > .shapelayer').size(); } function countShapeUpperLayerNodes() { - return d3.selectAll('.layer-above > .shapelayer').size(); + return d3SelectAll('.layer-above > .shapelayer').size(); } function countShapeLayerNodesInSubplots() { - return d3.selectAll('.layer-subplot').size(); + return d3SelectAll('.layer-subplot').size(); } function countSubplots(gd) { @@ -201,15 +201,15 @@ function countSubplots(gd) { } function countShapePathsInLowerLayer() { - return d3.selectAll('.layer-below > .shapelayer > path').size(); + return d3SelectAll('.layer-below > .shapelayer > path').size(); } function countShapePathsInUpperLayer() { - return d3.selectAll('.layer-above > .shapelayer > path').size(); + return d3SelectAll('.layer-above > .shapelayer > path').size(); } function countShapePathsInSubplots() { - return d3.selectAll('.layer-subplot > .shapelayer > path').size(); + return d3SelectAll('.layer-subplot > .shapelayer > path').size(); } describe('Test shapes:', function() { @@ -488,7 +488,7 @@ describe('shapes axis reference changes', function() { afterEach(destroyGraphDiv); function getShape(index) { - var s = d3.selectAll('path[data-index="' + index + '"]'); + var s = d3SelectAll('path[data-index="' + index + '"]'); expect(s.size()).toBe(1); return s; } @@ -721,7 +721,7 @@ describe('Test shapes: a plot with shapes and an overlaid axis', function() { }); function getFirstShapeNode() { - return d3.selectAll('.shapelayer path').node(); + return d3SelectAll('.shapelayer path').node(); } function assertShapeSize(shapeNode, w, h) { @@ -731,7 +731,7 @@ function assertShapeSize(shapeNode, w, h) { } function assertShapeFullyVisible(shapeElem) { - var gridLayer = d3.selectAll('.gridlayer').node(); + var gridLayer = d3SelectAll('.gridlayer').node(); assertElemInside(shapeElem, gridLayer, 'shape element fully visible'); } @@ -958,9 +958,9 @@ describe('A fixed size shape', function() { assertShapeSize(shapeNode, 25, 25); // Check position relative to data with zero line and grid line as a reference - var xAxisLine = d3.selectAll('.zerolinelayer .yzl').node(); + var xAxisLine = d3SelectAll('.zerolinelayer .yzl').node(); assertElemTopsAligned(shapeNode, xAxisLine, 'Top edges of shape and x-axis zero line aligned'); - var gridLine = d3.selectAll('.gridlayer .xgrid:nth-child(3)').node(); + var gridLine = d3SelectAll('.gridlayer .xgrid:nth-child(3)').node(); assertElemRightTo(shapeNode, gridLine, 'Shape right to third grid line'); }); @@ -973,7 +973,7 @@ describe('A fixed size shape', function() { var shapeNode = getFirstShapeNode(); assertShapeSize(shapeNode, 25, 25); - assertElemRightTo(shapeNode, d3.selectAll('.cartesianlayer').node(), 'Shape right to plotting area'); + assertElemRightTo(shapeNode, d3SelectAll('.cartesianlayer').node(), 'Shape right to plotting area'); }); it('can be sized by pixel horizontally and relative to data vertically', function() { @@ -1479,7 +1479,7 @@ describe('Test shapes', function() { } function getShapeNode(index) { - return d3.selectAll('.shapelayer path').filter(function() { + return d3SelectAll('.shapelayer path').filter(function() { return +this.getAttribute('data-index') === index; }).node(); } diff --git a/test/jasmine/tests/sliders_test.js b/test/jasmine/tests/sliders_test.js index 049c93a3fd8..3b7f9618fda 100644 --- a/test/jasmine/tests/sliders_test.js +++ b/test/jasmine/tests/sliders_test.js @@ -1,7 +1,8 @@ var Sliders = require('@src/components/sliders'); var constants = require('@src/components/sliders/constants'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib'); var Lib = require('@src/lib'); var createGraphDiv = require('../assets/create_graph_div'); @@ -332,7 +333,7 @@ describe('sliders interactions', function() { it('positions sliders repeatably when they push margins', function(done) { function checkPositions(msg) { - d3.select(gd).selectAll('.slider-group').each(function(d, i) { + d3Select(gd).selectAll('.slider-group').each(function(d, i) { var sliderBB = this.getBoundingClientRect(); var gdBB = gd.getBoundingClientRect(); @@ -570,6 +571,6 @@ describe('sliders interactions', function() { }); function assertNodeCount(query, cnt) { - expect(d3.selectAll(query).size()).toEqual(cnt); + expect(d3SelectAll(query).size()).toEqual(cnt); } }); diff --git a/test/jasmine/tests/snapshot_test.js b/test/jasmine/tests/snapshot_test.js index 0689e774c89..1cebfbadb9e 100644 --- a/test/jasmine/tests/snapshot_test.js +++ b/test/jasmine/tests/snapshot_test.js @@ -1,7 +1,8 @@ var Plotly = require('@lib/index'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -225,10 +226,10 @@ describe('Plotly.Snapshot', function() { it('should force *visibility: visible* for text elements with *visibility: inherit*', function(done) { // we've gotten rid of visibility almost entirely, using display instead - d3.select(gd).style('visibility', 'inherit'); + d3Select(gd).style('visibility', 'inherit'); Plotly.newPlot(gd, subplotMock.data, subplotMock.layout).then(function() { - d3.select(gd).selectAll('text').each(function() { + d3Select(gd).selectAll('text').each(function() { var thisStyle = window.getComputedStyle(this); expect(thisStyle.visibility).toEqual('visible'); expect(thisStyle.display).toEqual('block'); @@ -269,11 +270,11 @@ describe('Plotly.Snapshot', function() { showlegend: true }) .then(function() { - d3.selectAll('text').each(function() { + d3SelectAll('text').each(function() { expect(this.style.fontFamily).toEqual('\"Times New Roman\"'); }); - d3.selectAll('.point,.scatterpts').each(function() { + d3SelectAll('.point,.scatterpts').each(function() { checkURL(this.style.fill); }); diff --git a/test/jasmine/tests/splom_test.js b/test/jasmine/tests/splom_test.js index 6126891c2b1..6845848349d 100644 --- a/test/jasmine/tests/splom_test.js +++ b/test/jasmine/tests/splom_test.js @@ -4,7 +4,8 @@ var Plots = require('@src/plots/plots'); var Axes = require('@src/plots/cartesian/axes'); var SUBPLOT_PATTERN = require('@src/plots/cartesian/constants').SUBPLOT_PATTERN; -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var supplyAllDefaults = require('../assets/supply_defaults'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -745,7 +746,7 @@ describe('Test splom interactions:', function() { function _assert(exp) { var msg = ' - call #' + cnt; - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var subplots = gd3.selectAll('g.cartesianlayer > g.subplot'); var bgs = gd3.selectAll('.bglayer > rect.bg'); @@ -814,7 +815,7 @@ describe('Test splom interactions:', function() { // make sure 'new' subplot layers are in order var gridIndex = -1; var xaxisIndex = -1; - var subplot0 = d3.select('g.cartesianlayer > g.subplot').node(); + var subplot0 = d3Select('g.cartesianlayer > g.subplot').node(); for(var i in subplot0.children) { var cl = subplot0.children[i].classList; if(cl) { @@ -851,7 +852,7 @@ describe('Test splom interactions:', function() { var fig = Lib.extendDeep({}, require('@mocks/splom_upper-nodiag.json')); function _assert(exp) { - var g = d3.select(gd).select('g.cartesianlayer'); + var g = d3Select(gd).select('g.cartesianlayer'); for(var k in exp) { // all ticks are set to same position, // only check first one @@ -1495,7 +1496,7 @@ describe('Test splom drag:', function() { }); function _drag(p0, p1) { - var node = d3.select('.nsewdrag[data-subplot="xy"]').node(); + var node = d3Select('.nsewdrag[data-subplot="xy"]').node(); var dx = p1[0] - p0[0]; var dy = p1[1] - p0[1]; return drag({node: node, dpos: [dx, dy], pos0: p0}); @@ -1622,7 +1623,7 @@ describe('Test splom select:', function() { expect(subplot).toBe(otherExp.subplot, 'subplot of selection' + msg); - expect(d3.selectAll('.zoomlayer > .select-outline').size()) + expect(d3SelectAll('.zoomlayer > .select-outline').size()) .toBe(otherExp.selectionOutlineCnt, 'selection outline cnt' + msg); } diff --git a/test/jasmine/tests/sunburst_test.js b/test/jasmine/tests/sunburst_test.js index 894db2f9809..72d8e26702b 100644 --- a/test/jasmine/tests/sunburst_test.js +++ b/test/jasmine/tests/sunburst_test.js @@ -4,7 +4,9 @@ var Lib = require('@src/lib'); var Drawing = require('@src/components/drawing'); var constants = require('@src/traces/sunburst/constants'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; +var d3Transition = require('../../strict-d3').transition; var supplyAllDefaults = require('../assets/supply_defaults'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -26,7 +28,7 @@ function _mouseEvent(type, gd, v) { mouseEvent(type, v[0], v[1]); } else { // position from slice number - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var el = gd3.select('.slice:nth-child(' + v + ')').node(); mouseEvent(type, 0, 0, {element: el}); } @@ -538,7 +540,7 @@ describe('Test sunburst hover:', function() { } if(exp.style) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); } }); @@ -987,7 +989,7 @@ describe('Test sunburst restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.sunburstlayer'); + var layer = d3Select(gd).select('.sunburstlayer'); expect(layer.selectAll('.trace').size()).toBe(exp, msg); }; } @@ -1006,7 +1008,7 @@ describe('Test sunburst restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.sunburstlayer'); + var layer = d3Select(gd).select('.sunburstlayer'); expect(layer.selectAll('.slice').size()).toBe(exp, msg); @@ -1042,7 +1044,7 @@ describe('Test sunburst restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.sunburstlayer'); + var layer = d3Select(gd).select('.sunburstlayer'); var opacities = []; layer.selectAll('path.surface').each(function() { @@ -1087,11 +1089,11 @@ describe('Test sunburst restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.sunburstlayer'); + var layer = d3Select(gd).select('.sunburstlayer'); var tx = []; layer.selectAll('text.slicetext').each(function() { - var lines = d3.select(this).selectAll('tspan'); + var lines = d3Select(this).selectAll('tspan'); if(lines.size()) { var t = []; @@ -1162,7 +1164,7 @@ describe('Test sunburst tweening:', function() { gd = createGraphDiv(); // hacky way to track tween functions - spyOn(d3.transition.prototype, 'attrTween').and.callFake(function(attrName, fn) { + spyOn(d3Transition.prototype, 'attrTween').and.callFake(function(attrName, fn) { var lookup = {d: pathTweenFnLookup, transform: textTweenFnLookup}[attrName]; var pt = this[0][0].__data__; var id = pt.data.data.id; @@ -1558,7 +1560,7 @@ describe('Test sunburst interactions edge cases', function() { expect(hoverCnt).toBe(exp.hoverCnt, msg + ' - hover cnt'); expect(unhoverCnt).toBe(exp.unhoverCnt, msg + ' - unhover cnt'); - var label = d3.select(gd).select('g.hovertext'); + var label = d3Select(gd).select('g.hovertext'); expect(label.size()).toBe(exp.hoverLabel, msg + ' - hover label cnt'); hoverCnt = 0; @@ -1632,7 +1634,7 @@ describe('Test sunburst interactions edge cases', function() { mock.data[0].visible = false; function _assert(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.select('.cartesianlayer').selectAll('.trace').size()) .toBe(exp.cartesianTraceCnt, '# of cartesian traces'); expect(gd3.select('.pielayer').selectAll('.trace').size()) @@ -1880,7 +1882,7 @@ describe('sunburst inside text orientation', function() { function assertTextRotations(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['rotations'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); @@ -1976,7 +1978,7 @@ describe('sunburst uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); diff --git a/test/jasmine/tests/svg_text_utils_test.js b/test/jasmine/tests/svg_text_utils_test.js index 7e21bc94dcb..75278d524c5 100644 --- a/test/jasmine/tests/svg_text_utils_test.js +++ b/test/jasmine/tests/svg_text_utils_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var util = require('@src/lib/svg_text_utils'); @@ -18,7 +19,7 @@ describe('svg+text utils', function() { }); function mockTextSVGElement(txt) { - return d3.select('body') + return d3Select('body') .append('svg') .classed('text-tester', true) .append('text') @@ -82,7 +83,7 @@ describe('svg+text utils', function() { } afterEach(function() { - d3.selectAll('.text-tester').remove(); + d3SelectAll('.text-tester').remove(); }); it('checks for XSS attack in href', function() { @@ -531,7 +532,7 @@ describe('sanitizeHTML', function() { } afterEach(function() { - d3.selectAll('.text-tester').remove(); + d3SelectAll('.text-tester').remove(); }); it('checks for XSS attack in href', function() { diff --git a/test/jasmine/tests/table_test.js b/test/jasmine/tests/table_test.js index 9dd8931c3f7..f0b2d27d5e5 100644 --- a/test/jasmine/tests/table_test.js +++ b/test/jasmine/tests/table_test.js @@ -4,7 +4,7 @@ var Table = require('@src/traces/table'); var attributes = require('@src/traces/table/attributes'); var cn = require('@src/traces/table/constants').cn; -var d3 = require('@plotly/d3'); +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -203,8 +203,8 @@ describe('table', function() { var gd = createGraphDiv(); function _assert(msg, exp) { - expect(d3.selectAll('.' + cn.scrollbarCaptureZone).size()).toBe(exp.captureZone, msg); - expect(d3.selectAll('.' + cn.scrollbarGlyph).size()).toBe(exp.glyph, msg); + expect(d3SelectAll('.' + cn.scrollbarCaptureZone).size()).toBe(exp.captureZone, msg); + expect(d3SelectAll('.' + cn.scrollbarGlyph).size()).toBe(exp.glyph, msg); } // more info in: https://github.com/plotly/streambed/issues/11618 diff --git a/test/jasmine/tests/ternary_test.js b/test/jasmine/tests/ternary_test.js index 16f2f040f2c..5a648daeba6 100644 --- a/test/jasmine/tests/ternary_test.js +++ b/test/jasmine/tests/ternary_test.js @@ -4,7 +4,8 @@ var rgb = require('@src/components/color').rgb; var supplyLayoutDefaults = require('@src/plots/ternary/layout_defaults'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -61,9 +62,9 @@ describe('ternary plots', function() { it('should be able to delete and add traces', function(done) { function checkTitles(cnt) { - expect(d3.selectAll('.g-atitle').size()).toBe(cnt, 'aaxis title'); - expect(d3.selectAll('.g-btitle').size()).toBe(cnt, 'baxis title'); - expect(d3.selectAll('.g-ctitle').size()).toBe(cnt, 'caxis title'); + expect(d3SelectAll('.g-atitle').size()).toBe(cnt, 'aaxis title'); + expect(d3SelectAll('.g-btitle').size()).toBe(cnt, 'baxis title'); + expect(d3SelectAll('.g-ctitle').size()).toBe(cnt, 'caxis title'); } expect(countTernarySubplot()).toEqual(1); @@ -103,8 +104,8 @@ describe('ternary plots', function() { it('should be able to restyle', function(done) { Plotly.restyle(gd, { a: [[1, 2, 3]]}, 0).then(function() { var transforms = []; - d3.selectAll('.ternary .point').each(function() { - var point = d3.select(this); + d3SelectAll('.ternary .point').each(function() { + var point = d3Select(this); transforms.push(point.attr('transform')); }); @@ -126,7 +127,7 @@ describe('ternary plots', function() { mouseEvent('mousemove', pointPos[0], pointPos[1]); assertHoverLabelContent({nums: content}, msg); - assertHoverLabelStyle(d3.select('g.hovertext'), style, msg); + assertHoverLabelStyle(d3Select('g.hovertext'), style, msg); } check([ @@ -281,12 +282,12 @@ describe('ternary plots', function() { ]; function _assert(layers) { - var toplevel = d3.selectAll('g.ternary > .toplevel'); + var toplevel = d3SelectAll('g.ternary > .toplevel'); expect(toplevel.size()).toBe(layers.length, '# of layer'); toplevel.each(function(d, i) { - var className = d3.select(this) + var className = d3Select(this) .attr('class') .split('toplevel ')[1]; @@ -347,7 +348,7 @@ describe('ternary plots', function() { var fig = Lib.extendDeep({}, require('@mocks/ternary_simple.json')); function _assert(family, color, size) { - var tick = d3.select('g.aaxis > g.ytick > text').node(); + var tick = d3Select('g.aaxis > g.ytick > text').node(); expect(tick.style['font-family']).toBe(family, 'font family'); expect(parseFloat(tick.style['font-size'])).toBe(size, 'font size'); @@ -379,7 +380,7 @@ describe('ternary plots', function() { var fig = Lib.extendDeep({}, require('@mocks/ternary_simple.json')); function _assert(axisPrefix, title, family, color, size) { - var titleSel = d3.select('.' + axisPrefix + 'title'); + var titleSel = d3Select('.' + axisPrefix + 'title'); var titleNode = titleSel.node(); var msg = 'for ' + axisPrefix + 'axis title'; @@ -427,7 +428,7 @@ describe('ternary plots', function() { var fig = Lib.extendDeep({}, require('@mocks/ternary_simple.json')); function assertCnt(selector, expected, msg) { - var sel = d3.select(gd).selectAll(selector); + var sel = d3Select(gd).selectAll(selector); expect(sel.size()).toBe(expected, msg); } @@ -531,11 +532,11 @@ describe('ternary plots', function() { }); function countTernarySubplot() { - return d3.selectAll('.ternary').size(); + return d3SelectAll('.ternary').size(); } function countTraces(type) { - return d3.selectAll('.ternary').selectAll('g.trace.' + type).size(); + return d3SelectAll('.ternary').selectAll('g.trace.' + type).size(); } function assertRange(gd, expected) { @@ -609,7 +610,7 @@ describe('ternary plots when css transform is present', function() { mouseEvent('mousemove', pointPos[0], pointPos[1]); assertHoverLabelContent({nums: content}, msg); - assertHoverLabelStyle(d3.select('g.hovertext'), style, msg); + assertHoverLabelStyle(d3Select('g.hovertext'), style, msg); } check([ diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js index 74b9c18f2e9..1c6c8dd8215 100644 --- a/test/jasmine/tests/titles_test.js +++ b/test/jasmine/tests/titles_test.js @@ -1,4 +1,5 @@ -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib/index'); var alignmentConstants = require('@src/constants/alignment'); @@ -27,7 +28,7 @@ describe('Plot title', function() { var containerElemSelector = { desc: 'container', select: function() { - return d3.selectAll('.svg-container').node(); + return d3SelectAll('.svg-container').node(); }, ref: 'container' }; @@ -35,7 +36,7 @@ describe('Plot title', function() { var paperElemSelector = { desc: 'plot area', select: function() { - var bgLayer = d3.selectAll('.bglayer .bg'); + var bgLayer = d3SelectAll('.bglayer .bg'); expect(bgLayer.empty()).toBe(false, 'No background layer found representing the size of the plot area'); return bgLayer.node(); @@ -730,7 +731,7 @@ describe('Titles and labels', function() { }).then(function() { expectTitle('NEW'); expect(xTitleSel().text()).toBe('x-new'); - expect(d3.select('.xtick').text()).toBe('b'); + expect(d3Select('.xtick').text()).toBe('b'); }) .then(done, done.fail); }); @@ -1166,21 +1167,21 @@ function parseFontSizeAttr(fontSizeAttr) { } function titleSel() { - var titleSel = d3.select('.infolayer .g-gtitle .gtitle'); + var titleSel = d3Select('.infolayer .g-gtitle .gtitle'); expect(titleSel.empty()).toBe(false, 'Plot title element missing'); return titleSel; } function xTitleSel(num) { var axIdx = num === 1 ? '' : (num || ''); - var xTitleSel = d3.select('.x' + axIdx + 'title'); + var xTitleSel = d3Select('.x' + axIdx + 'title'); expect(xTitleSel.empty()).toBe(false, 'X-axis ' + axIdx + ' title element missing'); return xTitleSel; } function yTitleSel(num) { var axIdx = num === 1 ? '' : (num || ''); - var yTitleSel = d3.select('.y' + axIdx + 'title'); + var yTitleSel = d3Select('.y' + axIdx + 'title'); expect(yTitleSel.empty()).toBe(false, 'Y-axis ' + axIdx + ' title element missing'); return yTitleSel; } @@ -1199,7 +1200,7 @@ describe('Editable titles', function() { }); function checkTitle(letter, text, opacityOut, opacityIn) { - var titleEl = d3.select('.' + letter + 'title'); + var titleEl = d3Select('.' + letter + 'title'); expect(titleEl.text()).toBe(text); expect(+(titleEl.node().style.opacity || 1)).toBe(opacityOut); diff --git a/test/jasmine/tests/toimage_test.js b/test/jasmine/tests/toimage_test.js index dfa7a2a9557..43aa1b724ec 100644 --- a/test/jasmine/tests/toimage_test.js +++ b/test/jasmine/tests/toimage_test.js @@ -1,7 +1,7 @@ var Plotly = require('@lib'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -225,7 +225,7 @@ describe('Plotly.toImage', function() { it('should work on pages with ', function(done) { var parser = new DOMParser(); - var base = d3.select('body') + var base = d3Select('body') .append('base') .attr('href', 'https://chart-studio.plotly.com'); diff --git a/test/jasmine/tests/transform_sort_test.js b/test/jasmine/tests/transform_sort_test.js index 12b5db3f7d3..48837585156 100644 --- a/test/jasmine/tests/transform_sort_test.js +++ b/test/jasmine/tests/transform_sort_test.js @@ -2,7 +2,7 @@ var Plotly = require('@lib/index'); var Plots = require('@src/plots/plots'); var Lib = require('@src/lib'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -264,7 +264,7 @@ describe('Test sort transform interactions:', function() { afterEach(destroyGraphDiv); function _assertFirst(p) { - var parts = d3.select('.point').attr('d').split(',').slice(0, 3).join(','); + var parts = d3Select('.point').attr('d').split(',').slice(0, 3).join(','); expect(parts).toEqual(p); } diff --git a/test/jasmine/tests/treemap_test.js b/test/jasmine/tests/treemap_test.js index d6c9cc4f21d..a435b3eb163 100644 --- a/test/jasmine/tests/treemap_test.js +++ b/test/jasmine/tests/treemap_test.js @@ -4,7 +4,9 @@ var Lib = require('@src/lib'); var Drawing = require('@src/components/drawing'); var constants = require('@src/traces/treemap/constants'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; +var d3Transition = require('../../strict-d3').transition; var supplyAllDefaults = require('../assets/supply_defaults'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -27,7 +29,7 @@ function _mouseEvent(type, gd, v) { mouseEvent(type, v[0], v[1]); } else { // position from slice number - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var el = gd3.select('.slice:nth-child(' + v + ')').node(); mouseEvent(type, 0, 0, {element: el}); } @@ -578,7 +580,7 @@ describe('Test treemap plot:', function() { type: 'treemap' }]) .then(function() { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); var element = gd3.select('.treemap trace').node(); expect(element).toBe(null); }) @@ -627,7 +629,7 @@ describe('Test treemap hover:', function() { } if(exp.style) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); } }); @@ -833,7 +835,7 @@ describe('Test treemap hover with and without levels', function() { } if(exp.style) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); assertHoverLabelStyle(gd3.select('.hovertext'), exp.style); } }); @@ -1185,7 +1187,7 @@ describe('Test treemap restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.treemaplayer'); + var layer = d3Select(gd).select('.treemaplayer'); expect(layer.selectAll('.trace').size()).toBe(exp, msg); }; } @@ -1204,7 +1206,7 @@ describe('Test treemap restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.treemaplayer'); + var layer = d3Select(gd).select('.treemaplayer'); expect(layer.selectAll('.slice').size()).toBe(exp, msg); @@ -1243,11 +1245,11 @@ describe('Test treemap restyle:', function() { function _assert(msg, exp) { return function() { - var layer = d3.select(gd).select('.treemaplayer'); + var layer = d3Select(gd).select('.treemaplayer'); var tx = []; layer.selectAll('text.slicetext').each(function() { - var lines = d3.select(this).selectAll('tspan'); + var lines = d3Select(this).selectAll('tspan'); if(lines.size()) { var t = []; @@ -1297,7 +1299,7 @@ describe('Test treemap tweening:', function() { gd = createGraphDiv(); // hacky way to track tween functions - spyOn(d3.transition.prototype, 'attrTween').and.callFake(function(attrName, fn) { + spyOn(d3Transition.prototype, 'attrTween').and.callFake(function(attrName, fn) { var lookup = {d: pathTweenFnLookup, transform: textTweenFnLookup}[attrName]; var pt = this[0][0].__data__; var id = pt.data.data.id; @@ -1489,7 +1491,7 @@ describe('Test treemap interactions edge cases', function() { expect(hoverCnt).toBe(exp.hoverCnt, msg + ' - hover cnt'); expect(unhoverCnt).toBe(exp.unhoverCnt, msg + ' - unhover cnt'); - var label = d3.select(gd).select('g.hovertext'); + var label = d3Select(gd).select('g.hovertext'); expect(label.size()).toBe(exp.hoverLabel, msg + ' - hover label cnt'); hoverCnt = 0; @@ -1565,7 +1567,7 @@ describe('Test treemap interactions edge cases', function() { mock.data[1].name = 'treemap'; function _assert(msg, exp) { - var gd3 = d3.select(gd); + var gd3 = d3Select(gd); expect(gd3.select('.cartesianlayer').selectAll('.trace').size()) .toBe(exp.cartesianTraceCnt, '# of cartesian traces'); expect(gd3.select('.pielayer').selectAll('.trace').size()) @@ -1704,7 +1706,7 @@ describe('treemap uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(SLICES_TEXT_SELECTOR); + var selection = d3SelectAll(SLICES_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); @@ -1897,7 +1899,7 @@ describe('treemap pathbar react', function() { function _assert(msg, exp) { return function() { - var selection = d3.selectAll(SLICES_SELECTOR); + var selection = d3SelectAll(SLICES_SELECTOR); var size = selection.size(); expect(size).toBe(exp, msg); diff --git a/test/jasmine/tests/updatemenus_test.js b/test/jasmine/tests/updatemenus_test.js index 34bd1e4f8a5..c2d02328df2 100644 --- a/test/jasmine/tests/updatemenus_test.js +++ b/test/jasmine/tests/updatemenus_test.js @@ -1,7 +1,8 @@ var UpdateMenus = require('@src/components/updatemenus'); var constants = require('@src/components/updatemenus/constants'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var Plotly = require('@lib'); var Lib = require('@src/lib'); var Events = require('@src/lib/events'); @@ -302,7 +303,7 @@ describe('update menus buttons', function() { }); function assertNodeCount(query, cnt) { - expect(d3.selectAll(query).size()).toEqual(cnt); + expect(d3SelectAll(query).size()).toEqual(cnt); } }); @@ -754,7 +755,7 @@ describe('update menus interactions', function() { assertMenus([0, 0]); // dropdown buttons container should still be on top of headers (and non-dropdown buttons) - var gButton = d3.select('.updatemenu-dropdown-button-group'); + var gButton = d3Select('.updatemenu-dropdown-button-group'); expect(gButton.node().nextSibling).toBe(null); return Plotly.relayout(gd, { @@ -770,7 +771,7 @@ describe('update menus interactions', function() { it('applies padding on all sides', function(done) { var xy1, xy2; - var firstMenu = d3.select('.' + constants.headerGroupClassName); + var firstMenu = d3Select('.' + constants.headerGroupClassName); var xpad = 80; var ypad = 60; @@ -802,7 +803,7 @@ describe('update menus interactions', function() { it('applies y padding on relayout', function(done) { var x1, x2; - var firstMenu = d3.select('.' + constants.headerGroupClassName); + var firstMenu = d3Select('.' + constants.headerGroupClassName); var padShift = 40; // Position the menu in the center of the plot horizontal so that @@ -825,7 +826,7 @@ describe('update menus interactions', function() { }); function assertNodeCount(query, cnt) { - expect(d3.selectAll(query).size()).toEqual(cnt, query); + expect(d3SelectAll(query).size()).toEqual(cnt, query); } // call assertMenus([0, 3]); to check that the 2nd update menu is dropped @@ -834,7 +835,7 @@ describe('update menus interactions', function() { assertNodeCount('.' + constants.containerClassName, 1); assertNodeCount('.' + constants.headerClassName, expectedMenus.length); - var gButton = d3.select('.' + constants.dropdownButtonGroupClassName); + var gButton = d3Select('.' + constants.dropdownButtonGroupClassName); var actualActiveIndex = +gButton.attr(constants.menuIndexAttrName); var hasActive = false; @@ -895,16 +896,16 @@ describe('update menus interactions', function() { } function selectHeader(menuIndex) { - var headers = d3.selectAll('.' + constants.headerClassName); - var header = d3.select(headers[0][menuIndex]); + var headers = d3SelectAll('.' + constants.headerClassName); + var header = d3Select(headers[0][menuIndex]); return header; } function selectButton(buttonIndex, opts) { opts = opts || {}; var k = opts.type === 'buttons' ? 'buttonClassName' : 'dropdownButtonClassName'; - var buttons = d3.selectAll('.' + constants[k]); - var button = d3.select(buttons[0][buttonIndex]); + var buttons = d3SelectAll('.' + constants[k]); + var button = d3Select(buttons[0][buttonIndex]); return button; } }); @@ -956,8 +957,8 @@ describe('update menus interaction with other components:', function() { }] }) .then(function() { - var infoLayer = d3.select('g.infolayer'); - var menuLayer = d3.select('g.menulayer'); + var infoLayer = d3Select('g.infolayer'); + var menuLayer = d3Select('g.menulayer'); expect(infoLayer.selectAll('.slider-container').size()).toBe(1); expect(menuLayer.selectAll('.updatemenu-container').size()).toBe(1); expect(infoLayer.node().nextSibling).toBe(menuLayer.node()); diff --git a/test/jasmine/tests/violin_test.js b/test/jasmine/tests/violin_test.js index 14330552019..a977f61d37a 100644 --- a/test/jasmine/tests/violin_test.js +++ b/test/jasmine/tests/violin_test.js @@ -4,7 +4,8 @@ var Plots = require('@src/plots/plots'); var Violin = require('@src/traces/violin'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); @@ -349,7 +350,7 @@ describe('Test violin hover:', function() { assertHoverLabelContent(specs); if(specs.hoverLabelPos) { - d3.selectAll('g.hovertext').each(function(_, i) { + d3SelectAll('g.hovertext').each(function(_, i) { var bbox = this.getBoundingClientRect(); expect([bbox.bottom, bbox.top]) .toBeWithinArray(specs.hoverLabelPos[i], 10, 'bottom--top hover label ' + i); @@ -683,7 +684,7 @@ describe('Test violin hover:', function() { }); function assertViolinHoverLine(pos) { - var line = d3.select('.hoverlayer').selectAll('line'); + var line = d3Select('.hoverlayer').selectAll('line'); expect(line.size()).toBe(1, 'only one violin line at a time'); expect(line.attr('class').indexOf('violinline')).toBe(0, 'correct class name'); @@ -734,9 +735,9 @@ describe('Test violin hover:', function() { mouseEvent('mousemove', 350, 225); var actual = []; - d3.selectAll('g.hovertext').each(function() { + d3SelectAll('g.hovertext').each(function() { var bbox = this.getBoundingClientRect(); - var tx = d3.select(this).text(); + var tx = d3Select(this).text(); actual.push([tx, bbox]); }); @@ -777,7 +778,7 @@ describe('Test violin restyle:', function() { } function _assert(msg, exp) { - var trace3 = d3.select(gd).select('.violinlayer > .trace'); + var trace3 = d3Select(gd).select('.violinlayer > .trace'); _assertOne(msg, exp, trace3, 'violinCnt', 'path.violin'); _assertOne(msg, exp, trace3, 'boxCnt', 'path.box'); _assertOne(msg, exp, trace3, 'meanlineInBoxCnt', 'path.mean'); diff --git a/test/jasmine/tests/waterfall_test.js b/test/jasmine/tests/waterfall_test.js index fb511bf5c71..1c36a912650 100644 --- a/test/jasmine/tests/waterfall_test.js +++ b/test/jasmine/tests/waterfall_test.js @@ -20,7 +20,8 @@ var checkTextTemplate = require('../assets/check_texttemplate'); var checkTransition = require('../assets/check_transitions'); var Fx = require('@src/components/fx'); -var d3 = require('@plotly/d3'); +var d3Select = require('../../strict-d3').select; +var d3SelectAll = require('../../strict-d3').selectAll; var WATERFALL_TEXT_SELECTOR = '.bars .bartext'; @@ -652,7 +653,7 @@ describe('A waterfall plot', function() { function assertTextFontColors(expFontColors, label) { return function() { - var selection = d3.selectAll(WATERFALL_TEXT_SELECTOR); + var selection = d3SelectAll(WATERFALL_TEXT_SELECTOR); expect(selection.size()).toBe(expFontColors.length); selection.each(function(d, i) { @@ -943,7 +944,7 @@ describe('A waterfall plot', function() { it('should be able to add/remove connector nodes on restyle', function(done) { function _assertNumberOfWaterfallConnectorNodes(cnt) { - var sel = d3.select(gd).select('.waterfalllayer').selectAll('.line'); + var sel = d3Select(gd).select('.waterfalllayer').selectAll('.line'); expect(sel.size()).toBe(cnt); } @@ -1130,7 +1131,7 @@ describe('A waterfall plot', function() { it('should be able to add/remove text node on restyle', function(done) { function _assertNumberOfWaterfallTextNodes(cnt) { - var sel = d3.select(gd).select('.waterfalllayer').selectAll('text'); + var sel = d3Select(gd).select('.waterfalllayer').selectAll('text'); expect(sel.size()).toBe(cnt); } @@ -1228,7 +1229,7 @@ describe('A waterfall plot', function() { var traceNodes = getAllTraceNodes(gd); var waterfallNodes = getAllWaterfallNodes(traceNodes[0]); var path = waterfallNodes[0].querySelector('path'); - var d = d3.select(path).attr('d'); + var d = d3Select(path).attr('d'); expect(d).toBe('M11.33,321V268.33H102V321Z'); }) .then(function() { @@ -1241,7 +1242,7 @@ describe('A waterfall plot', function() { var traceNodes = getAllTraceNodes(gd); var waterfallNodes = getAllWaterfallNodes(traceNodes[0]); var path = waterfallNodes[0].querySelector('path'); - var d = d3.select(path).attr('d'); + var d = d3Select(path).attr('d'); expect(d).toBe('M11.33,325V264.33H102V325Z'); }) .then(done, done.fail); @@ -1454,7 +1455,7 @@ describe('waterfall hover', function() { Plotly.newPlot(gd, mock) .then(_hover) .then(function() { - expect(d3.selectAll('g.hovertext').size()).toBe(0); + expect(d3SelectAll('g.hovertext').size()).toBe(0); }) .then(done, done.fail); }); @@ -1780,7 +1781,7 @@ describe('waterfall uniformtext', function() { function assertTextSizes(msg, opts) { return function() { - var selection = d3.selectAll(WATERFALL_TEXT_SELECTOR); + var selection = d3SelectAll(WATERFALL_TEXT_SELECTOR); var size = selection.size(); ['fontsizes', 'scales'].forEach(function(e) { expect(size).toBe(opts[e].length, 'length for ' + e + ' does not match with the number of elements'); diff --git a/test/image/strict-d3.js b/test/strict-d3.js similarity index 100% rename from test/image/strict-d3.js rename to test/strict-d3.js