diff --git a/src/app/components/overlaypanel/overlaypanel.spec.ts b/src/app/components/overlaypanel/overlaypanel.spec.ts index 6b2c52c8f29..24d47f71e18 100644 --- a/src/app/components/overlaypanel/overlaypanel.spec.ts +++ b/src/app/components/overlaypanel/overlaypanel.spec.ts @@ -5,7 +5,9 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; @Component({ - template: ` + template: ` + + Galleria 1 @@ -13,96 +15,109 @@ import { Component, NO_ERRORS_SCHEMA } from '@angular/core'; ` }) class TestOverlayPanelComponent { - outSideClick(){ - - } + outSideClick() { } } describe('OverlayPanel', () => { - - let overlaypanel: OverlayPanel; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - imports: [ - NoopAnimationsModule - ], - declarations: [ - OverlayPanel, - TestOverlayPanelComponent - ], - }); - - fixture = TestBed.createComponent(TestOverlayPanelComponent); - overlaypanel = fixture.debugElement.query(By.css('p-overlayPanel')).componentInstance; - }); - - it('should change style and styleClass', () => { - overlaypanel.style = {'primeng':'rocks!'}; - overlaypanel.styleClass = "Primeng rocks!"; - const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; - buttonEl.click(); - fixture.detectChanges(); - - const containerEl = fixture.debugElement.query(By.css('div')).nativeElement; - expect(containerEl.className).toContain("Primeng rocks!"); - expect(containerEl.style.primeng).toContain('rocks!') - }); - - it('should show icon', () => { - overlaypanel.showCloseIcon = true; - const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; - buttonEl.click(); - fixture.detectChanges(); - - const closeEl = fixture.debugElement.query(By.css('a')); - expect(closeEl).toBeTruthy(); - }); - - it('should open', () => { - overlaypanel.showCloseIcon = true; - const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; - const toggleSpy = spyOn(overlaypanel, 'toggle').and.callThrough(); - buttonEl.click(); - fixture.detectChanges(); - - let overlaypanelEl = fixture.debugElement.query(By.css('div')); - expect(toggleSpy).toHaveBeenCalled(); - expect(overlaypanelEl).toBeTruthy(); - }); - - it('should close', () => { - overlaypanel.showCloseIcon = true; - const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; - const closeSpy = spyOn(overlaypanel, 'onCloseClick').and.callThrough(); - const overlaypanelEl = fixture.debugElement.query(By.css('div')); - buttonEl.click(); - fixture.detectChanges(); - - const closeEl = fixture.debugElement.query(By.css('div')).query(By.css('a')).nativeElement; - closeEl.click(); - fixture.detectChanges(); - - expect(closeSpy).toHaveBeenCalled(); - expect(overlaypanelEl).toBeFalsy(); - }); - - it('should close when outside click', () => { - overlaypanel.showCloseIcon = true; - const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; - const hide = spyOn(overlaypanel, 'hide').and.callThrough(); - const overlaypanelEl = fixture.debugElement.query(By.css('div')); - buttonEl.click(); - fixture.detectChanges(); - - const outsideEl = fixture.debugElement.query(By.css('a')).nativeElement; - outsideEl.click(); - fixture.detectChanges(); - - expect(hide).toHaveBeenCalled(); - expect(overlaypanelEl).toBeFalsy(); - }); + let overlaypanel: OverlayPanel; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + imports: [ + NoopAnimationsModule + ], + declarations: [ + OverlayPanel, + TestOverlayPanelComponent + ], + }); + + fixture = TestBed.createComponent(TestOverlayPanelComponent); + overlaypanel = fixture.debugElement.query(By.css('p-overlayPanel')).componentInstance; + }); + + it('should change style and styleClass', () => { + overlaypanel.style = { 'primeng': 'rocks!' }; + overlaypanel.styleClass = "Primeng rocks!"; + const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; + buttonEl.click(); + fixture.detectChanges(); + + const containerEl = fixture.debugElement.query(By.css('div')).nativeElement; + expect(containerEl.className).toContain("Primeng rocks!"); + expect(containerEl.style.primeng).toContain('rocks!') + }); + + it('should show icon', () => { + overlaypanel.showCloseIcon = true; + const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; + buttonEl.click(); + fixture.detectChanges(); + + const closeEl = fixture.debugElement.query(By.css('a')); + expect(closeEl).toBeTruthy(); + }); + + it('should open', () => { + overlaypanel.showCloseIcon = true; + const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; + const toggleSpy = spyOn(overlaypanel, 'toggle').and.callThrough(); + buttonEl.click(); + fixture.detectChanges(); + + let overlaypanelEl = fixture.debugElement.query(By.css('div')); + expect(toggleSpy).toHaveBeenCalled(); + expect(overlaypanelEl).toBeTruthy(); + }); + + it('should close overlay panel and open on the other button', () => { + overlaypanel.showCloseIcon = true; + const buttonEls = fixture.debugElement.queryAll(By.css('button')); + const toggleSpy = spyOn(overlaypanel, 'toggle').and.callThrough(); + buttonEls[0].nativeElement.click(); + fixture.detectChanges(); + + let overlaypanelEl = fixture.debugElement.query(By.css('div')); + expect(toggleSpy).toHaveBeenCalled(); + expect(overlaypanelEl).toBeTruthy(); + buttonEls[1].nativeElement.click(); + fixture.detectChanges(); + + expect(overlaypanelEl).toBeTruthy(); + }); + + it('should close', () => { + overlaypanel.showCloseIcon = true; + const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; + const closeSpy = spyOn(overlaypanel, 'onCloseClick').and.callThrough(); + const overlaypanelEl = fixture.debugElement.query(By.css('div')); + buttonEl.click(); + fixture.detectChanges(); + + const closeEl = fixture.debugElement.query(By.css('div')).query(By.css('a')).nativeElement; + closeEl.click(); + fixture.detectChanges(); + + expect(closeSpy).toHaveBeenCalled(); + expect(overlaypanelEl).toBeFalsy(); + }); + + it('should close when outside click', () => { + overlaypanel.showCloseIcon = true; + const buttonEl = fixture.debugElement.query(By.css('button')).nativeElement; + const hide = spyOn(overlaypanel, 'hide').and.callThrough(); + const overlaypanelEl = fixture.debugElement.query(By.css('div')); + buttonEl.click(); + fixture.detectChanges(); + + const outsideEl = fixture.debugElement.query(By.css('a')).nativeElement; + outsideEl.click(); + fixture.detectChanges(); + + expect(hide).toHaveBeenCalled(); + expect(overlaypanelEl).toBeFalsy(); + }); });