From 202d098a0cac92d02482add8d8ad604a15e89265 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 16:32:42 +0300 Subject: [PATCH 01/18] refactor(popover): change access modifiers to protected Makes it easier to extend --- src/framework/theme/components/popover/popover.directive.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index 5c9b21b27b..6cac1032be 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -146,10 +146,10 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges @Input('nbPopoverTrigger') trigger: NbTrigger = NbTrigger.CLICK; - private dynamicOverlay: NbDynamicOverlay; + protected dynamicOverlay: NbDynamicOverlay; - constructor(private hostRef: ElementRef, - private dynamicOverlayHandler: NbDynamicOverlayHandler) { + constructor(protected hostRef: ElementRef, + protected dynamicOverlayHandler: NbDynamicOverlayHandler) { } ngOnInit() { From a7c2368ef09e398390915ffb877341406a0db279 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 16:36:18 +0300 Subject: [PATCH 02/18] feat(popover): add offset input --- .../theme/components/popover/popover.directive.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index 6cac1032be..3f7845632f 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -146,6 +146,12 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges @Input('nbPopoverTrigger') trigger: NbTrigger = NbTrigger.CLICK; + /** + * Sets popover offset + * */ + @Input('nbPopoverOffset') + offset = 15; + protected dynamicOverlay: NbDynamicOverlay; constructor(protected hostRef: ElementRef, @@ -192,6 +198,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges return this.dynamicOverlayHandler .position(this.position) .trigger(this.trigger) + .offset(this.offset) .adjustment(this.adjustment) .content(this.content) .context(this.context); From ad56094aba326f64146f5018f329333d1cbb4e26 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 17:04:47 +0300 Subject: [PATCH 03/18] feat(popover): add shown state api --- .../cdk/overlay/dynamic/dynamic-overlay.ts | 15 +++++++++-- .../components/popover/popover.directive.ts | 25 ++++++++++++++++++- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts index 0b9ed44462..8ae8e199db 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts @@ -1,6 +1,6 @@ import { ComponentFactoryResolver, ComponentRef, Injectable, NgZone, Type } from '@angular/core'; -import { filter, takeUntil, takeWhile } from 'rxjs/operators'; -import { Subject } from 'rxjs'; +import { filter, takeUntil, takeWhile, distinctUntilChanged } from 'rxjs/operators'; +import { Subject, BehaviorSubject, Observable } from 'rxjs'; import { NbAdjustableConnectedPositionStrategy, @@ -29,12 +29,17 @@ export class NbDynamicOverlay { protected positionStrategy: NbAdjustableConnectedPositionStrategy; protected positionStrategyChange$ = new Subject(); + protected isShown$ = new BehaviorSubject(false); protected alive = true; get isAttached(): boolean { return this.ref && this.ref.hasAttached(); } + get isShown(): Observable { + return this.isShown$.pipe(distinctUntilChanged()); + } + constructor( protected overlay: NbOverlayService, protected componentFactoryResolver: ComponentFactoryResolver, @@ -120,6 +125,8 @@ export class NbDynamicOverlay { this.disposeOverlayRef(); return this.show(); } + + this.isShown$.next(true); } hide() { @@ -129,6 +136,8 @@ export class NbDynamicOverlay { this.ref.detach(); this.container = null; + + this.isShown$.next(false); } toggle() { @@ -143,6 +152,8 @@ export class NbDynamicOverlay { this.alive = false; this.hide(); this.disposeOverlayRef(); + this.isShown$.complete(); + this.positionStrategyChange$.complete(); } getContainer() { diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index 3f7845632f..e361ee3c94 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -10,7 +10,10 @@ import { ElementRef, Input, OnChanges, - OnDestroy, OnInit, + OnDestroy, + OnInit, + Output, + EventEmitter, } from '@angular/core'; import { NbDynamicOverlay, NbDynamicOverlayController } from '../cdk/overlay/dynamic/dynamic-overlay'; @@ -19,6 +22,8 @@ import { NbAdjustment, NbPosition } from '../cdk/overlay/overlay-position'; import { NbOverlayContent } from '../cdk/overlay/overlay-service'; import { NbTrigger } from '../cdk/overlay/overlay-trigger'; import { NbPopoverComponent } from './popover.component'; +import { takeUntil, skip } from 'rxjs/operators'; +import { Subject } from 'rxjs'; /** @@ -107,6 +112,7 @@ import { NbPopoverComponent } from './popover.component'; * */ @Directive({ selector: '[nbPopover]', + exportAs: 'nbPopover', providers: [NbDynamicOverlayHandler, NbDynamicOverlay], }) export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit { @@ -152,7 +158,15 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges @Input('nbPopoverOffset') offset = 15; + @Output() + nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>(); + + get isShown(): boolean { + return !!(this.dynamicOverlay && this.dynamicOverlay.isAttached); + } + protected dynamicOverlay: NbDynamicOverlay; + protected destroy$ = new Subject(); constructor(protected hostRef: ElementRef, protected dynamicOverlayHandler: NbDynamicOverlayHandler) { @@ -171,6 +185,13 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges ngAfterViewInit() { this.dynamicOverlay = this.configureDynamicOverlay() .build(); + + this.dynamicOverlay.isShown + .pipe( + skip(1), + takeUntil(this.destroy$), + ) + .subscribe((isShown: boolean) => this.nbPopoverShowStateChange.emit({ isShown })); } rebuild() { @@ -192,6 +213,8 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges ngOnDestroy() { this.dynamicOverlayHandler.destroy(); + this.destroy$.next(); + this.destroy$.complete(); } protected configureDynamicOverlay() { From 9cc4bf049fed55184df362571e6679222c7835f5 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 17:45:19 +0300 Subject: [PATCH 04/18] test(popover): check isShown and show state change event --- .../theme/components/popover/popover.spec.ts | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts index b0f26a12ac..ba737d7e92 100644 --- a/src/framework/theme/components/popover/popover.spec.ts +++ b/src/framework/theme/components/popover/popover.spec.ts @@ -12,6 +12,7 @@ import { NbTrigger } from '../cdk/overlay/overlay-trigger'; import { NbPopoverDirective } from './popover.directive'; import { NbPopoverComponent } from './popover.component'; import { NbPopoverModule } from './popover.module'; +import createSpy = jasmine.createSpy; @Component({ selector: 'nb-popover-component-content-test', @@ -246,6 +247,56 @@ describe('Directive: NbPopoverDirective', () => { expect(templatePopover.textContent).toContain('hello world'); }); + it('should emit show state change event when shows up', () => { + fixture = TestBed.createComponent(NbPopoverDefaultTestComponent); + fixture.detectChanges(); + const popover: NbPopoverDirective = fixture.componentInstance.popover; + + const stateChangeSpy = createSpy('stateChangeSpy'); + popover.nbPopoverShowStateChange.subscribe(stateChangeSpy); + + popover.show(); + fixture.detectChanges(); + + expect(stateChangeSpy).toHaveBeenCalledTimes(1); + expect(stateChangeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ isShown: true })); + }); + + it('should emit show state change event when hides', () => { + fixture = TestBed.createComponent(NbPopoverDefaultTestComponent); + fixture.detectChanges(); + const popover: NbPopoverDirective = fixture.componentInstance.popover; + popover.show(); + fixture.detectChanges(); + + const stateChangeSpy = createSpy('stateChangeSpy'); + popover.nbPopoverShowStateChange.subscribe(stateChangeSpy); + + popover.hide(); + fixture.detectChanges(); + + expect(stateChangeSpy).toHaveBeenCalledTimes(1); + expect(stateChangeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ isShown: false })); + }); + + it('should set isShown to false when hidden', () => { + fixture = TestBed.createComponent(NbPopoverDefaultTestComponent); + fixture.detectChanges(); + const popover: NbPopoverDirective = fixture.componentInstance.popover; + + expect(popover.isShown).toEqual(false); + }); + + it('should set isShown to true when shown', () => { + fixture = TestBed.createComponent(NbPopoverDefaultTestComponent); + fixture.detectChanges(); + const popover: NbPopoverDirective = fixture.componentInstance.popover; + popover.show(); + fixture.detectChanges(); + + expect(popover.isShown).toEqual(true);; + }); + }); describe('mocked services', () => { From 19545477e00a5442408551b8da20085dfca9c3b6 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 18:05:11 +0300 Subject: [PATCH 05/18] refactor(popover): extract popover component type into property --- src/framework/theme/components/popover/popover.directive.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index e361ee3c94..a1ed4358ef 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -117,6 +117,8 @@ import { Subject } from 'rxjs'; }) export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit { + protected popoverComponent = NbPopoverComponent; + /** * Popover content which will be rendered in NbArrowedOverlayContainerComponent. * Available content: template ref, component and any primitive. @@ -175,7 +177,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges ngOnInit() { this.dynamicOverlayHandler .host(this.hostRef) - .componentType(NbPopoverComponent); + .componentType(this.popoverComponent); } ngOnChanges() { From 1e39695f9a3a663c94d1fe65fd8cd4b3e3099af7 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 18:07:36 +0300 Subject: [PATCH 06/18] style: remove unnecessary semicolon --- src/framework/theme/components/popover/popover.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts index ba737d7e92..d5e850ac61 100644 --- a/src/framework/theme/components/popover/popover.spec.ts +++ b/src/framework/theme/components/popover/popover.spec.ts @@ -294,7 +294,7 @@ describe('Directive: NbPopoverDirective', () => { popover.show(); fixture.detectChanges(); - expect(popover.isShown).toEqual(true);; + expect(popover.isShown).toEqual(true); }); }); From 37d43308b8c298b9e5802852d3199c4d13436792 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 18:21:05 +0300 Subject: [PATCH 07/18] style: move class fields declarations above --- src/framework/theme/components/popover/popover.directive.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index a1ed4358ef..f66d3e82b9 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -118,6 +118,8 @@ import { Subject } from 'rxjs'; export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges, AfterViewInit, OnDestroy, OnInit { protected popoverComponent = NbPopoverComponent; + protected dynamicOverlay: NbDynamicOverlay; + protected destroy$ = new Subject(); /** * Popover content which will be rendered in NbArrowedOverlayContainerComponent. @@ -167,9 +169,6 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges return !!(this.dynamicOverlay && this.dynamicOverlay.isAttached); } - protected dynamicOverlay: NbDynamicOverlay; - protected destroy$ = new Subject(); - constructor(protected hostRef: ElementRef, protected dynamicOverlayHandler: NbDynamicOverlayHandler) { } From 6a2a081e432351722e2497c213cff2795e938c56 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 4 Oct 2019 19:36:13 +0300 Subject: [PATCH 08/18] test(popover): add missing fields to mocks --- src/framework/theme/components/popover/popover.spec.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts index d5e850ac61..136c6a1ccd 100644 --- a/src/framework/theme/components/popover/popover.spec.ts +++ b/src/framework/theme/components/popover/popover.spec.ts @@ -13,6 +13,7 @@ import { NbPopoverDirective } from './popover.directive'; import { NbPopoverComponent } from './popover.component'; import { NbPopoverModule } from './popover.module'; import createSpy = jasmine.createSpy; +import { Subject } from 'rxjs'; @Component({ selector: 'nb-popover-component-content-test', @@ -83,11 +84,13 @@ export class NbPopoverInstanceTestComponent { @ViewChild(TemplateRef, { static: false }) template: TemplateRef; } +const dynamicOverlayIsShow$ = new Subject(); const dynamicOverlay = { show() {}, hide() {}, toggle() {}, destroy() {}, + isShown: dynamicOverlayIsShow$, }; export class NbDynamicOverlayHandlerMock { @@ -98,6 +101,7 @@ export class NbDynamicOverlayHandlerMock { _trigger: NbTrigger = NbTrigger.NOOP; _position: NbPosition = NbPosition.TOP; _adjustment: NbAdjustment = NbAdjustment.NOOP; + _offset = 15; constructor() { } @@ -117,6 +121,11 @@ export class NbDynamicOverlayHandlerMock { return this; } + offset(offset: number) { + this._offset = offset; + return this; + } + adjustment(adjustment: NbAdjustment) { this._adjustment = adjustment; return this; From d7ff327bdc99de0d757c2cabb2bdb86574f63e22 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 10:52:14 +0300 Subject: [PATCH 09/18] refactor(tooltip): change properties access modifier Simplifies class extension --- .../components/tooltip/tooltip.directive.ts | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts index 63281a1807..063696be3b 100644 --- a/src/framework/theme/components/tooltip/tooltip.directive.ts +++ b/src/framework/theme/components/tooltip/tooltip.directive.ts @@ -4,7 +4,15 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; +import { + AfterViewInit, + Directive, + ElementRef, + Input, + OnChanges, + OnDestroy, + OnInit, +} from '@angular/core'; import { NbComponentStatus } from '../component-status'; import { NbAdjustment, NbPosition } from '../cdk/overlay/overlay-position'; @@ -60,8 +68,11 @@ import { NbIconConfig } from '../icon/icon.component'; }) export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy { - context: Object = {}; + protected tooltipComponent = NbTooltipComponent; + protected dynamicOverlay: NbDynamicOverlay; + protected offset = 8; + context: Object = {}; /** * Tooltip message */ @@ -106,17 +117,15 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD @Input('nbTooltipTrigger') trigger: NbTrigger = NbTrigger.HINT; - private dynamicOverlay: NbDynamicOverlay; - - constructor(private hostRef: ElementRef, - private dynamicOverlayHandler: NbDynamicOverlayHandler) { + constructor(protected hostRef: ElementRef, + protected dynamicOverlayHandler: NbDynamicOverlayHandler) { } ngOnInit() { this.dynamicOverlayHandler .host(this.hostRef) - .componentType(NbTooltipComponent) - .offset(8); + .componentType(this.tooltipComponent) + .offset(this.offset); } ngOnChanges() { From 005ff4e31f1e1ce1fb14564c9b91dbd7cf02657f Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 11:09:48 +0300 Subject: [PATCH 10/18] feat(tooltip): shown property and event --- .../components/tooltip/tooltip.directive.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts index 063696be3b..1dfcb531b2 100644 --- a/src/framework/theme/components/tooltip/tooltip.directive.ts +++ b/src/framework/theme/components/tooltip/tooltip.directive.ts @@ -12,7 +12,11 @@ import { OnChanges, OnDestroy, OnInit, + Output, + EventEmitter, } from '@angular/core'; +import { skip, takeUntil } from 'rxjs/operators'; +import { Subject } from 'rxjs'; import { NbComponentStatus } from '../component-status'; import { NbAdjustment, NbPosition } from '../cdk/overlay/overlay-position'; @@ -64,10 +68,12 @@ import { NbIconConfig } from '../icon/icon.component'; */ @Directive({ selector: '[nbTooltip]', + exportAs: 'nbTooltip', providers: [NbDynamicOverlayHandler, NbDynamicOverlay], }) export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy { + protected destroy$ = new Subject(); protected tooltipComponent = NbTooltipComponent; protected dynamicOverlay: NbDynamicOverlay; protected offset = 8; @@ -117,6 +123,13 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD @Input('nbTooltipTrigger') trigger: NbTrigger = NbTrigger.HINT; + @Output() + nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>(); + + get isShown(): boolean { + return !!(this.dynamicOverlay && this.dynamicOverlay.isAttached); + } + constructor(protected hostRef: ElementRef, protected dynamicOverlayHandler: NbDynamicOverlayHandler) { } @@ -135,6 +148,13 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD ngAfterViewInit() { this.dynamicOverlay = this.configureDynamicOverlay() .build(); + + this.dynamicOverlay.isShown + .pipe( + skip(1), + takeUntil(this.destroy$), + ) + .subscribe((isShown: boolean) => this.nbPopoverShowStateChange.emit({ isShown })); } rebuild() { @@ -156,6 +176,8 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD ngOnDestroy() { this.dynamicOverlayHandler.destroy(); + this.destroy$.next(); + this.destroy$.complete(); } protected configureDynamicOverlay() { From 67f21ad9bdf347255d0fbf3df5a8945c2ef45e5c Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 11:20:34 +0300 Subject: [PATCH 11/18] test(tooltip): check isShown property and show state output --- .../theme/components/tooltip/tooltip.spec.ts | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts index 16ab92aec0..198d230c45 100644 --- a/src/framework/theme/components/tooltip/tooltip.spec.ts +++ b/src/framework/theme/components/tooltip/tooltip.spec.ts @@ -14,6 +14,8 @@ import { NbTooltipDirective } from './tooltip.directive'; import { NbTooltipModule } from './tooltip.module'; import { NbTooltipComponent } from './tooltip.component'; import { NbIconLibraries } from '../icon/icon-libraries'; +import { Subject } from 'rxjs'; +import createSpy = jasmine.createSpy; @Component({ selector: 'nb-tooltip-default-test', @@ -74,11 +76,13 @@ export class NbTooltipInstanceTestComponent { @ViewChild('button', { static: false }) button: ElementRef; } +const dynamicOverlayIsShow$ = new Subject(); const dynamicOverlay = { show() {}, hide() {}, toggle() {}, destroy() {}, + isShown: dynamicOverlayIsShow$, }; export class NbDynamicOverlayHandlerMock { @@ -260,6 +264,56 @@ describe('Directive: NbTooltipDirective', () => { expect(iconContainer.className).toContain('status-danger'); }); + it('should emit show state change event when shows up', () => { + fixture = TestBed.createComponent(NbTooltipDefaultTestComponent); + fixture.detectChanges(); + const tooltip: NbTooltipDirective = fixture.componentInstance.tooltip; + + const stateChangeSpy = createSpy('stateChangeSpy'); + tooltip.nbPopoverShowStateChange.subscribe(stateChangeSpy); + + tooltip.show(); + fixture.detectChanges(); + + expect(stateChangeSpy).toHaveBeenCalledTimes(1); + expect(stateChangeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ isShown: true })); + }); + + it('should emit show state change event when hides', () => { + fixture = TestBed.createComponent(NbTooltipDefaultTestComponent); + fixture.detectChanges(); + const tooltip: NbTooltipDirective = fixture.componentInstance.tooltip; + tooltip.show(); + fixture.detectChanges(); + + const stateChangeSpy = createSpy('stateChangeSpy'); + tooltip.nbPopoverShowStateChange.subscribe(stateChangeSpy); + + tooltip.hide(); + fixture.detectChanges(); + + expect(stateChangeSpy).toHaveBeenCalledTimes(1); + expect(stateChangeSpy).toHaveBeenCalledWith(jasmine.objectContaining({ isShown: false })); + }); + + it('should set isShown to false when hidden', () => { + fixture = TestBed.createComponent(NbTooltipDefaultTestComponent); + fixture.detectChanges(); + const tooltip: NbTooltipDirective = fixture.componentInstance.tooltip; + + expect(tooltip.isShown).toEqual(false); + }); + + it('should set isShown to true when shown', () => { + fixture = TestBed.createComponent(NbTooltipDefaultTestComponent); + fixture.detectChanges(); + const tooltip: NbTooltipDirective = fixture.componentInstance.tooltip; + tooltip.show(); + fixture.detectChanges(); + + expect(tooltip.isShown).toEqual(true); + }); + }); describe('mocked services', () => { From ae283e9b48a3169a66444b429cf2ac5cfc2ea07a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 12:23:33 +0300 Subject: [PATCH 12/18] fix: don't kill service when component changes Calling dispose marks service as dead which in turn completes streams, etc. so overlay won't fully work when we call show. To update component we just need to recreate overlay ref. --- .../components/cdk/overlay/dynamic/dynamic-overlay.spec.ts | 5 ----- .../components/cdk/overlay/dynamic/dynamic-overlay.ts | 7 +++---- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts index b0058a5889..11f1912927 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts @@ -319,14 +319,12 @@ describe('dynamic-overlay', () => { }); it('should set component', () => { - const detachSpy = spyOn(ref, 'detach').and.callThrough(); const disposeSpy = spyOn(ref, 'dispose').and.callThrough(); const attachSpy = spyOn(ref, 'attach').and.callThrough(); const hasAttacheSpy = spyOn(ref, 'hasAttached'); dynamicOverlay.setComponent(NbDynamicOverlayMock2Component); - expect(detachSpy).toHaveBeenCalledTimes(0); expect(disposeSpy).toHaveBeenCalledTimes(0); expect(attachSpy).toHaveBeenCalledTimes(0); @@ -334,14 +332,12 @@ describe('dynamic-overlay', () => { hasAttacheSpy.and.returnValue(true); expect(ref.portal.component).toBe(NbDynamicOverlayMock2Component); - expect(detachSpy).toHaveBeenCalledTimes(0); expect(disposeSpy).toHaveBeenCalledTimes(0); expect(attachSpy).toHaveBeenCalledTimes(1); dynamicOverlay.setComponent(NbDynamicOverlayMockComponent); expect(ref.portal.component).toBe(NbDynamicOverlayMockComponent); - expect(detachSpy).toHaveBeenCalledTimes(1); expect(disposeSpy).toHaveBeenCalledTimes(1); expect(attachSpy).toHaveBeenCalledTimes(2); @@ -350,7 +346,6 @@ describe('dynamic-overlay', () => { dynamicOverlay.setComponent(NbDynamicOverlayMock2Component); - expect(detachSpy).toHaveBeenCalledTimes(3); expect(disposeSpy).toHaveBeenCalledTimes(2); expect(attachSpy).toHaveBeenCalledTimes(2); }); diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts index 8ae8e199db..ae4966c96c 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts @@ -87,11 +87,10 @@ export class NbDynamicOverlay { this.componentType = componentType; // in case the component is shown we recreate it and show it back - if (this.ref && this.isAttached) { - this.dispose(); + const wasAttached = this.isAttached; + this.disposeOverlayRef(); + if (wasAttached) { this.show(); - } else if (this.ref && !this.isAttached) { - this.dispose(); } } From 3ed68dca2cace23b6a1f174d7051f29f8bc0c555 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 12:54:26 +0300 Subject: [PATCH 13/18] feat(dynamic overlay): allow to pass overlay config --- .../dynamic/dynamic-overlay-handler.spec.ts | 17 +++++++++++++++ .../dynamic/dynamic-overlay-handler.ts | 21 +++++++++++++++++++ .../overlay/dynamic/dynamic-overlay.spec.ts | 10 +++++++++ .../cdk/overlay/dynamic/dynamic-overlay.ts | 18 ++++++++++++++-- 4 files changed, 64 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts index b0cf01757a..ff9da7cf30 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts @@ -22,6 +22,7 @@ import { NbDynamicOverlay } from './dynamic-overlay'; import { NbOverlayContent } from '../overlay-service'; import { NbDynamicOverlayChange, NbDynamicOverlayHandler } from './dynamic-overlay-handler'; import { NbTrigger, NbTriggerStrategy, NbTriggerStrategyBuilderService } from '../overlay-trigger'; +import { NbOverlayConfig } from '@nebular/theme/components/cdk/overlay/mapping'; @Component({ template: '' }) export class NbDynamicOverlayMockComponent implements NbRenderableContainer { @@ -43,6 +44,7 @@ export class NbMockDynamicOverlay { _context: Object = {}; _content: NbOverlayContent; _positionStrategy: NbAdjustableConnectedPositionStrategy; + _overlayConfig: NbOverlayConfig; constructor() {} @@ -71,6 +73,10 @@ export class NbMockDynamicOverlay { this._componentType = componentType; } + setOverlayConfig(overlayConfig: NbOverlayConfig) { + this._overlayConfig = overlayConfig; + } + setContentAndContext(content: NbOverlayContent, context: Object) { this._content = content; this._context = context; @@ -516,4 +522,15 @@ describe('dynamic-overlay-handler', () => { expect(positionBuilder._position).toBe(NbPosition.LEFT); expect(positionBuilder._adjustment).toBe(NbAdjustment.HORIZONTAL); }); + + it('should set and update overlay config', () => { + let overlayConfig: NbOverlayConfig = { panelClass: 'custom-class' }; + + let dynamic = configure().overlayConfig(overlayConfig).build(); + expect(dynamic._overlayConfig).toBe(jasmine.objectContaining(overlayConfig)); + + overlayConfig = { panelClass: 'other-custom-class' }; + dynamic = configure().overlayConfig(overlayConfig).rebuild(); + expect(dynamic._overlayConfig).toBe(jasmine.objectContaining(overlayConfig)); + }); }); diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts index 86a4638777..292fc99664 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts @@ -10,6 +10,7 @@ import { import { NbRenderableContainer } from '../overlay-container'; import { NbOverlayContent } from '../overlay-service'; import { NbDynamicOverlay } from './dynamic-overlay'; +import { NbOverlayConfig } from '../mapping'; export class NbDynamicOverlayChange extends SimpleChange { @@ -33,6 +34,7 @@ export class NbDynamicOverlayHandler { protected _position: NbPosition = NbPosition.TOP; protected _adjustment: NbAdjustment = NbAdjustment.NOOP; protected _offset: number = 15; + protected _overlayConfig: NbOverlayConfig = {}; protected dynamicOverlay: NbDynamicOverlay; protected triggerStrategy: NbTriggerStrategy; @@ -94,6 +96,12 @@ export class NbDynamicOverlayHandler { return this; } + overlayConfig(overlayConfig: NbOverlayConfig) { + this.changes.offset = new NbDynamicOverlayChange(this._overlayConfig, overlayConfig); + this._overlayConfig = overlayConfig; + return this; + } + build() { if (!this._componentType || !this._host) { throw Error(`NbDynamicOverlayHandler: at least 'componentType' and 'host' should be @@ -104,6 +112,7 @@ export class NbDynamicOverlayHandler { this._content, this._context, this.createPositionStrategy(), + this._overlayConfig, ); this.connect(); @@ -139,6 +148,10 @@ export class NbDynamicOverlayHandler { this.dynamicOverlay.setComponent(this._componentType); } + if (this.isOverlayConfigUpdateRequired()) { + this.dynamicOverlay.setOverlayConfig(this._overlayConfig); + } + this.clearChanges(); return this.dynamicOverlay; } @@ -203,6 +216,10 @@ export class NbDynamicOverlayHandler { return this.isComponentTypeUpdated(); } + private isOverlayConfigUpdateRequired(): boolean { + return this.isOverlayConfigUpdated(); + } + protected isComponentTypeUpdated(): boolean { return this.changes.componentType && this.changes.componentType.isChanged(); } @@ -235,6 +252,10 @@ export class NbDynamicOverlayHandler { return this.changes.offset && this.changes.offset.isChanged(); } + protected isOverlayConfigUpdated(): boolean { + return this.changes.overlayConfig && this.changes.overlayConfig.isChanged(); + } + protected clearChanges() { this.changes = {}; } diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts index 11f1912927..cb34f682d2 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts @@ -267,6 +267,16 @@ describe('dynamic-overlay', () => { expect(instance.content).toBe(newContent); }); + it('should set overlay config', () => { + const overlayConfig: NbOverlayConfig = { panelClass: 'additional-overlay-class' }; + const createOverlaySpy = spyOn(overlayService, 'create').and.callThrough(); + + dynamicOverlay.setOverlayConfig(overlayConfig); + dynamicOverlay.show(); + + expect(createOverlaySpy).toHaveBeenCalledWith(jasmine.objectContaining(overlayConfig)); + }); + it('should return container', () => { dynamicOverlay.show(); expect(dynamicOverlay.getContainer()).toBe(container as any); diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts index ae4966c96c..ea6063f80c 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts @@ -9,7 +9,7 @@ import { import { NbRenderableContainer } from '../overlay-container'; import { createContainer, NbOverlayContent, NbOverlayService, patch } from '../overlay-service'; -import { NbOverlayRef, NbOverlayContainer } from '../mapping'; +import { NbOverlayRef, NbOverlayContainer, NbOverlayConfig } from '../mapping'; export interface NbDynamicOverlayController { show(); @@ -27,6 +27,7 @@ export class NbDynamicOverlay { protected context: Object = {}; protected content: NbOverlayContent; protected positionStrategy: NbAdjustableConnectedPositionStrategy; + protected overlayConfig: NbOverlayConfig = {}; protected positionStrategyChange$ = new Subject(); protected isShown$ = new BehaviorSubject(false); @@ -50,11 +51,13 @@ export class NbDynamicOverlay { create(componentType: Type, content: NbOverlayContent, context: Object, - positionStrategy: NbAdjustableConnectedPositionStrategy) { + positionStrategy: NbAdjustableConnectedPositionStrategy, + overlayConfig: NbOverlayConfig = {}) { this.setContentAndContext(content, context); this.setComponent(componentType); this.setPositionStrategy(positionStrategy); + this.setOverlayConfig(overlayConfig); return this; } @@ -112,6 +115,16 @@ export class NbDynamicOverlay { } } + setOverlayConfig(overlayConfig: NbOverlayConfig) { + this.overlayConfig = overlayConfig; + + const wasAttached = this.isAttached; + this.disposeOverlayRef(); + if (wasAttached) { + this.show(); + } + } + show() { if (!this.ref) { this.createOverlay(); @@ -163,6 +176,7 @@ export class NbDynamicOverlay { this.ref = this.overlay.create({ positionStrategy: this.positionStrategy, scrollStrategy: this.overlay.scrollStrategies.reposition(), + ...this.overlayConfig, }); this.updatePositionWhenStable(); } From 4c31f3340e68b7bb5a1a29da6b3753f71ef9b377 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 12:58:04 +0300 Subject: [PATCH 14/18] feat(popover): add popover class input --- .../components/popover/popover.directive.ts | 6 ++++- .../theme/components/popover/popover.spec.ts | 22 ++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts index f66d3e82b9..eff68fb297 100644 --- a/src/framework/theme/components/popover/popover.directive.ts +++ b/src/framework/theme/components/popover/popover.directive.ts @@ -162,6 +162,9 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges @Input('nbPopoverOffset') offset = 15; + @Input('nbPopoverClass') + popoverClass: string = ''; + @Output() nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>(); @@ -225,6 +228,7 @@ export class NbPopoverDirective implements NbDynamicOverlayController, OnChanges .offset(this.offset) .adjustment(this.adjustment) .content(this.content) - .context(this.context); + .context(this.context) + .overlayConfig({ panelClass: this.popoverClass }); } } diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts index 136c6a1ccd..d1e6ba3224 100644 --- a/src/framework/theme/components/popover/popover.spec.ts +++ b/src/framework/theme/components/popover/popover.spec.ts @@ -14,6 +14,7 @@ import { NbPopoverComponent } from './popover.component'; import { NbPopoverModule } from './popover.module'; import createSpy = jasmine.createSpy; import { Subject } from 'rxjs'; +import { NbOverlayConfig } from '@nebular/theme/components/cdk/overlay/mapping'; @Component({ selector: 'nb-popover-component-content-test', @@ -28,7 +29,7 @@ export class NbPopoverComponentContentTestComponent { template: ` - + `, @@ -36,6 +37,8 @@ export class NbPopoverComponentContentTestComponent { export class NbPopoverDefaultTestComponent { @ViewChild('button', { static: false }) button: ElementRef; @ViewChild(NbPopoverDirective, { static: false }) popover: NbPopoverDirective; + + popoverClass = ''; } @Component({ @@ -102,6 +105,7 @@ export class NbDynamicOverlayHandlerMock { _position: NbPosition = NbPosition.TOP; _adjustment: NbAdjustment = NbAdjustment.NOOP; _offset = 15; + _overlayConfig: NbOverlayConfig = {}; constructor() { } @@ -146,6 +150,11 @@ export class NbDynamicOverlayHandlerMock { return this; } + overlayConfig(overlayConfig: NbOverlayConfig) { + this._overlayConfig = overlayConfig; + return this; + } + build() { return dynamicOverlay; } @@ -396,6 +405,17 @@ describe('Directive: NbPopoverDirective', () => { expect(hideSpy).toHaveBeenCalledTimes(1); expect(toggleSpy).toHaveBeenCalledTimes(1); }); + + it('should set overlay config', () => { + const popoverClass = 'custom-popover-class'; + const overlayConfigSpy = spyOn(overlayHandler, 'overlayConfig').and.callThrough(); + + fixture = TestBed.createComponent(NbPopoverDefaultTestComponent); + fixture.componentInstance.popoverClass = popoverClass; + fixture.detectChanges(); + + expect(overlayConfigSpy).toHaveBeenCalledWith(jasmine.objectContaining({ panelClass: popoverClass })); + }); }); describe('binding popover', () => { From 182d72d44f7e42a3bcc72080d7fb173ede165d5c Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 13:06:27 +0300 Subject: [PATCH 15/18] feat(tooltip): add tooltip class input --- .../components/tooltip/tooltip.directive.ts | 6 ++++- .../theme/components/tooltip/tooltip.spec.ts | 22 ++++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts index 1dfcb531b2..fbb8b943ff 100644 --- a/src/framework/theme/components/tooltip/tooltip.directive.ts +++ b/src/framework/theme/components/tooltip/tooltip.directive.ts @@ -98,6 +98,9 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD @Input('nbTooltipAdjustment') adjustment: NbAdjustment = NbAdjustment.CLOCKWISE; + @Input('nbTooltipClass') + tooltipClass: string = ''; + /** * Accepts icon name or icon config object * @param {string | NbIconConfig} icon name or config object @@ -186,6 +189,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD .trigger(this.trigger) .adjustment(this.adjustment) .content(this.content) - .context(this.context); + .context(this.context) + .overlayConfig({ panelClass: this.tooltipClass }); } } diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts index 198d230c45..d4237bcad3 100644 --- a/src/framework/theme/components/tooltip/tooltip.spec.ts +++ b/src/framework/theme/components/tooltip/tooltip.spec.ts @@ -16,6 +16,7 @@ import { NbTooltipComponent } from './tooltip.component'; import { NbIconLibraries } from '../icon/icon-libraries'; import { Subject } from 'rxjs'; import createSpy = jasmine.createSpy; +import { NbOverlayConfig } from '@nebular/theme/components/cdk/overlay/mapping'; @Component({ selector: 'nb-tooltip-default-test', @@ -42,7 +43,8 @@ export class NbTooltipDefaultTestComponent { [nbTooltipPlacement]="position" [nbTooltipAdjustment]="adjustment" [nbTooltipStatus]="status" - [nbTooltipIcon]="icon"> + [nbTooltipIcon]="icon" + [nbTooltipClass]="tooltipClass"> @@ -57,6 +59,7 @@ export class NbTooltipBindingsTestComponent { @Input() trigger = NbTrigger.CLICK; @Input() position = NbPosition.TOP; @Input() adjustment = NbAdjustment.CLOCKWISE; + tooltipClass = ''; } @Component({ @@ -94,6 +97,7 @@ export class NbDynamicOverlayHandlerMock { _position: NbPosition = NbPosition.TOP; _adjustment: NbAdjustment = NbAdjustment.NOOP; _offset: number; + _overlayConfig: NbOverlayConfig = {}; constructor() { } @@ -138,6 +142,11 @@ export class NbDynamicOverlayHandlerMock { return this; } + overlayConfig(overlayConfig: NbOverlayConfig) { + this._overlayConfig = overlayConfig; + return this; + } + build() { return dynamicOverlay; } @@ -473,6 +482,17 @@ describe('Directive: NbTooltipDirective', () => { expect(contentSpy).toHaveBeenCalledTimes(3); expect(contentSpy).toHaveBeenCalledWith('new string'); }); + + it('should set overlay config', () => { + const tooltipClass = 'custom-popover-class'; + const overlayConfigSpy = spyOn(overlayHandler, 'overlayConfig').and.callThrough(); + + fixture = TestBed.createComponent(NbTooltipBindingsTestComponent); + fixture.componentInstance.tooltipClass = tooltipClass; + fixture.detectChanges(); + + expect(overlayConfigSpy).toHaveBeenCalledWith(jasmine.objectContaining({ panelClass: tooltipClass })); + }); }); describe('instance tooltip', () => { From a356412d6faaa61ee556da6b106ae87a05355877 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 13:13:56 +0300 Subject: [PATCH 16/18] fix(dynamic overlay): set correct property for overlay config --- .../components/cdk/overlay/dynamic/dynamic-overlay-handler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts index 292fc99664..75386a88db 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts @@ -97,7 +97,7 @@ export class NbDynamicOverlayHandler { } overlayConfig(overlayConfig: NbOverlayConfig) { - this.changes.offset = new NbDynamicOverlayChange(this._overlayConfig, overlayConfig); + this.changes.overlayConfig = new NbDynamicOverlayChange(this._overlayConfig, overlayConfig); this._overlayConfig = overlayConfig; return this; } From 579713e9d04bd96dbe932c3b0ac9d876e4ed03be Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 13:24:59 +0300 Subject: [PATCH 17/18] refactor(tooltip): correctly name input --- src/framework/theme/components/tooltip/tooltip.directive.ts | 4 ++-- src/framework/theme/components/tooltip/tooltip.spec.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts index fbb8b943ff..77cdd5bdca 100644 --- a/src/framework/theme/components/tooltip/tooltip.directive.ts +++ b/src/framework/theme/components/tooltip/tooltip.directive.ts @@ -127,7 +127,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD trigger: NbTrigger = NbTrigger.HINT; @Output() - nbPopoverShowStateChange = new EventEmitter<{ isShown: boolean }>(); + nbTooltipShowStateChange = new EventEmitter<{ isShown: boolean }>(); get isShown(): boolean { return !!(this.dynamicOverlay && this.dynamicOverlay.isAttached); @@ -157,7 +157,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD skip(1), takeUntil(this.destroy$), ) - .subscribe((isShown: boolean) => this.nbPopoverShowStateChange.emit({ isShown })); + .subscribe((isShown: boolean) => this.nbTooltipShowStateChange.emit({ isShown })); } rebuild() { diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts index d4237bcad3..be2c1c8c40 100644 --- a/src/framework/theme/components/tooltip/tooltip.spec.ts +++ b/src/framework/theme/components/tooltip/tooltip.spec.ts @@ -279,7 +279,7 @@ describe('Directive: NbTooltipDirective', () => { const tooltip: NbTooltipDirective = fixture.componentInstance.tooltip; const stateChangeSpy = createSpy('stateChangeSpy'); - tooltip.nbPopoverShowStateChange.subscribe(stateChangeSpy); + tooltip.nbTooltipShowStateChange.subscribe(stateChangeSpy); tooltip.show(); fixture.detectChanges(); @@ -296,7 +296,7 @@ describe('Directive: NbTooltipDirective', () => { fixture.detectChanges(); const stateChangeSpy = createSpy('stateChangeSpy'); - tooltip.nbPopoverShowStateChange.subscribe(stateChangeSpy); + tooltip.nbTooltipShowStateChange.subscribe(stateChangeSpy); tooltip.hide(); fixture.detectChanges(); From 433cf0c9321c8bfc3cf5a2c55611c11d07e2e6fd Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 7 Oct 2019 14:08:38 +0300 Subject: [PATCH 18/18] test(dynamic overlay): add missing method call --- .../cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts index ff9da7cf30..03651eda82 100644 --- a/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts +++ b/src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts @@ -51,12 +51,14 @@ export class NbMockDynamicOverlay { create(componentType: Type, content: NbOverlayContent, context: Object, - positionStrategy: NbAdjustableConnectedPositionStrategy) { + positionStrategy: NbAdjustableConnectedPositionStrategy, + overlayConfig: NbOverlayConfig) { this.setContext(context); this.setContent(content); this.setComponent(componentType); this.setPositionStrategy(positionStrategy); + this.setOverlayConfig(overlayConfig); return this; } @@ -527,10 +529,10 @@ describe('dynamic-overlay-handler', () => { let overlayConfig: NbOverlayConfig = { panelClass: 'custom-class' }; let dynamic = configure().overlayConfig(overlayConfig).build(); - expect(dynamic._overlayConfig).toBe(jasmine.objectContaining(overlayConfig)); + expect(dynamic._overlayConfig).toEqual(jasmine.objectContaining(overlayConfig)); overlayConfig = { panelClass: 'other-custom-class' }; dynamic = configure().overlayConfig(overlayConfig).rebuild(); - expect(dynamic._overlayConfig).toBe(jasmine.objectContaining(overlayConfig)); + expect(dynamic._overlayConfig).toEqual(jasmine.objectContaining(overlayConfig)); }); });