scrollbar: use enzyme for tests instead of react-test-renderer

This commit is contained in:
Alexander Zobnin 2018-09-07 14:31:56 +03:00
parent 729cc94daf
commit 349b2787cb
No known key found for this signature in database
GPG Key ID: E17E9ABACEFA59EB
2 changed files with 111 additions and 82 deletions

View File

@ -1,16 +1,15 @@
import React from 'react'; import React from 'react';
import renderer from 'react-test-renderer'; import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import GrafanaScrollbar from './GrafanaScrollbar'; import GrafanaScrollbar from './GrafanaScrollbar';
describe('GrafanaScrollbar', () => { describe('GrafanaScrollbar', () => {
it('renders correctly', () => { it('renders correctly', () => {
const tree = renderer const tree = mount(
.create( <GrafanaScrollbar>
<GrafanaScrollbar> <p>Scrollable content</p>
<p>Scrollable content</p> </GrafanaScrollbar>
</GrafanaScrollbar> );
) expect(toJson(tree)).toMatchSnapshot();
.toJSON();
expect(tree).toMatchSnapshot();
}); });
}); });

View File

@ -1,86 +1,116 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GrafanaScrollbar renders correctly 1`] = ` exports[`GrafanaScrollbar renders correctly 1`] = `
<div <GrafanaScrollbar
className="custom-scrollbars" autoHide={true}
style={ autoHideDuration={200}
Object { autoHideTimeout={200}
"height": "auto", customClassName="custom-scrollbars"
"maxHeight": "100%", hideTracksWhenNotNeeded={false}
"minHeight": "100%",
"overflow": "hidden",
"position": "relative",
"width": "100%",
}
}
> >
<div <Scrollbars
className="view" autoHeight={true}
style={ autoHeightMax="100%"
Object { autoHeightMin="100%"
"WebkitOverflowScrolling": "touch", autoHide={true}
"bottom": undefined, autoHideDuration={200}
"left": undefined, autoHideTimeout={200}
"marginBottom": 0, className="custom-scrollbars"
"marginRight": 0, hideTracksWhenNotNeeded={false}
"maxHeight": "calc(100% + 0px)", renderThumbHorizontal={[Function]}
"minHeight": "calc(100% + 0px)", renderThumbVertical={[Function]}
"overflow": "scroll", renderTrackHorizontal={[Function]}
"position": "relative", renderTrackVertical={[Function]}
"right": undefined, renderView={[Function]}
"top": undefined, tagName="div"
} thumbMinSize={30}
} universal={false}
>
<p>
Scrollable content
</p>
</div>
<div
className="track-horizontal"
style={
Object {
"display": "none",
"height": 6,
"opacity": 0,
"position": "absolute",
"transition": "opacity 200ms",
}
}
> >
<div <div
className="thumb-horizontal" className="custom-scrollbars"
style={ style={
Object { Object {
"display": "block", "height": "auto",
"height": "100%", "maxHeight": "100%",
"position": "relative", "minHeight": "100%",
} "overflow": "hidden",
}
/>
</div>
<div
className="track-vertical"
style={
Object {
"display": "none",
"opacity": 0,
"position": "absolute",
"transition": "opacity 200ms",
"width": 6,
}
}
>
<div
className="thumb-vertical"
style={
Object {
"display": "block",
"position": "relative", "position": "relative",
"width": "100%", "width": "100%",
} }
} }
/> >
</div> <div
</div> className="view"
key="view"
style={
Object {
"WebkitOverflowScrolling": "touch",
"bottom": undefined,
"left": undefined,
"marginBottom": 0,
"marginRight": 0,
"maxHeight": "calc(100% + 0px)",
"minHeight": "calc(100% + 0px)",
"overflow": "scroll",
"position": "relative",
"right": undefined,
"top": undefined,
}
}
>
<p>
Scrollable content
</p>
</div>
<div
className="track-horizontal"
key="trackHorizontal"
style={
Object {
"display": "none",
"height": 6,
"opacity": 0,
"position": "absolute",
"transition": "opacity 200ms",
}
}
>
<div
className="thumb-horizontal"
style={
Object {
"display": "block",
"height": "100%",
"position": "relative",
}
}
/>
</div>
<div
className="track-vertical"
key="trackVertical"
style={
Object {
"display": "none",
"opacity": 0,
"position": "absolute",
"transition": "opacity 200ms",
"width": 6,
}
}
>
<div
className="thumb-vertical"
style={
Object {
"display": "block",
"position": "relative",
"width": "100%",
}
}
/>
</div>
</div>
</Scrollbars>
</GrafanaScrollbar>
`; `;