test(tooltip): coverage

Author: xidedix

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

@@ -1,26 +1,97 @@
-import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { IntersectionService, ListenersService } from '../services';
+import { DOCUMENT } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ComponentRef,
+  DebugElement,
+  ElementRef,
+  Renderer2,
+  ViewContainerRef
+} from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { TooltipDirective } from './tooltip.directive';
+import { Triggers } from '../coreui.types';
+import { ListenersService } from '../services';
+
+@Component({
+  template: '<button cTooltip="content" [(cTooltipVisible)]="visible" [cTooltipTrigger]="trigger" >Test</button>',
+  imports: [TooltipDirective]
+})
+export class TestComponent {
+  content = 'Test';
+  visible = false;
+  trigger: Triggers[] = ['hover', 'click'];
+}
 
 class MockElementRef extends ElementRef {}
 
 describe('TooltipDirective', () => {
-  it('should create an instance', () => {
+  let component: TestComponent;
+  let componentRef: ComponentRef<TestComponent>;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+  let document: Document;
+
+  beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [TestComponent],
       providers: [
-        IntersectionService,
+        // IntersectionService,
         Renderer2,
         ListenersService,
         { provide: ElementRef, useClass: MockElementRef },
         ViewContainerRef,
         ChangeDetectorRef
       ]
-    });
+    }).compileComponents();
+    document = TestBed.inject(DOCUMENT);
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.query(By.directive(TooltipDirective));
+    fixture.autoDetectChanges();
+  });
 
+  it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
       const directive = new TooltipDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css classes', fakeAsync(() => {
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+    component.visible = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeTruthy();
+    component.visible = false;
+    fixture.detectChanges();
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+  }));
+
+  it('should set popover on and off', fakeAsync(() => {
+    fixture.autoDetectChanges();
+    component.visible = false;
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+    debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeTruthy();
+    debugElement.nativeElement.dispatchEvent(new Event('mouseleave'));
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+  }));
+
+  it('should toggle popover', fakeAsync(() => {
+    fixture.autoDetectChanges();
+    component.visible = false;
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeTruthy();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    tick(500);
+    expect(document.querySelector('.tooltip.show')).toBeNull();
+  }));
 });

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

@@ -44,7 +44,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Content of tooltip
-   * @type {string | TemplateRef}
+   * @return {string | TemplateRef}
    */
   readonly content = input<string | TemplateRef<any> | undefined>(undefined, { alias: 'cTooltip' });
 
@@ -56,7 +56,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Optional popper Options object, takes precedence over cPopoverPlacement prop
-   * @type Partial<Options>
+   * @return Partial<Options>
    */
   readonly popperOptions = input<Partial<Options>>({}, { alias: 'cTooltipOptions' });
 
@@ -74,14 +74,14 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
 
   /**
    * 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.
-   * @type: 'top' | 'bottom' | 'left' | 'right'
+   * @return: 'top' | 'bottom' | 'left' | 'right'
    * @default: 'top'
    */
   readonly placement = input<'top' | 'bottom' | 'left' | 'right'>('top', { alias: 'cTooltipPlacement' });
 
   /**
    * ElementRefDirective for positioning the tooltip on reference element
-   * @type: ElementRefDirective
+   * @return: ElementRefDirective
    * @default: undefined
    */
   readonly reference = input<ElementRefDirective | undefined>(undefined, { alias: 'cTooltipRef' });
@@ -90,13 +90,13 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-   * @type: 'Triggers | Triggers[]
+   * @return: 'Triggers | Triggers[]
    */
   readonly trigger = input<Triggers | Triggers[]>('hover', { alias: 'cTooltipTrigger' });
 
   /**
    * Toggle the visibility of tooltip component.
-   * @type boolean
+   * @return boolean
    */
   readonly visible = model(false, { alias: 'cTooltipVisible' });
 
@@ -142,7 +142,7 @@ export class TooltipDirective implements OnDestroy, OnInit, AfterViewInit {
       hostElement: this.#hostElement,
       trigger: this.trigger(),
       callbackToggle: () => {
-        this.visible.set(!this.visible());
+        this.visible.update((value) => !value);
       },
       callbackOff: () => {
         this.visible.set(false);