From 8227b56f9e052f33f3ba0d4aaac39590d4d123ec Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Tue, 14 Jul 2020 17:13:22 +0100 Subject: [PATCH] style(docs-infra): reformat ScrollService file (#30630) Pre-empting code formatting changes when the code is updated in a subsequent commit. PR Close #30630 --- aio/src/app/shared/scroll.service.spec.ts | 242 +++++++++++----------- aio/src/app/shared/scroll.service.ts | 44 ++-- 2 files changed, 140 insertions(+), 146 deletions(-) diff --git a/aio/src/app/shared/scroll.service.spec.ts b/aio/src/app/shared/scroll.service.spec.ts index 28733e5574..fd694f6930 100644 --- a/aio/src/app/shared/scroll.service.spec.ts +++ b/aio/src/app/shared/scroll.service.spec.ts @@ -1,10 +1,10 @@ -import { ReflectiveInjector } from '@angular/core'; -import { Location, LocationStrategy, PlatformLocation, ViewportScroller } from '@angular/common'; -import { DOCUMENT } from '@angular/common'; -import { MockLocationStrategy, SpyLocation } from '@angular/common/testing'; -import { fakeAsync, tick } from '@angular/core/testing'; +import {Location, LocationStrategy, PlatformLocation, ViewportScroller} from '@angular/common'; +import {DOCUMENT} from '@angular/common'; +import {MockLocationStrategy, SpyLocation} from '@angular/common/testing'; +import {ReflectiveInjector} from '@angular/core'; +import {fakeAsync, tick} from '@angular/core/testing'; -import { ScrollService, topMargin } from './scroll.service'; +import {ScrollService, topMargin} from './scroll.service'; describe('ScrollService', () => { const scrollServiceInstances: ScrollService[] = []; @@ -32,27 +32,25 @@ describe('ScrollService', () => { } class MockElement { - getBoundingClientRect = jasmine.createSpy('Element getBoundingClientRect') - .and.returnValue({top: 0}); + getBoundingClientRect = + jasmine.createSpy('Element getBoundingClientRect').and.returnValue({top: 0}); scrollIntoView = jasmine.createSpy('Element scrollIntoView'); } - const viewportScrollerStub = jasmine.createSpyObj( - 'viewportScroller', - ['getScrollPosition', 'scrollToPosition']); + const viewportScrollerStub = + jasmine.createSpyObj('viewportScroller', ['getScrollPosition', 'scrollToPosition']); beforeEach(() => { injector = ReflectiveInjector.resolveAndCreate([ - { - provide: ScrollService, - useFactory: createScrollService, - deps: [DOCUMENT, PlatformLocation, ViewportScroller, Location], - }, - { provide: Location, useClass: SpyLocation }, - { provide: DOCUMENT, useClass: MockDocument }, - { provide: PlatformLocation, useClass: MockPlatformLocation }, - { provide: ViewportScroller, useValue: viewportScrollerStub }, - { provide: LocationStrategy, useClass: MockLocationStrategy } + { + provide: ScrollService, + useFactory: createScrollService, + deps: [DOCUMENT, PlatformLocation, ViewportScroller, Location], + }, + {provide: Location, useClass: SpyLocation}, {provide: DOCUMENT, useClass: MockDocument}, + {provide: PlatformLocation, useClass: MockPlatformLocation}, + {provide: ViewportScroller, useValue: viewportScrollerStub}, + {provide: LocationStrategy, useClass: MockLocationStrategy} ]); platformLocation = injector.get(PlatformLocation); document = injector.get(DOCUMENT); @@ -68,18 +66,19 @@ describe('ScrollService', () => { }); it('should debounce `updateScrollPositonInHistory()`', fakeAsync(() => { - const updateScrollPositionInHistorySpy = spyOn(scrollService, 'updateScrollPositionInHistory'); + const updateScrollPositionInHistorySpy = + spyOn(scrollService, 'updateScrollPositionInHistory'); - window.dispatchEvent(new Event('scroll')); - tick(249); - window.dispatchEvent(new Event('scroll')); - tick(249); - window.dispatchEvent(new Event('scroll')); - tick(249); - expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled(); - tick(1); - expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1); - })); + window.dispatchEvent(new Event('scroll')); + tick(249); + window.dispatchEvent(new Event('scroll')); + tick(249); + window.dispatchEvent(new Event('scroll')); + tick(249); + expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled(); + tick(1); + expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1); + })); it('should set `scrollRestoration` to `manual` if supported', () => { if (scrollService.supportManualScrollRestoration) { @@ -96,7 +95,9 @@ describe('ScrollService', () => { try { // Simulate `window.sessionStorage` being inaccessible, when cookies are disabled. Object.defineProperty(window, 'sessionStorage', { - get() { throw new Error('The operation is insecure'); }, + get() { + throw new Error('The operation is insecure'); + }, }); const platformLoc = platformLocation as PlatformLocation; @@ -198,8 +199,7 @@ describe('ScrollService', () => { platformLocation.hash = ''; const topOfPage = new MockElement(); - document.getElementById.and - .callFake((id: string) => id === 'top-of-page' ? topOfPage : null); + document.getElementById.and.callFake((id: string) => id === 'top-of-page' ? topOfPage : null); scrollService.scroll(); expect(topOfPage.scrollIntoView).toHaveBeenCalled(); @@ -227,7 +227,7 @@ describe('ScrollService', () => { it('should scroll to the element whose id matches the hash with encoded characters', () => { const element = new MockElement(); - platformLocation.hash = '%F0%9F%91%8D'; // 👍 + platformLocation.hash = '%F0%9F%91%8D'; // 👍 document.getElementById.and.returnValue(element); scrollService.scroll(); @@ -289,8 +289,7 @@ describe('ScrollService', () => { it('should scroll to top', () => { const topOfPageElement = new MockElement() as any as Element; document.getElementById.and.callFake( - (id: string) => id === 'top-of-page' ? topOfPageElement : null - ); + (id: string) => id === 'top-of-page' ? topOfPageElement : null); scrollService.scrollToTop(); expect(topOfPageElement.scrollIntoView).toHaveBeenCalled(); @@ -312,58 +311,55 @@ describe('ScrollService', () => { describe('#needToFixScrollPosition', async () => { it('should return true when popState event was fired after a back navigation if the browser supports ' + - 'scrollRestoration`. Otherwise, needToFixScrollPosition() returns false', () => { + 'scrollRestoration`. Otherwise, needToFixScrollPosition() returns false', + () => { + if (scrollService.supportManualScrollRestoration) { + location.go('/initial-url1'); + // We simulate a scroll down + location.replaceState('/initial-url1', 'hack', {scrollPosition: [2000, 0]}); + location.go('/initial-url2'); + location.back(); - if (scrollService.supportManualScrollRestoration) { - location.go('/initial-url1'); - // We simulate a scroll down - location.replaceState('/initial-url1', 'hack', {scrollPosition: [2000, 0]}); - location.go('/initial-url2'); - location.back(); + expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); + expect(scrollService.needToFixScrollPosition()).toBe(true); + } else { + location.go('/initial-url1'); + location.go('/initial-url2'); + location.back(); - expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); - expect(scrollService.needToFixScrollPosition()).toBe(true); - } else { - location.go('/initial-url1'); - location.go('/initial-url2'); - location.back(); - - expect(scrollService.poppedStateScrollPosition).toBe(null); - expect(scrollService.needToFixScrollPosition()).toBe(false); - } - - }); + expect(scrollService.poppedStateScrollPosition).toBe(null); + expect(scrollService.needToFixScrollPosition()).toBe(false); + } + }); it('should return true when popState event was fired after a forward navigation if the browser supports ' + - 'scrollRestoration`. Otherwise, needToFixScrollPosition() returns false', () => { + 'scrollRestoration`. Otherwise, needToFixScrollPosition() returns false', + () => { + if (scrollService.supportManualScrollRestoration) { + location.go('/initial-url1'); + location.go('/initial-url2'); + // We simulate a scroll down + location.replaceState('/initial-url1', 'hack', {scrollPosition: [2000, 0]}); - if (scrollService.supportManualScrollRestoration) { - location.go('/initial-url1'); - location.go('/initial-url2'); - // We simulate a scroll down - location.replaceState('/initial-url1', 'hack', {scrollPosition: [2000, 0]}); + location.back(); + scrollService.poppedStateScrollPosition = [0, 0]; + location.forward(); - location.back(); - scrollService.poppedStateScrollPosition = [0, 0]; - location.forward(); + expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); + expect(scrollService.needToFixScrollPosition()).toBe(true); + } else { + location.go('/initial-url1'); + location.go('/initial-url2'); + location.back(); + location.forward(); - expect(scrollService.poppedStateScrollPosition).toEqual([2000, 0]); - expect(scrollService.needToFixScrollPosition()).toBe(true); - } else { - location.go('/initial-url1'); - location.go('/initial-url2'); - location.back(); - location.forward(); - - expect(scrollService.poppedStateScrollPosition).toBe(null); - expect(scrollService.needToFixScrollPosition()).toBe(false); - } - - }); + expect(scrollService.poppedStateScrollPosition).toBe(null); + expect(scrollService.needToFixScrollPosition()).toBe(false); + } + }); }); describe('#scrollAfterRender', async () => { - let scrollSpy: jasmine.Spy; let scrollToTopSpy: jasmine.Spy; let needToFixScrollPositionSpy: jasmine.Spy; @@ -383,69 +379,69 @@ describe('ScrollService', () => { it('should call `scroll` when we navigate to a location with anchor', fakeAsync(() => { - needToFixScrollPositionSpy.and.returnValue(false); - getStoredScrollPositionSpy.and.returnValue(null); - isLocationWithHashSpy.and.returnValue(true); + needToFixScrollPositionSpy.and.returnValue(false); + getStoredScrollPositionSpy.and.returnValue(null); + isLocationWithHashSpy.and.returnValue(true); - scrollService.scrollAfterRender(scrollDelay); + scrollService.scrollAfterRender(scrollDelay); - expect(scrollSpy).not.toHaveBeenCalled(); - tick(scrollDelay); - expect(scrollSpy).toHaveBeenCalled(); - })); + expect(scrollSpy).not.toHaveBeenCalled(); + tick(scrollDelay); + expect(scrollSpy).toHaveBeenCalled(); + })); it('should call `scrollToTop` when we navigate to a location without anchor', fakeAsync(() => { - needToFixScrollPositionSpy.and.returnValue(false); - getStoredScrollPositionSpy.and.returnValue(null); - isLocationWithHashSpy.and.returnValue(false); + needToFixScrollPositionSpy.and.returnValue(false); + getStoredScrollPositionSpy.and.returnValue(null); + isLocationWithHashSpy.and.returnValue(false); - scrollService.scrollAfterRender(scrollDelay); + scrollService.scrollAfterRender(scrollDelay); - expect(scrollToTopSpy).toHaveBeenCalled(); - tick(scrollDelay); - expect(scrollSpy).not.toHaveBeenCalled(); - })); + expect(scrollToTopSpy).toHaveBeenCalled(); + tick(scrollDelay); + expect(scrollSpy).not.toHaveBeenCalled(); + })); it('should call `viewportScroller.scrollToPosition` when we reload a page', fakeAsync(() => { - getStoredScrollPositionSpy.and.returnValue([0, 1000]); + getStoredScrollPositionSpy.and.returnValue([0, 1000]); - scrollService.scrollAfterRender(scrollDelay); + scrollService.scrollAfterRender(scrollDelay); - expect(viewportScrollerStub.scrollToPosition).toHaveBeenCalled(); - expect(getStoredScrollPositionSpy).toHaveBeenCalled(); - })); + expect(viewportScrollerStub.scrollToPosition).toHaveBeenCalled(); + expect(getStoredScrollPositionSpy).toHaveBeenCalled(); + })); it('should call `scrollToPosition` after a popState', fakeAsync(() => { - needToFixScrollPositionSpy.and.returnValue(true); - getStoredScrollPositionSpy.and.returnValue(null); - scrollService.scrollAfterRender(scrollDelay); - expect(scrollToPosition).toHaveBeenCalled(); - tick(scrollDelay); - expect(scrollSpy).not.toHaveBeenCalled(); - expect(scrollToTopSpy).not.toHaveBeenCalled(); - })); + needToFixScrollPositionSpy.and.returnValue(true); + getStoredScrollPositionSpy.and.returnValue(null); + scrollService.scrollAfterRender(scrollDelay); + expect(scrollToPosition).toHaveBeenCalled(); + tick(scrollDelay); + expect(scrollSpy).not.toHaveBeenCalled(); + expect(scrollToTopSpy).not.toHaveBeenCalled(); + })); }); describe('once destroyed', () => { it('should stop updating scroll position', fakeAsync(() => { - const updateScrollPositionInHistorySpy = - spyOn(scrollService, 'updateScrollPositionInHistory'); + const updateScrollPositionInHistorySpy = + spyOn(scrollService, 'updateScrollPositionInHistory'); - window.dispatchEvent(new Event('scroll')); - tick(250); - expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1); + window.dispatchEvent(new Event('scroll')); + tick(250); + expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(1); - window.dispatchEvent(new Event('scroll')); - tick(250); - expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(2); + window.dispatchEvent(new Event('scroll')); + tick(250); + expect(updateScrollPositionInHistorySpy).toHaveBeenCalledTimes(2); - updateScrollPositionInHistorySpy.calls.reset(); - scrollService.ngOnDestroy(); + updateScrollPositionInHistorySpy.calls.reset(); + scrollService.ngOnDestroy(); - window.dispatchEvent(new Event('scroll')); - tick(250); - expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled(); - })); + window.dispatchEvent(new Event('scroll')); + tick(250); + expect(updateScrollPositionInHistorySpy).not.toHaveBeenCalled(); + })); it('should stop updating the stored location href', () => { const updateScrollLocationHrefSpy = spyOn(scrollService, 'updateScrollLocationHref'); diff --git a/aio/src/app/shared/scroll.service.ts b/aio/src/app/shared/scroll.service.ts index 436040c8d3..3664bbc130 100644 --- a/aio/src/app/shared/scroll.service.ts +++ b/aio/src/app/shared/scroll.service.ts @@ -1,7 +1,7 @@ -import { DOCUMENT, Location, PlatformLocation, PopStateEvent, ViewportScroller } from '@angular/common'; -import { Injectable, Inject, OnDestroy } from '@angular/core'; -import { fromEvent, Subject } from 'rxjs'; -import { debounceTime, takeUntil } from 'rxjs/operators'; +import {DOCUMENT, Location, PlatformLocation, PopStateEvent, ViewportScroller} from '@angular/common'; +import {Inject, Injectable, OnDestroy} from '@angular/core'; +import {fromEvent, Subject} from 'rxjs'; +import {debounceTime, takeUntil} from 'rxjs/operators'; type ScrollPosition = [number, number]; interface ScrollPositionPopStateEvent extends PopStateEvent { @@ -15,18 +15,17 @@ export const topMargin = 16; */ @Injectable() export class ScrollService implements OnDestroy { - - private _topOffset: number | null; + private _topOffset: number|null; private _topOfPageElement: Element; private onDestroy = new Subject(); private storage: Storage; // The scroll position which has to be restored, after a `popstate` event. - poppedStateScrollPosition: ScrollPosition | null = null; + poppedStateScrollPosition: ScrollPosition|null = null; // Whether the browser supports the necessary features for manual scroll restoration. - supportManualScrollRestoration: boolean = - !!window && ('scrollTo' in window) && ('scrollX' in window) && ('scrollY' in window) && - !!history && ('scrollRestoration' in history); + supportManualScrollRestoration: boolean = !!window && ('scrollTo' in window) && + ('scrollX' in window) && ('scrollY' in window) && !!history && + ('scrollRestoration' in history); // Offset from the top of the document to bottom of any static elements // at the top (e.g. toolbar) + some margin @@ -46,10 +45,8 @@ export class ScrollService implements OnDestroy { } constructor( - @Inject(DOCUMENT) private document: any, - private platformLocation: PlatformLocation, - private viewportScroller: ViewportScroller, - private location: Location) { + @Inject(DOCUMENT) private document: any, private platformLocation: PlatformLocation, + private viewportScroller: ViewportScroller, private location: Location) { try { this.storage = window.sessionStorage; } catch { @@ -118,9 +115,7 @@ export class ScrollService implements OnDestroy { */ scroll() { const hash = this.getCurrentHash(); - const element: HTMLElement = hash - ? this.document.getElementById(hash) - : this.topOfPageElement; + const element: HTMLElement = hash ? this.document.getElementById(hash) : this.topOfPageElement; this.scrollToElement(element); } @@ -132,8 +127,8 @@ export class ScrollService implements OnDestroy { } /** - * When we load a document, we have to scroll to the correct position depending on whether this is a new location, - * a back/forward in the history, or a refresh + * When we load a document, we have to scroll to the correct position depending on whether this is + * a new location, a back/forward in the history, or a refresh * @param delay before we scroll to the good position */ scrollAfterRender(delay: number) { @@ -208,19 +203,22 @@ export class ScrollService implements OnDestroy { updateScrollPositionInHistory() { if (this.supportManualScrollRestoration) { const currentScrollPosition = this.viewportScroller.getScrollPosition(); - this.location.replaceState(this.location.path(true), undefined, {scrollPosition: currentScrollPosition}); + this.location.replaceState( + this.location.path(true), undefined, {scrollPosition: currentScrollPosition}); this.storage.setItem('scrollPosition', currentScrollPosition.join(',')); } } - getStoredScrollLocationHref(): string | null { + getStoredScrollLocationHref(): string|null { const href = this.storage.getItem('scrollLocationHref'); return href || null; } - getStoredScrollPosition(): ScrollPosition | null { + getStoredScrollPosition(): ScrollPosition|null { const position = this.storage.getItem('scrollPosition'); - if (!position) { return null; } + if (!position) { + return null; + } const [x, y] = position.split(','); return [+x, +y];