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