From e6594562ec5008b3471cd5db73f6278593610916 Mon Sep 17 00:00:00 2001 From: Muhammed Smani Date: Tue, 10 Dec 2024 09:36:14 +0100 Subject: [PATCH 1/2] feat(core): enable TuiHint hover when TuiHintManual is null --- .../core/directives/hint/hint-manual.directive.ts | 10 +++++++--- .../core/directives/hint/test/hint.directive.spec.ts | 11 ++++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/projects/core/directives/hint/hint-manual.directive.ts b/projects/core/directives/hint/hint-manual.directive.ts index b99a9f08ed67..45322971085a 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'; @@ -12,19 +13,22 @@ import {TuiHintHover} from './hint-hover.directive'; }) export class TuiHintManual extends TuiDriver implements OnChanges { private readonly hover = inject(TuiHintHover); - private readonly stream$ = new BehaviorSubject(false); + 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.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..efc05076a452 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, TuiHintManual, TuiRoot} from '@taiga-ui/core'; type Hint = TemplateRef> | string | null | undefined; @@ -95,6 +95,15 @@ describe('Hint', () => { expect(getTooltip()).toBeNull(); })); + + it('enables hover when tuiHintManual is null', () => { + const hintManualDirective = TestBed.inject(TuiHintManual); + + hintManualDirective.tuiHintManual = null; + hintManualDirective.ngOnChanges(); + + expect(hintManualDirective['hover'].enabled).toBeTruthy(); + }); }); describe('Hint is not shown', () => { From 7d42eae735037ae1b8fc9b763b4813a398374e80 Mon Sep 17 00:00:00 2001 From: Muhammed Smani Date: Tue, 10 Dec 2024 11:25:51 +0100 Subject: [PATCH 2/2] feat(core): usage of `!!` instead of BehaviourSubject type change and `TuiHintManual` unit tests --- .../directives/hint/hint-manual.directive.ts | 4 +- .../hint/test/hint.directive.spec.ts | 62 ++++++++++++++++--- 2 files changed, 54 insertions(+), 12 deletions(-) diff --git a/projects/core/directives/hint/hint-manual.directive.ts b/projects/core/directives/hint/hint-manual.directive.ts index 45322971085a..2a0fe04d178e 100644 --- a/projects/core/directives/hint/hint-manual.directive.ts +++ b/projects/core/directives/hint/hint-manual.directive.ts @@ -13,7 +13,7 @@ import {TuiHintHover} from './hint-hover.directive'; }) export class TuiHintManual extends TuiDriver implements OnChanges { private readonly hover = inject(TuiHintHover); - private readonly stream$ = new BehaviorSubject(false); + private readonly stream$ = new BehaviorSubject(false); @Input() public tuiHintManual: boolean | null = false; @@ -28,7 +28,7 @@ export class TuiHintManual extends TuiDriver implements OnChanges { } 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 efc05076a452..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, TuiHintManual, 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(); }); @@ -95,15 +106,6 @@ describe('Hint', () => { expect(getTooltip()).toBeNull(); })); - - it('enables hover when tuiHintManual is null', () => { - const hintManualDirective = TestBed.inject(TuiHintManual); - - hintManualDirective.tuiHintManual = null; - hintManualDirective.ngOnChanges(); - - expect(hintManualDirective['hover'].enabled).toBeTruthy(); - }); }); describe('Hint is not shown', () => { @@ -133,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')!; }