Skip to content

Commit e7a65ab

Browse files
SchoppAxSchoppAx
committed
Extended by offset and in out animations
1 parent d6ee475 commit e7a65ab

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed

‎tests/scroll-animate.test.js

+227
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ describe('ScrollAnimate', function() {
2323

2424
describe('Non-directional', () => {
2525
const animationClass = 'flip'
26+
const offset = 100
2627

2728
test('should add animation classes', () => {
2829
const fixture = createFixture(scrollAnimate, { animationClass })
@@ -32,6 +33,14 @@ describe('ScrollAnimate', function() {
3233
expect(fixture.getClassName()).toEqual(animationClass)
3334
})
3435

36+
test('should add animation classes by offset', () => {
37+
const fixture = createFixture(scrollAnimate, { animationClass, offset })
38+
39+
expect(fixture.getClassName()).toBeFalsy()
40+
fixture.scrollDown(true)
41+
expect(fixture.getClassName()).toEqual(animationClass)
42+
})
43+
3544
test('should toggle animation when repeat is on', () => {
3645
const fixture = createFixture(
3746
scrollAnimate, { animationClass, repeat: true }
@@ -45,6 +54,20 @@ describe('ScrollAnimate', function() {
4554
fixture.scrollUp(true)
4655
expect(fixture.getClassName()).toEqual(animationClass)
4756
})
57+
58+
test('should toggle animation when repeat is on by offset', () => {
59+
const fixture = createFixture(
60+
scrollAnimate, { animationClass, repeat: true, offset }
61+
)
62+
63+
expect(fixture.getClassName()).toBeFalsy()
64+
fixture.scrollDown(true)
65+
expect(fixture.getClassName()).toEqual(animationClass)
66+
fixture.scrollDown(false)
67+
expect(fixture.getClassName()).toBeFalsy()
68+
fixture.scrollUp(true)
69+
expect(fixture.getClassName()).toEqual(animationClass)
70+
})
4871

4972
test('should not toggle animation when repeat is off', () => {
5073
const fixture = createFixture(
@@ -64,6 +87,210 @@ describe('ScrollAnimate', function() {
6487
expect(fixture.getClassName()).toEqual(animationClass)
6588
})
6689

90+
test('should not toggle animation when repeat is off by offset', () => {
91+
const fixture = createFixture(
92+
scrollAnimate, { animationClass, repeat: false, offset }
93+
)
94+
95+
expect(fixture.getClassName()).toBeFalsy()
96+
fixture.scrollDown(true)
97+
expect(fixture.getClassName()).toEqual(animationClass)
98+
fixture.scrollDown(false)
99+
expect(fixture.getClassName()).toEqual(animationClass)
100+
fixture.scrollUp(true)
101+
expect(fixture.getClassName()).toEqual(animationClass)
102+
fixture.scrollUp(false)
103+
fixture.scrollDown(true)
104+
fixture.scrollDown(false)
105+
expect(fixture.getClassName()).toEqual(animationClass)
106+
})
107+
})
108+
109+
describe('In animation', () => {
110+
const animationClass = {in: 'flip'}
111+
const offset = 100
112+
113+
test('should add animation classes', () => {
114+
const fixture = createFixture(scrollAnimate, { animationClass })
115+
116+
expect(fixture.getClassName()).toBeFalsy()
117+
fixture.scrollDown(true)
118+
expect(fixture.getClassName()).toEqual(animationClass.in)
119+
})
120+
121+
test('should add animation classes by offset', () => {
122+
const fixture = createFixture(scrollAnimate, { animationClass, offset })
123+
124+
expect(fixture.getClassName()).toBeFalsy()
125+
fixture.scrollDown(true)
126+
expect(fixture.getClassName()).toEqual(animationClass.in)
127+
})
128+
129+
test('should toggle animation when repeat is on', () => {
130+
const fixture = createFixture(
131+
scrollAnimate, { animationClass, repeat: true }
132+
)
133+
134+
expect(fixture.getClassName()).toBeFalsy()
135+
fixture.scrollDown(true)
136+
expect(fixture.getClassName()).toEqual(animationClass.in)
137+
fixture.scrollDown(false)
138+
expect(fixture.getClassName()).toBeFalsy()
139+
fixture.scrollUp(true)
140+
expect(fixture.getClassName()).toEqual(animationClass.in)
141+
})
142+
143+
test('should toggle animation when repeat is on by offset', () => {
144+
const fixture = createFixture(
145+
scrollAnimate, { animationClass, repeat: true, offset }
146+
)
147+
148+
expect(fixture.getClassName()).toBeFalsy()
149+
fixture.scrollDown(true)
150+
expect(fixture.getClassName()).toEqual(animationClass.in)
151+
fixture.scrollDown(false)
152+
expect(fixture.getClassName()).toBeFalsy()
153+
fixture.scrollUp(true)
154+
expect(fixture.getClassName()).toEqual(animationClass.in)
155+
})
156+
157+
test('should not toggle animation when repeat is off', () => {
158+
const fixture = createFixture(
159+
scrollAnimate, { animationClass, repeat: false }
160+
)
161+
162+
expect(fixture.getClassName()).toBeFalsy()
163+
fixture.scrollDown(true)
164+
expect(fixture.getClassName()).toEqual(animationClass.in)
165+
fixture.scrollDown(false)
166+
expect(fixture.getClassName()).toEqual(animationClass.in)
167+
fixture.scrollUp(true)
168+
expect(fixture.getClassName()).toEqual(animationClass.in)
169+
fixture.scrollUp(false)
170+
fixture.scrollDown(true)
171+
fixture.scrollDown(false)
172+
expect(fixture.getClassName()).toEqual(animationClass.in)
173+
})
174+
175+
test('should not toggle animation when repeat is off by offset', () => {
176+
const fixture = createFixture(
177+
scrollAnimate, { animationClass, repeat: false, offset }
178+
)
179+
180+
expect(fixture.getClassName()).toBeFalsy()
181+
fixture.scrollDown(true)
182+
expect(fixture.getClassName()).toEqual(animationClass.in)
183+
fixture.scrollDown(false)
184+
expect(fixture.getClassName()).toEqual(animationClass.in)
185+
fixture.scrollUp(true)
186+
expect(fixture.getClassName()).toEqual(animationClass.in)
187+
fixture.scrollUp(false)
188+
fixture.scrollDown(true)
189+
fixture.scrollDown(false)
190+
expect(fixture.getClassName()).toEqual(animationClass.in)
191+
})
192+
})
193+
194+
describe('Out animation', () => {
195+
const animationClass = {out: 'flipOut'}
196+
197+
test('should print wrong parameter usage warning', () => {
198+
jest.spyOn(console, 'warn').mockImplementation()
199+
const fixture = createFixture(scrollAnimate, { animationClass })
200+
201+
expect(fixture.getClassName()).toBeFalsy()
202+
fixture.scrollDown(true)
203+
expect(console.warn).toHaveBeenCalledWith(
204+
expect.stringContaining("animate-on-scroll"),
205+
expect.stringContaining("'out' parameter can't be used alone. 'in' required"),
206+
)
207+
expect(fixture.getClassName()).toBeFalsy()
208+
})
209+
})
210+
211+
describe('InOut animation', () => {
212+
const animationClass = {in: 'flip', out: 'flipOut'}
213+
const offset = 100
214+
215+
test('should add animation classes', () => {
216+
const fixture = createFixture(scrollAnimate, { animationClass })
217+
218+
expect(fixture.getClassName()).toBeFalsy()
219+
fixture.scrollDown(true)
220+
expect(fixture.getClassName()).toEqual(animationClass.in)
221+
})
222+
223+
test('should add animation classes by offset', () => {
224+
const fixture = createFixture(scrollAnimate, { animationClass, offset })
225+
226+
expect(fixture.getClassName()).toBeFalsy()
227+
fixture.scrollDown(true)
228+
expect(fixture.getClassName()).toEqual(animationClass.in)
229+
})
230+
231+
test('should toggle animation when repeat is on', () => {
232+
const fixture = createFixture(
233+
scrollAnimate, { animationClass, repeat: true }
234+
)
235+
236+
expect(fixture.getClassName()).toBeFalsy()
237+
fixture.scrollDown(true)
238+
expect(fixture.getClassName()).toEqual(animationClass.in)
239+
fixture.scrollDown(false)
240+
expect(fixture.getClassName()).toEqual(animationClass.out)
241+
fixture.scrollUp(true)
242+
expect(fixture.getClassName()).toEqual(animationClass.in)
243+
})
244+
245+
test('should toggle animation when repeat is on by offset', () => {
246+
const fixture = createFixture(
247+
scrollAnimate, { animationClass, repeat: true, offset }
248+
)
249+
250+
expect(fixture.getClassName()).toBeFalsy()
251+
fixture.scrollDown(true)
252+
expect(fixture.getClassName()).toEqual(animationClass.in)
253+
fixture.scrollDown(false)
254+
expect(fixture.getClassName()).toEqual(animationClass.out)
255+
fixture.scrollUp(true)
256+
expect(fixture.getClassName()).toEqual(animationClass.in)
257+
})
258+
259+
test('should not toggle animation when repeat is off', () => {
260+
const fixture = createFixture(
261+
scrollAnimate, { animationClass, repeat: false }
262+
)
263+
264+
expect(fixture.getClassName()).toBeFalsy()
265+
fixture.scrollDown(true)
266+
expect(fixture.getClassName()).toEqual(animationClass.in)
267+
fixture.scrollDown(false)
268+
expect(fixture.getClassName()).toEqual(animationClass.in)
269+
fixture.scrollUp(true)
270+
expect(fixture.getClassName()).toEqual(animationClass.in)
271+
fixture.scrollUp(false)
272+
fixture.scrollDown(true)
273+
fixture.scrollDown(false)
274+
expect(fixture.getClassName()).toEqual(animationClass.in)
275+
})
276+
277+
test('should not toggle animation when repeat is off by offset', () => {
278+
const fixture = createFixture(
279+
scrollAnimate, { animationClass, repeat: false, offset }
280+
)
281+
282+
expect(fixture.getClassName()).toBeFalsy()
283+
fixture.scrollDown(true)
284+
expect(fixture.getClassName()).toEqual(animationClass.in)
285+
fixture.scrollDown(false)
286+
expect(fixture.getClassName()).toEqual(animationClass.in)
287+
fixture.scrollUp(true)
288+
expect(fixture.getClassName()).toEqual(animationClass.in)
289+
fixture.scrollUp(false)
290+
fixture.scrollDown(true)
291+
fixture.scrollDown(false)
292+
expect(fixture.getClassName()).toEqual(animationClass.in)
293+
})
67294
})
68295

69296
describe('Downwards animation', () => {

0 commit comments

Comments
 (0)