finish tests

Author: andrewseguin

src/lib/core/overlay/scroll/scroll-dispatcher.spec.ts

@@ -1,5 +1,5 @@
-import {inject, TestBed, async, ComponentFixture} from '@angular/core/testing';
-import {NgModule, Component, ViewChild, ElementRef, QueryList, ViewChildren} from '@angular/core';
+import {inject, TestBed, async, fakeAsync, ComponentFixture, tick} from '@angular/core/testing';
+import {NgModule, Component, ViewChild, ElementRef} from '@angular/core';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {OverlayModule} from '../overlay-directives';
 import {Scrollable} from './scrollable';
@@ -38,15 +38,17 @@ describe('Scroll Dispatcher', () => {
       expect(scroll.scrollableReferences.has(componentScrollable)).toBe(false);
     });
 
-    it('should notify through the directive and service that a scroll event occurred', () => {
+    it('should notify through the directive and service that a scroll event occurred',
+        fakeAsync(() => {
       let hasDirectiveScrollNotified = false;
       // Listen for notifications from scroll directive
       let scrollable = fixture.componentInstance.scrollable;
       scrollable.elementScrolled().subscribe(() => { hasDirectiveScrollNotified = true; });
 
-      // Listen for notifications from scroll service
+      // Listen for notifications from scroll service with a throttle of 100ms
+      const throttleTime = 100;
       let hasServiceScrollNotified = false;
-      scroll.scrolled().subscribe(() => { hasServiceScrollNotified = true; });
+      scroll.scrolled(throttleTime).subscribe(() => { hasServiceScrollNotified = true; });
 
       // Emit a scroll event from the scrolling element in our component.
       // This event should be picked up by the scrollable directive and notify.
@@ -55,9 +57,17 @@ describe('Scroll Dispatcher', () => {
       scrollEvent.initUIEvent('scroll', true, true, window, 0);
       fixture.componentInstance.scrollingElement.nativeElement.dispatchEvent(scrollEvent);
 
+      // The scrollable directive should have notified the service immediately.
       expect(hasDirectiveScrollNotified).toBe(true);
+
+      // Verify that the throttle is used, the service should wait for the throttle time until
+      // sending the notification.
+      expect(hasServiceScrollNotified).toBe(false);
+
+      // After the throttle time, the notification should be sent.
+      tick(throttleTime);
       expect(hasServiceScrollNotified).toBe(true);
-    });
+    }));
   });
 
   describe('Nested scrollables', () => {
@@ -107,7 +117,6 @@ class ScrollingComponent {
 })
 class NestedScrollingComponent {
   @ViewChild('interestingElement') interestingElement: ElementRef;
-  @ViewChildren(Scrollable) scrollables: QueryList<Scrollable>;
 }
 
 const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent];

src/lib/core/overlay/scroll/scroll-dispatcher.ts

@@ -57,7 +57,7 @@ export class ScrollDispatcher {
   /**
    * Returns an observable that emits an event whenever any of the registered Scrollable
    * references (or window, document, or body) fire a scrolled event. Can provide a time in ms
-   * to override the default throttling time.
+   * to override the default "throttle" time.
    */
   scrolled(auditTimeInMs: number = DEFAULT_AUDIT_TIME): Observable<void> {
     return this._scrolled.asObservable().auditTime(auditTimeInMs);

src/lib/tooltip/tooltip.spec.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core/testing';
 import {Component, DebugElement, AnimationTransitionEvent, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {TooltipPosition, MdTooltip, MdTooltipModule} from './tooltip';
+import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from './tooltip';
 import {OverlayContainer} from '../core';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
 import {OverlayModule} from '../core/overlay/overlay-directives';
@@ -27,6 +27,7 @@ describe('MdTooltip', () => {
       providers: [
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
+          document.body.appendChild(overlayContainerElement);
           return {getContainerElement: () => overlayContainerElement};
         }},
         {provide: Dir, useFactory: () => {
@@ -315,12 +316,22 @@ describe('MdTooltip', () => {
       it('should hide tooltip if clipped after changing positions', fakeAsync(() => {
         expect(tooltipDirective._tooltipInstance).toBeUndefined();
 
+        // Show the tooltip and tick for the show delay (default is 0)
         tooltipDirective.show();
-        tick(0); // Tick for the show delay (default is 0)
+        fixture.detectChanges();
+        tick(0);
+
+        // Expect that the tooltip is displayed
         expect(tooltipDirective._isTooltipVisible()).toBe(true);
 
+        // Scroll the page but tick just before the default throttle should update.
         fixture.componentInstance.scrollDown();
-        tick();
+        tick(SCROLL_THROTTLE_MS - 1);
+        expect(tooltipDirective._isTooltipVisible()).toBe(true);
+
+        // Finish ticking to the throttle's limit and check that the scroll event notified the
+        // tooltip and it was hidden.
+        tick(1);
         expect(tooltipDirective._isTooltipVisible()).toBe(false);
       }));
     });
@@ -344,7 +355,8 @@ class BasicTooltipDemo {
 @Component({
      selector: 'app',
      template: `		
-    <div cdk-scrollable style="margin-top: 300px; height: 200px; width: 200px; overflow: auto;">		
+    <div cdk-scrollable style="padding: 100px; margin: 300px; 
+                               height: 200px; width: 200px; overflow: auto;">		
       <button *ngIf="showButton" style="margin-bottom: 350px"		
               [md-tooltip]="message"		
               [tooltip-position]="position">		
@@ -361,7 +373,7 @@ class ScrollableTooltipDemo {
 
  scrollDown() {
      const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement;
-     scrollingContainerEl.scrollTop = 50;
+     scrollingContainerEl.scrollTop = 140;
 
      // Emit a scroll event from the scrolling element in our component.
      // This event should be picked up by the scrollable directive and notify.

src/lib/tooltip/tooltip.ts

@@ -38,6 +38,9 @@ export type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' |
 /** Time in ms to delay before changing the tooltip visibility to hidden */
 export const TOUCHEND_HIDE_DELAY  = 1500;
 
+/** Time in ms to throttle repositioning after scroll events. */
+export const SCROLL_THROTTLE_MS = 20;
+
 /**
  * Directive that attaches a material design tooltip to the host element. Animates the showing and
  * hiding of a tooltip provided position (defaults to below the element).
@@ -112,17 +115,13 @@ export class MdTooltip implements OnInit, OnDestroy {
   ngOnInit() {
     // When a scroll on the page occurs, update the position in case this tooltip needs		
     // to be repositioned.
-    this._scrollDispatcher.scrolled().subscribe(() => {
-      if (this._scrollDispatcher.events > 1) {
-        console.log(`Saved ${this._scrollDispatcher.events - 1} ${this._scrollDispatcher.events > 1 ? 'events' : 'event'}`);
-      }
-      this._scrollDispatcher.events = 0;
+    this._scrollDispatcher.scrolled(SCROLL_THROTTLE_MS).subscribe(() => {
       if (this._overlayRef) {
         this._overlayRef.updatePosition();
       }
     });
   }
-    
+
   /**
    * Dispose the tooltip when destroyed.
    */
@@ -187,7 +186,7 @@ export class MdTooltip implements OnInit, OnDestroy {
     let strategy = this._overlay.position().connectedTo(this._elementRef, origin, position);
     strategy.withScrollableContainers(this._scrollDispatcher.getScrollContainers(this._elementRef));
     strategy.onPositionChange.subscribe(change => {
-      if (change.scrollableViewProperties.isOverlayClipped) {
+      if (change.scrollableViewProperties.isOverlayClipped && this._tooltipInstance.isVisible()) {
         this.hide(0);
       }
     });