fix(material-experimental/column-resize): Add NumberMatchers interface in tests

Author: jamOne-

src/material-experimental/column-resize/column-resize.spec.ts

@@ -333,7 +333,7 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 }
 
 // There's 1px of variance between different browsers in terms of positioning.
-const approximateMatcher = {
+const approximateMatcher: jasmine.CustomMatcherFactories = {
   isApproximately: () => ({
     compare: (actual: number, expected: number) => {
       const result = {
@@ -348,6 +348,14 @@ const approximateMatcher = {
   }),
 };
 
+interface NumberMatchers extends jasmine.Matchers<number> {
+  isApproximately(expected: number): void;
+  not: NumberMatchers;
+}
+declare global {
+  function expect(actual: number): NumberMatchers;
+}
+
 const testCases = [
   [MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
   [MatColumnResizeModule, MatResizeOnPushTest, 'inside OnPush component'],
@@ -409,12 +417,8 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
-        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
-          headerRowHeight,
-        );
-        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
-          headerRowHeight,
-        );
+        expect(component.getOverlayThumbElement(0).offsetHeight).isApproximately(headerRowHeight);
+        expect(component.getOverlayThumbElement(2).offsetHeight).isApproximately(headerRowHeight);
 
         component.beginColumnResizeWithMouse(0);
 
@@ -425,15 +429,11 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
-        (expect(component.getOverlayThumbElement(0).offsetHeight) as any).isApproximately(
-          tableHeight,
-        );
-        (expect(component.getOverlayThumbTopElement(0).offsetHeight) as any).isApproximately(
-          headerRowHeight,
-        );
-        (expect(component.getOverlayThumbElement(2).offsetHeight) as any).isApproximately(
+        expect(component.getOverlayThumbElement(0).offsetHeight).isApproximately(tableHeight);
+        expect(component.getOverlayThumbTopElement(0).offsetHeight).isApproximately(
           headerRowHeight,
         );
+        expect(component.getOverlayThumbElement(2).offsetHeight).isApproximately(headerRowHeight);
 
         component.completeResizeWithMouseInProgress(0);
         component.endHoverState();
@@ -462,31 +462,31 @@ describe('Material Popover Edit', () => {
         let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
         // let nextColumnPositionDelta =
         //   component.getColumnOriginPosition(2) - initialNextColumnPosition;
-        (expect(thumbPositionDelta) as any).isApproximately(columnPositionDelta);
+        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // (expect(nextColumnPositionDelta) as any).isApproximately(columnPositionDelta);
+        // expect(nextColumnPositionDelta).isApproximately(columnPositionDelta);
 
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth + 5);
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 5);
+        // expect(component.getTableWidth()).isApproximately(initialTableWidth + 5);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 5);
 
         component.updateResizeWithMouseInProgress(1);
         fixture.detectChanges();
         flush();
 
         thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
         columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
-        (expect(thumbPositionDelta) as any).isApproximately(columnPositionDelta);
+        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
 
-        (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth + 1);
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 1);
+        expect(component.getTableWidth()).isApproximately(initialTableWidth + 1);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
 
         component.completeResizeWithMouseInProgress(1);
         flush();
 
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 1);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -508,23 +508,23 @@ describe('Material Popover Edit', () => {
         flush();
 
         let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
-        (expect(thumbPositionDelta) as any).isApproximately(5);
-        (expect(component.getColumnWidth(1)) as any).toBe(initialColumnWidth);
+        expect(thumbPositionDelta).isApproximately(5);
+        expect(component.getColumnWidth(1)).toBe(initialColumnWidth);
 
         component.updateResizeWithMouseInProgress(1);
         fixture.detectChanges();
         flush();
 
         thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
 
-        (expect(component.getTableWidth()) as any).toBe(initialTableWidth);
-        (expect(component.getColumnWidth(1)) as any).toBe(initialColumnWidth);
+        expect(component.getTableWidth()).toBe(initialTableWidth);
+        expect(component.getColumnWidth(1)).toBe(initialColumnWidth);
 
         component.completeResizeWithMouseInProgress(1);
         flush();
 
-        (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth + 1);
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 1);
+        expect(component.getTableWidth()).isApproximately(initialTableWidth + 1);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -562,18 +562,18 @@ describe('Material Popover Edit', () => {
 
         let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
         let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
-        (expect(thumbPositionDelta) as any).isApproximately(columnPositionDelta);
+        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
 
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 5);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 5);
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth + 5);
+        // expect(component.getTableWidth()).isApproximately(initialTableWidth + 5);
 
         dispatchKeyboardEvent(document, 'keyup', ESCAPE);
         flush();
 
-        (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth);
-        (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth);
+        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth);
+        expect(component.getTableWidth()).isApproximately(initialTableWidth);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -582,7 +582,7 @@ describe('Material Popover Edit', () => {
       it('notifies subscribers of a completed resize via ColumnResizeNotifier', fakeAsync(() => {
         const initialColumnWidth = component.getColumnWidth(1);
 
-        let resize: ColumnSize | null = null;
+        let resize: ColumnSize | null = null as ColumnSize | null;
         component.columnResize.columnResizeNotifier.resizeCompleted.subscribe(size => {
           resize = size;
         });
@@ -596,7 +596,7 @@ describe('Material Popover Edit', () => {
         fixture.detectChanges();
         flush();
 
-        expect(resize).toEqual({columnId: 'name', size: initialColumnWidth + 5} as any);
+        expect(resize).toEqual({columnId: 'name', size: initialColumnWidth + 5});
 
         component.endHoverState();
         fixture.detectChanges();
@@ -626,12 +626,12 @@ describe('Material Popover Edit', () => {
 
       it('performs a column resize triggered via ColumnResizeNotifier', fakeAsync(() => {
         // Pre-verify that we are not updating the size to the initial size.
-        (expect(component.getColumnWidth(1)) as any).not.isApproximately(173);
+        expect(component.getColumnWidth(1)).not.isApproximately(173);
 
         component.columnResize.columnResizeNotifier.resize('name', 173);
         flush();
 
-        (expect(component.getColumnWidth(1)) as any).isApproximately(173);
+        expect(component.getColumnWidth(1)).isApproximately(173);
       }));
     });
   }
@@ -660,13 +660,13 @@ describe('Material Popover Edit', () => {
     }));
 
     it('applies the persisted size', fakeAsync(() => {
-      (expect(component.getColumnWidth(1)).not as any).isApproximately(300);
+      expect(component.getColumnWidth(1)).not.isApproximately(300);
 
       columnSizeStore.emitSize('theTable', 'name', 300);
 
       flush();
 
-      (expect(component.getColumnWidth(1)) as any).isApproximately(300);
+      expect(component.getColumnWidth(1)).isApproximately(300);
     }));
 
     it('persists the user-triggered size update', fakeAsync(() => {
@@ -689,7 +689,7 @@ describe('Material Popover Edit', () => {
       const {tableId, columnId, sizePx} = columnSizeStore.setSizeCalls[0];
       expect(tableId).toBe('theTable');
       expect(columnId).toBe('name');
-      (expect(sizePx) as any).isApproximately(initialColumnWidth + 5);
+      expect(sizePx).isApproximately(initialColumnWidth + 5);
     }));
 
     it('persists the user-triggered size update (live updates off)', fakeAsync(() => {
@@ -714,7 +714,7 @@ describe('Material Popover Edit', () => {
       const {tableId, columnId, sizePx} = columnSizeStore.setSizeCalls[0];
       expect(tableId).toBe('theTable');
       expect(columnId).toBe('name');
-      (expect(sizePx) as any).isApproximately(initialColumnWidth + 5);
+      expect(sizePx).isApproximately(initialColumnWidth + 5);
     }));
   });
 });