README.md

Sample Codes

https://lunit-io.github.io/opt-tool-frontend

Stories

Tests

__tests__/useOPTControl.test.ts

import { act, renderHook } from '@testing-library/react-hooks';
import { useOPTControl } from '../useOPTControl';

describe('useOPTControl()', () => {
  test('basic', () => {
    const { result } = renderHook(() => useOPTControl());

    expect(result.current.control).toBe('pan');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeFalsy();

    act(() => {
      result.current.updateControl('pen');
      result.current.updateFlip(true);
    });

    expect(result.current.control).toBe('pen');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeTruthy();

    act(() => {
      result.current.updateControl('adjust');
      result.current.updateInvert(true);
    });

    expect(result.current.control).toBe('adjust');
    expect(result.current.invert).toBeTruthy();
    expect(result.current.flip).toBeTruthy();

    act(() => {
      result.current.resetControl();
    });

    expect(result.current.control).toBe('pan');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeFalsy();
  });
});

__tests__/useOPTControl.test.ts

import { act, renderHook } from '@testing-library/react-hooks';
import { useOPTControl } from '../useOPTControl';

describe('useOPTControl()', () => {
  test('basic', () => {
    const { result } = renderHook(() => useOPTControl());

    expect(result.current.control).toBe('pan');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeFalsy();

    act(() => {
      result.current.updateControl('pen');
      result.current.updateFlip(true);
    });

    expect(result.current.control).toBe('pen');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeTruthy();

    act(() => {
      result.current.updateControl('adjust');
      result.current.updateInvert(true);
    });

    expect(result.current.control).toBe('adjust');
    expect(result.current.invert).toBeTruthy();
    expect(result.current.flip).toBeTruthy();

    act(() => {
      result.current.resetControl();
    });

    expect(result.current.control).toBe('pan');
    expect(result.current.invert).toBeFalsy();
    expect(result.current.flip).toBeFalsy();
  });
});