Skip to content

Commit 7eb1943

Browse files
chrimahochrimaho
committed
Add tests and mock data for scatter marker line dash support
- Introduce a new mock data file for testing scatter marker line dash - Implement tests for marker line dash functionality - Validate support for array of dashes in markers - Ensure marker line dash is displayed in the legend - Confirm marker line dash updates via restyle - Test marker line dash on open markers
1 parent 3dd16f7 commit 7eb1943

2 files changed

Lines changed: 212 additions & 0 deletions

File tree

‎test/image/mocks/scatter_marker_line_dash.json‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"data": [
3+
{
4+
"type": "scatter",
5+
"mode": "markers",
6+
"x": [1, 2, 3, 4, 5, 6],
7+
"y": [1, 1, 1, 1, 1, 1],
8+
"marker": {
9+
"size": 30,
10+
"color": "white",
11+
"line": {
12+
"color": "black",
13+
"width": 3,
14+
"dash": ["solid", "dot", "dash", "longdash", "dashdot", "longdashdot"]
15+
}
16+
},
17+
"name": "Array of dashes"
18+
},
19+
{
20+
"type": "scatter",
21+
"mode": "markers",
22+
"x": [1, 2, 3, 4, 5, 6],
23+
"y": [2, 2, 2, 2, 2, 2],
24+
"marker": {
25+
"size": 30,
26+
"color": "rgba(255,0,0,0.2)",
27+
"line": {
28+
"color": "red",
29+
"width": 4,
30+
"dash": "dash"
31+
}
32+
},
33+
"name": "Single dash"
34+
},
35+
{
36+
"type": "scatter",
37+
"mode": "markers",
38+
"x": [1, 2, 3, 4, 5, 6],
39+
"y": [3, 3, 3, 3, 3, 3],
40+
"marker": {
41+
"size": 30,
42+
"symbol": "square",
43+
"color": "white",
44+
"line": {
45+
"color": "blue",
46+
"width": 2,
47+
"dash": "dot"
48+
}
49+
},
50+
"name": "Dot with squares"
51+
},
52+
{
53+
"type": "scatter",
54+
"mode": "markers",
55+
"x": [1, 2, 3, 4, 5, 6],
56+
"y": [4, 4, 4, 4, 4, 4],
57+
"marker": {
58+
"size": 30,
59+
"symbol": "circle-open",
60+
"line": {
61+
"color": "green",
62+
"width": 2,
63+
"dash": "dash"
64+
}
65+
},
66+
"name": "Open markers with dash"
67+
}
68+
],
69+
"layout": {
70+
"title": {
71+
"text": "Scatter Marker Line Dash Support"
72+
},
73+
"xaxis": {
74+
"range": [0, 7]
75+
},
76+
"yaxis": {
77+
"range": [0, 4]
78+
},
79+
"width": 600,
80+
"height": 400
81+
}
82+
}

‎test/jasmine/tests/scatter_marker_line_dash_test.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
var Plotly = require('../../../lib/index');
2+
var createGraphDiv = require('../assets/create_graph_div');
3+
var destroyGraphDiv = require('../assets/destroy_graph_div');
4+
5+
describe('Test scatter marker line dash:', function() {
6+
var gd;
7+
8+
beforeEach(function() {
9+
gd = createGraphDiv();
10+
});
11+
12+
afterEach(destroyGraphDiv);
13+
14+
it('should support marker line dash', function(done) {
15+
Plotly.newPlot(gd, [{
16+
mode: 'markers',
17+
x: [1, 2, 3],
18+
y: [1, 2, 3],
19+
marker: {
20+
size: 20,
21+
line: {
22+
color: 'red',
23+
width: 2,
24+
dash: 'dash'
25+
}
26+
}
27+
}]).then(function() {
28+
var markers = gd.querySelectorAll('.point');
29+
expect(markers.length).toBe(3);
30+
31+
markers.forEach(function(node) {
32+
// In plotly.js, dash is applied via stroke-dasharray
33+
expect(node.style.strokeDasharray).not.toBe('');
34+
});
35+
})
36+
.then(done, done.fail);
37+
});
38+
39+
it('should support array marker line dash', function(done) {
40+
Plotly.newPlot(gd, [{
41+
mode: 'markers',
42+
x: [1, 2, 3],
43+
y: [1, 2, 3],
44+
marker: {
45+
size: 20,
46+
line: {
47+
color: 'red',
48+
width: 2,
49+
dash: ['solid', 'dot', 'dash']
50+
}
51+
}
52+
}]).then(function() {
53+
var markers = gd.querySelectorAll('.point');
54+
expect(markers.length).toBe(3);
55+
56+
// 'solid' should have no dasharray or 'none' (represented as empty string in node.style.strokeDasharray)
57+
// 'dot' and 'dash' should have numerical dasharrays
58+
expect(markers[0].style.strokeDasharray).toBe('');
59+
expect(markers[1].style.strokeDasharray).not.toBe('');
60+
expect(markers[2].style.strokeDasharray).not.toBe('');
61+
})
62+
.then(done, done.fail);
63+
});
64+
65+
it('should show marker line dash in the legend', function(done) {
66+
Plotly.newPlot(gd, [{
67+
mode: 'markers',
68+
x: [1, 2, 3],
69+
y: [1, 2, 3],
70+
marker: {
71+
line: {
72+
color: 'red',
73+
width: 2,
74+
dash: 'dash'
75+
}
76+
}
77+
}]).then(function() {
78+
var legendPoints = gd.querySelectorAll('.legendpoints path.point');
79+
expect(legendPoints.length).toBe(1);
80+
expect(legendPoints[0].style.strokeDasharray).not.toBe('');
81+
})
82+
.then(done, done.fail);
83+
});
84+
85+
it('should update marker line dash via restyle', function(done) {
86+
Plotly.newPlot(gd, [{
87+
mode: 'markers',
88+
x: [1, 2, 3],
89+
y: [1, 2, 3],
90+
marker: {
91+
line: {
92+
color: 'red',
93+
width: 2,
94+
dash: 'solid'
95+
}
96+
}
97+
}]).then(function() {
98+
var markers = gd.querySelectorAll('.point');
99+
expect(markers[0].style.strokeDasharray).toBe('');
100+
101+
return Plotly.restyle(gd, {'marker.line.dash': 'dot'});
102+
}).then(function() {
103+
var markers = gd.querySelectorAll('.point');
104+
expect(markers[0].style.strokeDasharray).not.toBe('');
105+
})
106+
.then(done, done.fail);
107+
});
108+
it('should support marker line dash on open markers', function(done) {
109+
Plotly.newPlot(gd, [{
110+
mode: 'markers',
111+
x: [1, 2, 3],
112+
y: [1, 2, 3],
113+
marker: {
114+
symbol: 'circle-open',
115+
line: {
116+
color: 'red',
117+
width: 2,
118+
dash: 'dash'
119+
}
120+
}
121+
}]).then(function() {
122+
var markers = gd.querySelectorAll('.point');
123+
expect(markers.length).toBe(3);
124+
125+
markers.forEach(function(node) {
126+
expect(node.style.strokeDasharray).not.toBe('');
127+
});
128+
})
129+
.then(done, done.fail);
130+
});});

0 commit comments

Comments
 (0)