Merge pull request #15788 from dobanisola-scottlogic/fix-unit-tests

fix broken unit tests

src/app/components/button/button.spec.ts

@@ -80,6 +80,6 @@ describe('Button', () => {
     it('should have a empty label and icon', () => {
         fixture.detectChanges();
         const buttonEl = fixture.debugElement.query(By.css('.p-button'));
-        expect(buttonEl.nativeElement.className).toEqual('p-button p-component');
+        expect(buttonEl.nativeElement.className).toEqual('p-ripple p-element p-button p-component');
     });
 });

src/app/components/dom/domhandler.spec.ts

@@ -148,6 +148,8 @@ describe('DomHandler', () => {
         element.appendChild(childEl);
         element.appendChild(childEl2);
         element.appendChild(childEl3);
+        spyOn(DomHandler, 'getWindowScrollTop').and.returnValue(0);
+        spyOn(DomHandler, 'getWindowScrollLeft').and.returnValue(0);
         DomHandler.relativePosition(element.children[2], element);
         expect(childEl3.style.top).toEqual('0px');
         expect(childEl3.style.left).toEqual('0px');
@@ -196,6 +198,8 @@ describe('DomHandler', () => {
         element.appendChild(childEl);
         element.appendChild(childEl2);
         element.appendChild(childEl3);
+        spyOn(DomHandler, 'getWindowScrollTop').and.returnValue(0);
+        spyOn(DomHandler, 'getWindowScrollLeft').and.returnValue(0);
         DomHandler.absolutePosition(element.children[2], element);
         expect(childEl3.style.top).toEqual('0px');
         expect(childEl3.style.left).toEqual('0px');

src/app/components/dynamicdialog/dynamicdialog.spec.ts

@@ -12,10 +12,7 @@ import { DynamicDialogRef } from './dynamicdialog-ref';
     template: ` <h2>PrimeNG ROCKS!</h2> `
 })
 export class TestComponent {
-    constructor(
-        public ref: DynamicDialogRef,
-        public config: DynamicDialogConfig
-    ) {}
+    constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig) {}
 }
 
 @Component({
@@ -45,7 +42,6 @@ export class TestDynamicDialogWithClosableFalseComponent {
             header: 'Demo Header',
             width: '70%',
             contentStyle: { 'max-height': '350px', overflow: 'auto' },
-            closable: false,
             closeOnEscape: true,
             dismissableMask: true,
             baseZIndex: 0
@@ -54,7 +50,7 @@ export class TestDynamicDialogWithClosableFalseComponent {
 }
 @NgModule({
     imports: [CommonModule, DynamicDialogModule],
-    declarations: [TestComponent, TestDynamicDialogComponent],
+    declarations: [TestComponent, TestDynamicDialogComponent, TestDynamicDialogWithClosableFalseComponent],
     exports: [TestComponent],
     providers: [DialogService]
 })
@@ -98,7 +94,7 @@ describe('DynamicDialog', () => {
     it('should open dialog and close dialog without the closing icon enabled', fakeAsync(() => {
         let fixture: ComponentFixture<TestDynamicDialogWithClosableFalseComponent>;
         let testDynamicDialogComponent: TestDynamicDialogWithClosableFalseComponent;
-        fixture = TestBed.createComponent(TestDynamicDialogComponent);
+        fixture = TestBed.createComponent(TestDynamicDialogWithClosableFalseComponent);
         testDynamicDialogComponent = fixture.debugElement.componentInstance;
         fixture.detectChanges();
 
@@ -114,7 +110,6 @@ describe('DynamicDialog', () => {
         expect(testComponentHeader.textContent).toEqual('PrimeNG ROCKS!');
         const backdropEl = document.getElementsByClassName('p-dialog-mask')[0];
         backdropEl.dispatchEvent(new Event('mousedown'));
-        fixture.detectChanges();
         tick(700);
 
         dynamicDialogEl = document.getElementsByClassName('p-dynamic-dialog')[0];

src/app/components/fileupload/fileupload.spec.ts

@@ -90,8 +90,8 @@ describe('FileUpload', () => {
         const uploadButton = fixture.debugElement.queryAll(By.css('button'))[0];
         const cancelButton = fixture.debugElement.queryAll(By.css('button'))[1];
         const fileUploadRow = fixture.debugElement.query(By.css('.p-fileupload-row'));
-        const fileNameEl = fileUploadRow.children[1];
-        const fileSizeEl = fileUploadRow.children[2];
+        const fileNameEl = fileUploadRow.children[0];
+        const fileSizeEl = fileUploadRow.children[1];
         const removeButtonEl = fileUploadRow.query(By.css('button'));
         expect(fileUploadRow).toBeTruthy();
         expect(fileNameEl).toBeTruthy();

src/app/components/multiselect/multiselect.spec.ts

@@ -1,5 +1,5 @@
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { OverlayModule } from 'primeng/overlay';
@@ -124,23 +124,24 @@ describe('MultiSelect', () => {
         expect(onHideSpy).toHaveBeenCalled();
     });
 
-    it('should close when double click', () => {
+    it('should close when double click', fakeAsync(() => {
         fixture.detectChanges();
 
         const multiselectEl = fixture.debugElement.query(By.css('.p-multiselect')).nativeElement;
 
         const showSpy = spyOn(multiselect, 'show').and.callThrough();
         multiselectEl.dispatchEvent(new KeyboardEvent('click'));
+        tick(350);
         fixture.detectChanges();
         expect(showSpy).toHaveBeenCalled();
 
-        setTimeout(() => {
-            const onHideSpy = spyOn(multiselect, 'hide').and.callThrough();
-            multiselectEl.dispatchEvent(new KeyboardEvent('click'));
-            fixture.detectChanges();
-            expect(onHideSpy).toHaveBeenCalled();
-        }, 350);
-    });
+        const onHideSpy = spyOn(multiselect, 'hide').and.callThrough();
+        multiselectEl.dispatchEvent(new KeyboardEvent('click'));
+        tick();
+        fixture.detectChanges();
+        expect(onHideSpy).toHaveBeenCalled();
+        flush();
+    }));
 
     it('should select item', () => {
         multiselect.options = [

src/app/components/tree/tree.spec.ts

@@ -248,23 +248,26 @@ describe('Tree', () => {
     it('should expand&collapse with right and left key', () => {
         fixture.detectChanges();
 
-        const contentEls = fixture.debugElement.queryAll(By.css('.p-treenode-content'));
+        const contentEls = fixture.debugElement.queryAll(By.css('.p-treenode'));
         const treeNodes = fixture.debugElement.queryAll(By.css('p-treeNode'));
         const documentsNode = treeNodes[0].componentInstance as UITreeNode;
+        const onKeyDownSpy = spyOn(documentsNode, 'onKeyDown').and.callThrough();
+
         const firstEl = contentEls[0];
-        firstEl.triggerEventHandler('keydown', { which: 39, target: firstEl.nativeElement, preventDefault() {} });
+        firstEl.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowRight'}));
         fixture.detectChanges();
 
+        expect(onKeyDownSpy).toHaveBeenCalled();
         expect(documentsNode.node.expanded).toBeTruthy();
-        firstEl.triggerEventHandler('keydown', { which: 37, target: firstEl.nativeElement, preventDefault() {} });
+        firstEl.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowLeft'}));
         fixture.detectChanges();
 
         expect(documentsNode.node.expanded).toBeFalsy();
-        firstEl.triggerEventHandler('keydown', { which: 13, target: firstEl.nativeElement, preventDefault() {} });
+        firstEl.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter'}));
         fixture.detectChanges();
 
         expect(documentsNode.node.expanded).toBeFalsy();
-        firstEl.triggerEventHandler('keydown', { which: 12, target: firstEl.nativeElement, preventDefault() {} });
+        firstEl.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter'}));
         fixture.detectChanges();
 
         expect(documentsNode.node.expanded).toBeFalsy();

src/app/showcase/layout/app.component.spec.ts

@@ -15,8 +15,7 @@ import { AutoCompleteModule } from 'primeng/autocomplete';
 describe('AppComponent', () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule, FormsModule, BrowserAnimationsModule, AutoCompleteModule, HttpClientModule],
-            declarations: [AppComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent, AppFooterComponent],
+            imports: [AppComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent, AppFooterComponent, RouterTestingModule, FormsModule, BrowserAnimationsModule, AutoCompleteModule, HttpClientModule],
             providers: [JsonService, AppConfigService]
         }).compileComponents();
     }));