From 5ef3d83955bda81f55b9abe8508961c6fc91777d Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 7 Jul 2023 14:15:58 +0200 Subject: [PATCH 01/20] Disable event listener on desktop --- .../src/modal-wrapper/modal-wrapper.component.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index c94a0465d9..34a0110264 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -356,13 +356,15 @@ export class ModalWrapperComponent map((event) => event.detail), takeUntil(this.destroy$) ); - - this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { - if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) { - this.isContentScrolled = !this.isContentScrolled; - this.changeDetector.detectChanges(); - } - }); + //disable listening on desktop + if (!this.platform.isPhabletOrBigger()) { + this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { + if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) { + this.isContentScrolled = !this.isContentScrolled; + this.changeDetector.detectChanges(); + } + }); + } }); } From ccf581e0a15154bbbe56292127ed704453d42c80 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Mon, 10 Jul 2023 15:24:25 +0200 Subject: [PATCH 02/20] Add unfinished test for IonScroll --- .../modal-wrapper.component.spec.ts | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index ac0787850d..55a640fbd6 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -1,8 +1,8 @@ -import { fakeAsync, tick } from '@angular/core/testing'; -import { IonContent } from '@ionic/angular'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { IonContent, Platform } from '@ionic/angular'; import { WindowRef } from '@kirbydesign/designsystem/types'; import { createComponentFactory, Spectator } from '@ngneat/spectator'; -import { MockComponents } from 'ng-mocks'; +import { MockComponent, MockComponents } from 'ng-mocks'; import { TestHelper } from '@kirbydesign/designsystem/testing'; import { IconComponent } from '@kirbydesign/designsystem/icon'; @@ -647,4 +647,22 @@ describe('ModalWrapperComponent', () => { }); }); }); + describe('IonScrolled', () => { + it('When screensize is desktop should not subscribe to IonScroll', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); + //@ts-ignore + const contentScrolledSpy = spyOn(spectator.component.contentScrolled$, 'subscribe'); + expect(contentScrolledSpy).not.toHaveBeenCalled(); + }); + + it('When screensize is phone should subscribe to IonScroll', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + //@ts-ignore + const contentScrolledSpy = spyOn(spectator.component.contentScrolled$, 'subscribe'); + console.log(contentScrolledSpy); + console.log('Here test'); + + expect(contentScrolledSpy).toHaveBeenCalled(); + }); + }); }); From 3a6de56dca59a6087d1f234e8b9f12fe1e71c230 Mon Sep 17 00:00:00 2001 From: Mark Drastrup Date: Wed, 12 Jul 2023 15:50:43 +0200 Subject: [PATCH 03/20] Refactor tests --- .../modal-wrapper.component.spec.ts | 70 +++++++++++++++---- .../modal-wrapper/modal-wrapper.component.ts | 18 ++--- 2 files changed, 64 insertions(+), 24 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 55a640fbd6..ba4ffc4cbe 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -647,22 +647,62 @@ describe('ModalWrapperComponent', () => { }); }); }); - describe('IonScrolled', () => { - it('When screensize is desktop should not subscribe to IonScroll', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); - //@ts-ignore - const contentScrolledSpy = spyOn(spectator.component.contentScrolled$, 'subscribe'); - expect(contentScrolledSpy).not.toHaveBeenCalled(); - }); +}); + +describe('initializeContentScrollListening', () => { + const createComponent = createComponentFactory({ + component: ModalWrapperComponent, + entryComponents: [ + TitleEmbeddedComponent, + StaticFooterEmbeddedComponent, + DynamicFooterEmbeddedComponent, + InputEmbeddedComponent, + StaticPageProgressEmbeddedComponent, + DynamicPageProgressEmbeddedComponent, + ], + providers: [ + { + provide: WindowRef, + useValue: { nativeWindow: window }, + }, + ], + declarations: [MockComponents(ButtonComponent)], + mocks: [CanDismissHelper], + }); - it('When screensize is phone should subscribe to IonScroll', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.phone); - //@ts-ignore - const contentScrolledSpy = spyOn(spectator.component.contentScrolled$, 'subscribe'); - console.log(contentScrolledSpy); - console.log('Here test'); + let modalWrapperTestBuilder: ModalWrapperTestBuilder; + let spectator: Spectator; - expect(contentScrolledSpy).toHaveBeenCalled(); - }); + afterEach(() => { + spectator.fixture.destroy(); + TestHelper.resetTestWindow(); + }); + + it('it should not assign a value to contentScrolled$ when opened on desktop', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); + + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + + //@ts-ignore + expect(spectator.component.contentScrolled$).toBeFalsy(); + }); + + it('it should assign a value to contentScrolled$ when opened on a phone', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + + //@ts-ignore + expect(spectator.component.contentScrolled$).toBeTruthy(); }); }); diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index 34a0110264..8baa8eafc0 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -350,21 +350,21 @@ export class ModalWrapperComponent * when ionScroll emits. */ private initializeContentScrollListening() { + if (this.platform.isPhabletOrBigger()) return; + this.zone.runOutsideAngular(() => { this.contentScrolled$ = this.ionContent.ionScroll.pipe( debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$) ); - //disable listening on desktop - if (!this.platform.isPhabletOrBigger()) { - this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { - if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) { - this.isContentScrolled = !this.isContentScrolled; - this.changeDetector.detectChanges(); - } - }); - } + + this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { + if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) { + this.isContentScrolled = !this.isContentScrolled; + this.changeDetector.detectChanges(); + } + }); }); } From 405817210dd0f88b2d53a4be38c7329f7b3055e0 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 4 Aug 2023 14:29:08 +0200 Subject: [PATCH 04/20] Dynamically check resize and destroy contentScroll --- .../modal-wrapper/modal-wrapper.component.ts | 32 ++++++++++++++++--- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index 8baa8eafc0..8ee0dbf0b4 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -139,7 +139,7 @@ export class ModalWrapperComponent private contentScrolled$: Observable; private destroy$: Subject = new Subject(); - + private destroyContentScrolled$: Subject = new Subject(); @HostBinding('class.drawer') get _isDrawer() { return this.config.flavor === 'drawer'; @@ -177,6 +177,26 @@ export class ModalWrapperComponent providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }], parent: this.injector, }); + + const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`; + const mediaQuery = this.windowRef.nativeWindow.matchMedia(query); + + mediaQuery.onchange = (ev) => { + if (ev.matches) { + //Remove contentScrolled when dynamically resized to desktop + this.destroyContentScrolled$.next(); + this.destroyContentScrolled$.complete(); + } else { + this.initializeContentScrollListening(); + console.log(this.contentScrolled$); + } + }; + + if (mediaQuery.matches) { + //desktop + } else { + this.initializeContentScrollListening(); + } } ngAfterViewInit(): void { @@ -184,7 +204,7 @@ export class ModalWrapperComponent this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement); } - this.initializeContentScrollListening(); + //this.initializeContentScrollListening(); } private _currentFooter: HTMLElement | null = null; @@ -350,13 +370,12 @@ export class ModalWrapperComponent * when ionScroll emits. */ private initializeContentScrollListening() { - if (this.platform.isPhabletOrBigger()) return; - + console.log('initializecontent'); this.zone.runOutsideAngular(() => { this.contentScrolled$ = this.ionContent.ionScroll.pipe( debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), - takeUntil(this.destroy$) + takeUntil(this.destroyContentScrolled$) ); this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { @@ -584,5 +603,8 @@ export class ModalWrapperComponent } this.destroy$.next(); this.destroy$.complete(); + + this.destroyContentScrolled$.next(); + this.destroyContentScrolled$.complete(); } } From 40b75d11a97e5a0e6de4cb14354f60e34c4b285f Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 31 Aug 2023 10:29:50 +0200 Subject: [PATCH 05/20] Add describe block to top level describe --- .../modal-wrapper.component.spec.ts | 75 ++++++------------- 1 file changed, 23 insertions(+), 52 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index ba4ffc4cbe..4bb45a8d6e 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -647,62 +647,33 @@ describe('ModalWrapperComponent', () => { }); }); }); -}); + describe('initializeContentScrollListening', () => { + it('it should not assign a value to contentScrolled$ when opened on desktop', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); -describe('initializeContentScrollListening', () => { - const createComponent = createComponentFactory({ - component: ModalWrapperComponent, - entryComponents: [ - TitleEmbeddedComponent, - StaticFooterEmbeddedComponent, - DynamicFooterEmbeddedComponent, - InputEmbeddedComponent, - StaticPageProgressEmbeddedComponent, - DynamicPageProgressEmbeddedComponent, - ], - providers: [ - { - provide: WindowRef, - useValue: { nativeWindow: window }, - }, - ], - declarations: [MockComponents(ButtonComponent)], - mocks: [CanDismissHelper], - }); - - let modalWrapperTestBuilder: ModalWrapperTestBuilder; - let spectator: Spectator; - - afterEach(() => { - spectator.fixture.destroy(); - TestHelper.resetTestWindow(); - }); + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); - it('it should not assign a value to contentScrolled$ when opened on desktop', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); + //@ts-ignore + expect(spectator.component.contentScrolled$).toBeFalsy(); + }); - modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); - spectator = modalWrapperTestBuilder - .flavor('modal') - .title('test') - .component(TitleEmbeddedComponent) - .build(); - - //@ts-ignore - expect(spectator.component.contentScrolled$).toBeFalsy(); - }); + it('it should assign a value to contentScrolled$ when opened on a phone', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); - it('it should assign a value to contentScrolled$ when opened on a phone', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); - modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); - spectator = modalWrapperTestBuilder - .flavor('modal') - .title('test') - .component(TitleEmbeddedComponent) - .build(); - - //@ts-ignore - expect(spectator.component.contentScrolled$).toBeTruthy(); + //@ts-ignore + expect(spectator.component.contentScrolled$).toBeTruthy(); + }); }); }); From d6564672af1bfb643f73853cc3828241886d4582 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 12 Oct 2023 14:49:16 +0200 Subject: [PATCH 06/20] Member variable for scrollEvents --- .../modal-wrapper.component.html | 2 +- .../modal-wrapper/modal-wrapper.component.ts | 31 ++++++------------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html index b9916e02aa..a25b491ca4 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html @@ -28,7 +28,7 @@ - + diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index 8ee0dbf0b4..63b087b1d8 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -134,12 +134,11 @@ export class ModalWrapperComponent } return this._intersectionObserver; } - + isScrollEventsEnabled: boolean; isContentScrolled: boolean; private contentScrolled$: Observable; private destroy$: Subject = new Subject(); - private destroyContentScrolled$: Subject = new Subject(); @HostBinding('class.drawer') get _isDrawer() { return this.config.flavor === 'drawer'; @@ -181,30 +180,22 @@ export class ModalWrapperComponent const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`; const mediaQuery = this.windowRef.nativeWindow.matchMedia(query); - mediaQuery.onchange = (ev) => { - if (ev.matches) { - //Remove contentScrolled when dynamically resized to desktop - this.destroyContentScrolled$.next(); - this.destroyContentScrolled$.complete(); - } else { + const handleMediaChange = (ev) => { + const isDesktop = ev.matches; + this.isScrollEventsEnabled = !isDesktop; + if (!isDesktop) { this.initializeContentScrollListening(); - console.log(this.contentScrolled$); } }; - if (mediaQuery.matches) { - //desktop - } else { - this.initializeContentScrollListening(); - } - } + handleMediaChange(mediaQuery); // Trigger initial check + mediaQuery.onchange = handleMediaChange; + } ngAfterViewInit(): void { if (this.toolbarButtonsQuery) { this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement); } - - //this.initializeContentScrollListening(); } private _currentFooter: HTMLElement | null = null; @@ -370,12 +361,11 @@ export class ModalWrapperComponent * when ionScroll emits. */ private initializeContentScrollListening() { - console.log('initializecontent'); this.zone.runOutsideAngular(() => { this.contentScrolled$ = this.ionContent.ionScroll.pipe( debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), - takeUntil(this.destroyContentScrolled$) + takeUntil(this.destroy$) ); this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { @@ -603,8 +593,5 @@ export class ModalWrapperComponent } this.destroy$.next(); this.destroy$.complete(); - - this.destroyContentScrolled$.next(); - this.destroyContentScrolled$.complete(); } } From ed4079f0899278fcbdf7170f91b276e64ccd3ba1 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 12 Oct 2023 15:45:41 +0200 Subject: [PATCH 07/20] Change member variable name --- .../modal/src/modal-wrapper/modal-wrapper.component.html | 2 +- .../modal/src/modal-wrapper/modal-wrapper.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html index a25b491ca4..c7468a89e8 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.html @@ -28,7 +28,7 @@ - + diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index 63b087b1d8..d49daa0607 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -134,7 +134,7 @@ export class ModalWrapperComponent } return this._intersectionObserver; } - isScrollEventsEnabled: boolean; + scrollEventsEnabled: boolean; isContentScrolled: boolean; private contentScrolled$: Observable; @@ -182,7 +182,7 @@ export class ModalWrapperComponent const handleMediaChange = (ev) => { const isDesktop = ev.matches; - this.isScrollEventsEnabled = !isDesktop; + this.scrollEventsEnabled = !isDesktop; if (!isDesktop) { this.initializeContentScrollListening(); } From ddbc1d3490649f531752c18e400be1ab449a7a3f Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 13 Oct 2023 10:02:34 +0200 Subject: [PATCH 08/20] intializeContentScrollListening once on mobile and set flag --- .../modal/src/modal-wrapper/modal-wrapper.component.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index d49daa0607..8ee0ed7a7a 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -180,15 +180,18 @@ export class ModalWrapperComponent const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`; const mediaQuery = this.windowRef.nativeWindow.matchMedia(query); + let hasInitializedContentScrollListening = false; + const handleMediaChange = (ev) => { const isDesktop = ev.matches; this.scrollEventsEnabled = !isDesktop; - if (!isDesktop) { + if (!isDesktop && !hasInitializedContentScrollListening) { this.initializeContentScrollListening(); + hasInitializedContentScrollListening = true; } }; - handleMediaChange(mediaQuery); // Trigger initial check + handleMediaChange(mediaQuery); mediaQuery.onchange = handleMediaChange; } From 59e3ef3f8206ff799339b9567ff910539fb62393 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 13 Oct 2023 14:45:10 +0200 Subject: [PATCH 09/20] Make isContentScrolled more readable --- .../modal-wrapper/modal-wrapper.component.ts | 66 +++++++++---------- 1 file changed, 30 insertions(+), 36 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts index 8ee0ed7a7a..dae43f0754 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.ts @@ -136,7 +136,6 @@ export class ModalWrapperComponent } scrollEventsEnabled: boolean; isContentScrolled: boolean; - private contentScrolled$: Observable; private destroy$: Subject = new Subject(); @HostBinding('class.drawer') @@ -171,30 +170,14 @@ export class ModalWrapperComponent this.initializeModalRoute(); this.listenForIonModalDidPresent(); this.listenForIonModalWillDismiss(); + this.listenForScroll(); this.initializeResizeModalToModalWrapper(); this.componentPropsInjector = Injector.create({ providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }], parent: this.injector, }); - - const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`; - const mediaQuery = this.windowRef.nativeWindow.matchMedia(query); - - let hasInitializedContentScrollListening = false; - - const handleMediaChange = (ev) => { - const isDesktop = ev.matches; - this.scrollEventsEnabled = !isDesktop; - if (!isDesktop && !hasInitializedContentScrollListening) { - this.initializeContentScrollListening(); - hasInitializedContentScrollListening = true; - } - }; - - handleMediaChange(mediaQuery); - - mediaQuery.onchange = handleMediaChange; } + ngAfterViewInit(): void { if (this.toolbarButtonsQuery) { this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement); @@ -359,24 +342,35 @@ export class ModalWrapperComponent } } - /* - * Runs scroll subscription outside zone to avoid excessive amount of CD cycles - * when ionScroll emits. - */ - private initializeContentScrollListening() { - this.zone.runOutsideAngular(() => { - this.contentScrolled$ = this.ionContent.ionScroll.pipe( - debounceTime(contentScrollDebounceTimeInMS), - map((event) => event.detail), - takeUntil(this.destroy$) - ); + private listenForScroll() { + const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`; + const mediaQuery = this.windowRef.nativeWindow.matchMedia(query); + const enableScrollEvents = (listOrEvent: MediaQueryList | MediaQueryListEvent) => { + const isDesktop = listOrEvent.matches; + this.scrollEventsEnabled = !isDesktop; + }; - this.contentScrolled$.subscribe((scrollInfo: ScrollDetail) => { - if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) { - this.isContentScrolled = !this.isContentScrolled; - this.changeDetector.detectChanges(); - } - }); + enableScrollEvents(mediaQuery); + mediaQuery.onchange = enableScrollEvents; + + // Runs scroll subscription outside zone to avoid excessive amount of CD cycles + // when ionScroll emits. + this.zone.runOutsideAngular(() => { + // Always subscribe as ionScroll only emits when scrollEventsEnabled is true + this.ionContent.ionScroll + .pipe( + debounceTime(contentScrollDebounceTimeInMS), + map((event) => event.detail), + takeUntil(this.destroy$) + ) + .subscribe((scrollInfo: ScrollDetail) => { + const contentScrolledPastOffset = scrollInfo.scrollTop > contentScrolledOffsetInPixels; + + if (contentScrolledPastOffset !== this.isContentScrolled) { + this.isContentScrolled = contentScrolledPastOffset; + this.changeDetector.detectChanges(); + } + }); }); } From a12674b3b8def0ad9432ee832ff649a5308c7009 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 13 Oct 2023 14:57:46 +0200 Subject: [PATCH 10/20] Remove imports from test --- .../modal-wrapper.component.spec.ts | 35 ++----------------- 1 file changed, 3 insertions(+), 32 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 4bb45a8d6e..ac0787850d 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -1,8 +1,8 @@ -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { IonContent, Platform } from '@ionic/angular'; +import { fakeAsync, tick } from '@angular/core/testing'; +import { IonContent } from '@ionic/angular'; import { WindowRef } from '@kirbydesign/designsystem/types'; import { createComponentFactory, Spectator } from '@ngneat/spectator'; -import { MockComponent, MockComponents } from 'ng-mocks'; +import { MockComponents } from 'ng-mocks'; import { TestHelper } from '@kirbydesign/designsystem/testing'; import { IconComponent } from '@kirbydesign/designsystem/icon'; @@ -647,33 +647,4 @@ describe('ModalWrapperComponent', () => { }); }); }); - describe('initializeContentScrollListening', () => { - it('it should not assign a value to contentScrolled$ when opened on desktop', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); - - modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); - spectator = modalWrapperTestBuilder - .flavor('modal') - .title('test') - .component(TitleEmbeddedComponent) - .build(); - - //@ts-ignore - expect(spectator.component.contentScrolled$).toBeFalsy(); - }); - - it('it should assign a value to contentScrolled$ when opened on a phone', async () => { - await TestHelper.resizeTestWindow(TestHelper.screensize.phone); - - modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); - spectator = modalWrapperTestBuilder - .flavor('modal') - .title('test') - .component(TitleEmbeddedComponent) - .build(); - - //@ts-ignore - expect(spectator.component.contentScrolled$).toBeTruthy(); - }); - }); }); From 65cf3770418780f241e0444c8419260913a70865 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 19 Oct 2023 10:22:17 +0200 Subject: [PATCH 11/20] Add test for scrollEventsEnabled when initialized --- .../modal-wrapper.component.spec.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index ac0787850d..a15343af91 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -647,4 +647,32 @@ describe('ModalWrapperComponent', () => { }); }); }); + + describe('listenForScroll', () => { + it('it should set scrollEventsEnabled to be false when opened on desktop', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); + + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + + expect(spectator.component.scrollEventsEnabled).toBeFalsy(); + }); + + it('it should set scrollEventsEnabled to be true when opened on a phone', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + + expect(spectator.component.scrollEventsEnabled).toBeTruthy(); + }); + }); }); From b33ae38d878646dd906035f7cee81bcfe8088b4f Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 27 Oct 2023 13:16:27 +0200 Subject: [PATCH 12/20] Add test for resize from desktop to phone --- .../modal-wrapper.component.spec.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 3d500aff0f..f510c87ad1 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -650,6 +650,10 @@ describe('ModalWrapperComponent', () => { }); describe('listenForScroll', () => { + afterEach(() => { + console.log('Here we reset'); + TestHelper.resetTestWindow(); + }); it('it should set scrollEventsEnabled to be false when opened on desktop', async () => { await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); @@ -675,5 +679,21 @@ describe('ModalWrapperComponent', () => { expect(spectator.component.scrollEventsEnabled).toBeTruthy(); }); + + it('should set scrollEventsEnabled to be true when resizing from desktop to phone', async () => { + await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + expect(spectator.component.scrollEventsEnabled).toBeFalse(); + + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + await TestHelper.whenTrue(() => spectator.component.scrollEventsEnabled); + + expect(spectator.component.scrollEventsEnabled).toBeTrue(); + }); }); }); From 85b710669d5b6adc55f380570d574661b349015a Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 27 Oct 2023 13:27:18 +0200 Subject: [PATCH 13/20] Fix duplicates of it --- .../modal-wrapper.component.spec.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index f510c87ad1..4bd7f34ea4 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -654,7 +654,7 @@ describe('ModalWrapperComponent', () => { console.log('Here we reset'); TestHelper.resetTestWindow(); }); - it('it should set scrollEventsEnabled to be false when opened on desktop', async () => { + it('should set scrollEventsEnabled to be false when opened on desktop', async () => { await TestHelper.resizeTestWindow(TestHelper.screensize.desktop); modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); @@ -667,7 +667,7 @@ describe('ModalWrapperComponent', () => { expect(spectator.component.scrollEventsEnabled).toBeFalsy(); }); - it('it should set scrollEventsEnabled to be true when opened on a phone', async () => { + it('should set scrollEventsEnabled to be true when opened on a phone', async () => { await TestHelper.resizeTestWindow(TestHelper.screensize.phone); modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); @@ -695,5 +695,21 @@ describe('ModalWrapperComponent', () => { expect(spectator.component.scrollEventsEnabled).toBeTrue(); }); + + it('should styling on toolbar when scrolling past offset on phone', async () => { + const animationDuration = KirbyAnimation.Duration.LONG; + const ionContent: IonContent = spectator.query(IonContent); + await TestHelper.resizeTestWindow(TestHelper.screensize.phone); + modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); + spectator = modalWrapperTestBuilder + .flavor('modal') + .title('test') + .component(TitleEmbeddedComponent) + .build(); + + spectator.component.scrollToBottom(animationDuration); + + expect(spectator.component.scrollEventsEnabled).toBeTrue(); + }); }); }); From e8e3b0222f6dcd555aa82b5c851494795c54c442 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 24 Nov 2023 09:28:16 +0100 Subject: [PATCH 14/20] Add test suite for borderbottomcolor on phone scroll --- .../modal-wrapper.component.spec.ts | 39 ++++++++++++---- .../modal-wrapper.testbuilder.ts | 46 +++++++++++++++++++ 2 files changed, 76 insertions(+), 9 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 4bd7f34ea4..b4f6587f93 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -12,6 +12,7 @@ import { ButtonComponent } from '@kirbydesign/designsystem/button'; import { PageModule } from '@kirbydesign/designsystem/page'; import { CanDismissHelper, ModalWrapperComponent } from '@kirbydesign/designsystem/modal'; import { + DummyContentEmbeddedComponent, DynamicFooterEmbeddedComponent, DynamicPageProgressEmbeddedComponent, InputEmbeddedComponent, @@ -21,6 +22,8 @@ import { TitleEmbeddedComponent, } from './modal-wrapper.testbuilder'; +const { getColor } = DesignTokenHelper; + describe('ModalWrapperComponent', () => { const createComponent = createComponentFactory({ component: ModalWrapperComponent, @@ -651,7 +654,6 @@ describe('ModalWrapperComponent', () => { describe('listenForScroll', () => { afterEach(() => { - console.log('Here we reset'); TestHelper.resetTestWindow(); }); it('should set scrollEventsEnabled to be false when opened on desktop', async () => { @@ -696,20 +698,39 @@ describe('ModalWrapperComponent', () => { expect(spectator.component.scrollEventsEnabled).toBeTrue(); }); - it('should styling on toolbar when scrolling past offset on phone', async () => { - const animationDuration = KirbyAnimation.Duration.LONG; - const ionContent: IonContent = spectator.query(IonContent); + it('should set border-bottom-color on ion-toolbar when scrolling on phone to the bottom or past offset', async () => { await TestHelper.resizeTestWindow(TestHelper.screensize.phone); modalWrapperTestBuilder = new ModalWrapperTestBuilder(createComponent); spectator = modalWrapperTestBuilder .flavor('modal') - .title('test') - .component(TitleEmbeddedComponent) + .component(DummyContentEmbeddedComponent) .build(); + await spectator.fixture.whenStable(); + const ionContentElement = spectator.query('ion-content') as HTMLElement; + if (!ionContentElement) { + console.error('ion-content element not found'); + return; + } + ionContentElement.style.minHeight = '500px'; + spectator.detectChanges(); - spectator.component.scrollToBottom(animationDuration); - - expect(spectator.component.scrollEventsEnabled).toBeTrue(); + spectator.component.scrollToBottom(); + await spectator.fixture.whenStable(); + spectator.detectChanges(); + await new Promise((resolve) => setTimeout(resolve, 500)); + const ionToolbarInScrolled = document.querySelector( + 'ion-header.content-scrolled ion-toolbar' + ) as HTMLElement; + if (!ionToolbarInScrolled) { + console.error('ion-toolbar element not found'); + return; + } + await spectator.fixture.whenStable(); + const computedStyle = getComputedStyle(ionToolbarInScrolled); + const actualBorderColor = computedStyle.getPropertyValue('border-bottom-color'); + const expectedColor = 'rgb(209, 209, 209)'; + + expect(actualBorderColor).toEqual(expectedColor); }); }); }); diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.testbuilder.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.testbuilder.ts index d121920fbf..012f4c1618 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.testbuilder.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.testbuilder.ts @@ -159,3 +159,49 @@ export class TitleEmbeddedComponent { this._title = title; } } + +@Component({ + template: ` +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi aperiam deserunt + dolore error esse laborum magni natus nihil optio perferendis placeat, quae sed, sequi sunt + totam voluptatem! Dicta, quaerat! +

