fix(for-of): address bordered sizing review feedback

Author: viktorkombov

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts

@@ -375,6 +375,19 @@ describe('IgxForOf directive -', () => {
             virtualContainer.igxForSizePropName = 'width';
             const horizontalSize = node.getBoundingClientRect().width + 5 + 11;
             expect(virtualContainer.testGetNodeSize(node)).toBe(horizontalSize);
+
+            node.remove();
+        });
+
+        it('should preserve valid border sizes when another side cannot be parsed', () => {
+            const virtualContainer = fix.componentInstance.parentVirtDir;
+            const node = document.createElement('div');
+            spyOn(window, 'getComputedStyle').and.returnValue({
+                borderTopWidth: '',
+                borderBottomWidth: '2px'
+            } as CSSStyleDeclaration);
+
+            expect(virtualContainer.testGetBorder(node, 'height')).toBe(2);
         });
 
         it('should render no more that initial chunk size elements when set if no containerSize', () => {
@@ -1409,6 +1422,10 @@ export class TestIgxForOfDirective<T> extends IgxForOfDirective<T> {
     public testGetNodeSize(node: Element): number {
         return super.getNodeSize(node, 0);
     }
+
+    public testGetBorder(node: Element, dimension: string): number {
+        return super.getBorder(node, dimension);
+    }
 }
 
 /** Empty virtualized component */

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -1570,11 +1570,11 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
     protected getBorder(node, dimension: string): number {
         const styles = window.getComputedStyle(node);
         if (dimension === 'height') {
-            return parseFloat(styles['borderTopWidth']) +
-                parseFloat(styles['borderBottomWidth']) || 0;
+            return (parseFloat(styles['borderTopWidth']) || 0) +
+                (parseFloat(styles['borderBottomWidth']) || 0);
         }
-        return parseFloat(styles['borderLeftWidth']) +
-            parseFloat(styles['borderRightWidth']) || 0;
+        return (parseFloat(styles['borderLeftWidth']) || 0) +
+            (parseFloat(styles['borderRightWidth']) || 0);
     }
 }
 

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

@@ -4093,6 +4093,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             const searchComponent = fix.debugElement.query(By.css('igx-excel-style-search')).componentInstance;
             const listElement = searchComponent.list.element.nativeElement as HTMLElement;
+            listElement.style.border = '1px solid transparent';
 
             expect(listElement.offsetHeight).toBeGreaterThan(listElement.clientHeight);
             expect(searchComponent.containerSize).toBe(listElement.clientHeight);