Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit eeda5e4

Browse files
update tests for ParallaxBanner to include custom children and expanded states jscottsmith#22 
1 parent 4b07d8a commit eeda5e4

File tree

2 files changed

+232
-11
lines changed

2 files changed

+232
-11
lines changed

‎__tests__/ParallaxBanner.test.js‎

Lines changed: 115 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,20 @@ import ParallaxBanner from 'components/ParallaxBanner';
66
import ParallaxProvider from 'components/ParallaxProvider';
77
import ParallaxController from 'libs/ParallaxController';
88

9+
// Workaround for refs
10+
// See https://github.com/facebook/react/issues/7740
11+
function createNodeMock() {
12+
const div = document.createElement('div');
13+
14+
return {
15+
getBoundingClientRect: () => div.getBoundingClientRect(),
16+
};
17+
}
18+
919
describe('Expect the <ParallaxBanner> component', () => {
1020
afterEach(() => {});
1121

12-
it('to render correctly', () => {
13-
// Workaround for refs
14-
// See https://github.com/facebook/react/issues/7740
15-
const div = document.createElement('div');
16-
function createNodeMock() {
17-
return {
18-
getBoundingClientRect: () => div.getBoundingClientRect(),
19-
};
20-
}
21-
22+
it('to render image banners correctly', () => {
2223
const tree = renderer
2324
.create(
2425
<ParallaxProvider>
@@ -50,6 +51,56 @@ describe('Expect the <ParallaxBanner> component', () => {
5051
expect(tree).toMatchSnapshot();
5152
});
5253

54+
it('to render custom child banners correctly', () => {
55+
const tree = renderer
56+
.create(
57+
<ParallaxProvider>
58+
<ParallaxBanner
59+
className="test-class"
60+
disabled={false}
61+
layers={[
62+
{
63+
children: <div>test</div>,
64+
amount: 0.2,
65+
slowerScrollRate: false,
66+
},
67+
]}
68+
style={{
69+
backgroundColor: 'blue',
70+
border: '1px solid red',
71+
}}
72+
/>
73+
</ParallaxProvider>,
74+
{
75+
createNodeMock,
76+
}
77+
)
78+
.toJSON();
79+
expect(tree).toMatchSnapshot();
80+
});
81+
82+
it('to render without expanded margins', () => {
83+
const tree = renderer
84+
.create(
85+
<ParallaxProvider>
86+
<ParallaxBanner
87+
layers={[
88+
{
89+
children: <div>test</div>,
90+
amount: 0.2,
91+
expanded: false,
92+
},
93+
]}
94+
/>
95+
</ParallaxProvider>,
96+
{
97+
createNodeMock,
98+
}
99+
)
100+
.toJSON();
101+
expect(tree).toMatchSnapshot();
102+
});
103+
53104
it('to render children', () => {
54105
const node = document.createElement('div');
55106

@@ -70,4 +121,58 @@ describe('Expect the <ParallaxBanner> component', () => {
70121

71122
expect(child).toBeCalled();
72123
});
124+
125+
it('to render layer children', () => {
126+
const node = document.createElement('div');
127+
128+
let child = jest.fn();
129+
const Child = () => {
130+
child();
131+
return <div />;
132+
};
133+
134+
ReactDOM.render(
135+
<ParallaxProvider>
136+
<ParallaxBanner
137+
layers={[
138+
{
139+
children: <Child />,
140+
amount: 0.2,
141+
slowerScrollRate: false,
142+
},
143+
]}
144+
/>
145+
</ParallaxProvider>,
146+
node
147+
);
148+
149+
expect(child).toBeCalled();
150+
});
151+
152+
it('to render layer children', () => {
153+
const node = document.createElement('div');
154+
155+
let child = jest.fn();
156+
const Child = () => {
157+
child();
158+
return <div />;
159+
};
160+
161+
ReactDOM.render(
162+
<ParallaxProvider>
163+
<ParallaxBanner
164+
layers={[
165+
{
166+
children: <Child />,
167+
amount: 0.2,
168+
slowerScrollRate: false,
169+
},
170+
]}
171+
/>
172+
</ParallaxProvider>,
173+
node
174+
);
175+
176+
expect(child).toBeCalled();
177+
});
73178
});

‎__tests__/__snapshots__/ParallaxBanner.test.js.snap‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,65 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Expect the <ParallaxBanner> component to render correctly 1`] = `
3+
exports[`Expect the <ParallaxBanner> component to render custom child banners correctly 1`] = `
4+
<div
5+
className="parallax-banner test-class"
6+
style={
7+
Object {
8+
"backgroundColor": "blue",
9+
"border": "1px solid red",
10+
"height": "50vh",
11+
"overflow": "hidden",
12+
"position": "relative",
13+
"width": "100%",
14+
}
15+
}
16+
>
17+
<div
18+
className="parallax-outer"
19+
style={
20+
Object {
21+
"bottom": 0,
22+
"left": 0,
23+
"position": "absolute",
24+
"right": 0,
25+
"top": 0,
26+
}
27+
}
28+
>
29+
<div
30+
className="parallax-inner"
31+
style={
32+
Object {
33+
"bottom": 0,
34+
"left": 0,
35+
"position": "absolute",
36+
"right": 0,
37+
"top": 0,
38+
}
39+
}
40+
>
41+
<div
42+
className="parallax-banner-layer-0"
43+
style={
44+
Object {
45+
"bottom": "-20%",
46+
"left": 0,
47+
"position": "absolute",
48+
"right": 0,
49+
"top": "-20%",
50+
}
51+
}
52+
>
53+
<div>
54+
test
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
`;
61+
62+
exports[`Expect the <ParallaxBanner> component to render image banners correctly 1`] = `
463
<div
564
className="parallax-banner test-class"
665
style={
@@ -62,3 +121,60 @@ exports[`Expect the <ParallaxBanner> component to render correctly 1`] = `
62121
</div>
63122
</div>
64123
`;
124+
125+
exports[`Expect the <ParallaxBanner> component to render without expanded margins 1`] = `
126+
<div
127+
className="parallax-banner"
128+
style={
129+
Object {
130+
"height": "50vh",
131+
"overflow": "hidden",
132+
"position": "relative",
133+
"width": "100%",
134+
}
135+
}
136+
>
137+
<div
138+
className="parallax-outer"
139+
style={
140+
Object {
141+
"bottom": 0,
142+
"left": 0,
143+
"position": "absolute",
144+
"right": 0,
145+
"top": 0,
146+
}
147+
}
148+
>
149+
<div
150+
className="parallax-inner"
151+
style={
152+
Object {
153+
"bottom": 0,
154+
"left": 0,
155+
"position": "absolute",
156+
"right": 0,
157+
"top": 0,
158+
}
159+
}
160+
>
161+
<div
162+
className="parallax-banner-layer-0"
163+
style={
164+
Object {
165+
"bottom": 0,
166+
"left": 0,
167+
"position": "absolute",
168+
"right": 0,
169+
"top": 0,
170+
}
171+
}
172+
>
173+
<div>
174+
test
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
`;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /