chore(*): fixing leaking tests because of component ids

Author: kdinev

angular.json

@@ -191,6 +191,14 @@
               "zone.js/testing",
               "hammerjs"
             ],
+            "styles": [
+              "src/styles/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            },
             "tsConfig": "projects/igniteui-angular/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular/karma.conf.js"
           }

projects/igniteui-angular/karma.conf.js

@@ -9,9 +9,7 @@ module.exports = function (config) {
     frameworks: ['parallel', 'jasmine', '@angular-devkit/build-angular'],
     files: [
       { pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
-      { pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
-      { pattern: './test.css', watched: false },
-      { pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
+      { pattern: '../../node_modules/hammer-simulator/index.js', watched: false }
     ],
     plugins: [
       'karma-parallel',

projects/igniteui-angular/karma.watch.conf.js

@@ -7,9 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     files: [
       { pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
-      { pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
-      { pattern: './test.css', watched: false },
-      { pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
+      { pattern: '../../node_modules/hammer-simulator/index.js', watched: false }
     ],
     plugins: [
         'karma-jasmine',

projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts

@@ -196,6 +196,8 @@ describe('IgxCheckbox', () => {
         const fixture = TestBed.createComponent(IgxCheckboxComponent);
 
         const checkboxInstance = fixture.componentInstance;
+        // For test fixture destroy
+        checkboxInstance.id = "root1";
         checkboxInstance.disabled = true;
         const nativeCheckbox = checkboxInstance.nativeInput.nativeElement as HTMLInputElement;
         const nativeLabel = checkboxInstance.nativeLabel.nativeElement as HTMLLabelElement;

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -140,6 +140,8 @@ describe('IgxChip', () => {
         it('should change chip variant', () => {
             const fixture = TestBed.createComponent(IgxChipComponent);
             const igxChip = fixture.componentInstance;
+            // For test fixture destroy
+            igxChip.id = "root1";
 
             igxChip.variant = 'danger';
 
@@ -368,6 +370,7 @@ describe('IgxChip', () => {
 
             expect(secondChipComp.selectedChanging.emit).not.toHaveBeenCalled();
             expect(secondChipComp.selectedChanged.emit).not.toHaveBeenCalled();
+            console.log('id', secondChipComp.id);
         });
     });
 

projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts

@@ -20,6 +20,8 @@ describe('IgxCircularProgressBarComponent', () => {
 
         fixture = TestBed.createComponent(IgxCircularProgressBarComponent);
         progress = fixture.componentInstance;
+        // For test fixture destroy
+        progress.id = "root1";
         fixture.detectChanges();
         circularBar = fixture.debugElement.nativeElement;
     });
@@ -38,6 +40,8 @@ describe('IgxCircularProgressBarComponent', () => {
         fixture.detectChanges();
 
         expect(progress.id).toBe(customId);
+        // For test fixture destroy
+        progress.id = "root1";
     });
 
     it('should correctly toggle the indeterminate mode', () => {

projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts

@@ -16,6 +16,8 @@ describe('IgxLinearProgressBarComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(IgxLinearProgressBarComponent);
         progress = fixture.componentInstance;
+        // For test fixture destroy
+        progress.id = "root1";
         fixture.detectChanges();
         linearBar = fixture.debugElement.nativeElement;
     });
@@ -138,6 +140,8 @@ describe('IgxLinearProgressBarComponent', () => {
 
         expect(progress.id).toBe(customId);
         expect(linearBar.id).toBe(customId);
+        // For test fixture destroy
+        progress.id = "root1";
     });
 
     it('should apply type-specific classes correctly', () => {

projects/igniteui-angular/src/lib/switch/switch.component.spec.ts

@@ -154,6 +154,7 @@ describe('IgxSwitch', () => {
     it('Disabled state', () => {
         const fixture = TestBed.createComponent(IgxSwitchComponent);
         const switchInstance = fixture.componentInstance;
+        switchInstance.id = "root1";
         switchInstance.disabled = true;
         const nativeCheckbox = switchInstance.nativeInput.nativeElement as HTMLInputElement;
         const nativeLabel = switchInstance.nativeLabel.nativeElement;

projects/igniteui-angular/src/lib/toast/toast.component.spec.ts

@@ -37,6 +37,8 @@ describe('IgxToast', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(IgxToastComponent);
         toast = fixture.componentInstance;
+        // For test fixture destroy
+        toast.id = "root1";
         fixture.detectChanges();
     });
 
@@ -49,6 +51,8 @@ describe('IgxToast', () => {
 
         expect(toast.id).toBe('customToast');
         expect(toast.element.id).toContain('customToast');
+        // For test fixture destroy
+        toast.id = "root1";
     });
 
     it('should properly toggle and emit isVisibleChange', fakeAsync(() => {