git.r.bdr.sh - rbdr/forum/blob - src/lib/animations/blink.test.ts

   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 });