diff --git a/src/framework/theme/components/cdk/overlay/overlay-position.spec.ts b/src/framework/theme/components/cdk/overlay/overlay-position.spec.ts new file mode 100644 index 0000000000..dd19a0664f --- /dev/null +++ b/src/framework/theme/components/cdk/overlay/overlay-position.spec.ts @@ -0,0 +1,95 @@ +import { TestBed } from '@angular/core/testing'; +import { Component, NgModule } from '@angular/core'; +import { + NbThemeModule, + NbOverlayModule, + NbPositionBuilderService, + NbOverlayService, + NbComponentPortal, + NbLayoutModule, NbLayoutComponent, +} from '@nebular/theme'; +import { + NbAdjustableConnectedPositionStrategy, + NbPosition, + NbAdjustment, +} from '@nebular/theme/components/cdk/overlay/overlay-position'; +import { RouterTestingModule } from '@angular/router/testing'; + +@Component({ + template: `portal-component`, +}) +export class PortalComponent {} + +@NgModule({ + declarations: [ PortalComponent ], + exports: [ PortalComponent ], + entryComponents: [ PortalComponent ], +}) +export class PortalModule {} + +describe('NbAdjustableConnectedPositionStrategy', () => { + let strategy: NbAdjustableConnectedPositionStrategy; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + NbThemeModule.forRoot(), + NbOverlayModule.forRoot(), + NbLayoutModule, + PortalModule, + RouterTestingModule.withRoutes([]), + ], + }); + + // Have to create layout component as it's required for scroll service to work properly. + // Also it registers overlay container so we don't have to create it manually. + TestBed.createComponent(NbLayoutComponent); + + const hostElement = document.createElement('div'); + hostElement.style.width = '10px'; + hostElement.style.height = '10px'; + hostElement.style.backgroundColor = 'red'; + document.body.appendChild(hostElement); + + const positionBuilderService: NbPositionBuilderService = TestBed.get(NbPositionBuilderService); + strategy = positionBuilderService.connectedTo({ nativeElement: hostElement }); + }); + + it('should create strategy with position start and adjustment noop', () => { + const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough(); + + strategy.position(NbPosition.START).adjustment(NbAdjustment.NOOP); + + const overlayService: NbOverlayService = TestBed.get(NbOverlayService); + const overlayRef = overlayService.create({ positionStrategy: strategy }); + overlayRef.attach(new NbComponentPortal(PortalComponent)); + + expect(withPositionsSpy).toHaveBeenCalledTimes(1); + expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([{ + originX: 'start', + originY: 'center', + overlayX: 'end', + overlayY: 'center', + offsetX: -15, + }])); + }); + + it('should create strategy with position end and adjustment noop', () => { + const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough(); + + strategy.position(NbPosition.END).adjustment(NbAdjustment.NOOP); + + const overlayService: NbOverlayService = TestBed.get(NbOverlayService); + const overlayRef = overlayService.create({ positionStrategy: strategy }); + overlayRef.attach(new NbComponentPortal(PortalComponent)); + + expect(withPositionsSpy).toHaveBeenCalledTimes(1); + expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([{ + originX: 'end', + originY: 'center', + overlayX: 'start', + overlayY: 'center', + offsetX: 15, + }])); + }); +}); diff --git a/src/framework/theme/components/cdk/overlay/overlay-position.ts b/src/framework/theme/components/cdk/overlay/overlay-position.ts index 020ec7461f..e7dca802a5 100644 --- a/src/framework/theme/components/cdk/overlay/overlay-position.ts +++ b/src/framework/theme/components/cdk/overlay/overlay-position.ts @@ -50,10 +50,15 @@ const POSITIONS = { [NbPosition.TOP](offset) { return { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -offset }; }, + [NbPosition.START](offset) { + return this[NbPosition.LEFT](offset); + }, + [NbPosition.END](offset) { + return this[NbPosition.RIGHT](offset); + }, }; const COUNTER_CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.LEFT, NbPosition.BOTTOM, NbPosition.RIGHT]; -const NOOP_POSITIONS = [NbPosition.TOP, NbPosition.BOTTOM, NbPosition.LEFT, NbPosition.RIGHT]; const CLOCKWISE_POSITIONS = [NbPosition.TOP, NbPosition.RIGHT, NbPosition.BOTTOM, NbPosition.LEFT]; const VERTICAL_POSITIONS = [NbPosition.BOTTOM, NbPosition.TOP]; const HORIZONTAL_POSITIONS = [NbPosition.START, NbPosition.END]; @@ -126,7 +131,7 @@ export class NbAdjustableConnectedPositionStrategy protected createPositions(): NbPosition[] { switch (this._adjustment) { case NbAdjustment.NOOP: - return NOOP_POSITIONS.filter(position => this._position === position); + return [ this._position ]; case NbAdjustment.CLOCKWISE: return this.reorderPreferredPositions(CLOCKWISE_POSITIONS); case NbAdjustment.COUNTERCLOCKWISE: