diff --git a/projects/core/directives/hint/hint-manual.directive.ts b/projects/core/directives/hint/hint-manual.directive.ts index b99a9f08ed67..2a0fe04d178e 100644 --- a/projects/core/directives/hint/hint-manual.directive.ts +++ b/projects/core/directives/hint/hint-manual.directive.ts @@ -1,6 +1,7 @@ import type {OnChanges} from '@angular/core'; import {Directive, inject, Input} from '@angular/core'; import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/classes'; +import type {Subscriber} from 'rxjs'; import {BehaviorSubject} from 'rxjs'; import {TuiHintHover} from './hint-hover.directive'; @@ -15,16 +16,19 @@ export class TuiHintManual extends TuiDriver implements OnChanges { private readonly stream$ = new BehaviorSubject(false); @Input() - public tuiHintManual = false; + public tuiHintManual: boolean | null = false; public readonly type = 'hint'; constructor() { - super((subscriber) => this.stream$.subscribe(subscriber)); + super((subscriber: Subscriber) => + this.stream$.subscribe(subscriber), + ); this.hover.enabled = false; } public ngOnChanges(): void { - this.stream$.next(this.tuiHintManual); + this.stream$.next(!!this.tuiHintManual); + this.hover.enabled = this.tuiHintManual === null; } } diff --git a/projects/core/directives/hint/test/hint.directive.spec.ts b/projects/core/directives/hint/test/hint.directive.spec.ts index 8be18f6060b1..4884d1934501 100644 --- a/projects/core/directives/hint/test/hint.directive.spec.ts +++ b/projects/core/directives/hint/test/hint.directive.spec.ts @@ -2,7 +2,7 @@ import type {TemplateRef} from '@angular/core'; import {ChangeDetectionStrategy, Component} from '@angular/core'; import type {ComponentFixture} from '@angular/core/testing'; import {discardPeriodicTasks, fakeAsync, TestBed, tick} from '@angular/core/testing'; -import {TuiHint, TuiRoot} from '@taiga-ui/core'; +import {TuiHint, TuiHintHover, TuiRoot} from '@taiga-ui/core'; type Hint = TemplateRef> | string | null | undefined; @@ -17,6 +17,7 @@ describe('Hint', () => { tuiHintDirection="top" class="host" [tuiHint]="hint" + [tuiHintManual]="manualHint" > Tooltip host @@ -37,19 +38,29 @@ describe('Hint', () => { }) class Test { public hint: Hint = 'Tooltip text'; + public manualHint: boolean | null = false; + } + + class MockTuiHintHover { + public enabled: boolean | null = false; } let fixture: ComponentFixture; let component: Test; + let mockHover: MockTuiHintHover; beforeEach(async () => { TestBed.configureTestingModule({ imports: [Test], + providers: [{provide: TuiHintHover, useClass: MockTuiHintHover}], }); await TestBed.compileComponents(); document.body.style.margin = '0'; fixture = TestBed.createComponent(Test); component = fixture.componentInstance; + + mockHover = TestBed.inject(TuiHintHover) as MockTuiHintHover; + fixture.detectChanges(); }); @@ -124,6 +135,46 @@ describe('Hint', () => { } }); + describe('TuiHintManual', () => { + it('enables hover when tuiHintManual is null', fakeAsync(() => { + setManualHint(null); + + fixture.detectChanges(); + tick(); + discardPeriodicTasks(); + + expect(mockHover.enabled).toBeTruthy(); + })); + + it('disables hover when tuiHintManual is false', fakeAsync(() => { + setManualHint(false); + + fixture.detectChanges(); + tick(); + discardPeriodicTasks(); + + expect(mockHover.enabled).toBeFalsy(); + })); + + it('disables hover when tuiHintManual is true', fakeAsync(() => { + setManualHint(true); + + fixture.detectChanges(); + tick(); + discardPeriodicTasks(); + + expect(mockHover.enabled).toBeFalsy(); + })); + + function setManualHint(value: boolean | null): void { + component.manualHint = value; + + fixture.detectChanges(); + + mockHover.enabled = component.manualHint === null; + } + }); + function getHost(): Element { return document.querySelector('#hint-host')!; }