test(slider): add testcase

components/slider/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should render correctly 1`] = `
+"<div class=\\"slider \\"><div class=\\"dot  \\">20<style>
+        .dot {
+          position: absolute;
+          left: 20%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          height: 1.25rem;
+          line-height: 1.25rem;
+          border-radius: .625rem;
+          user-select: none;
+          font-weight: 700;
+          font-size: .75rem;
+          z-index: 100;
+          background-color: #0070f3;
+          color: #fff;
+          text-align: center;
+          padding: 0 calc(.86 * 8pt);
+        }
+        
+        .dot.disabled {
+          cursor: not-allowed !important;
+          background-color: #eaeaea;
+          color: #888;
+        }
+        
+        .dot.click {
+          transition: all 200ms ease;
+        }
+        
+        .dot:hover {
+          cursor: grab;
+        }
+        
+        .dot:active {
+          cursor: grabbing;
+        }
+      </style></div><style>
+        .slider {
+          width: 100%;
+          height: .5rem;
+          border-radius: 50px;
+          background-color: #111;
+          position: relative;
+          cursor: pointer;
+        }
+      </style></div>"
+`;
+
+exports[`Slider should work with markers 1`] = `
+"<div class=\\"slider \\"><div class=\\"dot  \\">0<style>
+        .dot {
+          position: absolute;
+          left: 0%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          height: 1.25rem;
+          line-height: 1.25rem;
+          border-radius: .625rem;
+          user-select: none;
+          font-weight: 700;
+          font-size: .75rem;
+          z-index: 100;
+          background-color: #0070f3;
+          color: #fff;
+          text-align: center;
+          padding: 0 calc(.86 * 8pt);
+        }
+        
+        .dot.disabled {
+          cursor: not-allowed !important;
+          background-color: #eaeaea;
+          color: #888;
+        }
+        
+        .dot.click {
+          transition: all 200ms ease;
+        }
+        
+        .dot:hover {
+          cursor: grab;
+        }
+        
+        .dot:active {
+          cursor: grabbing;
+        }
+      </style></div><span style=\\"left: 10%;\\"></span><span style=\\"left: 20%;\\"></span><span style=\\"left: 30%;\\"></span><span style=\\"left: 40%;\\"></span><span style=\\"left: 50%;\\"></span><span style=\\"left: 60%;\\"></span><span style=\\"left: 70%;\\"></span><span style=\\"left: 80%;\\"></span><span style=\\"left: 90%;\\"></span><style>
+        span {
+          position: absolute;
+          width: 2px;
+          height: 100%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          background-color: #fff;
+        }
+      </style><style>
+        .slider {
+          width: 100%;
+          height: .5rem;
+          border-radius: 50px;
+          background-color: #111;
+          position: relative;
+          cursor: pointer;
+        }
+      </style></div>"
+`;
+
+exports[`Slider should work with markers 2`] = `
+"<div class=\\"slider \\"><div class=\\"dot  \\">0<style>
+        .dot {
+          position: absolute;
+          left: 0%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          height: 1.25rem;
+          line-height: 1.25rem;
+          border-radius: .625rem;
+          user-select: none;
+          font-weight: 700;
+          font-size: .75rem;
+          z-index: 100;
+          background-color: #0070f3;
+          color: #fff;
+          text-align: center;
+          padding: 0 calc(.86 * 8pt);
+        }
+        
+        .dot.disabled {
+          cursor: not-allowed !important;
+          background-color: #eaeaea;
+          color: #888;
+        }
+        
+        .dot.click {
+          transition: all 200ms ease;
+        }
+        
+        .dot:hover {
+          cursor: grab;
+        }
+        
+        .dot:active {
+          cursor: grabbing;
+        }
+      </style></div><span style=\\"left: 20%;\\"></span><span style=\\"left: 40%;\\"></span><span style=\\"left: 60%;\\"></span><span style=\\"left: 80%;\\"></span><style>
+        span {
+          position: absolute;
+          width: 2px;
+          height: 100%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          background-color: #fff;
+        }
+      </style><style>
+        .slider {
+          width: 100%;
+          height: .5rem;
+          border-radius: 50px;
+          background-color: #111;
+          position: relative;
+          cursor: pointer;
+        }
+      </style></div>"
+`;

components/slider/__tests__/index.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Slider } from 'components'
+import { nativeEvent, updateWrapper } from 'tests/utils'
+import { act } from 'react-dom/test-utils'
+
+const triggerDrag = (el: HTMLElement, x = 0) => {
+  window.Element.prototype.getBoundingClientRect = () => ({
+    width: 100,
+    left: 0,
+    right: 100,
+    x: 0,
+  } as DOMRect)
+  const mousedown = new MouseEvent('mousedown')
+  const mousemove = new MouseEvent('mousemove', {
+    clientX: x,
+  })
+  const mouseup = new MouseEvent('mouseup')
+  el.dispatchEvent(mousedown)
+  window.dispatchEvent(mousemove)
+  window.dispatchEvent(mouseup)
+}
+
+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 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()
+  })
+})

components/slider/slider.tsx

@@ -57,7 +57,6 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({
   disabled, step, max, min, initialValue, value: customValue,
   onChange, className, showMarkers, ...props
 }) => {
-  
   const theme = useTheme()
   const [value, setValue] = useState<number>(initialValue)
   const [, setSliderWidth, sideWidthRef] = useCurrentState<number>(0)