test: add test case

Author: zombieJ

src/hooks/useScrollDrag.ts

@@ -38,8 +38,15 @@ export default function useScrollDrag(
         });
       };
 
-      const onMouseDown = () => {
-        mouseDownLock = true;
+      const onMouseDown = (e: MouseEvent) => {
+        // Skip if nest List has handled this event
+        const event = e as MouseEvent & {
+          _virtualHandled?: boolean;
+        };
+        if (!event._virtualHandled) {
+          event._virtualHandled = true;
+          mouseDownLock = true;
+        }
       };
       const onMouseUp = () => {
         mouseDownLock = false;
@@ -52,7 +59,7 @@ export default function useScrollDrag(
 
           if (mouseY <= top) {
             const diff = top - mouseY;
-            offset = smoothScrollOffset(diff);
+            offset = -smoothScrollOffset(diff);
             continueScroll();
           } else if (mouseY >= bottom) {
             const diff = mouseY - bottom;

tests/scroll.test.js

@@ -29,6 +29,8 @@ jest.mock('../src/ScrollBar', () => {
 describe('List.Scroll', () => {
   let mockElement;
   let boundingRect = {
+    top: 0,
+    bottom: 0,
     width: 100,
     height: 100,
   };
@@ -54,6 +56,8 @@ describe('List.Scroll', () => {
 
   beforeEach(() => {
     boundingRect = {
+      top: 0,
+      bottom: 0,
       width: 100,
       height: 100,
     };
@@ -552,4 +556,48 @@ describe('List.Scroll', () => {
       '0',
     );
   });
+
+  it('mouse down drag', () => {
+    const onScroll = jest.fn();
+    const { container } = render(
+      <List
+        component="ul"
+        itemKey="id"
+        itemHeight={20}
+        height={100}
+        data={genData(100)}
+        onScroll={onScroll}
+      >
+        {({ id }) => <li>{id}</li>}
+      </List>,
+    );
+
+    function dragDown(mouseY) {
+      fireEvent.mouseDown(container.querySelector('li'));
+
+      let moveEvent = createEvent.mouseMove(container.querySelector('li'));
+      moveEvent.pageY = mouseY;
+      fireEvent(container.querySelector('li'), moveEvent);
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+
+      fireEvent.mouseUp(container.querySelector('li'));
+    }
+
+    function getScrollTop() {
+      const innerEle = container.querySelector('.rc-virtual-list-holder-inner');
+      const { transform } = innerEle.style;
+      return Number(transform.match(/\d+/)[0]);
+    }
+
+    // Drag down
+    dragDown(100);
+    expect(getScrollTop()).toBeGreaterThan(0);
+
+    // Drag up
+    dragDown(-100);
+    expect(getScrollTop()).toBe(0);
+  });
 });