feat(tooltip): test for target defined before toggle action on host

Author: ddaribo

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -1,7 +1,7 @@
 import { fakeAsync, TestBed, tick, flush, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent } from '../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent } from '../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
@@ -24,7 +24,8 @@ describe('IgxTooltip', () => {
                 NoopAnimationsModule,
                 IgxTooltipSingleTargetComponent,
                 IgxTooltipMultipleTargetsComponent,
-                IgxTooltipPlainStringComponent
+                IgxTooltipPlainStringComponent,
+                IgxTooltipWithToggleActionComponent
             ]
         }).compileComponents();
         UIInteractions.clearOverlay();
@@ -554,6 +555,36 @@ describe('IgxTooltip', () => {
             verifyTooltipPosition(tooltipNativeElement, buttonOne, false);
         }));
     });
+
+    describe('Tooltip integration', () => {
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipWithToggleActionComponent);
+            fix.detectChanges();
+            tooltipNativeElement = fix.debugElement.query(By.directive(IgxTooltipDirective)).nativeElement;
+            tooltipTarget = fix.componentInstance.tooltipTarget as IgxTooltipTargetDirective;
+            button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective));
+        }));
+
+        it('Correctly sets tooltip target when defined before igxToggleAction directive on same host - issue #14196', fakeAsync(() => {
+            expect(tooltipTarget.target.element).toBe(tooltipNativeElement);
+            expect(fix.componentInstance.toggleDir.collapsed).toBe(true);
+
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+
+            UIInteractions.simulateClickEvent(button.nativeElement);
+            fix.detectChanges();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
+
+            UIInteractions.simulateClickEvent(button.nativeElement);
+            fix.detectChanges();
+
+            expect(fix.componentInstance.toggleDir.collapsed).toBe(false);
+        }));
+    });
 });
 
 const hoverElement = (element) => element.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));

projects/igniteui-angular/src/lib/test-utils/tooltip-components.spec.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { IgxTooltipDirective } from '../directives/tooltip/tooltip.directive';
 import { ITooltipHideEventArgs, ITooltipShowEventArgs, IgxTooltipTargetDirective } from '../directives/tooltip/tooltip-target.directive';
+import { IgxToggleActionDirective, IgxToggleDirective } from '../directives/toggle/toggle.directive';
 
 @Component({
     template: `
@@ -72,3 +73,20 @@ export class IgxTooltipMultipleTargetsComponent {
 export class IgxTooltipPlainStringComponent {
     @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
 }
+
+@Component({
+    template: `
+    <button [igxTooltipTarget]="tooltipRef" [igxToggleAction]="toggleDiv">
+        Options
+    </button>
+    <div #toggleDiv="toggle" class="toggle-content" igxToggle>Toggle content</div>
+    <div #tooltipRef="tooltip" igxTooltip>Test</div>
+    `,
+    standalone: true,
+    imports: [IgxTooltipDirective, IgxTooltipTargetDirective, IgxToggleActionDirective, IgxToggleDirective]
+})
+export class IgxTooltipWithToggleActionComponent {
+    @ViewChild(IgxTooltipDirective, { static: true }) public tooltip: IgxTooltipDirective;
+    @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget: IgxTooltipTargetDirective;
+    @ViewChild(IgxToggleDirective, { static: true }) public toggleDir: IgxToggleDirective;
+}