Skip to content

Commit 04e6777

Browse files
jscottsmithjscottsmith
committed
fix shouldDisableScalingTranslations default in ParallaxBanner and tests
1 parent 48f1a42 commit 04e6777

File tree

5 files changed

+374
-20
lines changed

5 files changed

+374
-20
lines changed

‎src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,317 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`given a <ParallaxBanner> component when the prop { disabled: true } is given then it renders without issue and calls create element with props 1`] = `
4+
<DocumentFragment>
5+
<div
6+
style="position: relative; overflow: hidden; width: 100%;"
7+
>
8+
<div
9+
data-testid="layer-0"
10+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
11+
/>
12+
</div>
13+
</DocumentFragment>
14+
`;
15+
16+
exports[`given a <ParallaxBanner> component when the prop { easing: 'easeInQuad' } is given then it renders without issue and calls create element with props 1`] = `
17+
<DocumentFragment>
18+
<div
19+
style="position: relative; overflow: hidden; width: 100%;"
20+
>
21+
<div
22+
data-testid="layer-0"
23+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
24+
/>
25+
</div>
26+
</DocumentFragment>
27+
`;
28+
29+
exports[`given a <ParallaxBanner> component when the prop { easing: [Array] } is given then it renders without issue and calls create element with props 1`] = `
30+
<DocumentFragment>
31+
<div
32+
style="position: relative; overflow: hidden; width: 100%;"
33+
>
34+
<div
35+
data-testid="layer-0"
36+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
37+
/>
38+
</div>
39+
</DocumentFragment>
40+
`;
41+
42+
exports[`given a <ParallaxBanner> component when the prop { onChange: [Function: onChange] } is given then it renders without issue and calls create element with props 1`] = `
43+
<DocumentFragment>
44+
<div
45+
style="position: relative; overflow: hidden; width: 100%;"
46+
>
47+
<div
48+
data-testid="layer-0"
49+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
50+
/>
51+
</div>
52+
</DocumentFragment>
53+
`;
54+
55+
exports[`given a <ParallaxBanner> component when the prop { onEnter: [Function: onEnter] } is given then it renders without issue and calls create element with props 1`] = `
56+
<DocumentFragment>
57+
<div
58+
style="position: relative; overflow: hidden; width: 100%;"
59+
>
60+
<div
61+
data-testid="layer-0"
62+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
63+
/>
64+
</div>
65+
</DocumentFragment>
66+
`;
67+
68+
exports[`given a <ParallaxBanner> component when the prop { onExit: [Function: onExit] } is given then it renders without issue and calls create element with props 1`] = `
69+
<DocumentFragment>
70+
<div
71+
style="position: relative; overflow: hidden; width: 100%;"
72+
>
73+
<div
74+
data-testid="layer-0"
75+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
76+
/>
77+
</div>
78+
</DocumentFragment>
79+
`;
80+
81+
exports[`given a <ParallaxBanner> component when the prop { onProgressChange: [Function: onProgressChange] } is given then it renders without issue and calls create element with props 1`] = `
82+
<DocumentFragment>
83+
<div
84+
style="position: relative; overflow: hidden; width: 100%;"
85+
>
86+
<div
87+
data-testid="layer-0"
88+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
89+
/>
90+
</div>
91+
</DocumentFragment>
92+
`;
93+
94+
exports[`given a <ParallaxBanner> component when the prop { opacity: [Array] } is given then it renders without issue and calls create element with props 1`] = `
95+
<DocumentFragment>
96+
<div
97+
style="position: relative; overflow: hidden; width: 100%;"
98+
>
99+
<div
100+
data-testid="layer-0"
101+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform,opacity; opacity: 1;"
102+
/>
103+
</div>
104+
</DocumentFragment>
105+
`;
106+
107+
exports[`given a <ParallaxBanner> component when the prop { rootMargin: [Object] } is given then it renders without issue and calls create element with props 1`] = `
108+
<DocumentFragment>
109+
<div
110+
style="position: relative; overflow: hidden; width: 100%;"
111+
>
112+
<div
113+
data-testid="layer-0"
114+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
115+
/>
116+
</div>
117+
</DocumentFragment>
118+
`;
119+
120+
exports[`given a <ParallaxBanner> component when the prop { rotate: [Array] } is given then it renders without issue and calls create element with props 1`] = `
121+
<DocumentFragment>
122+
<div
123+
style="position: relative; overflow: hidden; width: 100%;"
124+
>
125+
<div
126+
data-testid="layer-0"
127+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: rotate(1turn);"
128+
/>
129+
</div>
130+
</DocumentFragment>
131+
`;
132+
133+
exports[`given a <ParallaxBanner> component when the prop { rotateX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
134+
<DocumentFragment>
135+
<div
136+
style="position: relative; overflow: hidden; width: 100%;"
137+
>
138+
<div
139+
data-testid="layer-0"
140+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: rotateX(1turn);"
141+
/>
142+
</div>
143+
</DocumentFragment>
144+
`;
145+
146+
exports[`given a <ParallaxBanner> component when the prop { rotateY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
147+
<DocumentFragment>
148+
<div
149+
style="position: relative; overflow: hidden; width: 100%;"
150+
>
151+
<div
152+
data-testid="layer-0"
153+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: rotateY(1turn);"
154+
/>
155+
</div>
156+
</DocumentFragment>
157+
`;
158+
159+
exports[`given a <ParallaxBanner> component when the prop { rotateZ: [Array] } is given then it renders without issue and calls create element with props 1`] = `
160+
<DocumentFragment>
161+
<div
162+
style="position: relative; overflow: hidden; width: 100%;"
163+
>
164+
<div
165+
data-testid="layer-0"
166+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: rotateZ(1turn);"
167+
/>
168+
</div>
169+
</DocumentFragment>
170+
`;
171+
172+
exports[`given a <ParallaxBanner> component when the prop { scale: [Array] } is given then it renders without issue and calls create element with props 1`] = `
173+
<DocumentFragment>
174+
<div
175+
style="position: relative; overflow: hidden; width: 100%;"
176+
>
177+
<div
178+
data-testid="layer-0"
179+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: scale(1);"
180+
/>
181+
</div>
182+
</DocumentFragment>
183+
`;
184+
185+
exports[`given a <ParallaxBanner> component when the prop { scaleX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
186+
<DocumentFragment>
187+
<div
188+
style="position: relative; overflow: hidden; width: 100%;"
189+
>
190+
<div
191+
data-testid="layer-0"
192+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: scaleX(1);"
193+
/>
194+
</div>
195+
</DocumentFragment>
196+
`;
197+
198+
exports[`given a <ParallaxBanner> component when the prop { scaleY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
199+
<DocumentFragment>
200+
<div
201+
style="position: relative; overflow: hidden; width: 100%;"
202+
>
203+
<div
204+
data-testid="layer-0"
205+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: scaleY(1);"
206+
/>
207+
</div>
208+
</DocumentFragment>
209+
`;
210+
211+
exports[`given a <ParallaxBanner> component when the prop { scaleZ: [Array] } is given then it renders without issue and calls create element with props 1`] = `
212+
<DocumentFragment>
213+
<div
214+
style="position: relative; overflow: hidden; width: 100%;"
215+
>
216+
<div
217+
data-testid="layer-0"
218+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: scaleZ(1);"
219+
/>
220+
</div>
221+
</DocumentFragment>
222+
`;
223+
224+
exports[`given a <ParallaxBanner> component when the prop { shouldAlwaysCompleteAnimation: true } is given then it renders without issue and calls create element with props 1`] = `
225+
<DocumentFragment>
226+
<div
227+
style="position: relative; overflow: hidden; width: 100%;"
228+
>
229+
<div
230+
data-testid="layer-0"
231+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
232+
/>
233+
</div>
234+
</DocumentFragment>
235+
`;
236+
237+
exports[`given a <ParallaxBanner> component when the prop { shouldDisableScalingTranslations: true } is given then it renders without issue and calls create element with props 1`] = `
238+
<DocumentFragment>
239+
<div
240+
style="position: relative; overflow: hidden; width: 100%;"
241+
>
242+
<div
243+
data-testid="layer-0"
244+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
245+
/>
246+
</div>
247+
</DocumentFragment>
248+
`;
249+
250+
exports[`given a <ParallaxBanner> component when the prop { speed: 10 } is given then it renders without issue and calls create element with props 1`] = `
251+
<DocumentFragment>
252+
<div
253+
style="position: relative; overflow: hidden; width: 100%;"
254+
>
255+
<div
256+
data-testid="layer-0"
257+
style="position: absolute; top: -100px; left: 0px; right: 0px; bottom: -100px; will-change: transform; transform: translateY(-100px);"
258+
/>
259+
</div>
260+
</DocumentFragment>
261+
`;
262+
263+
exports[`given a <ParallaxBanner> component when the prop { startScroll: 0, endScroll: 1000 } is given then it renders without issue and calls create element with props 1`] = `
264+
<DocumentFragment>
265+
<div
266+
style="position: relative; overflow: hidden; width: 100%;"
267+
>
268+
<div
269+
data-testid="layer-0"
270+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
271+
/>
272+
</div>
273+
</DocumentFragment>
274+
`;
275+
276+
exports[`given a <ParallaxBanner> component when the prop { targetElement: HTMLDivElement {} } is given then it renders without issue and calls create element with props 1`] = `
277+
<DocumentFragment>
278+
<div
279+
style="position: relative; overflow: hidden; width: 100%;"
280+
>
281+
<div
282+
data-testid="layer-0"
283+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform;"
284+
/>
285+
</div>
286+
</DocumentFragment>
287+
`;
288+
289+
exports[`given a <ParallaxBanner> component when the prop { translateX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
290+
<DocumentFragment>
291+
<div
292+
style="position: relative; overflow: hidden; width: 100%;"
293+
>
294+
<div
295+
data-testid="layer-0"
296+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: translateX(100%);"
297+
/>
298+
</div>
299+
</DocumentFragment>
300+
`;
301+
302+
exports[`given a <ParallaxBanner> component when the prop { translateY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
303+
<DocumentFragment>
304+
<div
305+
style="position: relative; overflow: hidden; width: 100%;"
306+
>
307+
<div
308+
data-testid="layer-0"
309+
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; will-change: transform; transform: translateY(100%);"
310+
/>
311+
</div>
312+
</DocumentFragment>
313+
`;
314+
3315
exports[`given a <ParallaxBanner> component with all props then it will render banners correctly 1`] = `
4316
<DocumentFragment>
5317
<div

‎src/components/ParallaxBanner/index.test.tsx

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import React from 'react';
1+
import React, { PropsWithChildren } from 'react';
22
import { render } from '@testing-library/react';
33
import { ParallaxBanner } from '.';
44
import { ParallaxProvider } from '../ParallaxProvider';
5+
import { ALL_PARALLAX_PROPS } from '../../testUtils/tests.constants';
6+
import { ParallaxController, ScrollAxis } from 'parallax-controller';
7+
import { MockProvider } from '../../testUtils/MockProvider';
58

69
describe('given a <ParallaxBanner> component', () => {
710
describe('with all props', () => {
@@ -23,6 +26,57 @@ describe('given a <ParallaxBanner> component', () => {
2326
expect(asFragment()).toMatchSnapshot();
2427
});
2528
});
29+
describe.each(ALL_PARALLAX_PROPS)('when the prop %s is given', (props) => {
30+
it('then it renders without issue and calls create element with props', () => {
31+
const controller = ParallaxController.init({
32+
scrollAxis: ScrollAxis.vertical,
33+
});
34+
controller.createElement = jest.fn(controller.createElement);
35+
function Wrapper(props: PropsWithChildren<{}>) {
36+
return (
37+
<MockProvider controllerMock={controller}>
38+
{props.children}
39+
</MockProvider>
40+
);
41+
}
42+
const { asFragment } = render(
43+
<ParallaxBanner layers={[{ ...props }]} />,
44+
{
45+
wrapper: Wrapper,
46+
}
47+
);
48+
expect(asFragment()).toMatchSnapshot();
49+
expect(controller.createElement).toBeCalledWith({
50+
el: expect.any(HTMLElement),
51+
props: { ...props, shouldDisableScalingTranslations: true },
52+
});
53+
});
54+
});
55+
56+
describe('when creating layers in the controller', () => {
57+
it('then it defaults shouldDisableScalingTranslations to true', () => {
58+
const controller = ParallaxController.init({
59+
scrollAxis: ScrollAxis.vertical,
60+
});
61+
controller.createElement = jest.fn(controller.createElement);
62+
function Wrapper(props: PropsWithChildren<{}>) {
63+
return (
64+
<MockProvider controllerMock={controller}>
65+
{props.children}
66+
</MockProvider>
67+
);
68+
}
69+
render(<ParallaxBanner layers={[{ children: <div /> }]} />, {
70+
wrapper: Wrapper,
71+
});
72+
expect(controller.createElement).toBeCalledWith({
73+
el: expect.any(HTMLElement),
74+
props: {
75+
shouldDisableScalingTranslations: true,
76+
},
77+
});
78+
});
79+
});
2680
describe('when children are defined', () => {
2781
it('then it will render the children', () => {
2882
const { getByTestId } = render(

0 commit comments

Comments
 (0)