test(Tooltip): Adding a test for destroying the target.

Author: gedinakova

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) => {

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