diff --git a/modules/ui/src/app/app.component.html b/modules/ui/src/app/app.component.html index 1f984a388..0b386ce8d 100644 --- a/modules/ui/src/app/app.component.html +++ b/modules/ui/src/app/app.component.html @@ -233,7 +233,6 @@

Testrun

Testrun (!!calloutState.get('outdated_devices_callout') && isAllDevicesOutdated)) " - [class.closed-tip]="isClosedTip" [data]="HelpTips.step2" [target]="deviceTipTarget" (onCLoseTip)="onCLoseTip($event)" @@ -261,7 +259,6 @@

Testrun

!reports.length && !isAllDevicesOutdated " - [class.closed-tip]="isClosedTip" [data]="HelpTips.step3" [target]="testingTipTarget" (onCLoseTip)="onCLoseTip($event)" @@ -274,7 +271,6 @@

Testrun

hasRiskProfiles === false && systemStatus === StatusOfTestrun.InProgress " - [class.closed-tip]="isClosedTip" [data]="HelpTips.step4" [target]="riskAssessmentTipTarget" (onCLoseTip)="onCLoseTip($event)" diff --git a/modules/ui/src/app/app.component.spec.ts b/modules/ui/src/app/app.component.spec.ts index 9bdb75f2f..47ff1b0d8 100644 --- a/modules/ui/src/app/app.component.spec.ts +++ b/modules/ui/src/app/app.component.spec.ts @@ -515,6 +515,34 @@ describe('AppComponent', () => { expect(router.url).toBe(Routes.Testing); })); }); + + it('should add "closed-tip" class to the tip on click "close" button on tip', fakeAsync(() => { + const helpTipEl = compiled.querySelector('app-help-tip') as HTMLElement; + const helpTipCloseBtn = compiled.querySelector( + 'app-help-tip .close-button' + ) as HTMLButtonElement; + + helpTipCloseBtn.click(); + tick(100); + + expect(helpTipEl.classList.contains('closed-tip')).toBeTrue(); + })); + + it('should remove "closed-tip" class from the tip on click toolbar "help tips" button', fakeAsync(() => { + const helpTipEl = compiled.querySelector('app-help-tip') as HTMLElement; + helpTipEl.classList.add('closed-tip'); + const helpTipsBtn = compiled.querySelector( + '.app-toolbar-button-help-tips' + ) as HTMLButtonElement; + + helpTipsBtn.click(); + tick(100); + + expect( + mockFocusManagerService.focusFirstElementInContainer + ).toHaveBeenCalledWith(helpTipEl); + expect(helpTipEl.classList.contains('closed-tip')).toBeFalse(); + })); }); describe('with devices set and systemStatus data', () => { diff --git a/modules/ui/src/app/app.component.ts b/modules/ui/src/app/app.component.ts index 9ee821865..309940424 100644 --- a/modules/ui/src/app/app.component.ts +++ b/modules/ui/src/app/app.component.ts @@ -136,6 +136,7 @@ export class AppComponent implements AfterViewInit { private cdr = inject(ChangeDetectorRef); appStore = inject(AppStore); private renderer = inject(Renderer2); + private el = inject(ElementRef); public readonly CalloutType = CalloutType; public readonly StatusOfTestrun = StatusOfTestrun; @@ -298,11 +299,14 @@ export class AppComponent implements AfterViewInit { const helpTipButton = window.document.querySelector( '.app-toolbar-button-help-tips' ) as HTMLButtonElement; - const helpTipEl = window.document.querySelector('app-help-tip'); + const helpTipEl = this.el.nativeElement.querySelector('app-help-tip'); + timer(100).subscribe(() => { if (isClosed) { + this.renderer.addClass(helpTipEl, 'closed-tip'); helpTipButton.focus(); } else { + this.renderer.removeClass(helpTipEl, 'closed-tip'); this.focusManagerService.focusFirstElementInContainer(helpTipEl); } });