components#Fieldset TypeScript Examples

The following examples show how to use components#Fieldset. 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: group.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Fieldset Group', () => {
  it('should trigger callback when tab clicked', () => {
    const callbcak = jest.fn()
    const wrapper = mount(
      <Fieldset.Group value="two" onChange={callbcak}>
        <Fieldset label="one" value="one">
          one
        </Fieldset>
        <Fieldset label="two" value="two">
          two
        </Fieldset>
      </Fieldset.Group>,
    )

    let active = wrapper.find('.group').find('.active')
    expect(active.length).not.toBe(0)
    expect(active.text()).toContain('two')

    const firstBtn = wrapper.find('.group').find('button').at(0)
    firstBtn.simulate('click')
    active = wrapper.find('.group').find('.active')
    expect(active.length).not.toBe(0)
    expect(active.text()).toContain('one')

    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should throw error when value duplicated', () => {
    let errorMessage = ''
    const errorSpy = jest
      .spyOn(console, 'error')
      .mockImplementation(msg => (errorMessage = msg))

    mount(
      <Fieldset.Group value="two">
        <Fieldset label="one" value="one">
          one
        </Fieldset>
        <Fieldset label="two" value="one">
          two
        </Fieldset>
      </Fieldset.Group>,
    )

    expect(errorMessage).not.toBe('')
    errorSpy.mockRestore()
  })

  it('should throw error when label missing', () => {
    let errorMessage = ''
    const errorSpy = jest
      .spyOn(console, 'error')
      .mockImplementation(msg => (errorMessage = msg))

    mount(
      <Fieldset.Group value="one">
        <Fieldset>one</Fieldset>
      </Fieldset.Group>,
    )

    expect(errorMessage).not.toBe('')
    errorSpy.mockRestore()
  })
})
Example #2
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Fieldset', () => {
  it('should mount correctly', () => {
    const wrapper = mount(
      <Fieldset>
        <Fieldset.Title>title</Fieldset.Title>
        <Fieldset.Subtitle>subtitle</Fieldset.Subtitle>
        <Fieldset.Footer>
          status
          <button>Actions</button>
        </Fieldset.Footer>
      </Fieldset>,
    )
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should render correctly', () => {
    const wrapper = render(
      <Fieldset>
        <Fieldset.Title>title</Fieldset.Title>
        <Fieldset.Subtitle>subtitle</Fieldset.Subtitle>
        <Fieldset.Footer>
          status
          <button>Actions</button>
        </Fieldset.Footer>
      </Fieldset>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('the component Fieldset.Content should be injected automatically', () => {
    const fieldset = mount(
      <Fieldset>
        <Fieldset.Title>test-title</Fieldset.Title>
        <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>
      </Fieldset>,
    )
    const content = mount(
      <Fieldset>
        <Fieldset.Content>
          <Fieldset.Title>test-title</Fieldset.Title>
          <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>
        </Fieldset.Content>
      </Fieldset>,
    )

    expect(fieldset.html()).toEqual(content.html())
    expect(() => content.unmount()).not.toThrow()
  })

  it('render children through props', () => {
    const fieldset = mount(
      <Fieldset>
        <Fieldset.Title>test-title</Fieldset.Title>
        <Fieldset.Subtitle>test-subtitle</Fieldset.Subtitle>
      </Fieldset>,
    )
    const props = mount(<Fieldset title="test-title" subtitle="test-subtitle" />)
    expect(fieldset.html()).toEqual(props.html())
    expect(() => props.unmount()).not.toThrow()
  })
})