]>
Commit | Line | Data |
---|---|---|
1 | /** | |
2 | * @jest-environment jsdom | |
3 | */ | |
4 | ||
5 | import { blink } from './blink'; | |
6 | import { sineOut } from 'svelte/easing'; | |
7 | ||
8 | const internals = { | |
9 | response: null | |
10 | }; | |
11 | ||
12 | describe('blink', () => { | |
13 | ||
14 | test('it has a default delay of 0ms', () => { | |
15 | ||
16 | const response = blink(document.createElement('div'), {}); | |
17 | ||
18 | expect(response.delay).toBe(0); | |
19 | }); | |
20 | ||
21 | test('it allows delay to be overridden', () => { | |
22 | ||
23 | const response = blink(document.createElement('div'), { | |
24 | delay: 300 | |
25 | }); | |
26 | ||
27 | expect(response.delay).toBe(300); | |
28 | }); | |
29 | ||
30 | test('it has a default duration of 400ms', () => { | |
31 | ||
32 | const response = blink(document.createElement('div'), {}); | |
33 | ||
34 | expect(response.duration).toBe(400); | |
35 | }); | |
36 | ||
37 | test('it allows delay to be overridden', () => { | |
38 | ||
39 | const response = blink(document.createElement('div'), { | |
40 | duration: 999 | |
41 | }); | |
42 | ||
43 | expect(response.duration).toBe(999); | |
44 | }); | |
45 | ||
46 | test('it uses sineOut as the default easing function', () => { | |
47 | ||
48 | const response = blink(document.createElement('div'), {}); | |
49 | ||
50 | expect(response.easing).toBe(sineOut); | |
51 | }); | |
52 | ||
53 | test('it allows easing function to be overridden', () => { | |
54 | ||
55 | const response = blink(document.createElement('div'), { | |
56 | easing: () => 666 | |
57 | }); | |
58 | ||
59 | expect(response.easing(0)).toBe(666); | |
60 | }); | |
61 | ||
62 | describe('css animation function', () => { | |
63 | ||
64 | beforeEach(() => { | |
65 | ||
66 | const div = document.createElement('div'); | |
67 | div.style.width = '100px'; | |
68 | div.style.height = '200px'; | |
69 | internals.response = blink(div, {}); | |
70 | }); | |
71 | ||
72 | test('It starts with with zeroed width and height', () => { | |
73 | ||
74 | const css = internals.response.css(0, 1); | |
75 | expect(css).toContain('width: 0px'); | |
76 | expect(css).toContain('height: 0px'); | |
77 | }); | |
78 | ||
79 | test('It grows to full height and 0 width in first 20%', () => { | |
80 | ||
81 | const css = internals.response.css(0.2, 0.8); | |
82 | expect(css).toContain('width: 0px'); | |
83 | expect(css).toContain('height: 200px'); | |
84 | }); | |
85 | ||
86 | test('It expands to full height by the end', () => { | |
87 | ||
88 | const css = internals.response.css(1, 0); | |
89 | expect(css).toContain('width: 100px'); | |
90 | expect(css).toContain('height: 200px'); | |
91 | }); | |
92 | ||
93 | test('It keeps element vertically centered by adjusting the margin', () => { | |
94 | ||
95 | const css = internals.response.css(0.1, 0.9); | |
96 | expect(css).toContain('margin: 50px 50px'); | |
97 | expect(css).toContain('height: 100px'); | |
98 | }); | |
99 | ||
100 | test('It keeps element horizontally centered by adjusting the margin', () => { | |
101 | ||
102 | const css = internals.response.css(0.6, 0.4); | |
103 | expect(css).toContain('margin: 0px 25px'); | |
104 | expect(css).toContain('width: 50px'); | |
105 | }); | |
106 | }); | |
107 | }); |