diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts index d9ae0f0ab85feade261626bd97b8055e3256818a..3155008ef5dc91871219e693f62dd499c90d53c2 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.spec.ts @@ -311,6 +311,98 @@ describe('InstantSearchComponent', () => { }); }); + describe('onKeydownHandler', () => { + const keyboardEvent: KeyboardEvent = new KeyboardEvent('a'); + + beforeEach(() => { + component.isSearchResultsEmpty = jest.fn(); + component.isArrowNavigationKey = jest.fn(); + component.isEscapeKey = jest.fn(); + component.handleArrowNavigation = jest.fn(); + component.handleEscape = jest.fn(); + }); + + it('should check for empty result', () => { + component.onKeydownHandler(keyboardEvent); + + expect(component.isSearchResultsEmpty).toHaveBeenCalled(); + }); + + describe('search result is empty', () => { + beforeEach(() => { + component.isSearchResultsEmpty = jest.fn().mockReturnValue(true); + }); + + it('should ignore key navigation', () => { + component.onKeydownHandler(keyboardEvent); + + expect(component.isArrowNavigationKey).not.toHaveBeenCalled(); + }); + + it('should ignore escape key handling', () => { + component.onKeydownHandler(keyboardEvent); + + expect(component.isEscapeKey).not.toHaveBeenCalled(); + }); + }); + + describe('search result is not empty', () => { + beforeEach(() => { + component.isSearchResultsEmpty = jest.fn().mockReturnValue(false); + }); + + it('should check if arrow navigation', () => { + component.onKeydownHandler(keyboardEvent); + + expect(component.isArrowNavigationKey).toHaveBeenCalled(); + }); + + it('should handle arrow navigation', () => { + component.isArrowNavigationKey = jest.fn().mockReturnValue(true); + + component.onKeydownHandler(keyboardEvent); + + expect(component.handleArrowNavigation).toHaveBeenCalled(); + }); + + it('should not handle arrow navigation', () => { + component.isArrowNavigationKey = jest.fn().mockReturnValue(false); + + component.onKeydownHandler(keyboardEvent); + + expect(component.handleArrowNavigation).not.toHaveBeenCalled(); + }); + + describe('is not arrow navigation', () => { + beforeEach(() => { + component.isArrowNavigationKey = jest.fn().mockReturnValue(false); + }); + + it('should check for escape key', () => { + component.onKeydownHandler(keyboardEvent); + + expect(component.isEscapeKey).toHaveBeenCalled(); + }); + + it('should handle escape key', () => { + component.isEscapeKey = jest.fn().mockReturnValue(true); + + component.onKeydownHandler(keyboardEvent); + + expect(component.handleEscape).toHaveBeenCalled(); + }); + + it('should not handle escape key', () => { + component.isEscapeKey = jest.fn().mockReturnValue(false); + + component.onKeydownHandler(keyboardEvent); + + expect(component.handleEscape).not.toHaveBeenCalled(); + }); + }); + }); + }); + describe('isSearchResultsEmpty', () => { it('should return true', () => { component.results = []; diff --git a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts index e1e2e7224f2adb5b8816dbf002b0a59eb63874d8..883096670d11326374373d51752bb8c7e0a6577e 100644 --- a/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts +++ b/alfa-client/libs/design-system/src/lib/instant-search/instant-search/instant-search.component.ts @@ -33,7 +33,7 @@ import { InstantSearchResult } from './instant-search.model'; SearchResultLayerComponent, AriaLiveRegionComponent, ], - template: `<div class="relative"> + template: ` <div class="relative"> <ods-search-field [placeholder]="placeholder" [label]="label" @@ -108,12 +108,8 @@ export class InstantSearchComponent implements OnInit, OnDestroy { @HostListener('document:keydown', ['$event']) onKeydownHandler(e: KeyboardEvent): void { if (this.isSearchResultsEmpty()) return; - if (this.isArrowNavigationKey(e)) { - this.handleArrowNavigation(e); - } - if (this.isEscapeKey(e)) { - this.handleEscape(e); - } + if (this.isArrowNavigationKey(e)) this.handleArrowNavigation(e); + if (this.isEscapeKey(e)) this.handleEscape(e); } @HostListener('document:click', ['$event'])