git.r.bdr.sh - rbdr/forum/blob - 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 });