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         test('it has a default delay of 0ms', () => {
  14                 const response = blink(document.createElement('div'), {});
  15
  16                 expect(response.delay).toBe(0);
  17         });
  18
  19         test('it allows delay to be overridden', () => {
  20                 const response = blink(document.createElement('div'), {
  21                         delay: 300
  22                 });
  23
  24                 expect(response.delay).toBe(300);
  25         });
  26
  27         test('it has a default duration of 400ms', () => {
  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                 const response = blink(document.createElement('div'), {
  35                         duration: 999
  36                 });
  37
  38                 expect(response.duration).toBe(999);
  39         });
  40
  41         test('it uses sineOut as the default easing function', () => {
  42                 const response = blink(document.createElement('div'), {});
  43
  44                 expect(response.easing).toBe(sineOut);
  45         });
  46
  47         test('it allows easing function to be overridden', () => {
  48                 const response = blink(document.createElement('div'), {
  49                         easing: () => 666
  50                 });
  51
  52                 expect(response.easing(0)).toBe(666);
  53         });
  54
  55         describe('css animation function', () => {
  56                 beforeEach(() => {
  57                         const div = document.createElement('div');
  58                         div.style.width = '100px';
  59                         div.style.height = '200px';
  60                         internals.response = blink(div, {});
  61                 });
  62
  63                 test('It starts with with zeroed width and height', () => {
  64                         const css = internals.response.css(0, 1);
  65                         expect(css).toContain('width: 0px');
  66                         expect(css).toContain('height: 0px');
  67                 });
  68
  69                 test('It grows to full height and 0 width in first 20%', () => {
  70                         const css = internals.response.css(0.2, 0.8);
  71                         expect(css).toContain('width: 0px');
  72                         expect(css).toContain('height: 200px');
  73                 });
  74
  75                 test('It expands to full height by the end', () => {
  76                         const css = internals.response.css(1, 0);
  77                         expect(css).toContain('width: 100px');
  78                         expect(css).toContain('height: 200px');
  79                 });
  80
  81                 test('It keeps element vertically centered by adjusting the margin', () => {
  82                         const css = internals.response.css(0.1, 0.9);
  83                         expect(css).toContain('margin: 50px 50px');
  84                         expect(css).toContain('height: 100px');
  85                 });
  86
  87                 test('It keeps element horizontally centered by adjusting the margin', () => {
  88                         const css = internals.response.css(0.6, 0.4);
  89                         expect(css).toContain('margin: 0px 25px');
  90                         expect(css).toContain('width: 50px');
  91                 });
  92         });
  93 });