components#Checkbox TypeScript Examples

The following examples show how to use components#Checkbox. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Checkbox', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
    expect(() => wrapper.unmount()).not.toThrow()
    const rendered = render(<Checkbox>Sydney</Checkbox>)
    expect(rendered).toMatchSnapshot()
  })

  it('should work with different status', () => {
    const wrapper = mount(
      <div>
        <Checkbox type="secondary" />
        <Checkbox type="success" />
        <Checkbox type="warning" />
        <Checkbox type="error" />
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should work correctly with initial value', () => {
    let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
    let input = wrapper.find('input').getDOMNode()
    expect((input as HTMLInputElement).checked).toBeTruthy()

    wrapper = mount(<Checkbox checked={false}>Sydney</Checkbox>)
    input = wrapper.find('input').getDOMNode()
    expect((input as HTMLInputElement).checked).not.toBeTruthy()

    wrapper = mount(<Checkbox initialChecked>Sydney</Checkbox>)
    input = wrapper.find('input').getDOMNode()
    expect((input as HTMLInputElement).checked).toBeTruthy()

    wrapper = mount(<Checkbox initialChecked={false}>Sydney</Checkbox>)
    input = wrapper.find('input').getDOMNode()
    expect((input as HTMLInputElement).checked).not.toBeTruthy()
  })

  it('should change value after click', () => {
    const Wrapper = () => {
      const [state, setState] = React.useState<string>('state1')

      return (
        <Checkbox initialChecked onChange={() => setState('state2')}>
          {state}
        </Checkbox>
      )
    }
    const wrapper = mount(<Wrapper />)
    const input = wrapper.find('input').at(0)
    input.simulate('change')
    expect(wrapper.find('.text').text()).toContain('state2')
  })

  it('should ignore events when disabled', () => {
    const Wrapper = () => {
      const [state, setState] = React.useState<string>('state1')

      return (
        <Checkbox disabled onChange={() => setState('state2')}>
          {state}
        </Checkbox>
      )
    }
    const wrapper = mount(<Wrapper />)
    const input = wrapper.find('input').at(0)
    input.simulate('change')
    expect(wrapper.find('.text').text()).not.toContain('state2')
  })
})
Example #2
Source File: group.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('Checkbox Group', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <Checkbox.Group value={[]}>
        <Checkbox value="sydney">Sydney</Checkbox>
      </Checkbox.Group>,
    )
    expect(() => wrapper.unmount()).not.toThrow()
    const rendered = render(
      <Checkbox.Group value={[]}>
        <Checkbox value="sydney">Sydney</Checkbox>
      </Checkbox.Group>,
    )
    expect(rendered).toMatchSnapshot()
  })

  it('should work correctly with initial value', () => {
    let wrapper = mount(
      <Checkbox.Group value={['sydney']}>
        <Checkbox value="sydney">Sydney</Checkbox>
        <Checkbox value="beijing">BeiJing</Checkbox>
      </Checkbox.Group>,
    )
    const sydney = wrapper.find('input').at(0).getDOMNode()
    expect((sydney as HTMLInputElement).checked).toBeTruthy()
    const beijing = wrapper.find('input').at(1).getDOMNode()
    expect((beijing as HTMLInputElement).checked).not.toBeTruthy()
  })

  it('should change value after click', () => {
    let value = ['sydney']
    const wrapper = mount(
      <Checkbox.Group value={['sydney']} onChange={val => (value = val)}>
        <Checkbox value="sydney">Sydney</Checkbox>
        <Checkbox value="beijing">BeiJing</Checkbox>
      </Checkbox.Group>,
    )
    const sydney = wrapper.find('input').at(0)
    sydney.simulate('change')
    expect(value.length).toBe(0)

    const beijing = wrapper.find('input').at(1)
    beijing.simulate('change')
    expect(value).toEqual(expect.arrayContaining(['beijing']))
  })

  it('should ignore events when disabled', () => {
    let value = ['sydney']
    const wrapper = mount(
      <Checkbox.Group disabled value={['sydney']} onChange={val => (value = val)}>
        <Checkbox value="sydney">Sydney</Checkbox>
        <Checkbox value="beijing">BeiJing</Checkbox>
      </Checkbox.Group>,
    )
    const sydney = wrapper.find('input').at(0)
    sydney.simulate('change')
    expect(value.length).not.toBe(0)

    const beijing = wrapper.find('input').at(1)
    beijing.simulate('change')
    expect(value).not.toEqual(expect.arrayContaining(['beijing']))
  })

  it('should throw error when value missing', () => {
    let errorMessage = ''
    const Group = Checkbox.Group as any
    const errorSpy = jest
      .spyOn(console, 'error')
      .mockImplementation(msg => (errorMessage = msg))
    mount(
      <Group>
        <Checkbox value="sydney">Sydney</Checkbox>
        <Checkbox value="beijing">BeiJing</Checkbox>
      </Group>,
    )

    expect(errorMessage).toContain('required')
    errorSpy.mockRestore()
  })

  it('should throw error when set check prop in group', () => {
    let errorMessage = ''
    const errorSpy = jest
      .spyOn(console, 'error')
      .mockImplementation(msg => (errorMessage = msg))
    mount(
      <Checkbox.Group value={[]}>
        <Checkbox value="sydney" checked>
          Sydney
        </Checkbox>
        <Checkbox value="beijing">BeiJing</Checkbox>
      </Checkbox.Group>,
    )

    expect(errorMessage.toLowerCase()).toContain('remove props')
    errorSpy.mockRestore()
  })
})