components#Slider TypeScript Examples

The following examples show how to use components#Slider. 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 4 votes vote down vote up 
describe('Slider', () => {
  beforeAll(() => {
    window.Element.prototype.getBoundingClientRect = () =>
      ({
        x: 0,
        y: 0,
        width: 100,
        height: 10,
        top: 0,
        bottom: 10,
        left: 0,
        right: 100,
      } as DOMRect)
  })

  it('should render correctly', () => {
    const wrapper = mount(<Slider initialValue={20} />)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should trigger events when click', async () => {
    let value = 0
    const changeHandler = jest.fn().mockImplementation(val => (value = val))
    const wrapper = mount(<Slider initialValue={20} onChange={changeHandler} />)
    wrapper.find('.slider').simulate('click', {
      ...nativeEvent,
      clientX: 50,
    })
    await updateWrapper(wrapper, 350)
    expect(changeHandler).toHaveBeenCalled()
    expect(value).toEqual(50)
    changeHandler.mockRestore()
  })

  it('should trigger events when drag', async () => {
    let value = 0
    const changeHandler = jest.fn().mockImplementation(val => (value = val))
    const wrapper = mount(<Slider initialValue={0} onChange={changeHandler} />)
    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement

    act(() => triggerDrag(dot, 50))
    expect(changeHandler).toHaveBeenCalled()
    expect(value).toEqual(50)
    changeHandler.mockRestore()
  })

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

  it('should ignore events when disabled', async () => {
    let value = 0
    const changeHandler = jest.fn().mockImplementation(val => (value = val))
    const wrapper = mount(<Slider initialValue={0} disabled onChange={changeHandler} />)
    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement

    act(() => triggerDrag(dot, 50))
    expect(changeHandler).not.toHaveBeenCalled()
    expect(value).not.toEqual(50)

    wrapper.find('.slider').simulate('click', {
      ...nativeEvent,
      clientX: 50,
    })
    await updateWrapper(wrapper, 350)
    expect(changeHandler).not.toHaveBeenCalled()
    expect(value).not.toEqual(50)
    changeHandler.mockRestore()
  })

  it('should move unit length is step', async () => {
    let value = 0
    const changeHandler = jest.fn().mockImplementation(val => (value = val))
    const wrapper = mount(<Slider step={10} onChange={changeHandler} />)
    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement

    act(() => triggerDrag(dot, 6))
    expect(changeHandler).toHaveBeenCalled()
    expect(value).toEqual(10)
    changeHandler.mockRestore()
  })

  it('should return the specified when the limit is exceeded', () => {
    let value = 0
    const changeHandler = jest.fn().mockImplementation(val => (value = val))
    const wrapper = mount(<Slider min={10} max={20} onChange={changeHandler} />)
    const dot = wrapper.find('.dot').getDOMNode() as HTMLDivElement

    act(() => triggerDrag(dot, -5))
    expect(changeHandler).toHaveBeenCalled()
    expect(value).toEqual(10)

    act(() => triggerDrag(dot, 101))
    expect(changeHandler).toHaveBeenCalled()
    expect(value).toEqual(20)

    changeHandler.mockRestore()
  })

  it('should render number in dot', () => {
    let wrapper = mount(<Slider initialValue={20} />)
    expect(wrapper.find('.dot').text()).toContain('20')

    wrapper = mount(<Slider value={50} />)
    expect(wrapper.find('.dot').text()).toContain('50')
  })

  it('should work with markers', () => {
    let wrapper = mount(<Slider step={10} showMarkers />)
    expect(wrapper.html()).toMatchSnapshot()

    wrapper = mount(<Slider step={20} showMarkers />)
    expect(wrapper.html()).toMatchSnapshot()
  })
  it('should work with hideValue', () => {
    let wrapper = mount(<Slider initialValue={20} hideValue />)
    expect(wrapper.html()).toMatchSnapshot()
  })
})