OZG-6301 OZG-6525 Replace subscription with host listener

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();
     });
   });
 });

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 {