arwes-animation-animator-test-example.js

import React, { useState, useEffect } from 'react';
import { render, act, cleanup } from '@testing-library/react';

import { EXITED, EXITING, ENTERED, ENTERING } from '../constants';
import { useAnimator } from '../useAnimator';
import { Component as Animator } from './Animator.component';

jest.useFakeTimers();
afterEach(cleanup);

test('Should transition on "activate" changes', () => {
  let flow1;
  function ExampleParent () {
    const animator = useAnimator();
    useEffect(() => (flow1 = animator.flow), [animator]);
    return null;
  }

  let flow2;
  function ExampleChild () {
    const animator = useAnimator();
    useEffect(() => (flow2 = animator.flow), [animator]);
    return null;
  }

  function ExampleApp () {
    const [activate, setActivate] = useState(false);
    useEffect(() => setTimeout(() => setActivate(true), 1000), []);
    useEffect(() => setTimeout(() => setActivate(false), 2000), []);
    return (
      <Animator animator={{ activate }}>
        <ExampleParent />
        <Animator>
          <ExampleChild />
        </Animator>
      </Animator>
    );
  }

  render(<ExampleApp />);

  expect(flow1.value).toBe(EXITED);
  expect(flow2.value).toBe(EXITED);

  act(() => jest.advanceTimersByTime(1));
  expect(flow1.value).toBe(EXITED);
  expect(flow2.value).toBe(EXITED);

  act(() => jest.advanceTimersByTime(998)); // 999ms
  expect(flow1.value).toBe(EXITED);
  expect(flow2.value).toBe(EXITED);

  act(() => jest.advanceTimersByTime(2)); // 1001ms
  expect(flow1.value).toBe(ENTERING);
  expect(flow2.value).toBe(EXITED);

  act(() => jest.advanceTimersByTime(98)); // 1099ms
  expect(flow1.value).toBe(ENTERING);
  expect(flow2.value).toBe(EXITED);

  act(() => jest.advanceTimersByTime(2)); // 1101ms
  expect(flow1.value).toBe(ENTERED);
  expect(flow2.value).toBe(ENTERING);

  act(() => jest.advanceTimersByTime(98)); // 1199ms
  expect(flow1.value).toBe(ENTERED);
  expect(flow2.value).toBe(ENTERING);

  act(() => jest.advanceTimersByTime(2)); // 1201ms
  expect(flow1.value).toBe(ENTERED);
  expect(flow2.value).toBe(ENTERED);

  act(() => jest.advanceTimersByTime(798)); // 1999ms
  expect(flow1.value).toBe(ENTERED);
  expect(flow2.value).toBe(ENTERED);

  act(() => jest.advanceTimersByTime(2)); // 2001ms
  expect(flow1.value).toBe(EXITING);
  expect(flow2.value).toBe(EXITING);

  act(() => jest.advanceTimersByTime(98)); // 2099ms
  expect(flow1.value).toBe(EXITING);
  expect(flow2.value).toBe(EXITING);

  act(() => jest.advanceTimersByTime(2)); // 2101ms
  expect(flow1.value).toBe(EXITED);
  expect(flow2.value).toBe(EXITED);
});