add tooltip test

Author: andrewseguin

src/lib/core/overlay/position/connected-position-strategy.ts

@@ -2,10 +2,10 @@ import {PositionStrategy} from './position-strategy';
 import {ElementRef} from '@angular/core';
 import {ViewportRuler} from './viewport-ruler';
 import {
-    ConnectionPositionPair,
-    OriginConnectionPosition,
-    OverlayConnectionPosition,
-    ConnectedOverlayPositionChange
+  ConnectionPositionPair,
+  OriginConnectionPosition,
+  OverlayConnectionPosition,
+  ConnectedOverlayPositionChange, ScrollableViewProperties
 } from './connected-position';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
@@ -35,7 +35,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   private _offsetY: number = 0;
 
   /** The Scrollable containers that may cause the overlay's connectedTo element to be clipped */
-  private scrollables: Scrollable[] = [];
+  private scrollables: Scrollable[];
 
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
@@ -48,7 +48,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The origin element against which the overlay will be positioned. */
   private _origin: HTMLElement;
 
-  private _onPositionChange:
+  _onPositionChange:
       Subject<ConnectedOverlayPositionChange> = new Subject<ConnectedOverlayPositionChange>();
 
   /** Emits an event when the connection point changes. */
@@ -102,8 +102,12 @@ export class ConnectedPositionStrategy implements PositionStrategy {
       // If the overlay in the calculated position fits on-screen, put it there and we're done.
       if (overlayPoint.fitsInViewport) {
         this._setElementPosition(element, overlayPoint);
-        const isClipped = this.isOverlayElementClipped(element);
-        this._onPositionChange.next(new ConnectedOverlayPositionChange(pos, isClipped));
+
+        // Notify that the position has been changed along with its change properties.
+        const scrollableViewProperties = this.getScrollableViewProperties(element);
+        const positionChange = new ConnectedOverlayPositionChange(pos, scrollableViewProperties);
+        this._onPositionChange.next(positionChange);
+
         return Promise.resolve(null);
       } else if (!fallbackPoint || fallbackPoint.visibleArea < overlayPoint.visibleArea) {
         fallbackPoint = overlayPoint;
@@ -243,16 +247,48 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     return {x, y, fitsInViewport, visibleArea};
   }
 
-  /** Whether the overlay element is clipped out of view of one of the scrollable containers. */
-  private isOverlayElementClipped(element: HTMLElement): boolean {
-    const elementBounds = this._getElementBounds(element);
-    return this.scrollables.some((scrollable: Scrollable) => {
-      const scrollingContainerBounds = this._getElementBounds(scrollable.getElementRef().nativeElement);
+  /**
+   * Gets the view properties of the trigger and overlay, including whether they are clipped
+   * or completely outside the view of any of the strategy's scrollables.
+   */
+  private getScrollableViewProperties(overlay: HTMLElement): ScrollableViewProperties {
+    const triggerBounds = this._getElementBounds(this._connectedTo.nativeElement);
+    const overlayBounds = this._getElementBounds(overlay);
+    const scrollContainerBounds = this.scrollables.map((scrollable: Scrollable) => {
+      return this._getElementBounds(scrollable.getElementRef().nativeElement);
+    });
+
+    return {
+      isTriggerClipped: this.isElementClipped(triggerBounds, scrollContainerBounds),
+      isTriggerOutsideView: this.isElementOutsideView(triggerBounds, scrollContainerBounds),
+      isOverlayClipped: this.isElementClipped(overlayBounds, scrollContainerBounds),
+      isOverlayOutsideView: this.isElementOutsideView(overlayBounds, scrollContainerBounds),
+    };
+  }
+
+  /** Whether the element is completely out of the view of any of the containers. */
+  private isElementOutsideView(
+      elementBounds: ElementBoundingPositions,
+      containersBounds: ElementBoundingPositions[]): boolean {
+    return containersBounds.some((containerBounds: ElementBoundingPositions) => {
+      const outsideAbove = elementBounds.bottom < containerBounds.top;
+      const outsideBelow = elementBounds.top > containerBounds.bottom;
+      const outsideLeft = elementBounds.right < containerBounds.left;
+      const outsideRight = elementBounds.left > containerBounds.right;
+
+      return outsideAbove || outsideBelow || outsideLeft || outsideRight;
+    });
+  }
 
-      const clippedAbove = elementBounds.top < scrollingContainerBounds.top;
-      const clippedBelow = elementBounds.bottom > scrollingContainerBounds.bottom;
-      const clippedLeft = elementBounds.left < scrollingContainerBounds.left;
-      const clippedRight = elementBounds.right > scrollingContainerBounds.right;
+  /** Whether the element is clipped by any of the containers. */
+  private isElementClipped(
+      elementBounds: ElementBoundingPositions,
+      containersBounds: ElementBoundingPositions[]): boolean {
+    return containersBounds.some((containerBounds: ElementBoundingPositions) => {
+      const clippedAbove = elementBounds.top < containerBounds.top;
+      const clippedBelow = elementBounds.bottom > containerBounds.bottom;
+      const clippedLeft = elementBounds.left < containerBounds.left;
+      const clippedRight = elementBounds.right > containerBounds.right;
 
       return clippedAbove || clippedBelow || clippedLeft || clippedRight;
     });

src/lib/core/overlay/position/connected-position.ts

@@ -32,7 +32,15 @@ export class ConnectionPositionPair {
   }
 }
 
+export class ScrollableViewProperties {
+  isTriggerClipped: boolean;
+  isTriggerOutsideView: boolean;
+  isOverlayClipped: boolean;
+  isOverlayOutsideView: boolean;
+}
+
 /** The change event emitted by the strategy when a fallback position is used. */
 export class ConnectedOverlayPositionChange {
-  constructor(public connectionPair: ConnectionPositionPair, public isClipped: boolean) {}
+  constructor(public connectionPair: ConnectionPositionPair,
+              public scrollableViewProperties: ScrollableViewProperties) {}
 }

src/lib/tooltip/tooltip.spec.ts

@@ -6,11 +6,13 @@ import {
     fakeAsync,
     flushMicrotasks
 } from '@angular/core/testing';
-import {Component, DebugElement, AnimationTransitionEvent} from '@angular/core';
+import {Component, DebugElement, AnimationTransitionEvent, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {TooltipPosition, MdTooltip, MdTooltipModule} from './tooltip';
 import {OverlayContainer} from '../core';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
+import {OverlayModule} from '../core/overlay/overlay-directives';
+import {Scrollable} from '../core/overlay/scroll/scrollable';
 
 const initialTooltipMessage = 'initial tooltip message';
 
@@ -20,8 +22,8 @@ describe('MdTooltip', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdTooltipModule.forRoot()],
-      declarations: [BasicTooltipDemo],
+      imports: [MdTooltipModule.forRoot(), OverlayModule],
+      declarations: [BasicTooltipDemo, ScrollableTooltipDemo],
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
@@ -296,6 +298,34 @@ describe('MdTooltip', () => {
       }).toThrowError('Tooltip position "everywhere" is invalid.');
     });
   });
+
+
+  fdescribe('scrollable usage', () => {
+    let fixture: ComponentFixture<ScrollableTooltipDemo>;
+    let buttonDebugElement: DebugElement;
+    let buttonElement: HTMLButtonElement;
+    let tooltipDirective: MdTooltip;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ScrollableTooltipDemo);
+      fixture.detectChanges();
+      buttonDebugElement = fixture.debugElement.query(By.css('button'));
+      buttonElement = <HTMLButtonElement> buttonDebugElement.nativeElement;
+      tooltipDirective = buttonDebugElement.injector.get(MdTooltip);
+    });
+
+    it('should hide tooltip if clipped after changing positions', fakeAsync(() => {
+      expect(tooltipDirective._tooltipInstance).toBeUndefined();
+
+      tooltipDirective.show();
+      tick(0); // Tick for the show delay (default is 0)
+      expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+      fixture.componentInstance.scrollDown();
+      tick();
+      expect(tooltipDirective._isTooltipVisible()).toBe(false);
+    }));
+  });
 });
 
 @Component({
@@ -312,3 +342,34 @@ class BasicTooltipDemo {
   message: string = initialTooltipMessage;
   showButton: boolean = true;
 }
+
+@Component({
+  selector: 'app',
+  template: `
+    <div cdk-scrollable style="margin-top: 300px; height: 200px; width: 200px; overflow: auto;">
+      <button *ngIf="showButton" style="margin-bottom: 350px"
+              [md-tooltip]="message"
+              [tooltip-position]="position">
+        Button
+      </button>
+    </div>`
+})
+class ScrollableTooltipDemo {
+  position: string = 'below';
+  message: string = initialTooltipMessage;
+  showButton: boolean = true;
+
+  @ViewChild(Scrollable) scrollingContainer: Scrollable;
+
+  scrollDown() {
+    const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement;
+    scrollingContainerEl.scrollTop = 50;
+
+    // Emit a scroll event from the scrolling element in our component.
+    // This event should be picked up by the scrollable directive and notify.
+    // The notification should be picked up by the service.
+    const scrollEvent = document.createEvent('UIEvents');
+    scrollEvent.initUIEvent('scroll', true, true, window, 0);
+    scrollingContainerEl.dispatchEvent(scrollEvent);
+  }
+}

src/lib/tooltip/tooltip.ts

@@ -34,7 +34,7 @@ import {Dir} from '../core/rtl/dir';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {OverlayPositionBuilder} from '../core/overlay/position/overlay-position-builder';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
-import {Scrollable} from '../core/overlay/scroll/scrollable';
+import {ConnectedOverlayPositionChange} from '../core/overlay/position/connected-position';
 import 'rxjs/add/operator/first';
 
 export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
@@ -181,11 +181,16 @@ export class MdTooltip implements OnInit, OnDestroy {
     let origin = this._getOrigin();
     let position = this._getOverlayPosition();
 
-    // Create connected strategy that listens for scroll events to reposition. After position
-    // changes occur and the overlay is clipped then close the tooltip.
+    // Create connected position strategy that listens for scroll events to reposition.
+    // After position changes occur and the overlay is clipped by a parent scrollable then
+    // close the tooltip.
     let strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
     strategy.withScrollableContainers(this._scrollDispatcher.getScrollContainers(this._elementRef));
-    strategy.onPositionChange.subscribe(change => { if (change.isClipped) { this.hide(0); } });
+    strategy.onPositionChange.subscribe((change: ConnectedOverlayPositionChange) => {
+      if (change.scrollableViewProperties.isOverlayClipped) {
+        this.hide(0);
+      }
+    });
 
     let config = new OverlayState();
     config.positionStrategy = strategy;