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