beforeAll(function(done) {
gd = createGraphDiv();
var mock = Lib.extendDeep({}, require('@mocks/bar_attrs_group_norm.json'));
Plotly.plot(gd, mock.data, mock.layout).then(done);
});
beforeEach(function(done) {
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
gd.on('plotly_click', function(data) {
futureData = data;
});
});
it('Plotly.plot should plot the transform traces', function(done) {
var data = Lib.extendDeep([], mockData0);
var gd = createGraphDiv();
Plotly.plot(gd, data).then(function() {
expect(gd.data.length).toEqual(2);
expect(gd.data[0].x).toEqual([1, -1, -2, 0, 1, 2, 3]);
expect(gd.data[0].y).toEqual([1, 2, 3, 1, 2, 3, 1]);
expect(gd.data[1].x).toEqual([20, 11, 12, 0, 1, 2, 3]);
expect(gd.data[1].y).toEqual([1, 2, 3, 2, 5, 2, 0]);
expect(gd._fullData.length).toEqual(3);
expect(gd._fullData[0].x).toEqual([2, 3]);
expect(gd._fullData[0].y).toEqual([3, 1]);
expect(gd._fullData[1].x).toEqual([20, 11, 3]);
expect(gd._fullData[1].y).toEqual([1, 2, 0]);
expect(gd._fullData[2].x).toEqual([12, 1, 2]);
expect(gd._fullData[2].y).toEqual([3, 5, 2]);
assertDims([2, 3, 3]);
done();
});
});
it('toggling trace visibility should work', function(done) {
var data = Lib.extendDeep([], mockData0);
var gd = createGraphDiv();
Plotly.plot(gd, data).then(function() {
assertDims([2, 3, 3]);
return Plotly.restyle(gd, 'visible', 'legendonly', [1]);
}).then(function() {
assertDims([2]);
return Plotly.restyle(gd, 'visible', false, [0]);
}).then(function() {
assertDims([]);
return Plotly.restyle(gd, 'visible', [true, true]);
}).then(function() {
assertDims([2, 3, 3]);
return Plotly.restyle(gd, 'visible', 'legendonly', [0]);
}).then(function() {
assertDims([3, 3]);
done();
});
});
it('should show bar texts (barnorm case)', function(done) {
var gd = createGraphDiv(),
data = [{
x: [100, -100, 100],
type: 'bar',
text: [100, -100, 100],
textposition: 'outside',
}],
layout = {
barmode: 'relative',
barnorm: 'percent'
};
Plotly.plot(gd, data, layout).then(function() {
var traceNodes = getAllTraceNodes(gd),
barNodes = getAllBarNodes(traceNodes[0]),
foundTextNodes;
for(var i = 0; i < barNodes.length; i++) {
var barNode = barNodes[i],
pathNode = barNode.querySelector('path'),
textNode = barNode.querySelector('text');
if(textNode) {
foundTextNodes = true;
if(data[0].x[i] > 0) assertTextIsAfterPath(textNode, pathNode);
else assertTextIsBeforePath(textNode, pathNode);
}
}
expect(foundTextNodes).toBe(true);
done();
});
});
it('should rename \'highlightWidth\' to \'highlightwidth\')', function() {
var data = [{
type: 'surface',
contours: {
z: { highlightwidth: 'red' },
y: { highlightWidth: 'blue' }
}
}, {
type: 'surface'
}];
spyOn(Plots.subplotsRegistry.gl3d, 'plot');
Plotly.plot(gd, data);
expect(Plots.subplotsRegistry.gl3d.plot).toHaveBeenCalled();
var contours = gd.data[0].contours;
expect(contours.x).toBeUndefined();
expect(contours.y.highlightwidth).toEqual('blue');
expect(contours.z.highlightWidth).toBeUndefined();
expect(contours.z.highlightwidth).toEqual('red');
expect(gd.data[1].contours).toBeUndefined();
});
it('Plotly.extendTraces should work', function(done) {
var data = Lib.extendDeep([], mockData0);
var gd = createGraphDiv();
Plotly.plot(gd, data).then(function() {
assertDims([2, 3, 3]);
return Plotly.extendTraces(gd, {
x: [ [-3, 4, 5] ],
y: [ [1, -2, 3] ],
'transforms[0].groups': [ ['b', 'a', 'b'] ]
}, [1]);
}).then(function() {
assertDims([2, 4, 4]);
return Plotly.extendTraces(gd, {
x: [ [5, 7, 10] ],
y: [ [1, -2, 3] ]
}, [0]);
}).then(function() {
assertDims([5, 4, 4]);
done();
});
});
it('@flaky updates ranges of secondary axes', function(done) {
Plotly.plot(gd, [
{y: [1, 2, 3]},
{y: [1, 2, 3], yaxis: 'y2'}
], {
yaxis: {range: [0, 5]},
yaxis2: {range: [-1, 4]}
})
.then(function() {
expect(gd._fullLayout.yaxis.range).toEqual([0, 5]);
expect(gd._fullLayout.yaxis2.range).toEqual([-1, 4]);
return Plotly.animate(gd, [
{layout: {'yaxis.range': [2, 3]}},
{layout: {'yaxis2.range': [1, 2]}}
], {
// TODO: if the durations are the same, yaxis.range gets some
// random endpoint, often close to what it's supposed to be but
// sometimes very far away.
frame: {redraw: false, duration: 60},
transition: {duration: 30}
});
})
.then(function() {
expect(gd._fullLayout.yaxis.range).toEqual([2, 3]);
expect(gd._fullLayout.yaxis2.range).toEqual([1, 2]);
})
.catch(failTest)
.then(done);
});
it('Plotly.extendTraces should work', function(done) {
var data = Lib.extendDeep([], mockData0);
Plotly.plot(gd, data).then(function() {
expect(gd.data[0].x.length).toEqual(7);
expect(gd._fullData[0].x.length).toEqual(2);
expect(gd._fullData[1].x.length).toEqual(2);
assertDims([2, 2]);
return Plotly.extendTraces(gd, {
x: [ [-3, 4, 5] ],
y: [ [1, -2, 3] ],
'transforms[0].groups': [ ['b', 'a', 'b'] ]
}, [0]);
}).then(function() {
expect(gd.data[0].x.length).toEqual(10);
expect(gd._fullData[0].x.length).toEqual(3);
expect(gd._fullData[1].x.length).toEqual(3);
assertDims([3, 3]);
done();
});
});
it('should show bar texts (outside case)', function(done) {
var gd = createGraphDiv(),
data = [{
y: [10, -20, 30],
type: 'bar',
text: ['1', 'Very very very very very long bar text'],
textposition: 'outside',
}],
layout = {
barmode: 'relative'
};
Plotly.plot(gd, data, layout).then(function() {
var traceNodes = getAllTraceNodes(gd),
barNodes = getAllBarNodes(traceNodes[0]),
foundTextNodes;
for(var i = 0; i < barNodes.length; i++) {
var barNode = barNodes[i],
pathNode = barNode.querySelector('path'),
textNode = barNode.querySelector('text');
if(textNode) {
foundTextNodes = true;
if(data[0].y[i] > 0) assertTextIsAbovePath(textNode, pathNode);
else assertTextIsBelowPath(textNode, pathNode);
}
}
expect(foundTextNodes).toBe(true);
done();
});
});
it('should be able', function(done) {
var gd = createGraphDiv();
var data = [{ y: [2, 1, 2] }];
var transform0 = {
type: 'filter',
target: 'y',
operation: '>',
value: 1
};
var transform1 = {
type: 'groupby',
groups: ['a', 'b', 'b']
};
Plotly.plot(gd, data).then(function() {
expect(gd.data.transforms).toBeUndefined();
return Plotly.restyle(gd, 'transforms[0]', transform0);
})
.then(function() {
var msg = 'to generate blank transform objects';
expect(gd.data[0].transforms[0]).toBe(transform0, msg);
// make sure transform actually works
expect(gd._fullData[0].y).toEqual([2, 2], msg);
return Plotly.restyle(gd, 'transforms[1]', transform1);
})
.then(function() {
var msg = 'to generate blank transform objects (2)';
expect(gd.data[0].transforms[0]).toBe(transform0, msg);
expect(gd.data[0].transforms[1]).toBe(transform1, msg);
expect(gd._fullData[0].y).toEqual([2], msg);
return Plotly.restyle(gd, 'transforms[0]', null);
})
.then(function() {
var msg = 'to remove transform objects';
expect(gd.data[0].transforms[0]).toBe(transform1, msg);
expect(gd.data[0].transforms[1]).toBeUndefined(msg);
expect(gd._fullData[0].y).toEqual([2], msg);
expect(gd._fullData[1].y).toEqual([1, 2], msg);
return Plotly.restyle(gd, 'transforms', null);
})
.then(function() {
var msg = 'to remove all transform objects';
expect(gd.data[0].transforms).toBeUndefined(msg);
expect(gd._fullData[0].y).toEqual([2, 1, 2], msg);
})
.then(done);
});
it('should not add the slider to the DOM by default', function(done) {
Plotly.plot(gd, [{ x: [1,2,3], y: [2,3,4] }], {})
.then(function() {
var rangeSlider = document.getElementsByClassName('range-slider')[0];
expect(rangeSlider).not.toBeDefined();
})
.then(done);
});
beforeEach(function() {
gd = createGraph();
var data = [{ x: [1, 2, 3], y: [2, 3, 4], name: 'Test' }];
var layout = { showlegend: true };
Plotly.plot(gd, data, layout);
});
beforeEach(function(done) {
gd = createGraphDiv();
Plotly.plot(gd, mock.data, mock.layout).then(function() {
rangeSlider = document.getElementsByClassName('range-slider')[0];
children = rangeSlider.children;
done();
});
});
it('should add the slider if rangeslider is set to anything', function(done) {
Plotly.plot(gd, [{ x: [1,2,3], y: [2,3,4] }], {})
.then(function() { Plotly.relayout(gd, 'xaxis.rangeslider', 'exists'); })
.then(function() {
var rangeSlider = document.getElementsByClassName('range-slider')[0];
expect(rangeSlider).toBeDefined();
})
.then(done);
});
it('should display the correct format when ticklabels true', function() {
Plotly.plot(this.gd, data, layout);
mouseEvent('mousemove', 310, 220);
var hovers = d3.selectAll('g.hovertext');
expect(hovers.size()).toEqual(1);
expect(hovers.select('text')[0][0].textContent).toEqual('0.23');
});
it('should add the slider if visible changed to `true`', function(done) {
Plotly.plot(gd, [{ x: [1,2,3], y: [2,3,4] }], {})
.then(function() { Plotly.relayout(gd, 'xaxis.rangeslider.visible', true); })
.then(function() {
var rangeSlider = document.getElementsByClassName('range-slider')[0];
expect(rangeSlider).toBeDefined();
})
.then(done);
});
it('ignores them', function(done) {
Plotly.plot(gd, [{
y: [1, 2, 3],
transforms: [{}]
}]).then(function() {
expect(gd._fullData[0].transforms.length).toEqual(1);
done();
});
});
it('should remove the slider if changed to `false` or `undefined`', function(done) {
Plotly.plot(gd, [{ x: [1,2,3], y: [2,3,4] }], { xaxis: { rangeslider: { visible: true }}})
.then(function() { Plotly.relayout(gd, 'xaxis.rangeslider.visible', false); })
.then(function() {
var rangeSlider = document.getElementsByClassName('range-slider')[0];
expect(rangeSlider).not.toBeDefined();
})
.then(done);
});
beforeEach(function(done) {
Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
// Do not let the notifier hide the drag elements
var tooltip = document.querySelector('.notifier-note');
if(tooltip) tooltip.style.display = 'None';
done();
});
});
it('should rename \'YIOrRd\' colorscales YlOrRd (markerColorscale case)', function() {
var data = [{
type: 'scattergeo',
marker: { colorscale: 'YIOrRd' }
}];
Plotly.plot(gd, data);
expect(gd.data[0].marker.colorscale).toBe('YlOrRd');
});
it('should rename \'YIOrRd\' colorscales YlOrRd (2dMap case)', function() {
var data = [{
type: 'contour',
colorscale: 'YIOrRd'
}];
Plotly.plot(gd, data);
expect(gd.data[0].colorscale).toBe('YlOrRd');
});
it('should rename \'YIGnBu\' colorscales YlGnBu (2dMap case)', function() {
var data = [{
type: 'heatmap',
colorscale: 'YIGnBu'
}];
Plotly.plot(gd, data);
expect(gd.data[0].colorscale).toBe('YlGnBu');
});
it('should plot when only y data is provided', function(done) {
Plotly.plot(gd, [{ y: [1,2,3] }], { xaxis: { rangeslider: {} }})
.then(function() {
var rangeslider = document.getElementsByClassName('range-slider');
expect(rangeslider.length).toBe(1);
})
.then(done);
});
beforeEach(function(done) {
mock = [{x: [1, 2, 3], y: [2, 1, 3]}, {x: [1, 2, 3], y: [6, 4, 5]}];
gd = createGraphDiv();
Plotly.plot(gd, mock).then(function() {
f = gd._transitionData._frames;
h = gd._transitionData._frameHash;
}).then(function() {
Plotly.setPlotConfig({ queueLength: 10 });
}).then(done);
});
it('should not return any nested svg tags of annotations', function(done) {
Plotly.plot(gd, annotationMock.data, annotationMock.layout).then(function() {
return Plotly.Snapshot.toSVG(gd);
}).then(function(svg) {
var svgDOM = parser.parseFromString(svg, 'image/svg+xml'),
svgElements = svgDOM.getElementsByTagName('svg');
expect(svgElements.length).toBe(1);
}).then(done);
});
beforeEach(function(done) {
var modifiedMockCopy = Lib.extendDeep({}, mockCopy);
modifiedMockCopy.data[0].hoverinfo = 'none';
Plotly.plot(gd, modifiedMockCopy.data, modifiedMockCopy.layout)
.then(done);
gd.on('plotly_hover', function(data) {
futureData = data;
});
});
it('Plotly.restyle should work', function(done) {
var data = Lib.extendDeep([], mockData0);
data[0].marker.size = 20;
var gd = createGraphDiv();
var dims = [2, 3, 3];
Plotly.plot(gd, data).then(function() {
assertStyle(dims,
['rgb(0, 128, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
[1, 1, 1]
);
return Plotly.restyle(gd, 'marker.opacity', 0.4);
}).then(function() {
assertStyle(dims,
['rgb(0, 128, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
[0.4, 0.4, 0.4]
);
gd._fullData.forEach(function(trace) {
expect(trace.marker.opacity).toEqual(0.4);
});
return Plotly.restyle(gd, 'marker.opacity', 1);
}).then(function() {
assertStyle(dims,
['rgb(0, 128, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)'],
[1, 1, 1]
);
gd._fullData.forEach(function(trace) {
expect(trace.marker.opacity).toEqual(1);
});
return Plotly.restyle(gd, {
'transforms[0].styles': [[{
target: 'a',
value: {marker: {color: 'green'}},
}, {
target: 'b',
value: {marker: {color: 'red'}}
}]],
'marker.opacity': [0.4, 0.6]
});
}).then(function() {
assertStyle(dims,
['rgb(0, 128, 0)', 'rgb(0, 128, 0)', 'rgb(255, 0, 0)'],
[0.4, 0.6, 0.6]
);
done();
});
});
it('@gl surface should be visible when the x and y are not provided; but z array is provided', function(done) {
Plotly.plot(gd, [{
'type': 'surface',
'z': [[1, 2], [3, 4]]
}])
.then(function() {
assertVisibility(true, 'to be visible');
})
.catch(failTest)
.then(done);
});
it('@gl surface should be invisible when the z array is empty', function(done) {
Plotly.plot(gd, [{
'type': 'surface',
'z': []
}])
.then(function() {
assertVisibility(false, 'not to be visible');
})
.catch(failTest)
.then(done);
});