Skip to content

Commit b2675b8

Browse files
dmt0dmt0
committed
percy initial
1 parent be3fc56 commit b2675b8

File tree

10 files changed

+346
-3
lines changed

10 files changed

+346
-3
lines changed

‎.eslintrc‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,18 @@
2929
},
3030
"plugins": [
3131
"react",
32-
"import"
32+
"import",
33+
"react-percy"
34+
],
35+
"overrides": [
36+
{
37+
"files": [
38+
"**/*.percy.{js,jsx}"
39+
],
40+
"env": {
41+
"react-percy/globals": true
42+
}
43+
}
3344
],
3445
"rules": {
3546
"accessor-pairs": ["error"],

‎circle.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,4 @@ jobs:
2222
key: v1-dependencies-{{ checksum "package.json" }}
2323

2424
- run: npm test
25+
- run: npm run test:percy

‎dev/mocks.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
[
22
"/mocks/aggregate.json",
3+
"/percy/panelTest.json",
34
"0.json",
45
"1.json",
56
"10.json",

‎dev/percy/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import panelTest from './panelTest.json';
2+
3+
export {panelTest};

‎dev/percy/panelTest.json‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
{
2+
"data": [
3+
{
4+
"x": [
5+
1,
6+
2,
7+
3
8+
],
9+
"y": [
10+
2,
11+
3,
12+
4
13+
],
14+
"name": "yaxis data",
15+
"type": "scatter",
16+
"transforms": [
17+
{
18+
"type": "aggregate",
19+
"groups": [
20+
1,
21+
2,
22+
3
23+
],
24+
"groupssrc": "x1",
25+
"aggregations": [
26+
{
27+
"func": "count",
28+
"target": "x",
29+
"enabled": true
30+
}
31+
]
32+
}
33+
],
34+
"marker": {
35+
"color": [
36+
1,
37+
2,
38+
3,
39+
4,
40+
5,
41+
6
42+
],
43+
"colorsrc": "ints",
44+
"cmin": 1,
45+
"cmax": 6,
46+
"cauto": true,
47+
"colorscale": [
48+
[
49+
0,
50+
"rgb(220,220,220)"
51+
],
52+
[
53+
0.2,
54+
"rgb(245,195,157)"
55+
],
56+
[
57+
0.4,
58+
"rgb(245,160,105)"
59+
],
60+
[
61+
1,
62+
"rgb(178,10,28)"
63+
]
64+
],
65+
"autocolorscale": false,
66+
"showscale": true,
67+
"colorbar": {
68+
"ticks": "inside"
69+
}
70+
}
71+
},
72+
{
73+
"x": [
74+
1,
75+
2,
76+
3
77+
],
78+
"y": [
79+
20,
80+
30,
81+
40
82+
],
83+
"xsrc": "x1",
84+
"ysrc": "y2",
85+
"name": "yaxis2 data",
86+
"yaxis": "y2",
87+
"type": "scatter",
88+
"error_x": {
89+
"visible": true,
90+
"type": "percent",
91+
"symmetric": true,
92+
"value": 10,
93+
"valueminus": 10,
94+
"copy_ystyle": true
95+
},
96+
"error_y": {
97+
"visible": true,
98+
"type": "percent",
99+
"symmetric": false,
100+
"value": 10,
101+
"color": "#1f77b4",
102+
"thickness": 2,
103+
"width": 4
104+
}
105+
}
106+
],
107+
"layout": {
108+
"title": "Double Y Axis Example",
109+
"yaxis2": {
110+
"title": "yaxis2 title",
111+
"titlefont": {
112+
"color": "rgb(148, 103, 189)"
113+
},
114+
"tickfont": {
115+
"color": "rgb(148, 103, 189)"
116+
},
117+
"overlaying": "y",
118+
"side": "right"
119+
},
120+
"annotations": [
121+
{
122+
"text": "hodor"
123+
},
124+
{
125+
"text": "rodoh"
126+
}
127+
],
128+
"xaxis": {
129+
"type": "linear",
130+
"range": [
131+
0.6919103739269605,
132+
6.3080896260730395
133+
],
134+
"autorange": true,
135+
"showline": true,
136+
"automargin": false,
137+
"side": "clockwise",
138+
"ticks": "inside",
139+
"rangeslider": {
140+
"visible": true,
141+
"yaxis": {
142+
"rangemode": "match"
143+
},
144+
"autorange": true,
145+
"range": [
146+
0.6919103739269605,
147+
6.3080896260730395
148+
]
149+
},
150+
"showspikes": true
151+
},
152+
"yaxis": {
153+
"range": [
154+
-0.32971827474445276,
155+
5.329718274744453
156+
],
157+
"autorange": true
158+
},
159+
"autosize": true,
160+
"shapes": [
161+
{
162+
"text": "Shape 0",
163+
"line": {
164+
"color": "#444444"
165+
},
166+
"fillcolor": "#7F7F7F",
167+
"opacity": 0.3,
168+
"visible": true
169+
}
170+
],
171+
"images": [
172+
{
173+
"text": "Image 1",
174+
"sizex": 0.1,
175+
"sizey": 0.1,
176+
"x": 0.5,
177+
"y": 0.5,
178+
"source": "data:image/bmp;base64,Qk12AAAAAAAAADYAAAAoAAAABAAAAPz///8BACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/w=="
179+
}
180+
],
181+
"sliders": [
182+
{
183+
"active": 2,
184+
"steps": [
185+
{
186+
"label": "red",
187+
"method": "restyle",
188+
"args": [
189+
{
190+
"line.color": "red"
191+
}
192+
]
193+
},
194+
{
195+
"label": "orange",
196+
"method": "restyle",
197+
"args": [
198+
{
199+
"line.color": "orange"
200+
}
201+
]
202+
}
203+
],
204+
"visible": true,
205+
"x": 0.5,
206+
"len": 0.5,
207+
"xanchor": "right",
208+
"y": -0.1,
209+
"yanchor": "top",
210+
"currentvalue": {
211+
"visible": false
212+
},
213+
"transition": {
214+
"duration": 150,
215+
"easing": "cubic-in-out"
216+
},
217+
"pad": {
218+
"r": 20,
219+
"t": 60
220+
},
221+
"font": {}
222+
}
223+
],
224+
"updatemenus": [
225+
{
226+
"buttons": [
227+
{
228+
"method": "restyle",
229+
"args": [
230+
"line.color",
231+
"red"
232+
],
233+
"label": "<span style='color:red'>red</span><br>color"
234+
},
235+
{
236+
"method": "restyle",
237+
"args": [
238+
"line.color",
239+
"blue"
240+
],
241+
"label": "<span style='color:blue'>blue</span><br>color"
242+
},
243+
{
244+
"method": "restyle",
245+
"args": [
246+
"line.color",
247+
"green"
248+
],
249+
"label": "<span style='color:green'>green</span><br>trace<br>color"
250+
}
251+
],
252+
"active": 1
253+
}
254+
]
255+
}
256+
}

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
"url": "https://github.com/plotly/react-chart-editor/issues"
88
},
99
"dependencies": {
10+
"@plotly/draft-js-export-html": "1.2.0",
1011
"classnames": "^2.2.5",
1112
"draft-js": "^0.10.4",
12-
"@plotly/draft-js-export-html": "1.2.0",
1313
"draft-js-import-html": "^1.2.1",
1414
"draft-js-utils": "^1.2.0",
1515
"fast-isnumeric": "^1.1.1",
@@ -28,6 +28,7 @@
2828
"tinycolor2": "^1.4.1"
2929
},
3030
"devDependencies": {
31+
"@percy/react": "^0.4.3",
3132
"autoprefixer": "^7.2.3",
3233
"babel-cli": "^6.26.0",
3334
"babel-core": "^6.26.0",
@@ -48,6 +49,7 @@
4849
"eslint-config-prettier": "^2.7.0",
4950
"eslint-plugin-import": "^2.8.0",
5051
"eslint-plugin-react": "^7.4.0",
52+
"eslint-plugin-react-percy": "^0.2.1",
5153
"fs": "^0.0.1-security",
5254
"gl": "^4.0.4",
5355
"glob": "^7.1.2",
@@ -115,6 +117,8 @@
115117
"test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
116118
"test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
117119
"test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
120+
"test:percy": "react-percy",
121+
"test:percy-local": "react-percy --debug",
118122
"watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-chart-editor.css",
119123
"watch-test": "jest --watch"
120124
}

‎percy.config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default {
2+
webpack: {
3+
module: {
4+
rules: [
5+
{
6+
test: /\.(css|scss)?$/,
7+
use: ['style-loader', 'css-loader', 'sass-loader'],
8+
},
9+
{
10+
test: /\.json$/,
11+
loader: 'json-loader',
12+
},
13+
],
14+
},
15+
},
16+
};

‎src/__percy__/panels.percy.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import {TestEditor, plotly, setupGraphDiv} from 'lib/test-utils';
3+
4+
import {PanelMenuWrapper} from '../components';
5+
6+
import * as mocks from '../../dev/percy';
7+
import * as panels from '../default_panels/';
8+
9+
import '../../dev/styles.css';
10+
import '../styles/main.scss';
11+
import './percy.css';
12+
13+
/**
14+
* To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js
15+
*/
16+
17+
const panelFixture = (Panel, group, name, data) => {
18+
return (
19+
<div className="plotly_editor">
20+
<TestEditor plotly={plotly} graphDiv={setupGraphDiv(data)}>
21+
<PanelMenuWrapper>
22+
<Panel group={group} name={name} />
23+
</PanelMenuWrapper>
24+
</TestEditor>
25+
</div>
26+
);
27+
};
28+
29+
const snapshotWidth = 500;
30+
31+
Object.keys(mocks).forEach(m => {
32+
Object.keys(panels).forEach(p => {
33+
const words = p.split(/(?=[A-Z])/);
34+
const panelGroup = words[0];
35+
const panelName = words.slice(1, -1).join(' ');
36+
37+
percySnapshot(`${m}_${p}`, {widths: [snapshotWidth]}, () =>
38+
panelFixture(panels[p], panelGroup, panelName, mocks[m])
39+
);
40+
});
41+
});

‎src/__percy__/percy.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.editor_controls__wrapper > div {
2+
position: relative !important;
3+
}

0 commit comments

Comments
 (0)