+

+ Aut, dignissimos dolorum ducimus et rem reprehenderit rerum sunt ut! Ad aliquid beatae cum + esse et eveniet facere natus numquam obcaecati qui quia quisquam quo repellat repudiandae sit, + soluta voluptatibus! +

+

+ Aspernatur dolore enim incidunt libero molestiae nostrum quasi? Accusamus aut culpa dolores + doloribus laborum nesciunt voluptates! Consectetur cumque doloremque eius esse et excepturi + hic, inventore mollitia nisi, reiciendis, tempora unde! +

+

+ Blanditiis, cupiditate distinctio earum illo impedit laborum velit veritatis. Accusamus + adipisci alias aperiam, assumenda corporis culpa cum debitis exercitationem impedit laborum + possimus quam qui repellat, saepe similique sint soluta. Unde. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi aperiam deserunt + dolore error esse laborum magni natus nihil optio perferendis placeat, quae sed, sequi sunt + totam voluptatem! Dicta, quaerat! +

+

+ Aut, dignissimos dolorum ducimus et rem reprehenderit rerum sunt ut! Ad aliquid beatae cum + esse et eveniet facere natus numquam obcaecati qui quia quisquam quo repellat repudiandae sit, + soluta voluptatibus! +

+

+ Aspernatur dolore enim incidunt libero molestiae nostrum quasi? Accusamus aut culpa dolores + doloribus laborum nesciunt voluptates! Consectetur cumque doloremque eius esse et excepturi + hic, inventore mollitia nisi, reiciendis, tempora unde! +

