diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts index b0288608e3..c728d317b0 100644 --- a/src/tooltip/tooltip.spec.ts +++ b/src/tooltip/tooltip.spec.ts @@ -3,12 +3,13 @@ import {createGenericTestComponent, createKeyEvent, triggerEvent} from '../test/ import {By} from '@angular/platform-browser'; import { - Component, - ViewChild, + AfterViewInit, ChangeDetectionStrategy, + ChangeDetectorRef, + Component, TemplateRef, - ViewContainerRef, - AfterViewInit + ViewChild, + ViewContainerRef } from '@angular/core'; import {Key} from '../util/key'; @@ -60,6 +61,78 @@ describe('ngb-tooltip-window', () => { expect(fixture.nativeElement).toHaveCssClass('my-custom-class'); }); + it('should allow to change custom class to new one', () => { + const fixture = TestBed.createComponent(NgbTooltipWindow); + fixture.componentInstance.tooltipClass = 'first-custom-class'; + fixture.detectChanges(); + fixture.componentInstance.tooltipClass = 'second-custom-class'; + fixture.detectChanges(); + fixture.componentInstance.tooltipClass = 'third-custom-class'; + fixture.detectChanges(); + + expect(fixture.nativeElement).toHaveCssClass('third-custom-class'); + }); + + describe('ngb-tooltip-window tooltipClass change detection', () => { + + const mockChangeDetectorRef: ChangeDetectorRef = { + markForCheck: () => {}, + detach: () => {}, + detectChanges: () => {}, + checkNoChanges: () => {}, + reattach: () => {}, + }; + + it('should not call change detection on firt run', () => { + const componentInstance = new NgbTooltipWindow(mockChangeDetectorRef); + spyOn(mockChangeDetectorRef, 'markForCheck'); + + componentInstance.ngOnChanges({ + 'tooltipClass': { + firstChange: true, + isFirstChange: () => true, + previousValue: undefined, + currentValue: undefined, + } + }); + + expect(mockChangeDetectorRef.markForCheck).not.toHaveBeenCalled(); + }); + + it('should call change detection on subsequent run', () => { + const componentInstance = new NgbTooltipWindow(mockChangeDetectorRef); + spyOn(mockChangeDetectorRef, 'markForCheck'); + + componentInstance.ngOnChanges({ + 'tooltipClass': { + firstChange: false, + isFirstChange: () => false, + previousValue: undefined, + currentValue: undefined, + } + }); + + expect(mockChangeDetectorRef.markForCheck).toHaveBeenCalled(); + }); + + it('should not call change detection on other property change', () => { + const componentInstance = new NgbTooltipWindow(mockChangeDetectorRef); + spyOn(mockChangeDetectorRef, 'markForCheck'); + + componentInstance.ngOnChanges({ + 'someOtherProperty': { + firstChange: false, + isFirstChange: () => false, + previousValue: undefined, + currentValue: undefined, + } + }); + + expect(mockChangeDetectorRef.markForCheck).not.toHaveBeenCalled(); + }); + + }); + }); describe('ngb-tooltip', () => { diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts index 093d6af663..56c1e0998b 100644 --- a/src/tooltip/tooltip.ts +++ b/src/tooltip/tooltip.ts @@ -18,7 +18,9 @@ import { NgZone, ViewEncapsulation, ChangeDetectorRef, - ApplicationRef + ApplicationRef, + OnChanges, + SimpleChanges } from '@angular/core'; import {DOCUMENT} from '@angular/common'; @@ -39,16 +41,25 @@ let nextId = 0; template: `