[UXP-126] add tests for text-select.directive

Author: Andrea Barbasso

src/app/directives/text-select/text-select.directive.spec.ts

@@ -1,27 +1,62 @@
 import { TextSelectDirective } from './text-select.directive';
-import { ElementRef, NgZone } from '@angular/core';
+import { ApplicationRef, ElementRef, NgZone } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
 describe('TextSelectDirective', () => {
   let directive: TextSelectDirective;
   let elementRef: ElementRef;
   let ngZone: NgZone;
+  let appRef: ApplicationRef;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
         TextSelectDirective,
+        { provide: ApplicationRef, useValue: { attachView: () => ({ rootNodes: [{}] }) } },
         { provide: ElementRef, useValue: { nativeElement: document.createElement('div') } },
-        NgZone
+        { provide: NgZone, useValue: new NgZone({}) },
       ]
     });
 
     directive = TestBed.inject(TextSelectDirective);
     elementRef = TestBed.inject(ElementRef);
     ngZone = TestBed.inject(NgZone);
+    appRef = TestBed.inject(ApplicationRef);
   });
 
   it('should create an instance', () => {
     expect(directive).toBeTruthy();
   });
+
+  it('should set up event listener on ngOnInit', () => {
+    spyOn(elementRef.nativeElement, 'addEventListener');
+    directive.ngOnInit();
+    expect(elementRef.nativeElement.addEventListener).toHaveBeenCalledWith('mousedown', directive.handleMousedown, false);
+  });
+
+  it('should remove event listener on ngOnDestroy', () => {
+    spyOn(elementRef.nativeElement, 'removeEventListener');
+    directive.ngOnDestroy();
+    expect(elementRef.nativeElement.removeEventListener).toHaveBeenCalledWith('mousedown', directive.handleMousedown, false);
+  });
+
+  it('should process selection correctly', () => {
+    const selection = {
+      rangeCount: 1,
+      toString: () => 'test',
+      getRangeAt: () => ({ getBoundingClientRect: () => ({}) }),
+    };
+    spyOn(document, 'getSelection').and.returnValue(selection as any);
+    spyOn(directive, 'getRangeContainer').and.returnValue(elementRef.nativeElement);
+    spyOn(elementRef.nativeElement, 'contains').and.returnValue(true);
+    spyOn(directive, 'createTooltipComponent').and.returnValue({ instance: {}, hostView: {rootNodes: []} } as any);
+    spyOn(document.body, 'appendChild').and.returnValue({} as Node);
+    spyOn(appRef, 'attachView').and.returnValue();
+
+    directive.processSelection();
+
+    expect(directive.hasSelection).toBeTrue();
+    expect(directive.selectedText).toBe('test');
+    expect(directive.componentRef).toBeTruthy();
+  });
 });

src/app/directives/text-select/text-select.directive.ts

@@ -24,7 +24,7 @@ export class TextSelectDirective implements OnInit, OnDestroy {
   hasSelection = false;
   selectedText = '';
 
-  private componentRef: ComponentRef<any> = null;
+  componentRef: ComponentRef<any> = null;
 
   // Initialize the directive.
   constructor(
@@ -36,20 +36,20 @@ export class TextSelectDirective implements OnInit, OnDestroy {
   }
 
   // Clean up when the directive is destroyed.
-  public ngOnDestroy(): void {
+  ngOnDestroy(): void {
     this.elementRef.nativeElement.removeEventListener('mousedown', this.handleMousedown, false);
     document.removeEventListener('mouseup', this.handleMouseup, false);
   }
 
   // Set up event listeners when the directive is initialized.
-  public ngOnInit(): void {
+  ngOnInit(): void {
     this.zone.runOutsideAngular(() => {
       this.elementRef.nativeElement.addEventListener('mousedown', this.handleMousedown, false);
     });
   }
 
   // Get the deepest Element node in the DOM tree that contains the entire range.
-  private getRangeContainer(range: Range): Node {
+  getRangeContainer(range: Range): Node {
     let container = range.commonAncestorContainer;
     while (container.nodeType !== Node.ELEMENT_NODE) {
       container = container.parentNode;
@@ -58,7 +58,7 @@ export class TextSelectDirective implements OnInit, OnDestroy {
   }
 
   // Handle mousedown events inside the current element.
-  private handleMousedown = (): void => {
+  handleMousedown = (): void => {
     document.addEventListener('mouseup', this.handleMouseup, false);
   };
 
@@ -68,8 +68,11 @@ export class TextSelectDirective implements OnInit, OnDestroy {
     this.processSelection();
   };
 
+  createTooltipComponent(): ComponentRef<TextSelectionTooltipComponent> {
+    return createComponent(TextSelectionTooltipComponent, {environmentInjector: this.injector});
+  }
 
-  private processSelection(): void {
+  processSelection(): void {
     const selection = document.getSelection();
     const stringSelection = selection.toString().trim();
     const previousSelection = this.selectedText;
@@ -88,6 +91,7 @@ export class TextSelectDirective implements OnInit, OnDestroy {
     if (!selection.rangeCount || !stringSelection || previousSelection === stringSelection) {
       return;
     }
+    console.warn('selection', stringSelection);
     let range = selection.getRangeAt(0);
     let rangeContainer = this.getRangeContainer(range);
     // check if the range container is inside the current element
@@ -98,11 +102,10 @@ export class TextSelectDirective implements OnInit, OnDestroy {
         this.zone.runGuarded(() => {
           this.hasSelection = true;
           if (this.componentRef === null) {
-            this.componentRef = createComponent(TextSelectionTooltipComponent, {environmentInjector: this.injector});
+            this.componentRef = this.createTooltipComponent();
             this.appRef.attachView(this.componentRef.hostView);
 
             const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-
             document.body.appendChild(domElem);
 
             this.componentRef.instance.elementRectangleLeft = viewportRectangle.left + window.scrollX;