+

+ Blanditiis, cupiditate distinctio earum illo impedit laborum velit veritatis. Accusamus + adipisci alias aperiam, assumenda corporis culpa cum debitis exercitationem impedit laborum + possimus quam qui repellat, saepe similique sint soluta. Unde. +

+ `, +}) +export class DummyContentEmbeddedComponent {} From e70c9bbd63bbfa1efdbfff07deb03cc8b465d019 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 24 Nov 2023 10:11:34 +0100 Subject: [PATCH 15/20] Remove unnecessary whenstable --- .../modal/src/modal-wrapper/modal-wrapper.component.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index b4f6587f93..01ae01cc54 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -725,7 +725,6 @@ describe('ModalWrapperComponent', () => { console.error('ion-toolbar element not found'); return; } - await spectator.fixture.whenStable(); const computedStyle = getComputedStyle(ionToolbarInScrolled); const actualBorderColor = computedStyle.getPropertyValue('border-bottom-color'); const expectedColor = 'rgb(209, 209, 209)'; From 2fb9cc4bd20da3b14c4026e5bec497cfb432f514 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 24 Nov 2023 10:34:03 +0100 Subject: [PATCH 16/20] Using toHaveComputedStyle --- .../modal-wrapper.component.spec.ts | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 01ae01cc54..f1ddda3229 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -707,10 +707,6 @@ describe('ModalWrapperComponent', () => { .build(); await spectator.fixture.whenStable(); const ionContentElement = spectator.query('ion-content') as HTMLElement; - if (!ionContentElement) { - console.error('ion-content element not found'); - return; - } ionContentElement.style.minHeight = '500px'; spectator.detectChanges(); @@ -721,15 +717,10 @@ describe('ModalWrapperComponent', () => { const ionToolbarInScrolled = document.querySelector( 'ion-header.content-scrolled ion-toolbar' ) as HTMLElement; - if (!ionToolbarInScrolled) { - console.error('ion-toolbar element not found'); - return; - } - const computedStyle = getComputedStyle(ionToolbarInScrolled); - const actualBorderColor = computedStyle.getPropertyValue('border-bottom-color'); - const expectedColor = 'rgb(209, 209, 209)'; - - expect(actualBorderColor).toEqual(expectedColor); + + expect(ionToolbarInScrolled).toHaveComputedStyle({ + 'border-bottom-color': getColor('medium'), + }); }); }); }); From f17b6f33c74becf1647e6b69b3d5c2087a6ff695 Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Thu, 14 Dec 2023 09:08:07 +0100 Subject: [PATCH 17/20] Update libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts Co-authored-by: Jakob Engelbrecht --- .../modal/src/modal-wrapper/modal-wrapper.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index f1ddda3229..30b33f7a1d 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -713,7 +713,7 @@ describe('ModalWrapperComponent', () => { spectator.component.scrollToBottom(); await spectator.fixture.whenStable(); spectator.detectChanges(); - await new Promise((resolve) => setTimeout(resolve, 500)); + await TestHelper.whenTrue(() => spectator.component.isContentScrolled); const ionToolbarInScrolled = document.querySelector( 'ion-header.content-scrolled ion-toolbar' ) as HTMLElement; From 1afb7e20bd46ff37cf5204626bfec6780ef5123c Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 14 Dec 2023 13:53:21 +0100 Subject: [PATCH 18/20] Improve readability for border-bottom test --- .../modal/src/modal-wrapper/modal-wrapper.component.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 30b33f7a1d..074c714113 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -706,8 +706,9 @@ describe('ModalWrapperComponent', () => { .component(DummyContentEmbeddedComponent) .build(); await spectator.fixture.whenStable(); + const MinimumScrollableContentHeight = '500px'; const ionContentElement = spectator.query('ion-content') as HTMLElement; - ionContentElement.style.minHeight = '500px'; + ionContentElement.style.minHeight = MinimumScrollableContentHeight; spectator.detectChanges(); spectator.component.scrollToBottom(); From d1c2722691280e36939b843ac116f886a791103d Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Fri, 15 Dec 2023 09:52:47 +0100 Subject: [PATCH 19/20] Transition none --- .../modal/src/modal-wrapper/modal-wrapper.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index 074c714113..d075d78d3f 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -718,6 +718,7 @@ describe('ModalWrapperComponent', () => { const ionToolbarInScrolled = document.querySelector( 'ion-header.content-scrolled ion-toolbar' ) as HTMLElement; + ionToolbarInScrolled.style.transition = 'none'; expect(ionToolbarInScrolled).toHaveComputedStyle({ 'border-bottom-color': getColor('medium'), From b722d9e880b7a6032dfa6a7f8e5d8f0baa27fd9c Mon Sep 17 00:00:00 2001 From: Jakob Engelbrecht Date: Mon, 18 Dec 2023 14:07:23 +0100 Subject: [PATCH 20/20] test: align code --- .../modal/src/modal-wrapper/modal-wrapper.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts index d075d78d3f..445eb6598d 100644 --- a/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts +++ b/libs/designsystem/modal/src/modal-wrapper/modal-wrapper.component.spec.ts @@ -666,7 +666,7 @@ describe('ModalWrapperComponent', () => { .component(TitleEmbeddedComponent) .build(); - expect(spectator.component.scrollEventsEnabled).toBeFalsy(); + expect(spectator.component.scrollEventsEnabled).toBeFalse(); }); it('should set scrollEventsEnabled to be true when opened on a phone', async () => { @@ -679,7 +679,7 @@ describe('ModalWrapperComponent', () => { .component(TitleEmbeddedComponent) .build(); - expect(spectator.component.scrollEventsEnabled).toBeTruthy(); + expect(spectator.component.scrollEventsEnabled).toBeTrue(); }); it('should set scrollEventsEnabled to be true when resizing from desktop to phone', async () => {