test: Refactored resize controller and adjusted resize tests

Author: rkaraivanov

src/components/tile-manager/resize-controller.ts

@@ -27,7 +27,7 @@ type ResizeControllerConfig = {
 };
 
 class ResizeController implements ReactiveController {
-  private static auxiliaryEvents = [
+  private static readonly auxiliaryEvents = [
     'pointermove',
     'lostpointercapture',
   ] as const;
@@ -52,13 +52,14 @@ class ResizeController implements ReactiveController {
 
   private _host: ReactiveControllerHost & HTMLElement;
   private _config: ResizeControllerConfig = {};
-  private _id!: number;
+  private _id = -1;
+  private _hasPointerCapture = false;
 
   private _ghost: HTMLElement | null = null;
   protected _initialState!: DOMRect;
   private _state!: DOMRect;
 
-  protected get _element() {
+  protected get _element(): HTMLElement {
     return this._config?.ref ? this._config.ref.value! : this._host;
   }
 
@@ -74,7 +75,7 @@ class ResizeController implements ReactiveController {
 
   // Internal state helpers
 
-  private _createGhost() {
+  private _createGhost(): void {
     if (this._config.mode !== 'deferred') {
       return;
     }
@@ -85,20 +86,32 @@ class ResizeController implements ReactiveController {
     this._host.append(this._ghost);
   }
 
-  private _disposeGhost() {
+  private _disposeGhost(): void {
     if (this._ghost) {
       this._ghost.remove();
       this._ghost = null;
     }
   }
 
-  private _setInitialState(event: PointerEvent) {
-    const resizableElement = this._host.querySelector('div[part~="base"]');
+  private _setPointerCaptureState(state: boolean): void {
+    this._hasPointerCapture = state;
+    state
+      ? this._element.setPointerCapture(this._id)
+      : this._element.releasePointerCapture(this._id);
 
-    const rect = resizableElement!.getBoundingClientRect();
-    this._initialState = structuredClone(rect);
-    this._state = rect;
-    this._id = event.pointerId;
+    for (const event of ResizeController.auxiliaryEvents) {
+      state
+        ? this._host.addEventListener(event, this)
+        : this._host.removeEventListener(event, this);
+    }
+  }
+
+  private _setInitialState({ pointerId }: PointerEvent): void {
+    const resizableElement = this._host.querySelector('div[part~="base"]')!;
+
+    this._initialState = resizableElement.getBoundingClientRect();
+    this._state = structuredClone(this._initialState);
+    this._id = pointerId;
   }
 
   private _createCallbackParams(event: PointerEvent): ResizeCallbackParams {
@@ -114,22 +127,13 @@ class ResizeController implements ReactiveController {
     };
   }
 
-  private _toggleSubsequentEvents(set: boolean) {
-    const method = set
-      ? this._host.addEventListener
-      : this._host.removeEventListener;
-    for (const type of ResizeController.auxiliaryEvents) {
-      method(type, this);
-    }
-  }
-
   private _shouldSkip(event: PointerEvent): boolean {
     return !findElementFromEventPath((e) => e === this._element, event);
   }
 
   // Event handlers
 
-  private _handlePointerDown(event: PointerEvent) {
+  private _handlePointerDown(event: PointerEvent): void {
     // Non-primary buttons are ignored
     if (event.button) {
       return;
@@ -138,17 +142,13 @@ class ResizeController implements ReactiveController {
     if (this._config?.start) {
       this._setInitialState(event);
       this._createGhost();
-
-      const params = this._createCallbackParams(event);
-      this._config.start.call(this._host, params);
-
-      this._element.setPointerCapture(this._id);
-      this._toggleSubsequentEvents(true);
+      this._config.start.call(this._host, this._createCallbackParams(event));
+      this._setPointerCaptureState(true);
     }
   }
 
-  private _handlePointerMove(event: PointerEvent) {
-    if (!this._element.hasPointerCapture(this._id)) {
+  private _handlePointerMove(event: PointerEvent): void {
+    if (!this._hasPointerCapture) {
       return;
     }
 
@@ -168,7 +168,7 @@ class ResizeController implements ReactiveController {
     });
   }
 
-  private _handlePointerEnd(event: PointerEvent) {
+  private _handlePointerEnd(event: PointerEvent): void {
     Object.assign(this._host.style, {
       width: `${this._state.width}px`,
       height: `${this._state.height}px`,
@@ -181,34 +181,37 @@ class ResizeController implements ReactiveController {
     this.dispose();
   }
 
-  public handleEvent(event: PointerEvent) {
+  public handleEvent(event: PointerEvent): void {
     if (this._shouldSkip(event)) {
       return;
     }
 
     switch (event.type) {
       case 'touchstart':
-        return event.preventDefault();
+        event.preventDefault();
+        break;
 
       case 'pointerdown':
-        return this._handlePointerDown(event);
+        this._handlePointerDown(event);
+        break;
       case 'pointermove':
-        return this._handlePointerMove(event);
+        this._handlePointerMove(event);
+        break;
       case 'lostpointercapture':
-        return this._handlePointerEnd(event);
+        this._handlePointerEnd(event);
+        break;
     }
   }
 
   // Public API
 
-  public setConfig(config?: ResizeControllerConfig) {
+  public setConfig(config?: ResizeControllerConfig): void {
     Object.assign(this._config, config);
   }
 
-  public dispose() {
+  public dispose(): void {
     this._disposeGhost();
-    this._toggleSubsequentEvents(false);
-    this._element.releasePointerCapture(this._id);
+    this._setPointerCaptureState(false);
   }
 
   public hostConnected(): void {
@@ -225,6 +228,6 @@ class ResizeController implements ReactiveController {
 export function addResizeController(
   host: ReactiveControllerHost & HTMLElement,
   config?: ResizeControllerConfig
-) {
+): ResizeController {
   return new ResizeController(host, config);
 }

src/components/tile-manager/resize-element.ts

@@ -24,11 +24,15 @@ export interface IgcResizeComponentEventMap {
   igcResizeCancel: CustomEvent<unknown>;
 }
 
+/* blazorSuppress */
+/**
+ * @element igc-resize
+ */
 export default class IgcResizeComponent extends EventEmitterMixin<
   IgcResizeComponentEventMap,
   Constructor<LitElement>
 >(LitElement) {
-  public static tagName = 'igc-resize';
+  public static readonly tagName = 'igc-resize';
   public static styles = [styles, shared];
 
   /* blazorSuppress */

src/components/tile-manager/tile-resize.spec.ts

@@ -11,8 +11,9 @@ import {
   simulatePointerDown,
   simulatePointerMove,
 } from '../common/utils.spec.js';
+import IgcResizeComponent from './resize-element.js';
 import IgcTileManagerComponent from './tile-manager.js';
-import type IgcTileComponent from './tile.js';
+import IgcTileComponent from './tile.js';
 
 describe('Tile resize', () => {
   before(() => {
@@ -22,7 +23,27 @@ describe('Tile resize', () => {
   let tileManager: IgcTileManagerComponent;
 
   function getTiles() {
-    return Array.from(tileManager.querySelectorAll('igc-tile'));
+    return Array.from(tileManager.querySelectorAll(IgcTileComponent.tagName));
+  }
+
+  function getTileDOM(tile: IgcTileComponent) {
+    const root = tile.shadowRoot!;
+
+    return {
+      get resizeElement() {
+        return root.querySelector(IgcResizeComponent.tagName)!;
+      },
+      get resizeTrigger() {
+        return this.resizeElement.renderRoot.querySelector<HTMLElement>(
+          '[part="trigger"]'
+        )!;
+      },
+      get resizeGhost() {
+        return this.resizeElement.children.length < 2
+          ? null
+          : (this.resizeElement.children.item(1) as HTMLElement);
+      },
+    };
   }
 
   function getTileBaseWrapper(element: IgcTileComponent) {
@@ -58,60 +79,44 @@ describe('Tile resize', () => {
       tileManager = await fixture<IgcTileManagerComponent>(createTileManager());
     });
 
-    const resize = async (tile: Element, clientX: number, clientY: number) => {
-      const resizer = tile.shadowRoot?.querySelector('igc-resize');
-      const resizeHandle =
-        resizer?.shadowRoot?.querySelector('[part="trigger"]');
-
-      simulatePointerDown(resizeHandle!);
-
-      await elementUpdated(resizer!);
-
-      simulatePointerMove(resizeHandle!, { clientX });
-
-      await elementUpdated(resizer!);
-    };
-
     it('should create a ghost element on resize start', async () => {
-      const tile = first(getTiles());
-      const resizer = tile.renderRoot.querySelector('igc-resize')!;
-      const eventSpy = spy(resizer, 'emitEvent');
-      const resizeHandle =
-        resizer?.shadowRoot?.querySelector('[part="trigger"]');
-      const resizerChildren = resizer.children;
-      expect(resizerChildren).lengthOf(1);
+      const tileDOM = getTileDOM(first(getTiles()));
+      const eventSpy = spy(tileDOM.resizeElement, 'emitEvent');
 
-      simulatePointerDown(resizeHandle!);
-      await elementUpdated(resizer!);
+      expect(tileDOM.resizeGhost).to.be.null;
 
-      expect(resizerChildren).lengthOf(2);
-      const ghostElement = resizerChildren[1];
+      simulatePointerDown(tileDOM.resizeTrigger);
+      await elementUpdated(tileDOM.resizeElement);
 
-      expect(ghostElement).to.not.be.null;
+      expect(tileDOM.resizeGhost).to.exist;
       expect(eventSpy).calledWith('igcResizeStart');
     });
 
     it('should update ghost element styles during pointer move - columns', async () => {
       const tile = first(getTiles());
-      const resizer = tile.renderRoot.querySelector('igc-resize')!;
-      //const resizeHandle = resizer?.shadowRoot?.querySelector('[part="trigger"]');
-
-      const eventSpy = spy(resizer, 'emitEvent');
+      const tileDOM = getTileDOM(tile);
+      const tileRect = tile.getBoundingClientRect();
+      const eventSpy = spy(tileDOM.resizeElement, 'emitEvent');
 
-      const { x, width } = tile.getBoundingClientRect();
-      resize(tile, x + width * 2, 0);
+      simulatePointerDown(tileDOM.resizeTrigger);
+      await elementUpdated(tileDOM.resizeElement);
 
-      await elementUpdated(tile);
+      expect(eventSpy).calledWith('igcResizeStart');
+      expect(tileDOM.resizeGhost).to.exist;
+      expect(tileRect).to.eql(tileDOM.resizeGhost!.getBoundingClientRect());
 
-      const updatedGhostElement = resizer.children[1] as HTMLElement;
-      //debugger
+      simulatePointerMove(tileDOM.resizeTrigger, {
+        clientX: (tileRect.x + tileRect.width) * 2,
+      });
+      await elementUpdated(tileDOM.resizeElement);
 
       expect(eventSpy).calledWith('igcResize');
+      // FIXME: Check event arguments, ghost dimensions etc.
+
+      simulateLostPointerCapture(tileDOM.resizeTrigger);
+      await elementUpdated(tileDOM.resizeElement);
 
-      // Check if styles are updated, also check values
-      expect(updatedGhostElement.style.width).to.not.be.empty;
-      expect(updatedGhostElement.style.height).to.not.be.empty;
-      // Check values
+      expect(eventSpy).calledWith('igcResizeEnd');
     });
 
     xit('should set the styles on the tile and remove the ghost element on resize end', async () => {
@@ -148,7 +153,7 @@ describe('Tile resize', () => {
       expect(ghostElement).to.be.null;
     });
 
-    xit('should cancel resize by pressing ESC key', async () => {
+    it.skip('should cancel resize by pressing ESC key', async () => {
       const tile = first(tileManager.tiles);
       const { x, y, width, height } = tile.getBoundingClientRect();
       const resizeHandle = tile.shadowRoot!.querySelector('.resize-handle')!;