fix(tooltip): Missing hide call when mcDisabled set to true (#118)

positive-js · May 7, 2019 · d1a2eb2 · d1a2eb2
1 parent 2411416
commit d1a2eb2
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 4 deletions.
diff --git a/src/lib-dev/tooltip/module.ts b/src/lib-dev/tooltip/module.ts
@@ -28,6 +28,7 @@ export class DemoComponent {
     triggerTooltip: boolean = false;
     tooltipPosition: string = 'left';
     title: string = 'Default text';
+    availablePositions: string[] = ['top', 'bottom', 'left', 'right'];
     constructor(){}
 
     toggleTooltip() {
@@ -56,7 +57,9 @@ export class DemoComponent {
     }
 
     updatePosition(pos: string) {
-        this.tooltipPosition = pos;
+        if (this.availablePositions.indexOf(pos) > -1) {
+            this.tooltipPosition = pos;
+        }
     }
 }
 

diff --git a/src/lib-dev/tooltip/template.html b/src/lib-dev/tooltip/template.html
@@ -30,6 +30,12 @@
                 mcTooltip="PDQL-запрос фильтра содержит ошибки. Uncaught SyntaxError: Unexpected string"
                 mcTrigger="focus"
                 mcPlacement="bottom">bottom</button>
+            <button class="mc-primary"
+                    mc-button
+                    mcTooltip="Обновить"
+                    mcTrigger="focus"
+                    mcPlacement="bottom"
+                    [mcTooltipDisabled]="true">disabled</button>
         </div>
         <div class="flex layout-column layout-align-center-center container-item">
             <span class="mc-title">Hover</span>
@@ -51,6 +57,11 @@
                     mcTooltip="Обновить"
                     mcPlacement="bottom"
                     mcVisible="true">bottom</button>
+            <button class="mc-primary"
+                    mc-button
+                    mcTooltip="Обновить"
+                    mcPlacement="bottom"
+                    [mcTooltipDisabled]="true">disabled</button>
         </div>
     <div class="flex layout-row layout-align-center-center">
         <div class="flex-45 flex-column flex-offset-10">
@@ -64,7 +75,7 @@ <h3>Change placement</h3>
                 <input mcInput
                        #positionSource
                        class="mc-textarea_monospace"
-                       [value]="'Some text...'"
+                       [value]="'Add position here.'"
                 />
             </mc-form-field>
 

diff --git a/src/lib/tooltip/tooltip.component.ts b/src/lib/tooltip/tooltip.component.ts
@@ -261,6 +261,7 @@ export class McTooltip implements OnInit, OnDestroy {
     get disabled(): boolean { return this._disabled; }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
+        this.updateCompValue('mcTooltipDisabled', value);
     }
     private _disabled: boolean = false;
 
@@ -334,6 +335,8 @@ export class McTooltip implements OnInit, OnDestroy {
 
         if (value) {
             this.show();
+        } else {
+            this.hide();
         }
     }
     private _mcVisible: boolean;

diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts
@@ -2,7 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { fakeAsync, inject, tick, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { OverlayContainer } from '@ptsecurity/cdk/overlay';
-import { dispatchMouseEvent } from '@ptsecurity/cdk/testing';
+import { dispatchMouseEvent, dispatchFakeEvent } from '@ptsecurity/cdk/testing';
 
 import { McTooltip } from './tooltip.component';
 import { McToolTipModule } from './tooltip.module';
@@ -16,7 +16,7 @@ describe('McTooltip', () => {
     beforeEach(fakeAsync(() => {
         TestBed.configureTestingModule({
             imports     : [ McToolTipModule, NoopAnimationsModule ],
-            declarations: [ McTooltipTestWrapperComponent, McTooltipTestNewComponent ]
+            declarations: [ McTooltipTestWrapperComponent, McTooltipTestNewComponent, McTooltipDisabledComponent ]
         });
         TestBed.compileComponents();
     }));
@@ -131,6 +131,33 @@ describe('McTooltip', () => {
             fixture.detectChanges();
         });
     });
+    describe('should support mcTooltipDisabled attribute', () => {
+        beforeEach(() => {
+            fixture = TestBed.createComponent(McTooltipDisabledComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+        it('should not show tooltip', fakeAsync(() => {
+            const featureKey = 'DISABLED';
+            const tooltipDirective = (component.disabledDirective);
+            expect(overlayContainerElement.textContent).not.toContain(featureKey);
+            tooltipDirective.show();
+            fixture.detectChanges();
+            tick(410); // tslint:disable-line
+            fixture.detectChanges();
+            expect(overlayContainerElement.textContent).not.toContain(featureKey);
+            tooltipDirective.disabled = false;
+            tooltipDirective.show();
+            fixture.detectChanges();
+            tick(410); // tslint:disable-line
+            fixture.detectChanges();
+            tick(410); // tslint:disable-line
+            tick();
+            fixture.detectChanges();
+            expect(overlayContainerElement.textContent).toContain(featureKey);
+
+        }));
+    });
 });
 @Component({
     selector: 'mc-tooltip-test-new',
@@ -178,3 +205,18 @@ class McTooltipTestWrapperComponent {
     @ViewChild('mostSimpleTrigger') mostSimpleTrigger: ElementRef;
     @ViewChild('mostSimpleTrigger', { read: McTooltip }) mostSimpleDirective: McTooltip;
 }
+
+@Component({
+    selector: 'mc-tooltip-disabled-wrapper',
+    template: `<span #disabledAttribute
+                     mcTooltip="disabled-text"
+                     mcTitle="DISABLED"
+                     mcTrigger="manual"
+                     mcTooltipDisabled="true">
+        Disabled
+    </span>`
+})
+class McTooltipDisabledComponent {
+    @ViewChild('disabledAttribute') disabledTrigger: ElementRef;
+    @ViewChild('disabledAttribute', { read: McTooltip }) disabledDirective: McTooltip;
+}