chore: code cleanup, add tests

Author: onlyexeption

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

@@ -85,10 +85,6 @@ class TileResizeState {
     height: null,
   };
 
-  public get emptyResizeDimensions(): TileResizeDimensions {
-    return { width: null, height: null };
-  }
-
   public get gap(): number {
     return this._gap;
   }
@@ -153,30 +149,6 @@ class TileResizeState {
     };
   }
 
-  /**
-   * Checks and adjusts tile spans based on the column count of the tile manager.
-   */
-  // REVIEW once we decide how to handle empty columns.
-  public adjustTileGridPosition(tiles: IgcTileComponent[]): void {
-    const columnCount = this.columns.count;
-
-    for (const tile of tiles) {
-      const colStart = tile.colStart || 0;
-      const colSpan = tile.colSpan || 0;
-
-      if (colStart > columnCount) {
-        //Prioritize span over start?
-        tile.colSpan = 1;
-        tile.colStart = columnCount;
-        continue;
-      }
-
-      if (colStart + colSpan - 1 > columnCount) {
-        tile.colSpan = columnCount - colStart + 1;
-      }
-    }
-  }
-
   private initState(grid: HTMLElement, tile: IgcTileComponent): void {
     const { gap, columns, rows } = parseTileParentGrid(grid);
 
@@ -257,14 +229,14 @@ class TileResizeState {
           targetSize: rect.height,
           tilePosition: this.position.row,
           tileGridDimension: this.rows,
-          gap: this._gap,
+          gap: this.gap,
           isRow,
         }
       : {
           targetSize: rect.width,
           tilePosition: this.position.column,
           tileGridDimension: this.columns,
-          gap: this._gap,
+          gap: this.gap,
           isRow,
         };
   }

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

@@ -214,6 +214,17 @@ describe('Tile Manager component', () => {
       );
     });
 
+    it('Should correctly set gap', async () => {
+      const style = getComputedStyle(getTileManagerBase());
+
+      expect(style.gap).to.equal('10px');
+
+      tileManager.gap = '25px';
+      await elementUpdated(tileManager);
+
+      expect(style.gap).to.equal('25px');
+    });
+
     it('should respect tile row and col start properties', async () => {
       const tile = tileManager.tiles[2];
       tile.colStart = 7;

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

@@ -214,6 +214,33 @@ describe('Tile resize', () => {
       expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 2');
     });
 
+    it('Should correctly shrink tile', async () => {
+      firstTile.colSpan = 3;
+      firstTile.rowSpan = 3;
+
+      const DOM = getResizeContainerDOM(firstTile);
+
+      simulatePointerDown(DOM.adorners.corner);
+      await elementUpdated(DOM.container);
+
+      expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 3');
+      expect(getComputedStyle(firstTile).gridRow).to.eql('auto / span 3');
+
+      simulatePointerMove(DOM.adorners.corner, {
+        clientX: columnSize,
+        clientY: rowSize,
+      });
+
+      await elementUpdated(DOM.resizeElement);
+
+      simulateLostPointerCapture(DOM.adorners.corner);
+      await elementUpdated(DOM.resizeElement);
+      await nextFrame();
+
+      expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 1');
+      expect(getComputedStyle(firstTile).gridRow).to.eql('auto / span 1');
+    });
+
     it('Should correctly create/remove implicit rows and resize row with auto grid', async () => {
       const DOM = getResizeContainerDOM(firstTile);
 
@@ -281,6 +308,15 @@ describe('Tile resize', () => {
       expect(getColumns().length).to.eql(10);
     });
 
+    it('Should correctly set rowCount', async () => {
+      expect(getRows().length).to.eql(1);
+
+      tileManager.rowCount = 10;
+      await elementUpdated(tileManager);
+
+      expect(getRows().length).to.eql(10);
+    });
+
     it('Should cap resizing to max col if greater than', async () => {
       const DOM = getResizeContainerDOM(firstTile);
 
@@ -303,18 +339,33 @@ describe('Tile resize', () => {
       expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 10');
     });
 
-    // REVIEW
-    it('Should initialize tile span as columnCount if it is greater than columnCount', async () => {
+    it('Should initialize tile colSpan as columnCount if it is greater than columnCount', async () => {
       tileManager.columnCount = 10;
+      firstTile.colSpan = 15;
       await elementUpdated(tileManager);
 
-      firstTile.colSpan = 15;
-      await elementUpdated(firstTile);
+      expect(getColumns().length).to.eql(10);
+      expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 10');
+    });
 
-      // REVIEW once we decide how to handle the scenario where colSpan is greater than column count
-      // currently 0px columns are added to cover the difference
-      expect(getColumns().length).to.eql(15);
-      expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 15');
+    it('Should preserve tile colStart when colStart is valid and colStart + colSpan is greater than columnCount', async () => {
+      tileManager.columnCount = 10;
+      firstTile.colStart = 5;
+      firstTile.colSpan = 10;
+      await elementUpdated(tileManager);
+
+      expect(getColumns().length).to.eql(10);
+      expect(getComputedStyle(firstTile).gridColumn).to.eql('5 / span 6');
+    });
+
+    it('Should set colStart to 0(auto) and colSpan to columnCount when both are greater than columnCount', async () => {
+      tileManager.columnCount = 10;
+      firstTile.colStart = 11;
+      firstTile.colSpan = 12;
+      await elementUpdated(tileManager);
+
+      expect(getColumns().length).to.eql(10);
+      expect(getComputedStyle(firstTile).gridColumn).to.eql('auto / span 10');
     });
 
     it('Should maintain column position on resize when colStart is set', async () => {