Skip to content

Commit 5478c87

Browse files
jscottsmithjscottsmith
committed
feat: spread all props to element in Parallax component and add better tests
1 parent 6815387 commit 5478c87

File tree

11 files changed

+538
-205
lines changed

11 files changed

+538
-205
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@
5252
],
5353
"collectCoverage": true,
5454
"testURL": "http://localhost",
55+
"setupFiles": [
56+
"<rootDir>/src/setupTests.ts"
57+
],
5558
"setupFilesAfterEnv": [
5659
"<rootDir>/jest-setup.ts"
5760
]

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

Lines changed: 220 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,231 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Expect the <Parallax> component to render correctly 1`] = `
3+
exports[`given the <Parallax> component given the <Parallax> component when given children then it renders them 1`] = `
44
<DocumentFragment>
5-
<figure
5+
<div
6+
style="will-change: transform;"
7+
>
8+
<div
9+
class="foo"
10+
/>
11+
</div>
12+
</DocumentFragment>
13+
`;
14+
15+
exports[`given the <Parallax> component given the <Parallax> component when normal configurations are given then it renders correctly 1`] = `
16+
<DocumentFragment>
17+
<div
618
class="class-foo"
719
style="border: 2px solid red; will-change: transform; transform: translateX(100%)translateY(100%);"
820
>
921
<div
1022
class="foo"
1123
/>
12-
</figure>
24+
</div>
25+
</DocumentFragment>
26+
`;
27+
28+
exports[`given the <Parallax> component when normal configurations are given then it renders correctly 1`] = `
29+
<DocumentFragment>
30+
<div
31+
class="class-foo"
32+
style="border: 2px solid red; will-change: transform; transform: translateX(100%)translateY(100%);"
33+
>
34+
<div
35+
class="foo"
36+
/>
37+
</div>
38+
</DocumentFragment>
39+
`;
40+
41+
exports[`given the <Parallax> component when the prop { disabled: true } is given then it renders without issue and calls create element with props 1`] = `
42+
<DocumentFragment>
43+
<div
44+
style="will-change: transform;"
45+
/>
46+
</DocumentFragment>
47+
`;
48+
49+
exports[`given the <Parallax> component when the prop { easing: 'easeInQuad' } is given then it renders without issue and calls create element with props 1`] = `
50+
<DocumentFragment>
51+
<div
52+
style="will-change: transform;"
53+
/>
54+
</DocumentFragment>
55+
`;
56+
57+
exports[`given the <Parallax> component when the prop { easing: [Array] } is given then it renders without issue and calls create element with props 1`] = `
58+
<DocumentFragment>
59+
<div
60+
style="will-change: transform;"
61+
/>
62+
</DocumentFragment>
63+
`;
64+
65+
exports[`given the <Parallax> component when the prop { onChange: [Function: onChange] } is given then it renders without issue and calls create element with props 1`] = `
66+
<DocumentFragment>
67+
<div
68+
style="will-change: transform;"
69+
/>
70+
</DocumentFragment>
71+
`;
72+
73+
exports[`given the <Parallax> component when the prop { onEnter: [Function: onEnter] } is given then it renders without issue and calls create element with props 1`] = `
74+
<DocumentFragment>
75+
<div
76+
style="will-change: transform;"
77+
/>
78+
</DocumentFragment>
79+
`;
80+
81+
exports[`given the <Parallax> component when the prop { onExit: [Function: onExit] } is given then it renders without issue and calls create element with props 1`] = `
82+
<DocumentFragment>
83+
<div
84+
style="will-change: transform;"
85+
/>
86+
</DocumentFragment>
87+
`;
88+
89+
exports[`given the <Parallax> component when the prop { onProgressChange: [Function: onProgressChange] } is given then it renders without issue and calls create element with props 1`] = `
90+
<DocumentFragment>
91+
<div
92+
style="will-change: transform;"
93+
/>
94+
</DocumentFragment>
95+
`;
96+
97+
exports[`given the <Parallax> component when the prop { opacity: [Array] } is given then it renders without issue and calls create element with props 1`] = `
98+
<DocumentFragment>
99+
<div
100+
style="will-change: transform,opacity; opacity: 1;"
101+
/>
102+
</DocumentFragment>
103+
`;
104+
105+
exports[`given the <Parallax> component when the prop { rootMargin: [Object] } is given then it renders without issue and calls create element with props 1`] = `
106+
<DocumentFragment>
107+
<div
108+
style="will-change: transform;"
109+
/>
110+
</DocumentFragment>
111+
`;
112+
113+
exports[`given the <Parallax> component when the prop { rotate: [Array] } is given then it renders without issue and calls create element with props 1`] = `
114+
<DocumentFragment>
115+
<div
116+
style="will-change: transform; transform: rotate(1turn);"
117+
/>
118+
</DocumentFragment>
119+
`;
120+
121+
exports[`given the <Parallax> component when the prop { rotateX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
122+
<DocumentFragment>
123+
<div
124+
style="will-change: transform; transform: rotateX(1turn);"
125+
/>
126+
</DocumentFragment>
127+
`;
128+
129+
exports[`given the <Parallax> component when the prop { rotateY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
130+
<DocumentFragment>
131+
<div
132+
style="will-change: transform; transform: rotateY(1turn);"
133+
/>
134+
</DocumentFragment>
135+
`;
136+
137+
exports[`given the <Parallax> component when the prop { rotateZ: [Array] } is given then it renders without issue and calls create element with props 1`] = `
138+
<DocumentFragment>
139+
<div
140+
style="will-change: transform; transform: rotateZ(1turn);"
141+
/>
142+
</DocumentFragment>
143+
`;
144+
145+
exports[`given the <Parallax> component when the prop { scale: [Array] } is given then it renders without issue and calls create element with props 1`] = `
146+
<DocumentFragment>
147+
<div
148+
style="will-change: transform; transform: scale(1);"
149+
/>
150+
</DocumentFragment>
151+
`;
152+
153+
exports[`given the <Parallax> component when the prop { scaleX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
154+
<DocumentFragment>
155+
<div
156+
style="will-change: transform; transform: scaleX(1);"
157+
/>
158+
</DocumentFragment>
159+
`;
160+
161+
exports[`given the <Parallax> component when the prop { scaleY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
162+
<DocumentFragment>
163+
<div
164+
style="will-change: transform; transform: scaleY(1);"
165+
/>
166+
</DocumentFragment>
167+
`;
168+
169+
exports[`given the <Parallax> component when the prop { scaleZ: [Array] } is given then it renders without issue and calls create element with props 1`] = `
170+
<DocumentFragment>
171+
<div
172+
style="will-change: transform; transform: scaleZ(1);"
173+
/>
174+
</DocumentFragment>
175+
`;
176+
177+
exports[`given the <Parallax> component when the prop { shouldAlwaysCompleteAnimation: true } is given then it renders without issue and calls create element with props 1`] = `
178+
<DocumentFragment>
179+
<div
180+
style="will-change: transform;"
181+
/>
182+
</DocumentFragment>
183+
`;
184+
185+
exports[`given the <Parallax> component when the prop { shouldDisableScalingTranslations: true } is given then it renders without issue and calls create element with props 1`] = `
186+
<DocumentFragment>
187+
<div
188+
style="will-change: transform;"
189+
/>
190+
</DocumentFragment>
191+
`;
192+
193+
exports[`given the <Parallax> component when the prop { speed: 10 } is given then it renders without issue and calls create element with props 1`] = `
194+
<DocumentFragment>
195+
<div
196+
style="will-change: transform; transform: translateY(-100px);"
197+
/>
198+
</DocumentFragment>
199+
`;
200+
201+
exports[`given the <Parallax> component when the prop { startScroll: 0, endScroll: 1000 } is given then it renders without issue and calls create element with props 1`] = `
202+
<DocumentFragment>
203+
<div
204+
style="will-change: transform;"
205+
/>
206+
</DocumentFragment>
207+
`;
208+
209+
exports[`given the <Parallax> component when the prop { targetElement: HTMLDivElement {} } is given then it renders without issue and calls create element with props 1`] = `
210+
<DocumentFragment>
211+
<div
212+
style="will-change: transform;"
213+
/>
214+
</DocumentFragment>
215+
`;
216+
217+
exports[`given the <Parallax> component when the prop { translateX: [Array] } is given then it renders without issue and calls create element with props 1`] = `
218+
<DocumentFragment>
219+
<div
220+
style="will-change: transform; transform: translateX(100%);"
221+
/>
222+
</DocumentFragment>
223+
`;
224+
225+
exports[`given the <Parallax> component when the prop { translateY: [Array] } is given then it renders without issue and calls create element with props 1`] = `
226+
<DocumentFragment>
227+
<div
228+
style="will-change: transform; transform: translateY(100%);"
229+
/>
13230
</DocumentFragment>
14231
`;

0 commit comments

Comments
 (0)