Add test

Author: alfonsserra

projects/systelab-components/src/lib/tooltip/tooltip.component.spec.ts

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserModule, By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TreeModule } from 'primeng/tree';
+import { HttpClientModule } from '@angular/common/http';
+import { TooltipComponent } from './tooltip.component';
+import { TooltipDirective } from './tooltip.directive';
+
+@Component({
+	selector: 'systelab-tabs-test',
+	template: `
+			<div class="m-4">
+          <systelab-button id="my-component" (action)="doSomething()" systelabTooltip="Tooltip on top"
+                [systelabTooltipDelay]="0" [systelabTooltipHideDelay]="0">Tooltip on top</systelab-button>
+      </div>
+	          `,
+	styles:   []
+})
+export class TooltipTestComponent {
+		public doSomething() {
+			console.log('Button clicked');
+		}
+}
+
+describe('Systelab Tooltip', () => {
+	let fixture: ComponentFixture<TooltipTestComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports:      [BrowserModule,
+				BrowserAnimationsModule,
+				FormsModule,
+				DragDropModule,
+				OverlayModule,
+				TreeModule,
+				HttpClientModule],
+			declarations: [TooltipDirective, TooltipComponent, TooltipTestComponent]
+		})
+			.compileComponents();
+	});
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TooltipTestComponent);
+		fixture.detectChanges();
+	});
+
+	it('should instantiate', () => {
+		expect(fixture.componentInstance)
+			.toBeDefined();
+	});
+
+	it('should show and hide the tooltip', async () => {
+		await fixture.whenStable();
+		let button = fixture.debugElement.query(By.css('#my-component'));
+
+		expect(isPopupVisible(fixture)).toBeFalsy();
+
+		button.triggerEventHandler('mouseenter', {});
+		fixture.detectChanges();
+
+		expect(isPopupVisible(fixture)).toBeTruthy();
+
+		button.triggerEventHandler('mouseleave', {});
+		fixture.detectChanges();
+
+		expect(isPopupVisible(fixture)).toBeFalsy();
+	})
+});
+
+function isPopupVisible(fixture: ComponentFixture<TooltipTestComponent>) {
+	return (document.querySelector('tooltip') !== null);
+}

projects/systelab-components/src/lib/tooltip/tooltip.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
 	selector: 'tooltip',
@@ -11,5 +11,4 @@ export class TooltipComponent {
 	public left = 0;
 	public top = 0;
 	public visible = false;
-
 }

projects/systelab-components/src/lib/tooltip/tooltip.directive.ts

@@ -1,48 +1,38 @@
-import { ApplicationRef, ComponentRef, Directive, ElementRef, EmbeddedViewRef, HostListener, Input, ViewContainerRef } from '@angular/core';
+import { ApplicationRef, ComponentRef, Directive, ElementRef, EmbeddedViewRef, HostListener, Input, OnDestroy, ViewContainerRef } from '@angular/core';
 import { TooltipComponent } from "./tooltip.component";
 
 @Directive({
 	selector: '[systelabTooltip],[systelabTooltipHtml]'
 })
-export class TooltipDirective {
+export class TooltipDirective implements OnDestroy {
 
 	public static readonly DEFAULT_DELAY = 200;
 
 	@Input() public systelabTooltip: string;
 	@Input() public systelabTooltipHtml: string;
-	@Input() systelabTooltipPlacement: undefined | 'top' | 'right' | 'bottom' | 'left';
-	@Input() systelabTooltipDelay = TooltipDirective.DEFAULT_DELAY;
-	@Input() systelabTooltipHideDelay = TooltipDirective.DEFAULT_DELAY;
+	@Input() public systelabTooltipPlacement: undefined | 'top' | 'right' | 'bottom' | 'left';
+	@Input() public systelabTooltipDelay = TooltipDirective.DEFAULT_DELAY;
+	@Input() public systelabTooltipHideDelay = TooltipDirective.DEFAULT_DELAY;
 
 	private componentRef: ComponentRef<any> | null = null;
 	private showTimeout?: number;
 	private hideTimeout?: number;
-	private touchTimeout?: number;
 
 	constructor(private elementRef: ElementRef, private appRef: ApplicationRef, private viewContainerRef: ViewContainerRef) {
 	}
 
 	@HostListener('mouseenter')
-	onMouseEnter(): void {
+	public  onMouseEnter(): void {
 		this.initializeTooltip();
 	}
 
 	@HostListener('mouseleave')
-	onMouseLeave(): void {
-		this.setHideTooltipTimeout();
-	}
-
-	@HostListener('touchstart', ['$event'])
-	onTouchStart($event: TouchEvent): void {
-		$event.preventDefault();
-		window.clearTimeout(this.touchTimeout);
-		this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);
-	}
-
-	@HostListener('touchend')
-	onTouchEnd(): void {
-		window.clearTimeout(this.touchTimeout);
-		this.setHideTooltipTimeout();
+	public onMouseLeave(): void {
+		if (this.systelabTooltipHideDelay) {
+			this.hideTimeout = this.setHideTooltipTimeout();
+		} else {
+			this.destroy();
+		}
 	}
 
 	private initializeTooltip() {
@@ -105,15 +95,15 @@ export class TooltipDirective {
 		}
 	}
 
-	private setHideTooltipTimeout() {
-		this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.systelabTooltipHideDelay);
+	private setHideTooltipTimeout():number {
+		return window.setTimeout(this.destroy.bind(this), this.systelabTooltipHideDelay);
 	}
 
-	ngOnDestroy(): void {
+	public ngOnDestroy(): void {
 		this.destroy();
 	}
 
-	destroy(): void {
+	public destroy(): void {
 		if (this.componentRef !== null) {
 			window.clearInterval(this.showTimeout);
 			window.clearInterval(this.systelabTooltipHideDelay);