Skip to content

Commit 01608e9

Browse files
RivaIvanovaRivaIvanova
committed
test(tooltip): add show-hide tiggers tests
1 parent 62c06e2 commit 01608e9

File tree

1 file changed

+84
-98
lines changed

1 file changed

+84
-98
lines changed

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

Lines changed: 84 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
22
import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
5-
import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent } from '../../test-utils/tooltip-components.spec';
5+
import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipWithCloseButtonComponent } from '../../test-utils/tooltip-components.spec';
66
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
77
import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
88
import { IgxTooltipDirective } from './tooltip.directive';
@@ -11,7 +11,9 @@ import { Placement, PositionsMap } from './tooltip.common';
1111

1212
const HIDDEN_TOOLTIP_CLASS = 'igx-tooltip--hidden';
1313
const TOOLTIP_CLASS = 'igx-tooltip';
14-
const HIDE_DELAY = 180;
14+
const SHOW_DELAY = 200;
15+
const HIDE_DELAY = 300;
16+
const AUTO_HIDE_DELAY = 180;
1517
const TOOLTIP_ARROW_SELECTOR = '[data-arrow="true"]';
1618

1719
describe('IgxTooltip', () => {
@@ -171,7 +173,7 @@ describe('IgxTooltip', () => {
171173
flush();
172174

173175
unhoverElement(button);
174-
tick(HIDE_DELAY);
176+
tick(AUTO_HIDE_DELAY);
175177
tick(400);
176178
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
177179

@@ -406,69 +408,113 @@ describe('IgxTooltip', () => {
406408
}));
407409
});
408410

409-
describe('Tooltip touch', () => {
410-
it('IgxTooltip is shown/hidden when touching/untouching its target', fakeAsync(() => {
411-
touchElement(button);
411+
describe('Tooltip show/hide triggers', () => {
412+
it('should override default triggers', fakeAsync(() => {
413+
tooltipTarget.showTriggers = 'focus';
414+
tooltipTarget.hideTriggers = 'keypress';
415+
fix.detectChanges();
416+
417+
hoverElement(button);
412418
flush();
419+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
413420

421+
simulateTriggerEvent(button, 'focus');
422+
flush();
414423
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
415424

416-
const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
417-
touchElement(dummyDiv);
425+
unhoverElement(button);
418426
flush();
427+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
419428

429+
simulateTriggerEvent(button, 'keypress');
430+
flush();
420431
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
421432
}));
422433

423-
it('IgxTooltip is not shown when is disabled and touching its target', fakeAsync(() => {
424-
tooltipTarget.tooltipDisabled = true;
434+
it('should add multiple show triggers', fakeAsync(() => {
435+
tooltipTarget.showTriggers = 'focus, keypress';
425436
fix.detectChanges();
426437

427-
touchElement(button);
438+
simulateTriggerEvent(button, 'focus');
428439
flush();
429-
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
440+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
430441

431-
tooltipTarget.tooltipDisabled = false;
432-
fix.detectChanges();
442+
unhoverElement(button);
443+
flush();
444+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
433445

434-
touchElement(button);
446+
simulateTriggerEvent(button, 'keypress');
435447
flush();
436448
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
437449
}));
438450

439-
it('IgxTooltip touch interaction respects showDelay', fakeAsync(() => {
440-
tooltipTarget.showDelay = 900;
451+
it('should add multiple hide triggers', fakeAsync(() => {
452+
tooltipTarget.showTriggers = 'focus';
453+
tooltipTarget.hideTriggers = 'blur, keypress';
441454
fix.detectChanges();
442455

443-
touchElement(button);
456+
simulateTriggerEvent(button, 'focus');
457+
flush();
458+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
459+
simulateTriggerEvent(button, 'blur');
460+
flush();
461+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
444462

445-
tick(500);
463+
simulateTriggerEvent(button, 'focus');
464+
flush();
465+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
466+
simulateTriggerEvent(button, 'keypress');
467+
flush();
446468
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
469+
}));
447470

448-
tick(300);
471+
it('should respect showDelay and hideDelay', fakeAsync(() => {
472+
tooltipTarget.showTriggers = tooltipTarget.hideTriggers = 'click';
473+
fix.detectChanges();
474+
475+
simulateTriggerEvent(button, 'click');
476+
tick(SHOW_DELAY - 1);
449477
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
478+
tick(1);
479+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
450480

451-
tick(100);
481+
simulateTriggerEvent(button, 'click');
482+
const totalHideDelay = HIDE_DELAY + AUTO_HIDE_DELAY - 1;
483+
tick(totalHideDelay);
452484
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
485+
tick(1);
486+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
453487
}));
454488

455-
it('IgxTooltip touch interaction respects hideDelay', fakeAsync(() => {
456-
tooltipTarget.hideDelay = 700;
489+
it('should not be shown if the tooltip is disabled', fakeAsync(() => {
490+
tooltipTarget.showTriggers = 'focus';
491+
tooltipTarget.hideTriggers = 'blur';
492+
tooltipTarget.tooltipDisabled = true;
457493
fix.detectChanges();
458494

459-
touchElement(button);
495+
simulateTriggerEvent(button, 'focus');
460496
flush();
497+
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
461498

462-
const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
463-
touchElement(dummyDiv);
464-
tick(HIDE_DELAY);
465-
tick(400);
499+
tooltipTarget.tooltipDisabled = false;
500+
fix.detectChanges();
501+
502+
simulateTriggerEvent(button, 'focus');
503+
flush();
466504
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
467505

468-
tick(100);
506+
tooltipTarget.tooltipDisabled = true;
507+
fix.detectChanges();
508+
509+
simulateTriggerEvent(button, 'blur');
510+
flush();
469511
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
470512

471-
tick(200);
513+
tooltipTarget.tooltipDisabled = false;
514+
fix.detectChanges();
515+
516+
simulateTriggerEvent(button, 'blur');
517+
flush();
472518
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
473519
}));
474520
});
@@ -606,21 +652,6 @@ describe('IgxTooltip', () => {
606652
verifyTooltipPosition(tooltipNativeElement, buttonOne, false);
607653
}));
608654

609-
it('Should not call `hideTooltip` multiple times on document:touchstart', fakeAsync(() => {
610-
spyOn<any>(targetOne, '_hideOnInteraction').and.callThrough();
611-
spyOn<any>(targetTwo, '_hideOnInteraction').and.callThrough();
612-
613-
touchElement(buttonOne);
614-
tick(500);
615-
616-
const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
617-
touchElement(dummyDiv);
618-
flush();
619-
620-
expect(targetOne['_hideOnInteraction']).toHaveBeenCalledTimes(1);
621-
expect(targetTwo['_hideOnInteraction']).not.toHaveBeenCalled();
622-
}));
623-
624655
it('should not emit tooltipHide event multiple times', fakeAsync(() => {
625656
spyOn(targetOne.tooltipHide, 'emit');
626657
spyOn(targetTwo.tooltipHide, 'emit');
@@ -647,23 +678,6 @@ describe('IgxTooltip', () => {
647678
flush();
648679
}));
649680

650-
651-
it('IgxTooltip hides when touch one target, then another, then outside', fakeAsync(() => {
652-
touchElement(targetOne);
653-
flush();
654-
verifyTooltipVisibility(tooltipNativeElement, targetOne, true);
655-
verifyTooltipPosition(tooltipNativeElement, targetOne, true);
656-
657-
touchElement(targetTwo);
658-
flush();
659-
verifyTooltipVisibility(tooltipNativeElement, targetTwo, true);
660-
verifyTooltipPosition(tooltipNativeElement, targetTwo, true);
661-
662-
touchElement(fix.debugElement);
663-
flush();
664-
verifyTooltipVisibility(tooltipNativeElement, targetTwo, false);
665-
}));
666-
667681
it('should show and remove close button depending on active sticky target', fakeAsync(() => {
668682
targetOne.sticky = true;
669683
fix.detectChanges();
@@ -842,36 +856,6 @@ describe('IgxTooltip', () => {
842856
}));
843857
});
844858

845-
describe('Multiple tooltips', () => {
846-
let targetOne: IgxTooltipTargetDirective;
847-
848-
let tooltipOne: IgxTooltipDirective;
849-
let tooltipTwo: IgxTooltipDirective;
850-
851-
beforeEach(waitForAsync(() => {
852-
fix = TestBed.createComponent(IgxTooltipMultipleTooltipsComponent);
853-
fix.detectChanges();
854-
targetOne = fix.componentInstance.targetOne;
855-
tooltipOne = fix.componentInstance.tooltipOne;
856-
tooltipTwo = fix.componentInstance.tooltipTwo;
857-
}));
858-
859-
it('should not add multiple document:touchstart event listeners when having multiple igxTooltip instances - #16100', fakeAsync(() => {
860-
spyOn<any>(tooltipOne, 'onDocumentTouchStart').and.callThrough();
861-
spyOn<any>(tooltipTwo, 'onDocumentTouchStart').and.callThrough();
862-
863-
touchElement(targetOne);
864-
tick(500);
865-
866-
const dummyDiv = fix.debugElement.query(By.css('.dummyDiv'));
867-
touchElement(dummyDiv);
868-
flush();
869-
870-
expect(tooltipOne['onDocumentTouchStart']).toHaveBeenCalledTimes(1);
871-
expect(tooltipTwo['onDocumentTouchStart']).not.toHaveBeenCalled();
872-
}));
873-
});
874-
875859
describe('Tooltip integration', () => {
876860
beforeEach(waitForAsync(() => {
877861
fix = TestBed.createComponent(IgxTooltipWithToggleActionComponent);
@@ -891,7 +875,7 @@ describe('IgxTooltip', () => {
891875
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
892876

893877
UIInteractions.simulateClickEvent(button.nativeElement);
894-
tick(HIDE_DELAY);
878+
tick(AUTO_HIDE_DELAY);
895879
tick(300);
896880

897881
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
@@ -996,10 +980,12 @@ describe('IgxTooltip', () => {
996980
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false)
997981
}));
998982

999-
it('should correctly display a sticky tooltip on touchstart', fakeAsync(() => {
983+
it('should correctly display a sticky tooltip on custom show trigger', fakeAsync(() => {
1000984
tooltipTarget.sticky = true;
985+
tooltipTarget.showTriggers = 'focus';
1001986
fix.detectChanges();
1002-
touchElement(button);
987+
988+
simulateTriggerEvent(button, 'focus');
1003989
flush();
1004990

1005991
verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
@@ -1075,11 +1061,11 @@ interface ElementRefLike {
10751061
nativeElement: HTMLElement
10761062
}
10771063

1078-
const hoverElement = (element: ElementRefLike) => element.nativeElement.dispatchEvent(new MouseEvent('mouseenter'));
1064+
const hoverElement = (element: ElementRefLike) => element.nativeElement.dispatchEvent(new MouseEvent('pointerenter'));
10791065

1080-
const unhoverElement = (element: ElementRefLike) => element.nativeElement.dispatchEvent(new MouseEvent('mouseleave'));
1066+
const unhoverElement = (element: ElementRefLike) => element.nativeElement.dispatchEvent(new MouseEvent('pointerleave'));
10811067

1082-
const touchElement = (element: ElementRefLike) => element.nativeElement.dispatchEvent(new TouchEvent('touchstart', { bubbles: true }));
1068+
const simulateTriggerEvent = (element: ElementRefLike, event: string) => element.nativeElement.dispatchEvent(new Event(event, { bubbles: true }));
10831069

10841070
const verifyTooltipVisibility = (tooltipNativeElement, tooltipTarget, shouldBeVisible: boolean) => {
10851071
expect(tooltipNativeElement.classList.contains(TOOLTIP_CLASS)).toBe(shouldBeVisible);

0 commit comments

Comments
 (0)