Skip to content

Commit e2a1128

Browse files
fritz-cfritz-c
committed
test: Add snapshot test for new example
1 parent eb3b19f commit e2a1128

File tree

2 files changed

+263
-1
lines changed

2 files changed

+263
-1
lines changed

‎examples/storybooks/__snapshots__/storyshots.test.js.snap

+262
Original file line numberDiff line numberDiff line change
@@ -2983,3 +2983,265 @@ exports[`Storyshots Basics Search 1`] = `
29832983
</a>
29842984
</div>
29852985
`;
2986+
2987+
exports[`Storyshots Basics treeData import/export 1`] = `
2988+
<div>
2989+
<div>
2990+
↓treeData for this tree was generated from flat data similar to DB rows↓
2991+
<div
2992+
style={
2993+
Object {
2994+
"height": 250,
2995+
}
2996+
}
2997+
>
2998+
<div
2999+
className="tree"
3000+
style={
3001+
Object {
3002+
"height": "100%",
3003+
}
3004+
}
3005+
>
3006+
<div>
3007+
<div
3008+
aria-label="grid"
3009+
className="ReactVirtualized__Grid ReactVirtualized__List virtualScrollOverride"
3010+
id={undefined}
3011+
onScroll={[Function]}
3012+
role="grid"
3013+
style={
3014+
Object {
3015+
"WebkitOverflowScrolling": "touch",
3016+
"boxSizing": "border-box",
3017+
"direction": "ltr",
3018+
"height": 99999,
3019+
"overflowX": "hidden",
3020+
"overflowY": "hidden",
3021+
"position": "relative",
3022+
"width": 200,
3023+
"willChange": "transform",
3024+
}
3025+
}
3026+
tabIndex={0}
3027+
>
3028+
<div
3029+
className="ReactVirtualized__Grid__innerScrollContainer"
3030+
style={
3031+
Object {
3032+
"height": 124,
3033+
"maxHeight": 124,
3034+
"maxWidth": 200,
3035+
"overflow": "hidden",
3036+
"pointerEvents": "",
3037+
"position": "relative",
3038+
"width": "auto",
3039+
}
3040+
}
3041+
>
3042+
<div
3043+
className="node"
3044+
style={
3045+
Object {
3046+
"height": 62,
3047+
"left": 0,
3048+
"position": "absolute",
3049+
"top": 0,
3050+
"width": "100%",
3051+
}
3052+
}
3053+
>
3054+
<div
3055+
className="lineBlock lineHalfHorizontalRight lineHalfVerticalBottom"
3056+
style={
3057+
Object {
3058+
"width": 44,
3059+
}
3060+
}
3061+
/>
3062+
<div
3063+
className="nodeContent"
3064+
style={
3065+
Object {
3066+
"left": 44,
3067+
}
3068+
}
3069+
>
3070+
<div
3071+
style={
3072+
Object {
3073+
"height": "100%",
3074+
}
3075+
}
3076+
>
3077+
<div
3078+
className="rowWrapper"
3079+
>
3080+
<div
3081+
className="row"
3082+
style={
3083+
Object {
3084+
"opacity": 1,
3085+
}
3086+
}
3087+
>
3088+
<div
3089+
className="moveHandle"
3090+
/>
3091+
<div
3092+
className="rowContents"
3093+
>
3094+
<div
3095+
className="rowLabel"
3096+
>
3097+
<span
3098+
className="rowTitle"
3099+
>
3100+
N1
3101+
</span>
3102+
</div>
3103+
<div
3104+
className="rowToolbar"
3105+
/>
3106+
</div>
3107+
</div>
3108+
</div>
3109+
</div>
3110+
</div>
3111+
</div>
3112+
<div
3113+
className="node"
3114+
style={
3115+
Object {
3116+
"height": 62,
3117+
"left": 0,
3118+
"position": "absolute",
3119+
"top": 62,
3120+
"width": "100%",
3121+
}
3122+
}
3123+
>
3124+
<div
3125+
className="lineBlock lineHalfVerticalTop lineHalfHorizontalRight"
3126+
style={
3127+
Object {
3128+
"width": 44,
3129+
}
3130+
}
3131+
/>
3132+
<div
3133+
className="nodeContent"
3134+
style={
3135+
Object {
3136+
"left": 44,
3137+
}
3138+
}
3139+
>
3140+
<div
3141+
style={
3142+
Object {
3143+
"height": "100%",
3144+
}
3145+
}
3146+
>
3147+
<div>
3148+
<button
3149+
aria-label="Expand"
3150+
className="expandButton"
3151+
onClick={[Function]}
3152+
style={
3153+
Object {
3154+
"left": -22,
3155+
}
3156+
}
3157+
type="button"
3158+
/>
3159+
</div>
3160+
<div
3161+
className="rowWrapper"
3162+
>
3163+
<div
3164+
className="row"
3165+
style={
3166+
Object {
3167+
"opacity": 1,
3168+
}
3169+
}
3170+
>
3171+
<div
3172+
className="moveHandle"
3173+
/>
3174+
<div
3175+
className="rowContents"
3176+
>
3177+
<div
3178+
className="rowLabel"
3179+
>
3180+
<span
3181+
className="rowTitle"
3182+
>
3183+
N2
3184+
</span>
3185+
</div>
3186+
<div
3187+
className="rowToolbar"
3188+
/>
3189+
</div>
3190+
</div>
3191+
</div>
3192+
</div>
3193+
</div>
3194+
</div>
3195+
</div>
3196+
</div>
3197+
</div>
3198+
</div>
3199+
</div>
3200+
<hr />
3201+
↓This flat data is generated from the modified tree data↓
3202+
<ul>
3203+
<li>
3204+
id:
3205+
1
3206+
, name:
3207+
N1
3208+
, parent:
3209+
null
3210+
</li>
3211+
<li>
3212+
id:
3213+
2
3214+
, name:
3215+
N2
3216+
, parent:
3217+
null
3218+
</li>
3219+
<li>
3220+
id:
3221+
3
3222+
, name:
3223+
N3
3224+
, parent:
3225+
3
3226+
</li>
3227+
<li>
3228+
id:
3229+
4
3230+
, name:
3231+
N4
3232+
, parent:
3233+
4
3234+
</li>
3235+
</ul>
3236+
</div>
3237+
<br />
3238+
<a
3239+
className="sourceLink"
3240+
href="https://github.com/fritz-c/react-sortable-tree/blob/master/examples/storybooks/tree-data-io.js"
3241+
rel="noopener noreferrer"
3242+
target="_top"
3243+
>
3244+
VIEW SOURCE →
3245+
</a>
3246+
</div>
3247+
`;

‎examples/storybooks/tree-data-io.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default class App extends Component {
4949
/>
5050
</div>
5151
<hr />
52-
↓This data is generated from the modified tree data↓
52+
↓This flat data is generated from the modified tree data↓
5353
<ul>
5454
{flatData.map(({ id, name, parent }) =>
5555
<li key={id}>

0 commit comments

Comments
 (0)