diff --git a/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts b/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts index b976bc13261..e2f59a35fbc 100644 --- a/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts +++ b/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts @@ -30,6 +30,7 @@ describe('ConfigUtilsService', () => { 'testProduct' ); let keyboardFocusService: KeyboardFocusService; + let querySelectorOriginal: any; beforeEach(() => { TestBed.configureTestingModule({ @@ -48,6 +49,11 @@ describe('ConfigUtilsService', () => { keyboardFocusService = TestBed.inject( KeyboardFocusService as Type ); + querySelectorOriginal = document.querySelector; + }); + + afterEach(() => { + document.querySelector = querySelectorOriginal; }); it('should be created', () => { @@ -117,24 +123,30 @@ describe('ConfigUtilsService', () => { }); describe('focusFirstAttribute', () => { - it('should return no focused attribute because keyboardFocusService is undefined', () => { + it('should not delegate to keyboardFocusService if we did not provide that', () => { classUnderTest['keyboardFocusService'] = undefined; spyOn(keyboardFocusService, 'findFocusable').and.stub(); classUnderTest.focusFirstAttribute(); expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0); }); - it('should return no focused attribute because keyboardFocusService is null', () => { - classUnderTest['keyboardFocusService'] = null; - spyOn(keyboardFocusService, 'findFocusable').and.stub(); + it('should delegate to focus service', () => { + const theElement = document.createElement('form'); + document.querySelector = jasmine + .createSpy('HTML Element') + .and.returnValue(theElement); + spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]); classUnderTest.focusFirstAttribute(); - expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0); + expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(1); }); - it('should return no focused attribute because there is no found', () => { + it('should not delegate to focus service if form is not available', () => { + document.querySelector = jasmine + .createSpy('HTML Element') + .and.returnValue(null); spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]); classUnderTest.focusFirstAttribute(); - expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(1); + expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0); }); }); }); diff --git a/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.ts b/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.ts index 042ec849ae1..f6c35e74327 100644 --- a/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.ts +++ b/feature-libs/product-configurator/rulebased/components/service/configurator-storefront-utils.service.ts @@ -116,14 +116,16 @@ export class ConfiguratorStorefrontUtilsService { focusFirstAttribute(): void { if (this.keyboardFocusService) { if (isPlatformBrowser(this.platformId)) { - const form: HTMLElement = document.querySelector( + const form: HTMLElement | null = document.querySelector( 'cx-configurator-form' ); - const focusedElements: HTMLElement[] = this.keyboardFocusService.findFocusable( - form - ); - if (focusedElements && focusedElements.length > 1) { - focusedElements[0]?.focus(); + if (form) { + const focusableElements: HTMLElement[] = this.keyboardFocusService.findFocusable( + form + ); + if (focusableElements && focusableElements.length > 0) { + focusableElements[0].focus(); + } } } }