Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 59b1559

Browse filesBrowse files
xidedixxidedix
committed
test(tooltip): coverage
1 parent f1d6d44 commit 59b1559
Copy full SHA for 59b1559

File tree

Expand file treeCollapse file tree

2 files changed

+84
-13
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

2 files changed

+84
-13
lines changed
Open diff view settings
Collapse file

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

Copy file name to clipboard
+77-6Lines changed: 77 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,97 @@
1-
import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
2-
import { TestBed } from '@angular/core/testing';
3-
import { IntersectionService, ListenersService } from '../services';
1+
import { DOCUMENT } from '@angular/common';
2+
import {
3+
ChangeDetectorRef,
4+
Component,
5+
ComponentRef,
6+
DebugElement,
7+
ElementRef,
8+
Renderer2,
9+
ViewContainerRef
10+
} from '@angular/core';
11+
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
12+
import { By } from '@angular/platform-browser';
413
import { TooltipDirective } from './tooltip.directive';
14+
import { Triggers } from '../coreui.types';
15+
import { ListenersService } from '../services';
16+
17+
@Component({
18+
template: '<button cTooltip="content" [(cTooltipVisible)]="visible" [cTooltipTrigger]="trigger" >Test</button>',
19+
imports: [TooltipDirective]
20+
})
21+
export class TestComponent {
22+
content = 'Test';
23+
visible = false;
24+
trigger: Triggers[] = ['hover', 'click'];
25+
}
526

627
class MockElementRef extends ElementRef {}
728

829
describe('TooltipDirective', () => {
9-
it('should create an instance', () => {
30+
let component: TestComponent;
31+
let componentRef: ComponentRef<TestComponent>;
32+
let fixture: ComponentFixture<TestComponent>;
33+
let debugElement: DebugElement;
34+
let document: Document;
35+
36+
beforeEach(() => {
1037
TestBed.configureTestingModule({
38+
imports: [TestComponent],
1139
providers: [
12-
IntersectionService,
40+
// IntersectionService,
1341
Renderer2,
1442
ListenersService,
1543
{ provide: ElementRef, useClass: MockElementRef },
1644
ViewContainerRef,
1745
ChangeDetectorRef
1846
]
19-
});
47+
}).compileComponents();
48+
document = TestBed.inject(DOCUMENT);
49+
fixture = TestBed.createComponent(TestComponent);
50+
component = fixture.componentInstance;
51+
debugElement = fixture.debugElement.query(By.directive(TooltipDirective));
52+
fixture.autoDetectChanges();
53+
});
2054

55+
it('should create an instance', () => {
2156
TestBed.runInInjectionContext(() => {
2257
const directive = new TooltipDirective();
2358
expect(directive).toBeTruthy();
2459
});
2560
});
61+
62+
it('should have css classes', fakeAsync(() => {
63+
expect(document.querySelector('.tooltip.show')).toBeNull();
64+
component.visible = true;
65+
fixture.detectChanges();
66+
tick(500);
67+
expect(document.querySelector('.tooltip.show')).toBeTruthy();
68+
component.visible = false;
69+
fixture.detectChanges();
70+
tick(500);
71+
expect(document.querySelector('.tooltip.show')).toBeNull();
72+
}));
73+
74+
it('should set popover on and off', fakeAsync(() => {
75+
fixture.autoDetectChanges();
76+
component.visible = false;
77+
expect(document.querySelector('.tooltip.show')).toBeNull();
78+
debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
79+
tick(500);
80+
expect(document.querySelector('.tooltip.show')).toBeTruthy();
81+
debugElement.nativeElement.dispatchEvent(new Event('mouseleave'));
82+
tick(500);
83+
expect(document.querySelector('.tooltip.show')).toBeNull();
84+
}));
85+
86+
it('should toggle popover', fakeAsync(() => {
87+
fixture.autoDetectChanges();
88+
component.visible = false;
89+
expect(document.querySelector('.tooltip.show')).toBeNull();
90+
debugElement.nativeElement.dispatchEvent(new Event('click'));
91+
tick(500);
92+
expect(document.querySelector('.tooltip.show')).toBeTruthy();
93+
debugElement.nativeElement.dispatchEvent(new Event('click'));
94+
tick(500);
95+
expect(document.querySelector('.tooltip.show')).toBeNull();
96+
}));
2697
});
Collapse file

‎projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts‎

Copy file name to clipboardExpand all lines: projects/coreui-angular/src/lib/tooltip/tooltip.directive.ts
+7-7Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
4444

4545
/**
4646
* Content of tooltip
47-
* @type {string | TemplateRef}
47+
* @return {string | TemplateRef}
4848
*/
4949
readonly content = input<string | TemplateRef<any> | undefined>(undefined, { alias: 'cTooltip' });
5050

@@ -56,7 +56,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
5656

5757
/**
5858
* Optional popper Options object, takes precedence over cPopoverPlacement prop
59-
* @type Partial<Options>
59+
* @return Partial<Options>
6060
*/
6161
readonly popperOptions = input<Partial<Options>>({}, { alias: 'cTooltipOptions' });
6262

@@ -74,14 +74,14 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
7474

7575
/**
7676
* Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
77-
* @type: 'top' | 'bottom' | 'left' | 'right'
77+
* @return: 'top' | 'bottom' | 'left' | 'right'
7878
* @default: 'top'
7979
*/
8080
readonly placement = input<'top' | 'bottom' | 'left' | 'right'>('top', { alias: 'cTooltipPlacement' });
8181

8282
/**
8383
* ElementRefDirective for positioning the tooltip on reference element
84-
* @type: ElementRefDirective
84+
* @return: ElementRefDirective
8585
* @default: undefined
8686
*/
8787
readonly reference = input<ElementRefDirective | undefined>(undefined, { alias: 'cTooltipRef' });
@@ -90,13 +90,13 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
9090

9191
/**
9292
* Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
93-
* @type: 'Triggers | Triggers[]
93+
* @return: 'Triggers | Triggers[]
9494
*/
9595
readonly trigger = input<Triggers | Triggers[]>('hover', { alias: 'cTooltipTrigger' });
9696

9797
/**
9898
* Toggle the visibility of tooltip component.
99-
* @type boolean
99+
* @return boolean
100100
*/
101101
readonly visible = model(false, { alias: 'cTooltipVisible' });
102102

@@ -142,7 +142,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
142142
hostElement: this.#hostElement,
143143
trigger: this.trigger(),
144144
callbackToggle: () => {
145-
this.visible.set(!this.visible());
145+
this.visible.update((value) => !value);
146146
},
147147
callbackOff: () => {
148148
this.visible.set(false);

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.