Skip to content

Commit 8166eb7

Browse files
antoinergantoinerg
committed
introducing checkTransition to 🔒 down bar transitions
1 parent 18cfd20 commit 8166eb7

File tree

3 files changed

+212
-3
lines changed

3 files changed

+212
-3
lines changed

‎test/jasmine/assets/check_transitions.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
'use strict';
2+
3+
var Plotly = require('@lib/index');
4+
var Lib = require('@src/lib');
5+
var d3 = require('d3');
6+
var delay = require('./delay.js');
7+
8+
var reNumbers = /([\d\.]+)/gm;
9+
10+
function promiseSerial(funcs, wait) {
11+
return funcs.reduce(function(promise, func) {
12+
return promise.then(function(result) {
13+
return func().then(Array.prototype.concat.bind(result)).then(delay(wait));
14+
});
15+
}, Promise.resolve([]));
16+
}
17+
18+
function clockTick(currentNow, milliseconds) {
19+
Date.now = function() {
20+
return currentNow + milliseconds;
21+
};
22+
d3.timer.flush();
23+
}
24+
25+
// Using the methodology from http://eng.wealthfront.com/2017/10/26/testing-d3-transitions/
26+
module.exports = function checkTransition(gd, mock, animateOpts, transitionOpts, tests) {
27+
if(!transitionOpts) {
28+
transitionOpts = {
29+
transition: {
30+
duration: 500,
31+
easing: 'linear'
32+
},
33+
frame: {
34+
duration: 500
35+
}
36+
};
37+
}
38+
// Prepare chain
39+
var now = Date.now;
40+
var startTime;
41+
var currentTime;
42+
var p = [
43+
function() {
44+
return Plotly.newPlot(gd, mock)
45+
.then(function() {
46+
// Check initial states if present
47+
for(var i = 0; i < tests.length; i++) {
48+
if(tests[i][0] === 0) assert(tests[i]);
49+
}
50+
});
51+
},
52+
function() {
53+
// Hijack Date.now
54+
startTime = Date.now();
55+
currentTime = 0;
56+
clockTick(startTime, 0);
57+
Plotly.animate(gd, animateOpts, transitionOpts);
58+
return Promise.resolve(true);
59+
}
60+
];
61+
62+
var checkTests = tests.map(function(test) {
63+
return function() {
64+
if(test[0] === 0) return Promise.resolve(true);
65+
if(test[0] !== currentTime) {
66+
clockTick(startTime, test[0]);
67+
currentTime = test[0];
68+
}
69+
return assert(test);
70+
};
71+
});
72+
73+
// Run all tasks
74+
return promiseSerial(p.concat(checkTests))
75+
.then(function() {
76+
Date.now = now;
77+
});
78+
};
79+
80+
// A test array is made of
81+
// [ms since start of transition, selector, (attr|style), name of attribute, array of values to be found]
82+
// Ex.: [0, '.point path', 'style', 'fill', ['rgb(31, 119, 180)', 'rgb(31, 119, 180)', 'rgb(31, 119, 180)']]
83+
function assert(test) {
84+
var msg = 'at ' + test[0] + 'ms, selection ' + test[1] + ' has ' + test[3];
85+
var cur = [];
86+
Plotly.d3.selectAll(test[1]).each(function(d, i) {
87+
if(test[2] === 'style') cur[i] = this.style[test[3]];
88+
if(test[2] === 'attr') cur[i] = Plotly.d3.select(this).attr(test[3]);
89+
});
90+
switch(test[3]) {
91+
case 'd':
92+
assertAttr(cur, test[4], round, msg);
93+
break;
94+
case 'transform':
95+
assertAttr(cur, test[4], round, msg);
96+
break;
97+
default:
98+
assertAttr(cur, test[4], Lib.identity, msg);
99+
}
100+
return Promise.resolve(true);
101+
}
102+
103+
function assertAttr(A, B, cb, msg) {
104+
var a = cb(A);
105+
var b = cb(B);
106+
expect(a).withContext(msg + ' equal to ' + JSON.stringify(b)).toEqual(b);
107+
}
108+
109+
function round(str) {
110+
return str.map(function(cur) {
111+
return cur.replace(reNumbers, function(match) {
112+
return Math.round(match);
113+
});
114+
});
115+
}

‎test/jasmine/tests/bar_test.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var assertClip = customAssertions.assertClip;
2626
var assertNodeDisplay = customAssertions.assertNodeDisplay;
2727
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
2828
var checkTextTemplate = require('../assets/check_texttemplate');
29+
var checkTransition = require('../assets/check_transitions');
2930
var Fx = require('@src/components/fx');
3031

