alirezamirian

  it('should work when neither open state is controlled nor toggle handler is passed', () => {
    const { clickHeader, isOpen } = mountUsage();
    expect(isOpen()).toBe(false);
    clickHeader();
    expect(isOpen()).toBe(true);
    clickHeader();
    expect(isOpen()).toBe(false);
  });

alirezamirian

function mountUsage(usage = <Zippy header='header'/>) {
  const wrapper = mount(usage);
  return {
    wrapper,
    isOpen: () => wrapper.find('.zippy-content').length > 0,
    clickHeader: () => wrapper.find('.zippy-header').simulate('click'),
  };
}

alirezamirian

interface UsageProps {
  value?: number;
  changeHandler?: (value: number) => number | void;
}

function Counter({value, changeHandler}: UsageProps) {
  const [valueState, setValue] = useControllableState(value, changeHandler, 0);

  return <div>
    <span className="value">{valueState}</span>

alirezamirian

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: #24292e;
  background-color: #fff;
}