diff --git a/aio/src/app/embedded/toc/toc.component.spec.ts b/aio/src/app/embedded/toc/toc.component.spec.ts index 1127d189e0..d95f81e2a3 100644 --- a/aio/src/app/embedded/toc/toc.component.spec.ts +++ b/aio/src/app/embedded/toc/toc.component.spec.ts @@ -111,10 +111,12 @@ describe('TocComponent', () => { }); describe('when many TocItems', () => { + let scrollSpy: jasmine.Spy; beforeEach(() => { fixture.detectChanges(); page = setPage(); + scrollSpy = spyOn(tocComponent, 'scrollToTop'); }); it('should have more than 4 displayed items', () => { @@ -149,7 +151,7 @@ describe('TocComponent', () => { expect(aSecondary.classes.secondary).toEqual(true, 'has secondary class'); }); - describe('after click expando button', () => { + describe('after click tocHeading button', () => { beforeEach(() => { page.tocHeadingButton.nativeElement.click(); @@ -163,6 +165,66 @@ describe('TocComponent', () => { it('should not have "closed" class', () => { expect(tocComponentDe.children[0].classes.closed).toBeFalsy(); }); + + it('should not scroll', () => { + expect(scrollSpy).not.toHaveBeenCalled(); + }); + + it('should be "closed" after clicking again', () => { + page.tocHeadingButton.nativeElement.click(); + fixture.detectChanges(); + expect(tocComponent.isClosed).toEqual(true); + }); + + it('should scroll after clicking again', () => { + page.tocHeadingButton.nativeElement.click(); + fixture.detectChanges(); + expect(scrollSpy).toHaveBeenCalled(); + }); + + it('should be "closed" after clicking tocMoreButton', () => { + page.tocMoreButton.nativeElement.click(); + fixture.detectChanges(); + expect(tocComponent.isClosed).toEqual(true); + }); + }); + + describe('after click tocMore button', () => { + + beforeEach(() => { + page.tocMoreButton.nativeElement.click(); + fixture.detectChanges(); + }); + + it('should not be "closed"', () => { + expect(tocComponent.isClosed).toEqual(false); + }); + + it('should not have "closed" class', () => { + expect(tocComponentDe.children[0].classes.closed).toBeFalsy(); + }); + + it('should not scroll', () => { + expect(scrollSpy).not.toHaveBeenCalled(); + }); + + it('should be "closed" after clicking again', () => { + page.tocMoreButton.nativeElement.click(); + fixture.detectChanges(); + expect(tocComponent.isClosed).toEqual(true); + }); + + it('should scroll after clicking again', () => { + page.tocMoreButton.nativeElement.click(); + fixture.detectChanges(); + expect(scrollSpy).toHaveBeenCalled(); + }); + + it('should be "closed" after clicking tocHeadingButton', () => { + page.tocHeadingButton.nativeElement.click(); + fixture.detectChanges(); + expect(tocComponent.isClosed).toEqual(true); + }); }); }); }); @@ -174,6 +236,8 @@ describe('TocComponent', () => { fixture = TestBed.createComponent(HostNotEmbeddedTocComponent); tocComponentDe = fixture.debugElement.children[0]; tocComponent = tocComponentDe.componentInstance; + tocService = TestBed.get(TocService); + fixture.detectChanges(); page = setPage(); }); @@ -221,7 +285,6 @@ class TestTocService { } // tslint:disable:quotemark - function getTestTocList() { return [ { diff --git a/aio/src/app/embedded/toc/toc.component.ts b/aio/src/app/embedded/toc/toc.component.ts index 2bf96c93ee..6241fe6e13 100644 --- a/aio/src/app/embedded/toc/toc.component.ts +++ b/aio/src/app/embedded/toc/toc.component.ts @@ -13,17 +13,18 @@ export class TocComponent implements OnInit, OnDestroy { hasSecondary = false; hasToc = false; + hostElement: HTMLElement; isClosed = true; isEmbedded = false; - private primaryMax = 4; private onDestroy = new Subject(); + private primaryMax = 4; tocList: TocItem[]; constructor( elementRef: ElementRef, private tocService: TocService) { - const hostElement = elementRef.nativeElement; - this.isEmbedded = hostElement.className.indexOf('embedded') !== -1; + this.hostElement = elementRef.nativeElement; + this.isEmbedded = this.hostElement.className.indexOf('embedded') !== -1; } ngOnInit() { @@ -48,7 +49,13 @@ export class TocComponent implements OnInit, OnDestroy { this.onDestroy.next(); } + scrollToTop() { + this.hostElement.parentElement.scrollIntoView(); + if (window && window.scrollBy) { window.scrollBy(0, -100); } + } + toggle() { this.isClosed = !this.isClosed; + if (this.isClosed) { this.scrollToTop(); } } }