3132
var d3 = require('d3');
@@ -2548,3 +2549,96 @@ function assertTraceField(calcData, prop, expectation) {
25482549

25492550
expect(values).toBeCloseToArray(expectation, undefined, '(field ' + prop + ')');
25502551
}
2552+
2553+
describe('bar tweening', function() {
2554+
var gd;
2555+
var mock = {
2556+
'data': [{
2557+
'type': 'bar',
2558+
'x': ['A', 'B', 'C'],
2559+
'text': ['A', 'B', 'C'],
2560+
'textposition': 'inside',
2561+
'y': [24, 5, 8],
2562+
'error_y': {'array': [3, 2, 1]}
2563+
}]
2564+
};
2565+
var transitionOpts = false; // use default
2566+
2567+
beforeEach(function() {
2568+
gd = createGraphDiv();
2569+
});
2570+
2571+
afterEach(function() {
2572+
Plotly.purge(gd);
2573+
destroyGraphDiv();
2574+
});
2575+
2576+
it('for bar fill color', function(done) {
2577+
var tests = [
2578+
[0, '.point path', 'style', 'fill', ['rgb(31, 119, 180)', 'rgb(31, 119, 180)', 'rgb(31, 119, 180)']],
2579+
[100, '.point path', 'style', 'fill', ['rgb(76, 95, 144)', 'rgb(25, 146, 144)', 'rgb(25, 95, 195)']],
2580+
[300, '.point path', 'style', 'fill', ['rgb(165, 48, 72)', 'rgb(12, 201, 72)', 'rgb(12, 48, 225)']],
2581+
[500, '.point path', 'style', 'fill', ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']]
2582+
];
2583+
var animateOpts = {'data': [{'marker': {'color': ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']}}]};
2584+
2585+
checkTransition(gd, mock, animateOpts, transitionOpts, tests)
2586+
.catch(failTest)
2587+
.then(done);
2588+
});
2589+
2590+
it('for bar height and and text position', function(done) {
2591+
var tests = [
2592+
[0, '.point path', 'attr', 'd', ['M18,270V42H162V270Z', 'M198,270V222.5H342V270Z', 'M378,270V194H522V270Z']],
2593+
[0, 'text.bartext', 'attr', 'transform', ['translate(90 56)', 'translate(270 236.5)', 'translate(450 208)']],
2594+
[100, '.point path', 'attr', 'd', ['M18,270V78.1H162V270Z', 'M198,270V186.4H342V270Z', 'M378,270V186.40000000000003H522V270Z']],
2595+
[300, '.point path', 'attr', 'd', ['M18,270V150.3H162V270Z', 'M198,270V114.2H342V270Z', 'M378,270V171.2H522V270Z']],
2596+
[300, 'text.bartext', 'attr', 'transform', ['translate(90,164.3)', 'translate(270,128.20000000000002)', 'translate(450,185.2)']],
2597+
[500, '.point path', 'attr', 'd', ['M18,270V222.5H162V270Z', 'M198,270V42H342V270Z', 'M378,270V156H522V270Z']],
2598+
[600, '.point path', 'attr', 'd', ['M18,270V222.5H162V270Z', 'M198,270V42H342V270Z', 'M378,270V156H522V270Z']],
2599+
[600, 'text.bartext', 'attr', 'transform', ['translate(90 236.5)', 'translate(270 56)', 'translate(450 170)']],
2600+
];
2601+
var animateOpts = {data: [{y: [5, 24, 12]}]};
2602+
2603+
checkTransition(gd, mock, animateOpts, transitionOpts, tests)
2604+
.catch(failTest)
2605+
.then(done);
2606+
});
2607+
2608+
it('for bar width', function(done) {
2609+
var tests = [
2610+
[0, '.point path', 'attr', 'd', ['M54,270V13.5H486V270Z']],
2611+
[250, '.point path', 'attr', 'd', ['M94.5,270V13.5H445.5V270Z']],
2612+
[500, '.point path', 'attr', 'd', ['M135,270V13.5H405V270Z']]
2613+
];
2614+
var animateOpts = {data: [{width: 0.5}]};
2615+
2616+
checkTransition(gd, {
2617+
data: [{
2618+
type: 'bar',
2619+
y: [5]
2620+
}]},
2621+
animateOpts, transitionOpts, tests)
2622+
.catch(failTest)
2623+
.then(done);
2624+
});
2625+
2626+
it('for error bars', function(done) {
2627+
var tests = [
2628+
[0, 'path.yerror', 'attr', 'd', ['M266,13.5h8m-4,0V99m-4,0h8']],
2629+
[250, 'path.yerror', 'attr', 'd', ['M266,-18.56h8m-4,0V131.065m-4,0h8']],
2630+
[500, 'path.yerror', 'attr', 'd', ['M266,-50.62h8m-4,0V163.13m-4,0h8']]
2631+
];
2632+
var animateOpts = {data: [{error_y: {value: 50}}]};
2633+
2634+
checkTransition(gd, {
2635+
data: [{
2636+
type: 'bar',
2637+
y: [2],
2638+
error_y: {value: 20}
2639+
}]},
2640+
animateOpts, transitionOpts, tests)
2641+
.catch(failTest)
2642+
.then(done);
2643+
});
2644+
});

‎test/jasmine/tests/transition_test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -435,7 +435,7 @@ describe('Plotly.react transitions:', function() {
435435
addSpies();
436436

437437
var trace = {
438-
type: 'bar',
438+
type: 'violin',
439439
y: [1],
440440
marker: {line: {width: 1}}
441441
};
@@ -444,8 +444,8 @@ describe('Plotly.react transitions:', function() {
444444
var layout = {transition: {duration: 10}};
445445

446446
// sanity check that this test actually tests what was intended
447-
var Bar = Registry.modules.bar._module;
448-
if(Bar.animatable || Bar.attributes.marker.line.width.anim !== true) {
447+
var Violin = Registry.modules.violin._module;
448+
if(Violin.animatable || Violin.attributes.marker.line.width.anim !== true) {
449449
fail('Test no longer tests its indented code path:' +
450450
' This test is meant to test that Plotly.react with' +
451451
' *anim:true* attributes in *animatable:false* modules' +

0 commit comments

Comments
 (0)