components#Collapse TypeScript Examples

The following examples show how to use components#Collapse. 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('Collapse Group', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <Collapse.Group>
        <Collapse title="title1">content1</Collapse>
        <Collapse title="title2">content2</Collapse>
      </Collapse.Group>,
    )

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

  it('should be no errors when children are missing', () => {
    const wrapper = mount(<Collapse.Group></Collapse.Group>)

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

  it('should work without accordion', () => {
    const wrapper = render(
      <Collapse.Group accordion={false}>
        <Collapse title="title1">content1</Collapse>
        <Collapse title="title2">content2</Collapse>
      </Collapse.Group>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should be display all when without accordion', async () => {
    const wrapper = mount(
      <Collapse.Group accordion={false}>
        <Collapse title="title1">content1</Collapse>
        <Collapse title="title2">content2</Collapse>
      </Collapse.Group>,
    )

    const views = wrapper.find('.view')
    views.at(0).simulate('click')
    views.at(1).simulate('click')
    await updateWrapper(wrapper, 300)
    expect(wrapper.find('.expanded').length).toBe(2)

    views.at(0).simulate('click')
    views.at(1).simulate('click')
    await updateWrapper(wrapper, 300)
    expect(wrapper.find('.expanded').length).toBe(0)
  })

  it('should be display one when in accordion mode', async () => {
    const wrapper = mount(
      <Collapse.Group>
        <Collapse title="title1">content1</Collapse>
        <Collapse title="title2">content2</Collapse>
      </Collapse.Group>,
    )

    const views = wrapper.find('.view')
    views.at(0).simulate('click')
    views.at(1).simulate('click')
    await updateWrapper(wrapper, 300)
    expect(wrapper.find('.expanded').length).toBe(1)

    views.at(1).simulate('click')
    await updateWrapper(wrapper, 300)
    expect(wrapper.find('.expanded').length).toBe(0)
  })
})
Example #2
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Collapse', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Collapse title="title">content</Collapse>)
    expect(wrapper).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with subtitle and shadow', () => {
    const wrapper = render(
      <div>
        <Collapse title="title" subtitle="subtitle">
          content
        </Collapse>
        <Collapse title="title" subtitle="subtitle" shadow>
          content
        </Collapse>
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should work with initial visible', () => {
    const wrapper = render(
      <div>
        <Collapse title="title" subtitle="subtitle">
          content
        </Collapse>
        <Collapse title="title" initialVisible>
          content
        </Collapse>
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should throw error when title missing', () => {
    const Component = Collapse as any
    let errorMessage = ''
    const errorSpy = jest
      .spyOn(console, 'error')
      .mockImplementation(msg => (errorMessage = msg))

    mount(<Component subtitle="subtitle">content</Component>)
    expect(errorMessage.toLowerCase()).not.toEqual('')
    errorSpy.mockRestore()
  })

  it('should expand when title clicked', async () => {
    const wrapper = mount(<Collapse title="title">content</Collapse>)
    wrapper.find('.view').at(0).simulate('click')
    await updateWrapper(wrapper, 300)
    expect(wrapper.find('.expanded').length).not.toBe(0)
  })
})