chore(*): Move test in separate described and have a dedicated test component since changes in existing test components are not possible.

Author: MKirova

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

@@ -28,6 +28,8 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from './for_of.sync.se
 
 describe('IgxForOf directive -', () => {
     const INACTIVE_VIRT_CONTAINER = 'igx-display-container--inactive';
+    const DISPLAY_CONTAINER = 'igx-display-container';
+    const VERTICAL_SCROLLER = 'igx-virtual-helper';
     let displayContainer: HTMLElement;
     let verticalScroller: HTMLElement;
     let horizontalScroller: HTMLElement;
@@ -202,34 +204,6 @@ describe('IgxForOf directive -', () => {
             horizontalScroller = fix.nativeElement.querySelector('igx-horizontal-virtual-helper');
         });
 
-        it('should reset scroll position if component is destroyed and recreated.', async () => {
-            let scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
-            expect(scrollComponent.scrollAmount).toBe(0);
-            expect(scrollComponent.destroyed).toBeFalsy();
-
-            fix.componentInstance.scrollTop(500);
-            fix.detectChanges();
-            await wait();
-            expect(scrollComponent.scrollAmount).toBe(500);
-
-            fix.componentInstance.exists = false;
-            fix.detectChanges();
-            await wait();
-
-            expect(scrollComponent.destroyed).toBeTruthy();
-
-            fix.componentInstance.exists = true;
-            fix.detectChanges();
-            await wait();
-
-            scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
-            expect(scrollComponent.scrollAmount).toBe(0);
-            expect(scrollComponent.destroyed).toBeFalsy();
-
-            displayContainer = fix.nativeElement.querySelector(DISPLAY_CONTAINER);
-            const firstInnerDisplayContainer = displayContainer.children[0];
-            expect(firstInnerDisplayContainer.children[0].textContent).toBe('0');
-        });
 
         it('should initialize directive with vertical virtualization', async () => {
             expect(displayContainer).not.toBeNull();
@@ -1169,6 +1143,55 @@ describe('IgxForOf directive -', () => {
 
     });
 
+    describe('on destroy', () => {
+        let fix: ComponentFixture<VerticalVirtualDestroyComponent>;
+
+        configureTestSuite();
+        beforeAll(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    VerticalVirtualDestroyComponent
+                ],
+                imports: [IgxForOfModule]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(VerticalVirtualDestroyComponent);
+            fix.componentInstance.data = dg.generateVerticalData(fix.componentInstance.cols);
+            fix.componentRef.hostView.detectChanges();
+            fix.detectChanges();
+        });
+        it('should reset scroll position if component is destroyed and recreated.', async () => {
+            let scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
+            expect(scrollComponent.scrollAmount).toBe(0);
+            expect(scrollComponent.destroyed).toBeFalsy();
+
+            scrollComponent.nativeElement.scrollTop = 500;
+            fix.detectChanges();
+            await wait();
+            expect(scrollComponent.scrollAmount).toBe(500);
+
+            fix.componentInstance.exists = false;
+            fix.detectChanges();
+            await wait();
+
+            expect(scrollComponent.destroyed).toBeTruthy();
+
+            fix.componentInstance.exists = true;
+            fix.detectChanges();
+            await wait();
+
+            scrollComponent = fix.debugElement.query(By.css(VERTICAL_SCROLLER)).componentInstance;
+            expect(scrollComponent.scrollAmount).toBe(0);
+            expect(scrollComponent.destroyed).toBeFalsy();
+
+            displayContainer = fix.nativeElement.querySelector(DISPLAY_CONTAINER);
+            const firstInnerDisplayContainer = displayContainer.children[0];
+            expect(firstInnerDisplayContainer.children[0].textContent).toBe('0');
+        });
+    });
 });
 
 class DataGenerator {
@@ -1442,10 +1465,10 @@ export class VirtualComponent {
     public cols = [];
     public data = [];
 
-    @ViewChild('container', { read: ViewContainerRef, static: false })
+    @ViewChild('container', { read: ViewContainerRef, static: true })
     public container: ViewContainerRef;
 
-    @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: false })
+    @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true })
     public parentVirtDir: TestIgxForOfDirective<any>;
 
     @ViewChildren('childContainer', { read: TestIgxForOfDirective })
@@ -1484,10 +1507,42 @@ export class VirtualComponent {
          */
         return horizontalScrollbar.offsetHeight >= 16;
     }
+}
 
-
+@Component({
+    template: `
+        <div *ngIf='exists' #container [style.width]='width' [style.height]='height'>
+            <ng-template #scrollContainer igxForTest let-rowData [igxForOf]="data"
+                [igxForScrollOrientation]="'vertical'"
+                [igxForContainerSize]='height'
+                [igxForItemSize]='itemSize'>
+                <div [style.display]="'flex'" [style.height]="rowData.height || itemSize || '50px'">
+                    <div [style.min-width]=cols[0].width>{{rowData['1']}}</div>
+                    <div [style.min-width]=cols[1].width>{{rowData['2']}}</div>
+                    <div [style.min-width]=cols[2].width>{{rowData['3']}}</div>
+                    <div [style.min-width]=cols[3].width>{{rowData['4']}}</div>
+                    <div [style.min-width]=cols[4].width>{{rowData['5']}}</div>
+                </div>
+            </ng-template>
+        </div>
+    `
+})
+export class VerticalVirtualDestroyComponent {
+    public width = '450px';
+    public height = '300px';
+    public cols = [
+        { field: '1', width: '150px' },
+        { field: '2', width: '70px' },
+        { field: '3', width: '50px' },
+        { field: '4', width: '80px' },
+        { field: '5', width: '100px' }
+    ];
+    public data = [];
+    public itemSize = '50px';
+    public exists = true;
 }
 
+
 /** Only vertically virtualized component */
 @Component({
     template: `