From 7866684f2b7b5de2d911f18934638d8509361c3e Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 16 May 2018 20:37:04 +0300 Subject: [PATCH] fix(aio): avoid loading the ToC component until it is necessary (#23944) PR Close #23944 --- aio/src/app/app.component.spec.ts | 28 +++++++++++++++++++--------- aio/src/app/app.component.ts | 2 +- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts index 3597f8acd2..6431d9c79c 100644 --- a/aio/src/app/app.component.spec.ts +++ b/aio/src/app/app.component.spec.ts @@ -92,11 +92,11 @@ describe('AppComponent', () => { }); describe('hasFloatingToc', () => { - it('should initially be true', () => { + it('should initially be false', () => { const fixture2 = TestBed.createComponent(AppComponent); const component2 = fixture2.componentInstance; - expect(component2.hasFloatingToc).toBe(true); + expect(component2.hasFloatingToc).toBe(false); }); it('should be false on narrow screens', () => { @@ -632,27 +632,28 @@ describe('AppComponent', () => { toc = tocContainer && tocContainer.querySelector('aio-toc'); }; - beforeEach(() => setHasFloatingToc(true)); - it('should show/hide `` based on `hasFloatingToc`', () => { - expect(tocContainer).toBeTruthy(); - expect(toc).toBeTruthy(); - - setHasFloatingToc(false); expect(tocContainer).toBeFalsy(); expect(toc).toBeFalsy(); setHasFloatingToc(true); expect(tocContainer).toBeTruthy(); expect(toc).toBeTruthy(); + + setHasFloatingToc(false); + expect(tocContainer).toBeFalsy(); + expect(toc).toBeFalsy(); }); it('should have a non-embedded `` element', () => { + setHasFloatingToc(true); expect(toc!.classList.contains('embedded')).toBe(false); }); it('should update the TOC container\'s `maxHeight` based on `tocMaxHeight`', () => { + setHasFloatingToc(true); + expect(tocContainer!.style['max-height']).toBe(''); component.tocMaxHeight = '100'; @@ -665,11 +666,20 @@ describe('AppComponent', () => { const restrainScrolling = spyOn(component, 'restrainScrolling'); const evt = new MouseEvent('mousewheel'); + setHasFloatingToc(true); expect(restrainScrolling).not.toHaveBeenCalled(); tocContainer!.dispatchEvent(evt); expect(restrainScrolling).toHaveBeenCalledWith(evt); }); + + it('should not be loaded/registered until necessary', () => { + const loader: TestElementsLoader = fixture.debugElement.injector.get(ElementsLoader); + expect(loader.loadCustomElement).not.toHaveBeenCalled(); + + setHasFloatingToc(true); + expect(loader.loadCustomElement).toHaveBeenCalledWith('aio-toc'); + }); }); describe('footer', () => { @@ -1377,7 +1387,7 @@ class TestHttpClient { const id = match[1]!; // Make up a title for test purposes const title = id.split('/').pop()!.replace(/^([a-z])/, (_, letter) => letter.toUpperCase()); - const h1 = (id === 'no-title') ? '' : `

${title}

`; + const h1 = (id === 'no-title') ? '' : `

${title}

`; const contents = `${h1}

Some heading

`; data = { id, contents }; } diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts index 24344af74a..e587d25ad1 100644 --- a/aio/src/app/app.component.ts +++ b/aio/src/app/app.component.ts @@ -69,7 +69,7 @@ export class AppComponent implements OnInit { topMenuNodes: NavigationNode[]; topMenuNarrowNodes: NavigationNode[]; - hasFloatingToc = true; + hasFloatingToc = false; private showFloatingToc = new BehaviorSubject(false); private showFloatingTocWidth = 800; tocMaxHeight: string;