From 674bcf0d4bd5bd17cba373476ea7e972b909fa22 Mon Sep 17 00:00:00 2001
From: Galina Edinakova <gedinakova@infragistics.com>
Date: Fri, 9 May 2025 11:11:47 +0300
Subject: [PATCH 1/3] test(Tooltip): Adding a test for destroying the target.

---
 .../tooltip/tooltip.directive.spec.ts         | 15 +++++++++++++-
 .../lib/test-utils/tooltip-components.spec.ts | 20 +++++++++++--------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
index b4305593956..a153bdc6ec6 100644
--- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
@@ -271,6 +271,19 @@ describe('IgxTooltip', () => {
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
 
+        it('IgxTooltip is hidden when its target is destroyed', fakeAsync(() => {
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+            debugger
+            fix.componentInstance.showButton = false;
+            fix.detectChanges();
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+        }));
+
         describe('Tooltip events', () => {
             // configureTestSuite();
             it('should emit the proper events when hovering/unhovering target', fakeAsync(() => {
@@ -596,7 +609,7 @@ const touchElement = (element) => element.nativeElement.dispatchEvent(new TouchE
 const verifyTooltipVisibility = (tooltipNativeElement, tooltipTarget, shouldBeVisible: boolean) => {
     expect(tooltipNativeElement.classList.contains(TOOLTIP_CLASS)).toBe(shouldBeVisible);
     expect(tooltipNativeElement.classList.contains(HIDDEN_TOOLTIP_CLASS)).not.toBe(shouldBeVisible);
-    expect(tooltipTarget.tooltipHidden).not.toBe(shouldBeVisible);
+    expect(tooltipTarget?.tooltipHidden).not.toBe(shouldBeVisible);
 };
 
 const verifyTooltipPosition = (tooltipNativeElement, actualTarget, shouldBeAligned: boolean) => {
diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
index c70a0776ffc..f721b06d0e7 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
@@ -6,11 +6,14 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
 @Component({
     template: `
     <div class="dummyDiv">dummy div for touch tests</div>
-    <button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
-            (tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
-            style="margin: 200px">
-        Hover me
-    </button>
+    
+    @if (showButton) {
+        <button [igxTooltipTarget]="tooltipRef" [tooltip]="'Infragistics Inc. HQ'"
+                (tooltipShow)="showing($event)" (tooltipHide)="hiding($event)"
+                style="margin: 200px">
+            Hover me
+        </button>
+    }
     <div igxTooltip #tooltipRef="tooltip">
         Hello, I am a tooltip!
     </div>
@@ -23,6 +26,7 @@ export class IgxTooltipSingleTargetComponent {
     @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
     public cancelShowing = false;
     public cancelHiding = false;
+    public showButton = true;
 
     public showing(args: ITooltipShowEventArgs) {
         if (this.cancelShowing) {
@@ -39,9 +43,9 @@ export class IgxTooltipSingleTargetComponent {
 
 @Component({
     template: `
-    <button class="buttonOne" #targetOne="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
-        Target One
-    </button>
+        <button class="buttonOne" #targetOne="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
+            Target One
+        </button>
 
     <button class="buttonTwo" #targetTwo="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
         Target Two

From 8f7dc845b571d69bd303b935f6929a514acd3a2c Mon Sep 17 00:00:00 2001
From: Galina Edinakova <gedinakova@infragistics.com>
Date: Fri, 9 May 2025 12:11:40 +0300
Subject: [PATCH 2/3] fix(Tooltip): Hide the tooltip on destroying the target.

---
 .../src/lib/directives/tooltip/tooltip-target.directive.ts      | 1 +
 .../src/lib/directives/tooltip/tooltip.directive.spec.ts        | 2 +-
 .../src/lib/test-utils/tooltip-components.spec.ts               | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
index 32ddc527a1e..a26400879b6 100644
--- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
+++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts
@@ -314,6 +314,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      * @hidden
      */
     public ngOnDestroy() {
+        this.hideTooltip();
         this.destroy$.next();
         this.destroy$.complete();
     }
diff --git a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
index a153bdc6ec6..8ff5e020576 100644
--- a/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
+++ b/projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts
@@ -276,7 +276,7 @@ describe('IgxTooltip', () => {
             flush();
 
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
-            debugger
+            
             fix.componentInstance.showButton = false;
             fix.detectChanges();
             flush();
diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
index f721b06d0e7..2bb7a814648 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
@@ -23,7 +23,7 @@ import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/togg
 })
 export class IgxTooltipSingleTargetComponent {
     @ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
-    @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
+    @ViewChild(IgxTooltipTargetDirective, { static: false }) public tooltipTarget: IgxTooltipTargetDirective;
     public cancelShowing = false;
     public cancelHiding = false;
     public showButton = true;

From 2076430c7dc7d5d273207e6c0b56e5ff0495b172 Mon Sep 17 00:00:00 2001
From: Galina Edinakova <gedinakova@infragistics.com>
Date: Fri, 9 May 2025 12:14:40 +0300
Subject: [PATCH 3/3] chore(*): Fixed indentation in test component.

---
 .../src/lib/test-utils/tooltip-components.spec.ts           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
index 2bb7a814648..b4d646276ec 100644
--- a/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts
@@ -43,9 +43,9 @@ export class IgxTooltipSingleTargetComponent {
 
 @Component({
     template: `
-        <button class="buttonOne" #targetOne="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
-            Target One
-        </button>
+    <button class="buttonOne" #targetOne="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
+        Target One
+    </button>
 
     <button class="buttonTwo" #targetTwo="tooltipTarget" [igxTooltipTarget]="tooltipRef" style="margin: 100px">
         Target Two