add test for scroll dispatcher

Author: andrewseguin

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

@@ -34,8 +34,8 @@ export class ConnectedPositionStrategy implements PositionStrategy {
   /** The offset in pixels for the overlay connection point on the y-axis */
   private _offsetY: number = 0;
 
-  /** The Scrollable containers that may cause the overlay's connectedTo element to be clipped */
-  private scrollables: Scrollable[];
+  /** The Scrollable containers used to check scrollable view properties on position change. */
+  private scrollables: Scrollable[] = [];
 
   /** Whether the we're dealing with an RTL context */
   get _isRtl() {
@@ -304,6 +304,7 @@ export class ConnectedPositionStrategy implements PositionStrategy {
     element.style.top = overlayPoint.y + 'px';
   }
 
+  /** Returns the bounding positions of the provided element with respect to the viewport. */
   private _getElementBounds(element: HTMLElement): ElementBoundingPositions {
     const boundingClientRect = element.getBoundingClientRect();
     return {

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

@@ -1,4 +1,5 @@
 /** Horizontal dimension of a connection point on the perimeter of the origin or overlay element. */
+import {Optional} from '@angular/core';
 export type HorizontalConnectionPos = 'start' | 'center' | 'end';
 
 /** Vertical dimension of a connection point on the perimeter of the origin or overlay element. */
@@ -42,5 +43,5 @@ export class ScrollableViewProperties {
 /** The change event emitted by the strategy when a fallback position is used. */
 export class ConnectedOverlayPositionChange {
   constructor(public connectionPair: ConnectionPositionPair,
-              public scrollableViewProperties: ScrollableViewProperties) {}
+              @Optional() public scrollableViewProperties: ScrollableViewProperties) {}
 }

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

@@ -1,12 +1,10 @@
 import {inject, TestBed, async, ComponentFixture} from '@angular/core/testing';
-import {NgModule, Component, ViewChild, ElementRef} from '@angular/core';
+import {NgModule, Component, ViewChild, ElementRef, QueryList, ViewChildren} from '@angular/core';
 import {ScrollDispatcher} from './scroll-dispatcher';
 import {OverlayModule} from '../overlay-directives';
 import {Scrollable} from './scrollable';
 
 describe('Scroll Dispatcher', () => {
-  let scroll: ScrollDispatcher;
-  let fixture: ComponentFixture<ScrollingComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -16,45 +14,71 @@ describe('Scroll Dispatcher', () => {
     TestBed.compileComponents();
   }));
 
-  beforeEach(inject([ScrollDispatcher], (s: ScrollDispatcher) => {
-    scroll = s;
+  describe('Basic usage', () => {
+    let scroll: ScrollDispatcher;
+    let fixture: ComponentFixture<ScrollingComponent>;
 
-    fixture = TestBed.createComponent(ScrollingComponent);
-    fixture.detectChanges();
-  }));
+    beforeEach(inject([ScrollDispatcher], (s: ScrollDispatcher) => {
+      scroll = s;
 
-  it('should be registered with the scrollable directive with the scroll service', () => {
-    const componentScrollable = fixture.componentInstance.scrollable;
-    expect(scroll.scrollableReferences.has(componentScrollable)).toBe(true);
-  });
+      fixture = TestBed.createComponent(ScrollingComponent);
+      fixture.detectChanges();
+    }));
+
+    it('should be registered with the scrollable directive with the scroll service', () => {
+      const componentScrollable = fixture.componentInstance.scrollable;
+      expect(scroll.scrollableReferences.has(componentScrollable)).toBe(true);
+    });
+
+    it('should have the scrollable directive deregistered when the component is destroyed', () => {
+      const componentScrollable = fixture.componentInstance.scrollable;
+      expect(scroll.scrollableReferences.has(componentScrollable)).toBe(true);
 
-  it('should have the scrollable directive deregistered when the component is destroyed', () => {
-    const componentScrollable = fixture.componentInstance.scrollable;
-    expect(scroll.scrollableReferences.has(componentScrollable)).toBe(true);
+      fixture.destroy();
+      expect(scroll.scrollableReferences.has(componentScrollable)).toBe(false);
+    });
+
+    it('should notify through the directive and service that a scroll event occurred', () => {
+      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
+      let hasServiceScrollNotified = false;
+      scroll.scrolled().subscribe(() => { hasServiceScrollNotified = true; });
 
-    fixture.destroy();
-    expect(scroll.scrollableReferences.has(componentScrollable)).toBe(false);
+      // 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);
+      fixture.componentInstance.scrollingElement.nativeElement.dispatchEvent(scrollEvent);
+
+      expect(hasDirectiveScrollNotified).toBe(true);
+      expect(hasServiceScrollNotified).toBe(true);
+    });
   });
 
-  it('should notify through the directive and service that a scroll event occurred', () => {
-    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
-    let hasServiceScrollNotified = false;
-    scroll.scrolled().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.
-    // The notification should be picked up by the service.
-    const scrollEvent = document.createEvent('UIEvents');
-    scrollEvent.initUIEvent('scroll', true, true, window, 0);
-    fixture.componentInstance.scrollingElement.nativeElement.dispatchEvent(scrollEvent);
-
-    expect(hasDirectiveScrollNotified).toBe(true);
-    expect(hasServiceScrollNotified).toBe(true);
+  fdescribe('Nested scrollables', () => {
+    let scroll: ScrollDispatcher;
+    let fixture: ComponentFixture<NestedScrollingComponent>;
+
+    beforeEach(inject([ScrollDispatcher], (s: ScrollDispatcher) => {
+      scroll = s;
+
+      fixture = TestBed.createComponent(NestedScrollingComponent);
+      fixture.detectChanges();
+    }));
+
+    it('should be able to identify the containing scrollables of an element', () => {
+      const interestingElement = fixture.componentInstance.interestingElement;
+      const scrollContainers = scroll.getScrollContainers(interestingElement);
+      const scrollableElementIds =
+          scrollContainers.map(scrollable => scrollable.getElementRef().nativeElement.id);
+
+      expect(scrollableElementIds).toEqual(['scrollable-1', 'scrollable-1a']);
+    });
   });
 });
 
@@ -68,7 +92,25 @@ class ScrollingComponent {
   @ViewChild('scrollingElement') scrollingElement: ElementRef;
 }
 
-const TEST_COMPONENTS = [ScrollingComponent];
+
+/** Component containing nested scrollables. */
+@Component({
+  template: `
+    <div id="scrollable-1" cdk-scrollable>
+      <div id="scrollable-1a" cdk-scrollable>
+        <div #interestingElement></div>
+      </div>
+      <div id="scrollable-1b" cdk-scrollable></div>
+    </div>
+    <div id="scrollable-2" cdk-scrollable></div>
+  `
+})
+class NestedScrollingComponent {
+  @ViewChild('interestingElement') interestingElement: ElementRef;
+  @ViewChildren(Scrollable) scrollables: QueryList<Scrollable>;
+}
+
+const TEST_COMPONENTS = [ScrollingComponent, NestedScrollingComponent];
 @NgModule({
   imports: [OverlayModule],
   providers: [ScrollDispatcher],

src/lib/tooltip/tooltip.spec.ts

@@ -300,7 +300,7 @@ describe('MdTooltip', () => {
   });
 
 
-  fdescribe('scrollable usage', () => {
+  describe('scrollable usage', () => {
     let fixture: ComponentFixture<ScrollableTooltipDemo>;
     let buttonDebugElement: DebugElement;
     let buttonElement: HTMLButtonElement;