Skip to content

Commit 0ad14d1

Browse files
archmojarchmoj
committed
split one big test into smaller tests to avoid side effects and future expansion
1 parent c69244f commit 0ad14d1

File tree

1 file changed

+160
-94
lines changed

1 file changed

+160
-94
lines changed

‎test/jasmine/tests/draw_newshape_test.js‎

Lines changed: 160 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -946,106 +946,130 @@ describe('Draw new shapes to layout', function() {
946946
});
947947
});
948948

949-
describe('Activate and deactivate shapes to edit', function() {
949+
describe('Activate and edit editable shapes', function() {
950950
var fig = {
951-
data: [{ x: [0, 50], y: [0, 50] }],
952-
layout: {
953-
width: 800,
954-
height: 600,
955-
margin: {
956-
t: 100,
957-
b: 50,
958-
l: 100,
959-
r: 50
951+
'data': [
952+
{
953+
'x': [
954+
0,
955+
50
956+
],
957+
'y': [
958+
0,
959+
50
960+
]
961+
}
962+
],
963+
'layout': {
964+
'width': 800,
965+
'height': 600,
966+
'margin': {
967+
't': 100,
968+
'b': 50,
969+
'l': 100,
970+
'r': 50
960971
},
961-
962-
yaxis: {
963-
autorange: 'reversed'
972+
'yaxis': {
973+
'autorange': 'reversed'
964974
},
965-
966-
template: {
967-
layout: {
968-
shapes: [{
969-
name: 'myPath',
970-
editable: true,
971-
layer: 'below',
972-
line: { width: 0 },
973-
fillcolor: 'gray',
974-
opacity: 0.5,
975-
xref: 'paper',
976-
yref: 'paper',
977-
path: 'M0.5,0.3C0.5,0.9 0.9,0.9 0.9,0.3C0.9,0.1 0.5,0.1 0.5,0.3ZM0.6,0.4C0.6,0.5 0.66,0.5 0.66,0.4ZM0.74,0.4C0.74,0.5 0.8,0.5 0.8,0.4ZM0.6,0.3C0.63,0.2 0.77,0.2 0.8,0.3Z'
978-
}]
975+
'template': {
976+
'layout': {
977+
'shapes': [
978+
{
979+
'name': 'myPath',
980+
'editable': true,
981+
'layer': 'below',
982+
'line': {
983+
'width': 0
984+
},
985+
'fillcolor': 'gray',
986+
'opacity': 0.5,
987+
'xref': 'paper',
988+
'yref': 'paper',
989+
'path': 'M0.5,0.3C0.5,0.9 0.9,0.9 0.9,0.3C0.9,0.1 0.5,0.1 0.5,0.3ZM0.6,0.4C0.6,0.5 0.66,0.5 0.66,0.4ZM0.74,0.4C0.74,0.5 0.8,0.5 0.8,0.4ZM0.6,0.3C0.63,0.2 0.77,0.2 0.8,0.3Z'
990+
}
991+
]
979992
}
980993
},
981-
shapes: [
994+
'shapes': [
982995
{
983-
editable: true,
984-
layer: 'below',
985-
type: 'rect',
986-
line: { width: 5 },
987-
fillcolor: 'red',
988-
opacity: 0.5,
989-
xref: 'xaxis',
990-
yref: 'yaxis',
991-
y0: 25,
992-
y1: 75,
993-
x0: 25,
994-
x1: 75
996+
'editable': true,
997+
'layer': 'below',
998+
'type': 'rect',
999+
'line': {
1000+
'width': 5
1001+
},
1002+
'fillcolor': 'red',
1003+
'opacity': 0.5,
1004+
'xref': 'xaxis',
1005+
'yref': 'yaxis',
1006+
'x0': 25,
1007+
'y0': 25,
1008+
'x1': 75,
1009+
'y1': 75
9951010
},
9961011
{
997-
editable: true,
998-
layer: 'top',
999-
type: 'circle',
1000-
line: { width: 5 },
1001-
fillcolor: 'green',
1002-
opacity: 0.5,
1003-
xref: 'xaxis',
1004-
yref: 'yaxis',
1005-
y0: 25,
1006-
y1: 75,
1007-
x0: 125,
1008-
x1: 175
1012+
'editable': true,
1013+
'layer': 'top',
1014+
'type': 'circle',
1015+
'line': {
1016+
'width': 5
1017+
},
1018+
'fillcolor': 'green',
1019+
'opacity': 0.5,
1020+
'xref': 'xaxis',
1021+
'yref': 'yaxis',
1022+
'x0': 125,
1023+
'y0': 25,
1024+
'x1': 175,
1025+
'y1': 75
10091026
},
10101027
{
1011-
editable: true,
1012-
line: { width: 5 },
1013-
fillcolor: 'blue',
1014-
path: 'M250,25L225,75L275,75Z'
1028+
'editable': true,
1029+
'line': {
1030+
'width': 5
1031+
},
1032+
'fillcolor': 'blue',
1033+
'path': 'M250,25L225,75L275,75Z'
10151034
},
10161035
{
1017-
editable: true,
1018-
line: { width: 15 },
1019-
path: 'M250,225L225,275L275,275'
1036+
'editable': true,
1037+
'line': {
1038+
'width': 15
1039+
},
1040+
'path': 'M250,225L225,275L275,275'
10201041
},
10211042
{
1022-
editable: true,
1023-
layer: 'below',
1024-
path: 'M320,100C390,180 290,180 360,100Z',
1025-
fillcolor: 'rgba(0,127,127,0.5)',
1026-
line: { width: 5 }
1043+
'editable': true,
1044+
'layer': 'below',
1045+
'path': 'M320,100C390,180 290,180 360,100Z',
1046+
'fillcolor': 'rgba(0,127,127,0.5)',
1047+
'line': {
1048+
'width': 5
1049+
}
10271050
},
10281051
{
1029-
editable: true,
1030-
line: {
1031-
width: 5,
1032-
color: 'orange'
1052+
'editable': true,
1053+
'line': {
1054+
'width': 5,
1055+
'color': 'orange'
10331056
},
1034-
fillcolor: 'rgba(127,255,127,0.5)',
1035-
path: 'M0,100V200H50L0,300Q100,300 100,200T150,200C100,300 200,300 200,200S150,200 150,100Z'
1057+
'fillcolor': 'rgba(127,255,127,0.5)',
1058+
'path': 'M0,100V200H50L0,300Q100,300 100,200T150,200C100,300 200,300 200,200S150,200 150,100Z'
10361059
},
10371060
{
1038-
editable: true,
1039-
line: { width: 2 },
1040-
fillcolor: 'yellow',
1041-
1042-
path: 'M300,70C300,10 380,10 380,70C380,90 300,90 300,70ZM320,60C320,50 332,50 332,60ZM348,60C348,50 360,50 360,60ZM320,70C326,80 354,80 360,70Z'
1061+
'editable': true,
1062+
'line': {
1063+
'width': 2
1064+
},
1065+
'fillcolor': 'yellow',
1066+
'path': 'M300,70C300,10 380,10 380,70C380,90 300,90 300,70ZM320,60C320,50 332,50 332,60ZM348,60C348,50 360,50 360,60ZM320,70C326,80 354,80 360,70Z'
10431067
}
10441068
]
10451069
},
1046-
config: {
1047-
editable: false,
1048-
modeBarButtonsToAdd: [
1070+
'config': {
1071+
'editable': false,
1072+
'modeBarButtonsToAdd': [
10491073
'drawline',
10501074
'drawopenpath',
10511075
'drawclosedpath',
@@ -1065,8 +1089,8 @@ describe('Activate and deactivate shapes to edit', function() {
10651089
afterEach(destroyGraphDiv);
10661090

10671091
['mouse'].forEach(function(device) {
1068-
it('@flaky activate and edit editable shapes using' + device, function(done) {
1069-
var i;
1092+
it('@flaky reactangle using' + device, function(done) {
1093+
var i = 0; // shape index
10701094

10711095
Plotly.newPlot(gd, {
10721096
data: fig.data,
@@ -1077,8 +1101,6 @@ describe('Activate and deactivate shapes to edit', function() {
10771101
// shape between 175, 160 and 255, 230
10781102
.then(function() { click(200, 160); }) // activate shape
10791103
.then(function() {
1080-
i = 0; // test first shape i.e. case of rectangle
1081-
10821104
var id = gd._fullLayout._activeShapeIndex;
10831105
expect(id).toEqual(i, 'activate shape by clicking border');
10841106

@@ -1198,11 +1220,22 @@ describe('Activate and deactivate shapes to edit', function() {
11981220
expect(id).toEqual(undefined, 'deactivate shape by clicking inside');
11991221
})
12001222

1223+
.catch(failTest)
1224+
.then(done);
1225+
});
1226+
1227+
it('@flaky circle using' + device, function(done) {
1228+
var i = 1; // shape index
1229+
1230+
Plotly.newPlot(gd, {
1231+
data: fig.data,
1232+
layout: fig.layout,
1233+
config: fig.config
1234+
})
1235+
12011236
// next shape
12021237
.then(function() { click(355, 225); }) // activate shape
12031238
.then(function() {
1204-
i = 1; // test second shape i.e. case of circle
1205-
12061239
var id = gd._fullLayout._activeShapeIndex;
12071240
expect(id).toEqual(i, 'activate shape by clicking border');
12081241

@@ -1244,11 +1277,22 @@ describe('Activate and deactivate shapes to edit', function() {
12441277
});
12451278
})
12461279

1280+
.catch(failTest)
1281+
.then(done);
1282+
});
1283+
1284+
it('@flaky closed-path using' + device, function(done) {
1285+
var i = 2; // shape index
1286+
1287+
Plotly.newPlot(gd, {
1288+
data: fig.data,
1289+
layout: fig.layout,
1290+
config: fig.config
1291+
})
1292+
12471293
// next shape
12481294
.then(function() { click(500, 225); }) // activate shape
12491295
.then(function() {
1250-
i = 2; // test third shape i.e. case of closed-path
1251-
12521296
var id = gd._fullLayout._activeShapeIndex;
12531297
expect(id).toEqual(i, 'activate shape by clicking border');
12541298

@@ -1278,11 +1322,22 @@ describe('Activate and deactivate shapes to edit', function() {
12781322
assertPos(obj.path, 'M250,25L225,75L275,75Z');
12791323
})
12801324

1325+
.catch(failTest)
1326+
.then(done);
1327+
});
1328+
1329+
it('@flaky bezier curves using' + device, function(done) {
1330+
var i = 5; // shape index
1331+
1332+
Plotly.newPlot(gd, {
1333+
data: fig.data,
1334+
layout: fig.layout,
1335+
config: fig.config
1336+
})
1337+
12811338
// next shape
12821339
.then(function() { click(300, 266); }) // activate shape
12831340
.then(function() {
1284-
i = 5; // test case of bezier curves
1285-
12861341
var id = gd._fullLayout._activeShapeIndex;
12871342
expect(id).toEqual(i, 'activate shape by clicking border');
12881343

@@ -1312,11 +1367,21 @@ describe('Activate and deactivate shapes to edit', function() {
13121367
assertPos(obj.path, 'M0,100.00237388724034L0,199.99762611275966L50.00310077519379,199.99762611275966L0,300Q100,300,100,199.9976261127597T150.0031007751938,199.99762611275966C100,300,200,300,200,199.99762611275966S150.0031007751938,199.99762611275966,150.0031007751938,100.00237388724034Z');
13131368
})
13141369

1315-
// next shape
1370+
.catch(failTest)
1371+
.then(done);
1372+
});
1373+
1374+
it('@flaky multi-cell path using' + device, function(done) {
1375+
var i = 6; // shape index
1376+
1377+
Plotly.newPlot(gd, {
1378+
data: fig.data,
1379+
layout: fig.layout,
1380+
config: fig.config
1381+
})
1382+
13161383
.then(function() { click(627, 193); }) // activate shape
13171384
.then(function() {
1318-
i = 6; // test case of multi-cell path
1319-
13201385
var id = gd._fullLayout._activeShapeIndex;
13211386
expect(id).toEqual(i, 'activate shape by clicking border');
13221387

@@ -1325,17 +1390,17 @@ describe('Activate and deactivate shapes to edit', function() {
13251390
print(obj);
13261391
assertPos(obj.path, 'M300,70C300,10 380,10 380,70C380,90 300,90 300,70ZM320,60C320,50 332,50 332,60ZM348,60C348,50 360,50 360,60ZM320,70C326,80 354,80 360,70Z');
13271392
})
1328-
.then(function() { drag([[717, 225], [725, 230]]); }) // move vertex
1393+
.then(function() { drag([[717, 225], [700, 250]]); }) // move vertex
13291394
.then(function() {
13301395
var id = gd._fullLayout._activeShapeIndex;
13311396
expect(id).toEqual(i, 'keep shape active after drag corner');
13321397

13331398
var shapes = gd._fullLayout.shapes;
13341399
var obj = shapes[id]._input;
13351400
print(obj);
1336-
assertPos(obj.path, 'M300,69.99881305637984C300,9.998813056379817,380,9.998813056379817,380,69.99881305637984C380,90.00356083086054,300,90.00356083086054,300,69.99881305637984ZM320,60.00000000000001C320,50.00118694362017,332,50.00118694362017,332,60.00000000000001ZM348,60.00000000000001C348,50.00118694362017,360,50.00118694362017,360,60.00000000000001ZM320,69.99881305637984C326.0031007751938,79.99762611275966,354.0031007751938,79.99762611275966,364.9612403100775,69.99881305637984Z');
1401+
assertPos(obj.path, 'M300,69.99881305637984C300,9.998813056379817,380,9.998813056379817,380,69.99881305637984C380,90.00356083086054,300,90.00356083086054,300,69.99881305637984ZM320,60.00000000000001C320,50.00118694362017,332,50.00118694362017,332,60.00000000000001ZM348,60.00000000000001C348,50.00118694362017,360,50.00118694362017,360,60.00000000000001ZM320,69.99881305637984C326.0031007751938,79.99762611275966,354.0031007751938,79.99762611275966,349.4573643410853,87.80296735905047Z');
13371402
})
1338-
.then(function() { drag([[725, 230], [717, 225]]); }) // move vertex back
1403+
.then(function() { drag([[700, 250], [717, 225]]); }) // move vertex back
13391404
.then(function() {
13401405
var id = gd._fullLayout._activeShapeIndex;
13411406
expect(id).toEqual(i, 'keep shape active after drag corner');
@@ -1345,6 +1410,7 @@ describe('Activate and deactivate shapes to edit', function() {
13451410
print(obj);
13461411
assertPos(obj.path, 'M300,70C300,10 380,10 380,70C380,90 300,90 300,70ZM320,60C320,50 332,50 332,60ZM348,60C348,50 360,50 360,60ZM320,70C326,80 354,80 360,70Z');
13471412
})
1413+
13481414
// erase shape
13491415
.then(function() {
13501416
expect(gd._fullLayout.shapes.length).toEqual(8);

0 commit comments

Comments
 (0)