test(popover): coverage

Author: xidedix

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

@@ -1,25 +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 { ListenersService } from '../services';
 import { PopoverDirective } from './popover.directive';
+import { Triggers } from '../coreui.types';
+
+@Component({
+  template: '<button cPopover="content" [(cPopoverVisible)]="visible" [cPopoverTrigger]="trigger" >Test</button>',
+  imports: [PopoverDirective]
+})
+export class TestComponent {
+  content = 'Test';
+  visible = false;
+  trigger: Triggers[] = ['hover', 'click'];
+}
 
 class MockElementRef extends ElementRef {}
 
 describe('PopoverDirective', () => {
-  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(PopoverDirective));
+    fixture.autoDetectChanges();
+  });
+
+  it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
       const directive = new PopoverDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css classes', fakeAsync(() => {
+    expect(document.querySelector('.popover.show')).toBeNull();
+    component.visible = true;
+    fixture.detectChanges();
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeTruthy();
+    component.visible = false;
+    fixture.detectChanges();
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeNull();
+  }));
+
+  it('should set popover on and off', fakeAsync(() => {
+    fixture.autoDetectChanges();
+    component.visible = false;
+    expect(document.querySelector('.popover.show')).toBeNull();
+    debugElement.nativeElement.dispatchEvent(new Event('mouseenter'));
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeTruthy();
+    debugElement.nativeElement.dispatchEvent(new Event('mouseleave'));
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeNull();
+  }));
+
+  it('should toggle popover', fakeAsync(() => {
+    fixture.autoDetectChanges();
+    component.visible = false;
+    expect(document.querySelector('.popover.show')).toBeNull();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeTruthy();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    tick(500);
+    expect(document.querySelector('.popover.show')).toBeNull();
+  }));
 });

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

@@ -44,7 +44,7 @@ export class PopoverDirective implements OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Content of popover
-   * @type {string | TemplateRef}
+   * @return {string | TemplateRef}
    */
   readonly content = input<string | TemplateRef<any> | undefined>(undefined, { alias: 'cPopover' });
 
@@ -74,14 +74,14 @@ export class PopoverDirective 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: 'cPopoverPlacement' });
 
   /**
    * 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 PopoverDirective 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: 'cPopoverTrigger' });
 
   /**
    * Toggle the visibility of popover component.
-   * @type boolean
+   * @return boolean
    */
   readonly visible = model(false, { alias: 'cPopoverVisible' });
 
@@ -142,7 +142,7 @@ export class PopoverDirective implements OnDestroy, OnInit, AfterViewInit {
       hostElement: this.#hostElement,
       trigger: this.trigger(),
       callbackToggle: () => {
-        this.visible.set(!this.visible());
+        this.visible.update((visible) => !visible);
       },
       callbackOff: () => {
         this.visible.set(false);

projects/coreui-angular/src/lib/popover/popover/popover.component.ts

@@ -29,7 +29,7 @@ export class PopoverComponent implements OnDestroy {
 
   /**
    * Content of popover
-   * @type {string | TemplateRef}
+   * @return {string | TemplateRef}
    */
   readonly content = input<string | TemplateRef<any>>('');
 
@@ -39,7 +39,7 @@ export class PopoverComponent implements OnDestroy {
 
   /**
    * Toggle the visibility of popover component.
-   * @type boolean
+   * @return boolean
    */
   readonly visible = input(false, { transform: booleanAttribute });
   readonly id = input<string>();