refactor(tooltip): for use with IntersectionService providedIn root

Author: xidedix

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

@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { IntersectionService, ListenersService } from '../services';
 import { TooltipDirective } from './tooltip.directive';
 
@@ -11,16 +12,22 @@ describe('TooltipDirective', () => {
 
   it('should create an instance', () => {
     const listenersService = new ListenersService(renderer);
-    const intersectionService = new IntersectionService();
-    const directive = new TooltipDirective(
-      document,
-      renderer,
-      hostElement,
-      viewContainerRef,
-      listenersService,
-      changeDetectorRef,
-      intersectionService
-    );
-    expect(directive).toBeTruthy();
+    TestBed.configureTestingModule({
+      providers: [IntersectionService]
+    });
+    const intersectionService = TestBed.inject(IntersectionService);
+    TestBed.runInInjectionContext(() => {
+      const directive = new TooltipDirective(
+        document,
+        renderer,
+        hostElement,
+        viewContainerRef,
+        listenersService,
+        changeDetectorRef,
+        intersectionService
+      );
+      expect(directive).toBeTruthy();
+    });
+
   });
 });

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

@@ -2,9 +2,11 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   ComponentRef,
+  DestroyRef,
   Directive,
   ElementRef,
   HostBinding,
+  inject,
   Inject,
   Input,
   OnChanges,
@@ -15,9 +17,9 @@ import {
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DOCUMENT } from '@angular/common';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, finalize } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
@@ -96,7 +98,7 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
     ]
   };
 
-  private intersectingSubscription?: Subscription;
+  readonly #destroyRef = inject(DestroyRef);
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
@@ -109,7 +111,6 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
   ) {}
 
   ngAfterViewInit(): void {
-    this.intersectionService.createIntersectionObserver(this.hostElement);
     this.intersectionServiceSubscribe();
   }
 
@@ -122,7 +123,6 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
   ngOnDestroy(): void {
     this.clearListeners();
     this.destroyTooltipElement();
-    this.intersectionServiceSubscribe(false);
   }
 
   ngOnInit(): void {
@@ -154,18 +154,19 @@ export class TooltipDirective implements OnChanges, OnDestroy, OnInit, AfterView
   }
 
   private intersectionServiceSubscribe(subscribe: boolean = true): void {
-    if (subscribe) {
-      this.intersectingSubscription = this.intersectionService.intersecting$
-        .pipe(
-          debounceTime(100)
-        )
-        .subscribe(isIntersecting => {
-          this.visible = isIntersecting ? this.visible : false;
-          !this.visible && this.removeTooltipElement();
-        });
-    } else {
-      this.intersectingSubscription?.unsubscribe();
-    }
+    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionService.intersecting$
+      .pipe(
+        debounceTime(100),
+        finalize(() => {
+          this.intersectionService.unobserve(this.hostElement);
+        }),
+        takeUntilDestroyed(this.#destroyRef)
+      )
+      .subscribe(isIntersecting => {
+        this.visible = isIntersecting ? this.visible : false;
+        !this.visible && this.removeTooltipElement();
+      });
   }
 
   private getUID(prefix: string): string {