From 520dfa159c696f19b15233f84c139e5e78f37da8 Mon Sep 17 00:00:00 2001 From: OZGCloud <ozgcloud@mgm-tp.com> Date: Mon, 26 Aug 2024 15:49:48 +0200 Subject: [PATCH] OZG-6301 OZG-6525 Replace subscription with host listener --- ...ations-einheit-container.component.spec.ts | 44 +++++++++---------- ...ganisations-einheit-container.component.ts | 17 +++---- 2 files changed, 27 insertions(+), 34 deletions(-) diff --git a/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.spec.ts b/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.spec.ts index 394f2ed34b..2c61c4c72b 100644 --- a/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.spec.ts +++ b/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.spec.ts @@ -8,7 +8,14 @@ import { ToEmbeddedResourcesPipe, createStateResource, } from '@alfa-client/tech-shared'; -import { EventData, Mock, getMockComponent, mock, triggerEvent } from '@alfa-client/test-utils'; +import { + EventData, + Mock, + dialogRefMock, + getMockComponent, + mock, + triggerEvent, +} from '@alfa-client/test-utils'; import { DialogRef } from '@angular/cdk/dialog'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import faker from '@faker-js/faker'; @@ -20,7 +27,7 @@ import { } from 'libs/collaboration-shared/test/organisations-einheit'; import { getDataTestIdOf } from 'libs/tech-shared/test/data-test'; import { MockComponent } from 'ng-mocks'; -import { Subscription, of } from 'rxjs'; +import { of } from 'rxjs'; import { SearchOrganisationsEinheitContainerComponent } from './search-organisations-einheit-container.component'; import { SearchOrganisationsEinheitFormComponent } from './search-organisations-einheit-form/search-organisations-einheit-form.component'; @@ -57,7 +64,7 @@ describe('SearchOrganisationsEinheitContainerComponent', () => { }, { provide: DialogRef, - useValue: { keydownEvents: of(KeyboardEvent), close: jest.fn() }, + useValue: dialogRefMock, }, ], }).compileComponents(); @@ -78,22 +85,19 @@ describe('SearchOrganisationsEinheitContainerComponent', () => { expect(service.getSearchResultList).toHaveBeenCalled(); }); - - it('should subscribe to dialogRef.keydownEvents', () => { - component.ngOnInit(); - - expect(component.keydownEventsSubscription).toBeInstanceOf(Subscription); - }); }); - describe('ngOnDestroy', () => { - it('should unsubscribe keydownEventsSubscription', () => { - component.keydownEventsSubscription = new Subscription(); - jest.spyOn(component.keydownEventsSubscription, 'unsubscribe'); + describe('onKeyDownHandler', () => { + it('should prevent default behavior for enter key', () => { + const keyboardEvent: KeyboardEvent = { + ...new KeyboardEvent('enter'), + key: 'Enter', + preventDefault: jest.fn(), + }; - component.ngOnDestroy(); + component.onKeyDownHandler(keyboardEvent); - expect(component.keydownEventsSubscription.unsubscribe).toHaveBeenCalled(); + expect(keyboardEvent.preventDefault).toHaveBeenCalled(); }); }); @@ -170,12 +174,6 @@ describe('SearchOrganisationsEinheitContainerComponent', () => { }); describe('select search result', () => { - it('should set select result', () => { - component.selectSearchResult(organisationsEinheitResource); - - expect(service.selectSearchResult).toHaveBeenCalledWith(organisationsEinheitResource); - }); - it('should call service', () => { component.selectSearchResult(organisationsEinheitResource); @@ -185,7 +183,7 @@ describe('SearchOrganisationsEinheitContainerComponent', () => { it('should close dialog', () => { component.selectSearchResult(organisationsEinheitResource); - expect(component.dialogRef.close).toHaveBeenCalled(); + expect(dialogRefMock.close).toHaveBeenCalled(); }); }); @@ -209,7 +207,7 @@ describe('SearchOrganisationsEinheitContainerComponent', () => { it('should close dialog', () => { component.closeDialog(); - expect(component.dialogRef.close).toHaveBeenCalled(); + expect(dialogRefMock.close).toHaveBeenCalled(); }); }); }); diff --git a/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.ts b/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.ts index 4770a627dd..d73d705abf 100644 --- a/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.ts +++ b/alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.ts @@ -4,18 +4,18 @@ import { } from '@alfa-client/collaboration-shared'; import { StateResource } from '@alfa-client/tech-shared'; import { DialogRef } from '@angular/cdk/dialog'; -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, HostListener, OnInit } from '@angular/core'; import { OrganisationsEinheitListResource, OrganisationsEinheitResource, } from 'libs/collaboration-shared/src/lib/organisations-einheit.model'; -import { Observable, Subscription, filter } from 'rxjs'; +import { Observable, Subscription } from 'rxjs'; @Component({ selector: 'alfa-search-organisations-einheit-container', templateUrl: './search-organisations-einheit-container.component.html', }) -export class SearchOrganisationsEinheitContainerComponent implements OnInit, OnDestroy { +export class SearchOrganisationsEinheitContainerComponent implements OnInit { public organisationsEinheitStateListResource$: Observable< StateResource<OrganisationsEinheitListResource> >; @@ -25,20 +25,15 @@ export class SearchOrganisationsEinheitContainerComponent implements OnInit, OnD constructor( private readonly service: OrganisationsEinheitService, - readonly dialogRef: DialogRef, + private readonly dialogRef: DialogRef, ) {} ngOnInit(): void { this.organisationsEinheitStateListResource$ = this.service.getSearchResultList(); - this.keydownEventsSubscription = this.dialogRef.keydownEvents - .pipe(filter((e: KeyboardEvent) => e.key === 'Enter')) - .subscribe((e: KeyboardEvent) => { - e.preventDefault(); - }); } - ngOnDestroy(): void { - this.keydownEventsSubscription.unsubscribe(); + @HostListener('document:keydown', ['$event']) onKeyDownHandler(e: KeyboardEvent) { + if (e.key === 'Enter') e.preventDefault(); } public search(searchBy: string): void { -- GitLab