refactor(popover): rename mode to trigger, deprecate mode (#1124)

akveo · Jan 8, 2019 · 6cda5e7 · 6cda5e7
1 parent 9360a4b
commit 6cda5e7
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 7 deletions.
diff --git a/src/framework/theme/components/popover/popover.directive.ts b/src/framework/theme/components/popover/popover.directive.ts
@@ -135,12 +135,28 @@ export class NbPopoverDirective implements AfterViewInit, OnDestroy {
   @Input('nbPopoverAdjustment')
   adjustment: NbAdjustment = NbAdjustment.CLOCKWISE;
 
+  /**
+   * Deprecated, use `trigger`
+   * @deprecated
+   * @breaking-change 4.0.0
+   * */
+  @Input('nbPopoverMode')
+  set mode(mode) {
+    console.warn(`Popover 'nbPopoverMode' input is deprecated and will be removed as of 4.0.0.
+      Use 'nbPopoverTrigger' instead.`);
+    this.trigger = mode;
+  }
+
+  get mode() {
+    return this.trigger;
+  }
+
   /**
    * Describes when the container will be shown.
    * Available options: click, hover and hint
    * */
-  @Input('nbPopoverMode')
-  mode: NbTrigger = NbTrigger.CLICK;
+  @Input('nbPopoverTrigger')
+  trigger: NbTrigger = NbTrigger.CLICK;
 
   protected ref: NbOverlayRef;
   protected container: ComponentRef<any>;
@@ -217,7 +233,7 @@ export class NbPopoverDirective implements AfterViewInit, OnDestroy {
 
   protected createTriggerStrategy(): NbTriggerStrategy {
     return this.triggerStrategyBuilder
-      .trigger(this.mode)
+      .trigger(this.trigger)
       .host(this.hostRef.nativeElement)
       .container(() => this.container)
       .build();

diff --git a/src/framework/theme/components/popover/popover.spec.ts b/src/framework/theme/components/popover/popover.spec.ts
@@ -1,14 +1,22 @@
-import { Component, ElementRef, Input, NgModule, ViewChild } from '@angular/core';
+import { Component, ComponentRef, ElementRef, Inject, Injectable, Input, NgModule, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { Subject } from 'rxjs';
+import { of as observableOf, Subject } from 'rxjs';
 
 import { NbThemeModule } from '../../theme.module';
 import { NbLayoutModule } from '../layout/layout.module';
 import { NbPopoverModule } from './popover.module';
 import { NbPopoverDirective } from './popover.directive';
-import { NbAdjustment, NbPosition, NbPositionBuilderService, NbTrigger } from '../cdk';
+import {
+  NbAdjustment,
+  NbPosition,
+  NbPositionBuilderService,
+  NbTrigger,
+  NbTriggerStrategy,
+  NbTriggerStrategyBuilderService,
+} from '../cdk';
+import { NB_DOCUMENT } from '@nebular/theme';
 
 
 @Component({
@@ -54,12 +62,28 @@ export class NbPopoverTemplateTestComponent {
   template: `
     <nb-layout>
       <nb-layout-column>
-        <button #button nbPopover="test" [nbPopoverMode]="mode"></button>
+        <button #button nbPopover="test" [nbPopoverTrigger]="trigger"></button>
       </nb-layout-column>
     </nb-layout>
   `,
 })
 export class NbPopoverStringTestComponent {
+  @Input() trigger: NbTrigger = NbTrigger.CLICK;
+  @ViewChild('button') button: ElementRef;
+  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+}
+
+@Component({
+  selector: 'nb-popover-mode-test',
+  template: `
+    <nb-layout>
+      <nb-layout-column>
+        <button #button nbPopover="test" [nbPopoverMode]="mode"></button>
+      </nb-layout-column>
+    </nb-layout>
+  `,
+})
+export class NbPopoverModeTestComponent {
   @Input() mode: NbTrigger = NbTrigger.CLICK;
   @ViewChild('button') button: ElementRef;
   @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
@@ -77,6 +101,7 @@ export class NbPopoverStringTestComponent {
     NbPopoverTemplateTestComponent,
     NbPopoverComponentTestComponent,
     NbPopoverComponentContentTestComponent,
+    NbPopoverModeTestComponent,
   ],
   entryComponents: [NbPopoverComponentContentTestComponent],
 })
@@ -117,6 +142,45 @@ export class MockPositionBuilder {
   };
 }
 
+@Injectable()
+export class MockTriggerStrategyBuilder {
+
+  _host: HTMLElement;
+  _container: () => ComponentRef<any>;
+  _trigger: NbTrigger;
+  _document: Document;
+
+  constructor(@Inject(NB_DOCUMENT) document) {
+    this.document(document);
+  }
+
+  document(document: Document): this {
+    this._document = document;
+    return this;
+  }
+
+  trigger(trigger: NbTrigger): this {
+    this._trigger = trigger;
+    return this;
+  }
+
+  host(host: HTMLElement): this {
+    this._host = host;
+    return this;
+  }
+
+  container(container: () => ComponentRef<any>): this {
+    this._container = container;
+    return this;
+  }
+
+  build(): NbTriggerStrategy {
+    return {
+      show$: observableOf(null),
+      hide$: observableOf(null),
+    } as NbTriggerStrategy;
+  }
+}
 
 describe('Directive: NbPopoverDirective', () => {
   beforeEach(() => {
@@ -171,6 +235,47 @@ describe('Directive: NbPopoverDirective', () => {
       expect(mockPositionBuilder._position).toBe(NbPosition.TOP);
       expect(mockPositionBuilder._adjustment).toBe(NbAdjustment.CLOCKWISE);
     });
+
+    it('should build with default trigger strategy', () => {
+      TestBed.resetTestingModule();
+      const bed = TestBed.configureTestingModule({
+        imports: [PopoverTestModule],
+        providers: [{ provide: NbTriggerStrategyBuilderService, useClass: MockTriggerStrategyBuilder }],
+      });
+      const mockTriggerStrategy = bed.get(NbTriggerStrategyBuilderService);
+      fixture = TestBed.createComponent(NbPopoverStringTestComponent);
+      fixture.detectChanges();
+
+      expect(mockTriggerStrategy._trigger).toBe(NbTrigger.CLICK);
+    });
+
+    it('should build with custom trigger strategy', () => {
+      TestBed.resetTestingModule();
+      const bed = TestBed.configureTestingModule({
+        imports: [PopoverTestModule],
+        providers: [{ provide: NbTriggerStrategyBuilderService, useClass: MockTriggerStrategyBuilder }],
+      });
+      const mockTriggerStrategy = bed.get(NbTriggerStrategyBuilderService);
+      fixture = TestBed.createComponent(NbPopoverStringTestComponent);
+      fixture.componentInstance.trigger = NbTrigger.HOVER;
+      fixture.detectChanges();
+
+      expect(mockTriggerStrategy._trigger).toBe(NbTrigger.HOVER);
+    });
+
+    it('should build with custom mode strategy', () => {
+      TestBed.resetTestingModule();
+      const bed = TestBed.configureTestingModule({
+        imports: [PopoverTestModule],
+        providers: [{ provide: NbTriggerStrategyBuilderService, useClass: MockTriggerStrategyBuilder }],
+      });
+      const mockTriggerStrategy = bed.get(NbTriggerStrategyBuilderService);
+      const modeFixture = TestBed.createComponent(NbPopoverModeTestComponent);
+      modeFixture.componentInstance.mode = NbTrigger.HOVER;
+      modeFixture.detectChanges();
+
+      expect(mockTriggerStrategy._trigger).toBe(NbTrigger.HOVER);
+    });
   });
 
   describe('with template content', () => {