Merge pull request #269 from mathuo/268-touch-support-for-resizing-panels

test: add tests to existing mouse dnd functionality

packages/dockview-core/src/__tests__/events.spec.ts

@@ -1,4 +1,9 @@
-import { Emitter, Event } from '../events';
+import {
+    Emitter,
+    Event,
+    addDisposableListener,
+    addDisposableWindowListener,
+} from '../events';
 
 describe('events', () => {
     describe('emitter', () => {
@@ -101,4 +106,138 @@ describe('events', () => {
         emitter3.fire(3);
         expect(value).toBe(3);
     });
+
+    it('addDisposableWindowListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableWindowListener(
+            element as any,
+            'mousedown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableWindowListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableWindowListener(
+            element as any,
+            'mousedown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+    });
+
+    it('addDisposableListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'mousedown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'mousedown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+    });
 });

packages/dockview-core/src/__tests__/splitview/splitview.spec.ts

@@ -7,7 +7,7 @@ import {
     Sizing,
     Splitview,
 } from '../../splitview/splitview';
-
+import { fireEvent } from '@testing-library/dom';
 class Testview implements IView {
     private _element: HTMLElement = document.createElement('div');
     private _size = 0;
@@ -596,4 +596,54 @@ describe('splitview', () => {
         expect(anyEvents).toBeFalsy();
         expect(container.childNodes.length).toBe(0);
     });
+
+    test('dnd: mouse events to move sash', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(400, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+
+        const sashElement = container
+            .getElementsByClassName('sash')
+            .item(0) as HTMLElement;
+
+        // validate the expected state before drag
+        expect([view1.size, view2.size]).toEqual([200, 200]);
+        expect(sashElement).toBeTruthy();
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        // start the drag event
+        fireEvent.mouseDown(sashElement, { clientX: 50, clientY: 100 });
+
+        // during a sash drag the views should have pointer-events disabled
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
+
+        // expect a delta move of 70 - 50 = 20
+        fireEvent.mouseMove(document, { clientX: 70, clientY: 110 });
+        expect([view1.size, view2.size]).toEqual([220, 180]);
+
+        // expect a delta move of 75 - 70 = 5
+        fireEvent.mouseMove(document, { clientX: 75, clientY: 110 });
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+
+        // end the drag event
+        fireEvent.mouseUp(document);
+
+        // expect pointer-eventes on views to be restored
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        fireEvent.mouseMove(document, { clientX: 100, clientY: 100 });
+        // expect no additional resizes
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+    });
 });

packages/dockview-core/src/events.ts

@@ -162,7 +162,7 @@ export function addDisposableWindowListener<K extends keyof WindowEventMap>(
 
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -177,7 +177,7 @@ export function addDisposableListener<K extends keyof HTMLElementEventMap>(
 
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }

packages/dockview-core/src/splitview/splitview.ts

@@ -523,14 +523,12 @@ export class Splitview {
 
                     document.removeEventListener('mousemove', mousemove);
                     document.removeEventListener('mouseup', end);
-                    document.removeEventListener('mouseend', end);
 
                     this._onDidSashEnd.fire(undefined);
                 };
 
                 document.addEventListener('mousemove', mousemove);
                 document.addEventListener('mouseup', end);
-                document.addEventListener('mouseend', end);
             };
 
             sash.addEventListener('mousedown', onStart);