feat(tile-manager): Added transition for UI triggered maximized state changes (#1624)

* Updated tests to wait for said transition when applicable
* Changed icon service test to wait on macrotask queue
  since tests were flaky.

Author: rkaraivanov

src/components/common/controllers/drag.ts

@@ -27,8 +27,8 @@ type State = {
   position: { x: number; y: number };
   offset: { x: number; y: number };
   pointerState: {
-    initial: { initialX: number; initialY: number };
-    current: { currentX: number; currentY: number };
+    previous: { x: number; y: number };
+    current: { x: number; y: number };
     direction: Direction;
   };
 };
@@ -169,30 +169,13 @@ class DragController implements ReactiveController {
   }
 
   private get _stateParameters(): DragState {
-    this._state.pointerState.direction = this._trackPointerMovement();
-
     return {
       ...this._state,
       ghost: this._ghost,
       element: this._matchedElement,
     };
   }
 
-  private _trackPointerMovement(): Direction {
-    const { initialX, initialY } = this._state.pointerState.initial;
-    const { currentX, currentY } = this._state.pointerState.current;
-    const deltaX = currentX - initialX;
-    const deltaY = currentY - initialY;
-    const LTR = isLTR(this._host);
-
-    const isHorizontalMove = Math.abs(deltaX) >= Math.abs(deltaY);
-
-    if (isHorizontalMove) {
-      return (LTR ? deltaX >= 0 : deltaX <= 0) ? 'end' : 'start';
-    }
-    return deltaY >= 0 ? 'bottom' : 'top';
-  }
-
   constructor(
     host: ReactiveControllerHost & LitElement,
     options?: DragControllerConfiguration
@@ -298,17 +281,9 @@ class DragController implements ReactiveController {
     }
 
     this._updatePosition(event);
+    this._updatePointerState(event);
     this._updateMatcher(event);
 
-    this._state.pointerState.initial = {
-      initialX: this._state.pointerState.current.currentX,
-      initialY: this._state.pointerState.current.currentY,
-    };
-    this._state.pointerState.current = {
-      currentX: event.clientX,
-      currentY: event.clientY,
-    };
-
     const parameters = {
       event,
       state: this._stateParameters,
@@ -360,8 +335,8 @@ class DragController implements ReactiveController {
       position,
       offset,
       pointerState: {
-        initial: { initialX: clientX, initialY: clientY },
-        current: { currentX: clientX, currentY: clientY },
+        previous: { x: clientX, y: clientY },
+        current: { x: clientX, y: clientY },
         direction: 'end',
       },
     };
@@ -434,7 +409,24 @@ class DragController implements ReactiveController {
     const posX = this._hasSnapping ? clientX - layerX : clientX - layerX + x;
     const posY = this._hasSnapping ? clientY - layerY : clientY - layerY + y;
 
-    Object.assign(this._state.position, { x: posX, y: posY });
+    this._state.position = { x: posX, y: posY };
+  }
+
+  private _updatePointerState({ clientX, clientY }: PointerEvent): void {
+    const state = this._state.pointerState;
+
+    state.previous = { ...state.current };
+    state.current = { x: clientX, y: clientY };
+
+    const dx = state.current.x - state.previous.x;
+    const dy = state.current.y - state.previous.y;
+
+    if (Math.abs(dx) >= Math.abs(dy)) {
+      const swapHorizontal = isLTR(this._host) ? dx >= 0 : dx <= 0;
+      state.direction = swapHorizontal ? 'end' : 'start';
+    } else {
+      state.direction = dy >= 0 ? 'bottom' : 'top';
+    }
   }
 
   private _assignPosition(element: HTMLElement): void {

src/components/icon/icon.spec.ts

@@ -4,7 +4,6 @@ import {
   expect,
   fixture,
   html,
-  nextFrame,
 } from '@open-wc/testing';
 import { stub } from 'sinon';
 
@@ -163,7 +162,7 @@ describe('Icon broadcast service', () => {
       const iconName = 'bug';
 
       registerIconFromText(iconName, bugSvg, collectionName);
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections } = first(events).data;
       expect(actionType).to.equal(ActionType.RegisterIcon);
@@ -183,7 +182,7 @@ describe('Icon broadcast service', () => {
       for (const each of icons) {
         registerIconFromText(each[0], each[1], collectionName);
       }
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(icons.length);
       for (const [idx, event] of events.entries()) {
@@ -207,7 +206,7 @@ describe('Icon broadcast service', () => {
         name: 'reference-test',
         collection: collectionName,
       });
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections, references } = last(events).data;
 
@@ -227,7 +226,7 @@ describe('Icon broadcast service', () => {
       meta.name = 'reference-test';
       meta.collection = collectionName;
       setIconRef(refName, refCollectionName, meta);
-      await nextFrame();
+      await aTimeout(0);
 
       const { actionType, collections, references } = last(events).data;
 
@@ -250,7 +249,7 @@ describe('Icon broadcast service', () => {
         },
         overwrite: true,
       });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events.length).to.equal(0);
     });
@@ -286,7 +285,7 @@ describe('Icon broadcast service', () => {
 
       // a peer is requesting a state sync
       channel.postMessage({ actionType: ActionType.SyncState });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(2); // [ActionType.RegisterIcon, ActionType.SyncState]
 
@@ -311,7 +310,7 @@ describe('Icon broadcast service', () => {
 
       // a peer is requesting a state sync
       channel.postMessage({ actionType: ActionType.SyncState });
-      await nextFrame();
+      await aTimeout(0);
 
       expect(events).lengthOf(1); // [ActionType.SyncState]
 

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

@@ -529,14 +529,16 @@ describe('Tile drag and drop', () => {
       const [maximize, _] = getActionButtons(tile);
       const eventSpy = spy(tile, 'emitEvent');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.true;
       expect(eventSpy).not.calledWith('igcTileDragStart');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.false;
     });
@@ -547,14 +549,16 @@ describe('Tile drag and drop', () => {
       const [maximize, _] = getActionButtons(tile);
       const eventSpy = spy(tile, 'emitEvent');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.true;
       expect(eventSpy).not.calledWith('igcTileDragStart');
 
+      // Wait for maximized transition trigger from UI
       maximize.click();
-      await elementUpdated(tile);
+      await viewTransitionComplete();
 
       expect(tile.maximized).to.be.false;
     });

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

@@ -1,4 +1,10 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+} from '@open-wc/testing';
 import { range } from 'lit/directives/range.js';
 import { match, restore, spy, stub } from 'sinon';
 import IgcIconButtonComponent from '../button/icon-button.js';
@@ -15,6 +21,11 @@ describe('Tile Manager component', () => {
 
   let tileManager: IgcTileManagerComponent;
 
+  async function viewTransitionComplete() {
+    await nextFrame();
+    await nextFrame();
+  }
+
   function getTileManagerBase() {
     return tileManager.renderRoot.querySelector<HTMLElement>('[part="base"]')!;
   }
@@ -635,18 +646,19 @@ describe('Tile Manager component', () => {
       const eventSpy = spy(tile, 'emitEvent');
       const btnMaximize = getActionButtons(tile)[0];
 
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tile);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(eventSpy).calledWith('igcTileMaximize', {
         detail: { tile: tile, state: true },
         cancelable: true,
       });
       expect(tile.maximized).to.be.true;
 
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(eventSpy).to.have.been.calledTwice;
       expect(eventSpy).calledWith('igcTileMaximize', {
@@ -678,8 +690,10 @@ describe('Tile Manager component', () => {
       const btnMaximize = getActionButtons(tile)[0];
 
       expect(btnMaximize.name).equals('expand_content');
+
+      // Wait for maximized transition trigger from UI
       simulateClick(btnMaximize);
-      await elementUpdated(tileManager);
+      await viewTransitionComplete();
 
       expect(btnMaximize.name).equals('collapse_content');