|
| 1 | +import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; |
| 2 | +import {Component, DebugElement, ViewChild} from '@angular/core'; |
| 3 | +import { |
| 4 | + StickyHeaderModule, |
| 5 | + CdkStickyRegion, |
| 6 | + CdkStickyHeader, |
| 7 | + STICKY_HEADER_SUPPORT_STRATEGY |
| 8 | +} from './index'; |
| 9 | +import {OverlayModule, Scrollable} from '../core/overlay/index'; |
| 10 | +import {PlatformModule} from '../core/platform/index'; |
| 11 | +import {By} from '@angular/platform-browser'; |
| 12 | +import {dispatchFakeEvent} from '@angular/cdk/testing'; |
| 13 | + |
| 14 | +const DEBOUNCE_TIME: number = 5; |
| 15 | + |
| 16 | +describe('sticky-header with positioning not supported', () => { |
| 17 | + let fixture: ComponentFixture<StickyHeaderTest>; |
| 18 | + let testComponent: StickyHeaderTest; |
| 19 | + let stickyElement: DebugElement; |
| 20 | + let stickyParentElement: DebugElement; |
| 21 | + let scrollableElement: DebugElement; |
| 22 | + let stickyHeader: CdkStickyHeader; |
| 23 | + |
| 24 | + beforeEach(async(() => { |
| 25 | + TestBed.configureTestingModule({ |
| 26 | + imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], |
| 27 | + declarations: [StickyHeaderTest], |
| 28 | + providers: [ |
| 29 | + {provide: STICKY_HEADER_SUPPORT_STRATEGY, useValue: false}, |
| 30 | + ], |
| 31 | + }); |
| 32 | + TestBed.compileComponents(); |
| 33 | + })); |
| 34 | + |
| 35 | + beforeEach(() => { |
| 36 | + fixture = TestBed.createComponent(StickyHeaderTest); |
| 37 | + fixture.detectChanges(); |
| 38 | + testComponent = fixture.debugElement.componentInstance; |
| 39 | + stickyElement = fixture.debugElement.query(By.directive(CdkStickyHeader)); |
| 40 | + stickyParentElement = fixture.debugElement.query(By.directive(CdkStickyRegion)); |
| 41 | + stickyHeader = stickyElement.injector.get<CdkStickyHeader>(CdkStickyHeader); |
| 42 | + scrollableElement = fixture.debugElement.query(By.directive(Scrollable)); |
| 43 | + }); |
| 44 | + |
| 45 | + it('should be able to find stickyParent', () => { |
| 46 | + expect(stickyHeader.stickyParent).not.toBeNull(); |
| 47 | + }); |
| 48 | + |
| 49 | + it('should be able to find scrollableContainer', () => { |
| 50 | + expect(stickyHeader.upperScrollableContainer).not.toBeNull(); |
| 51 | + }); |
| 52 | + |
| 53 | + it('should stick in the right place when scrolled to the top of the container', fakeAsync(() => { |
| 54 | + let scrollableContainerTop = stickyHeader.upperScrollableContainer |
| 55 | + .getBoundingClientRect().top; |
| 56 | + expect(stickyHeader.element.getBoundingClientRect().top).not.toBe(scrollableContainerTop); |
| 57 | + tick(); |
| 58 | + |
| 59 | + // Scroll the scrollableContainer up to stick |
| 60 | + fixture.componentInstance.scrollDown(); |
| 61 | + // wait for the DEBOUNCE_TIME |
| 62 | + tick(DEBOUNCE_TIME); |
| 63 | + |
| 64 | + expect(stickyHeader.element.getBoundingClientRect().top).toBe(scrollableContainerTop); |
| 65 | + })); |
| 66 | + |
| 67 | + it('should unstuck when scrolled off the top of the container', fakeAsync(() => { |
| 68 | + let scrollableContainerTop = stickyHeader.upperScrollableContainer |
| 69 | + .getBoundingClientRect().top; |
| 70 | + expect(stickyHeader.element.getBoundingClientRect().top).not.toBe(scrollableContainerTop); |
| 71 | + tick(); |
| 72 | + |
| 73 | + // Scroll the scrollableContainer up to stick |
| 74 | + fixture.componentInstance.scrollDown(); |
| 75 | + // wait for the DEBOUNCE_TIME |
| 76 | + tick(DEBOUNCE_TIME); |
| 77 | + |
| 78 | + expect(stickyHeader.element.getBoundingClientRect().top).toBe(scrollableContainerTop); |
| 79 | + |
| 80 | + // Scroll the scrollableContainer down to unstuck |
| 81 | + fixture.componentInstance.scrollBack(); |
| 82 | + tick(DEBOUNCE_TIME); |
| 83 | + |
| 84 | + expect(stickyHeader.element.getBoundingClientRect().top).not.toBe(scrollableContainerTop); |
| 85 | + |
| 86 | + })); |
| 87 | +}); |
| 88 | + |
| 89 | +describe('sticky-header with positioning supported', () => { |
| 90 | + let fixture: ComponentFixture<StickyHeaderTest>; |
| 91 | + let testComponent: StickyHeaderTest; |
| 92 | + let stickyElement: DebugElement; |
| 93 | + let stickyParentElement: DebugElement; |
| 94 | + let stickyHeader: CdkStickyHeader; |
| 95 | + |
| 96 | + beforeEach(async(() => { |
| 97 | + TestBed.configureTestingModule({ |
| 98 | + imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], |
| 99 | + declarations: [StickyHeaderTest], |
| 100 | + providers: [ |
| 101 | + {provide: STICKY_HEADER_SUPPORT_STRATEGY, useValue: true}, |
| 102 | + ], |
| 103 | + }); |
| 104 | + TestBed.compileComponents(); |
| 105 | + })); |
| 106 | + |
| 107 | + beforeEach(() => { |
| 108 | + fixture = TestBed.createComponent(StickyHeaderTest); |
| 109 | + fixture.detectChanges(); |
| 110 | + testComponent = fixture.debugElement.componentInstance; |
| 111 | + stickyElement = fixture.debugElement.query(By.directive(CdkStickyHeader)); |
| 112 | + stickyParentElement = fixture.debugElement.query(By.directive(CdkStickyRegion)); |
| 113 | + stickyHeader = stickyElement.injector.get<CdkStickyHeader>(CdkStickyHeader); |
| 114 | + }); |
| 115 | + |
| 116 | + it('should find sticky positioning is applied', () => { |
| 117 | + let position = window.getComputedStyle(stickyHeader.element).position; |
| 118 | + expect(position).not.toBeNull(); |
| 119 | + expect(/sticky/i.test(position!)).toBe(true); |
| 120 | + }); |
| 121 | +}); |
| 122 | + |
| 123 | +describe('test sticky-header without StickyRegion', () => { |
| 124 | + let fixture: ComponentFixture<StickyHeaderTestNoStickyRegion>; |
| 125 | + let testComponent: StickyHeaderTestNoStickyRegion; |
| 126 | + let stickyElement: DebugElement; |
| 127 | + let stickyHeader: CdkStickyHeader; |
| 128 | + |
| 129 | + beforeEach(async(() => { |
| 130 | + TestBed.configureTestingModule({ |
| 131 | + imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], |
| 132 | + declarations: [StickyHeaderTestNoStickyRegion], |
| 133 | + providers: [ |
| 134 | + {provide: STICKY_HEADER_SUPPORT_STRATEGY, useValue: false}, |
| 135 | + ], |
| 136 | + }); |
| 137 | + TestBed.compileComponents(); |
| 138 | + })); |
| 139 | + |
| 140 | + beforeEach(() => { |
| 141 | + fixture = TestBed.createComponent(StickyHeaderTestNoStickyRegion); |
| 142 | + fixture.detectChanges(); |
| 143 | + testComponent = fixture.debugElement.componentInstance; |
| 144 | + stickyElement = fixture.debugElement.query(By.directive(CdkStickyHeader)); |
| 145 | + stickyHeader = stickyElement.injector.get<CdkStickyHeader>(CdkStickyHeader); |
| 146 | + }); |
| 147 | + |
| 148 | + it('should be able to find stickyParent', () => { |
| 149 | + let p = stickyHeader.stickyParent; |
| 150 | + expect(p).not.toBeNull(); |
| 151 | + expect(p!.id).toBe('default-region'); |
| 152 | + }); |
| 153 | +}); |
| 154 | + |
| 155 | +@Component({ |
| 156 | + // Use styles to define the style of scrollable container and header, |
| 157 | + // which help test to make sure whether the header is stuck at the right position. |
| 158 | + styles:[` |
| 159 | + .scrollable-style { |
| 160 | + text-align: center; |
| 161 | + -webkit-appearance: none; |
| 162 | + -moz-appearance: none; |
| 163 | + height: 300px; |
| 164 | + overflow: auto; |
| 165 | + } |
| 166 | + .heading-style { |
| 167 | + background: whitesmoke; |
| 168 | + padding: 5px; |
| 169 | + } |
| 170 | + `], |
| 171 | + template: ` |
| 172 | + <div cdk-scrollable class="scrollable-style"> |
| 173 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 174 | + <div cdkStickyRegion> |
| 175 | + <div cdkStickyHeader class="heading-style"> |
| 176 | + <h2>Heading 1</h2> |
| 177 | + </div> |
| 178 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 179 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 180 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 181 | + </div> |
| 182 | + </div> |
| 183 | + `}) |
| 184 | +class StickyHeaderTest { |
| 185 | + @ViewChild(Scrollable) scrollingContainer: Scrollable; |
| 186 | + |
| 187 | + items: any[] = [ |
| 188 | + {'name': 'Forrest', 'message': 'Life was like a box of chocolates'}, |
| 189 | + {'name': 'Gump', 'message': 'you never know what you are gonna get'}, |
| 190 | + {'name': 'Lion King', 'message': 'Everything you see exists together'}, |
| 191 | + {'name': 'Jack', 'message': 'in a delicate balance'}, |
| 192 | + {'name': 'Garfield', 'message': 'Save Water'}, |
| 193 | + {'name': 'Shawshank', 'message': 'There is something inside'}, |
| 194 | + {'name': 'Jone', 'message': 'Enough movies?'}, |
| 195 | + ]; |
| 196 | + |
| 197 | + scrollDown() { |
| 198 | + const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement; |
| 199 | + scrollingContainerEl.scrollTop = 300; |
| 200 | + |
| 201 | + // Emit a scroll event from the scrolling element in our component. |
| 202 | + dispatchFakeEvent(scrollingContainerEl, 'scroll'); |
| 203 | + } |
| 204 | + |
| 205 | + scrollBack() { |
| 206 | + const scrollingContainerEl = this.scrollingContainer.getElementRef().nativeElement; |
| 207 | + scrollingContainerEl.scrollTop = 0; |
| 208 | + |
| 209 | + // Emit a scroll event from the scrolling element in our component. |
| 210 | + dispatchFakeEvent(scrollingContainerEl, 'scroll'); |
| 211 | + } |
| 212 | +} |
| 213 | + |
| 214 | +@Component({ |
| 215 | + // Use styles to define the style of scrollable container and header, |
| 216 | + // which help test to make sure whether the header is stuck at the right position. |
| 217 | + styles:[` |
| 218 | + .scrollable-style { |
| 219 | + text-align: center; |
| 220 | + -webkit-appearance: none; |
| 221 | + -moz-appearance: none; |
| 222 | + height: 300px; |
| 223 | + overflow: auto; |
| 224 | + } |
| 225 | + .heading-style { |
| 226 | + background: whitesmoke; |
| 227 | + padding: 5px; |
| 228 | + } |
| 229 | + `], |
| 230 | + template: ` |
| 231 | + <div cdk-scrollable class="scrollable-style"> |
| 232 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 233 | + <div id="default-region"> |
| 234 | + <div cdkStickyHeader class="heading-style"> |
| 235 | + <h2>Heading 1</h2> |
| 236 | + </div> |
| 237 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 238 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 239 | + <p *ngFor="let item of items"> {{item.name}} : {{item.message}}</p> |
| 240 | + </div> |
| 241 | + </div> |
| 242 | + `}) |
| 243 | +class StickyHeaderTestNoStickyRegion { |
| 244 | + items: any[] = [ |
| 245 | + {'name': 'Forrest', 'message': 'Life was like a box of chocolates'}, |
| 246 | + {'name': 'Gump', 'message': 'you never know what you are gonna get'}, |
| 247 | + {'name': 'Lion King', 'message': 'Everything you see exists together'}, |
| 248 | + {'name': 'Jack', 'message': 'in a delicate balance'}, |
| 249 | + {'name': 'Garfield', 'message': 'Save Water'}, |
| 250 | + {'name': 'Shawshank', 'message': 'There is something inside'}, |
| 251 | + {'name': 'Jone', 'message': 'Enough movies?'}, |
| 252 | + ]; |
| 253 | +} |
0 commit comments