From 5e54a2521c01f6347f0c02de9656757eef6e42cc Mon Sep 17 00:00:00 2001 From: Deborah Date: Tue, 30 Apr 2024 17:57:14 +0100 Subject: [PATCH 1/2] fix unit test for menubar and progressbar component --- src/app/components/menubar/menubar.spec.ts | 72 ++++--------------- src/app/components/picklist/picklist.spec.ts | 5 +- .../progressbar/progressbar.spec.ts | 4 +- 3 files changed, 20 insertions(+), 61 deletions(-) diff --git a/src/app/components/menubar/menubar.spec.ts b/src/app/components/menubar/menubar.spec.ts index 9e906633579..04c21cdd6ce 100755 --- a/src/app/components/menubar/menubar.spec.ts +++ b/src/app/components/menubar/menubar.spec.ts @@ -1,16 +1,16 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; -import { RouterTestingModule } from '@angular/router/testing'; import { Menubar, MenubarModule, MenubarService, MenubarSub } from './menubar'; +import { RouterModule } from '@angular/router'; -describe('Menubar', () => { +fdescribe('Menubar', () => { let menubar: Menubar; let fixture: ComponentFixture; beforeEach(() => { TestBed.configureTestingModule({ - imports: [NoopAnimationsModule, RouterTestingModule.withRoutes([{ path: 'test', component: Menubar }]), MenubarModule], + imports: [NoopAnimationsModule, RouterModule.forRoot([{ path: 'test', component: Menubar }]), MenubarModule], providers: [MenubarService] }); @@ -45,7 +45,7 @@ describe('Menubar', () => { const subMenu = fixture.debugElement.query(By.css('.p-menubar-root-list')).componentInstance as MenubarSub; expect(subMenu.baseZIndex).toEqual(20); expect(subMenu.autoZIndex).toEqual(false); - expect(subMenu.autoDisplay).toBeUndefined(); + expect(subMenu.autoDisplay).toBeDefined(); expect(subMenu.autoDisplay).toEqual(menubar.autoDisplay); expect(subMenu.autoZIndex).toEqual(menubar.autoZIndex); expect(subMenu.baseZIndex).toEqual(menubar.baseZIndex); @@ -121,53 +121,11 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; - firstParentEl.nativeElement.dispatchEvent(new Event('click')); - fixture.detectChanges(); - - expect(firstParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(true); - expect(secondParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(false); - }); - - it('should call itemClick', () => { - menubar.model = [ - { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus' - }, - { label: 'Open' }, - { separator: true }, - { label: 'Quit' } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { label: 'Delete', icon: 'pi pi-fw pi-trash' }, - { label: 'Refresh', icon: 'pi pi-fw pi-refresh' } - ] - } - ]; - fixture.detectChanges(); - - const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); - const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; - firstParentEl.nativeElement.dispatchEvent(new Event('click')); - fixture.detectChanges(); - - const firstSubmenuList = fixture.debugElement.query(By.css('.p-submenu-list')); - const firstSubItem = firstSubmenuList.query(By.css('.p-menuitem-link')); - firstSubItem.nativeElement.click(); + firstParentEl.nativeElement.click(); fixture.detectChanges(); - expect(firstParentEl.componentInstance.activeItem).toEqual(null); - expect(secondParentEl.componentInstance.activeItem).toEqual(null); - expect(firstParentEl.parent.nativeElement.className).not.toContain('p-menuitem-active'); + expect(firstParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(true); + expect(secondParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(false); }); it('should call onItemMouseEnter and not show firstParentMenu', () => { @@ -241,11 +199,11 @@ describe('Menubar', () => { firstParentEl.nativeElement.dispatchEvent(new Event('mouseleave')); tick(300); fixture.detectChanges(); - expect(firstParentEl.parent.nativeElement.classList.contains('p-menuitem-active')).toBe(true); + expect(firstParentEl?.parent?.parent?.nativeElement.classList.contains('p-menuitem-active')).toBe(true); flush(); })); - it('should call itemClick and bindEventListener', () => { + it('should call itemClick', () => { menubar.model = [ { label: 'File', @@ -273,7 +231,7 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - const bindEventListenerSpy = spyOn(firstParentEl.componentInstance, 'bindDocumentClickListener').and.callThrough(); + const secondParentEl = parentEl.queryAll(By.css('.p-menuitem-link'))[1]; firstParentEl.nativeElement.click(); fixture.detectChanges(); @@ -282,8 +240,9 @@ describe('Menubar', () => { firstSubItem.nativeElement.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - expect(bindEventListenerSpy).toHaveBeenCalled(); - expect(firstParentEl.parent.nativeElement.className).toContain('p-menuitem-active'); + expect(firstParentEl?.parent?.parent?.nativeElement.className).toContain('p-menuitem-active'); + expect(secondParentEl?.parent?.parent?.nativeElement.className).not.toContain('p-menuitem-active'); + }); it('should show router items', () => { @@ -315,10 +274,9 @@ describe('Menubar', () => { const parentEl = fixture.debugElement.query(By.css('.p-menubar-root-list')); const firstParentEl = parentEl.query(By.css('.p-menuitem-link')); - firstParentEl.nativeElement.dispatchEvent(new Event('click')); + firstParentEl.nativeElement.click(); fixture.detectChanges(); - - expect(firstParentEl.componentInstance.activeItem.label).toEqual(firstParentEl.nativeElement.textContent); + expect(firstParentEl?.componentInstance.activeItemPath[0].item.label).toEqual(firstParentEl.nativeElement.textContent); }); it('should call itemClick', () => { diff --git a/src/app/components/picklist/picklist.spec.ts b/src/app/components/picklist/picklist.spec.ts index 4db1f5c6d8e..e2109887883 100755 --- a/src/app/components/picklist/picklist.spec.ts +++ b/src/app/components/picklist/picklist.spec.ts @@ -1,6 +1,6 @@ import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { PickListModule, PickList } from 'primeng/picklist'; +import { PickListModule, PickList } from './picklist'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, EventEmitter } from '@angular/core'; @@ -106,6 +106,7 @@ describe('PickList', () => { fixture.detectChanges(); const sourceListItems = fixture.debugElement.query(By.css('.p-picklist-source-wrapper')).queryAll(By.css('.p-picklist-item')); + //expect(picklist.visibleOptionsSource).toBeDefined(); expect(picklist.visibleOptionsSource.length).toEqual(2); expect(picklist.visibleOptionsSource[0].brand).toEqual('VW'); expect(picklist.visibleOptionsSource[1].brand).toEqual('Volvo'); @@ -250,7 +251,7 @@ describe('PickList', () => { let event = { ctrlKey: true }; let callback = new EventEmitter(); - picklist.onItemClick(event, picklist.source[0], picklist.selectedItemsSource, callback); + picklist.onItemClick(event, picklist.source, picklist.selectedItemsSource, picklist.SOURCE_LIST, callback); fixture.detectChanges(); picklist.cd.detectChanges(); diff --git a/src/app/components/progressbar/progressbar.spec.ts b/src/app/components/progressbar/progressbar.spec.ts index f676069b478..c9c6dc9823a 100755 --- a/src/app/components/progressbar/progressbar.spec.ts +++ b/src/app/components/progressbar/progressbar.spec.ts @@ -27,7 +27,7 @@ describe('ProgressBar', () => { expect(progressbarLabelEl.textContent).toEqual('50%'); }); - it('should not show value', () => { + it('should not show value when showValue is set to false', () => { progressbar.value = 50; progressbar.showValue = false; fixture.detectChanges(); @@ -35,7 +35,7 @@ describe('ProgressBar', () => { const progressbarValueEl = fixture.debugElement.query(By.css('.p-progressbar-value')).nativeElement; const progressbarLabelEl = fixture.debugElement.query(By.css('.p-progressbar-label')); expect(progressbarValueEl.style.width).toEqual('50%'); - expect(progressbarLabelEl).toBeFalsy(); + expect(progressbarLabelEl.children.length).toBe(0); }); it('should change style and styleClass', () => { From 66b21a612061f4948dd1eb98ed0dfb46865e472f Mon Sep 17 00:00:00 2001 From: Deborah Date: Thu, 2 May 2024 09:43:51 +0100 Subject: [PATCH 2/2] fix checkbox and menubar tests --- src/app/components/checkbox/checkbox.spec.ts | 4 ++-- src/app/components/menubar/menubar.spec.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/checkbox/checkbox.spec.ts b/src/app/components/checkbox/checkbox.spec.ts index 8e63ad2f64b..76a8770d86e 100755 --- a/src/app/components/checkbox/checkbox.spec.ts +++ b/src/app/components/checkbox/checkbox.spec.ts @@ -123,8 +123,8 @@ describe('Checkbox', () => { const input = fixture.nativeElement.querySelector('input'); const boxEl = fixture.nativeElement.querySelector('.p-checkbox-box'); const labelEl = fixture.nativeElement.querySelector('.p-checkbox-label'); - const onBlurSpy = spyOn(checkbox, 'onBlur').and.callThrough(); - const onFocusSpy = spyOn(checkbox, 'onFocus').and.callThrough(); + const onBlurSpy = spyOn(checkbox, 'onInputBlur').and.callThrough(); + const onFocusSpy = spyOn(checkbox, 'onInputFocus').and.callThrough(); input.dispatchEvent(new Event('focus')); fixture.detectChanges(); diff --git a/src/app/components/menubar/menubar.spec.ts b/src/app/components/menubar/menubar.spec.ts index 04c21cdd6ce..46c55e6d05c 100755 --- a/src/app/components/menubar/menubar.spec.ts +++ b/src/app/components/menubar/menubar.spec.ts @@ -4,7 +4,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Menubar, MenubarModule, MenubarService, MenubarSub } from './menubar'; import { RouterModule } from '@angular/router'; -fdescribe('Menubar', () => { +describe('Menubar', () => { let menubar: Menubar; let fixture: ComponentFixture;