AAE-21315 Repair adf tooltip card directive (#9453)

* AAE-21315 Update TooltipCardDirective

* AAE-21315 Fix

* AAE-21315 Remove fdescribe

* AAE-21315 Add spaces
This commit is contained in:
Wiktor Danielewski
2024-03-21 14:41:18 +01:00
committed by GitHub
parent c382ac06ec
commit ff60cb594e
2 changed files with 34 additions and 5 deletions

View File

@@ -19,7 +19,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TooltipCardDirective } from './tooltip-card.directive';
import { CommonModule } from '@angular/common';
import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
import { Overlay, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
import { TooltipCardComponent } from './tooltip-card.component';
@@ -40,6 +40,7 @@ class TestComponent {
describe('TooltipCardDirective', () => {
let fixture: ComponentFixture<TestComponent>;
let overlay: HTMLElement;
let overlayService: Overlay;
let overlayContainer: OverlayContainer;
beforeEach((() => {
@@ -59,7 +60,7 @@ describe('TooltipCardDirective', () => {
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
overlayService = TestBed.inject(Overlay);
overlayContainer = TestBed.inject(OverlayContainer);
overlay = overlayContainer.getContainerElement();
});
@@ -69,16 +70,22 @@ describe('TooltipCardDirective', () => {
});
it('should display tooltip-card on mouse enter', () => {
fixture.detectChanges();
let tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).toBeNull();
const span = fixture.debugElement.query(By.css('span.test-component'));
span.triggerEventHandler('mouseenter', {});
fixture.detectChanges();
tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).not.toBeNull();
const text = tooltipCard.querySelector<HTMLElement>('p');
const img = tooltipCard.querySelector<HTMLElement>('img');
const div = tooltipCard.querySelector<HTMLElement>('div');
expect(tooltipCard.getAttribute('style')).toBe('width: 400px;');
expect(text.textContent.trim()).toEqual('Sample text');
expect(img.getAttribute('src')).toEqual(IMAGE_URL);
@@ -87,28 +94,48 @@ describe('TooltipCardDirective', () => {
});
it('should hide tooltip-card on mouse leave', () => {
fixture.detectChanges();
const span = fixture.debugElement.query(By.css('span.test-component'));
span.triggerEventHandler('mouseenter', {});
fixture.detectChanges();
let tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).not.toBeNull();
span.triggerEventHandler('mouseleave', {});
fixture.detectChanges();
tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).toBeNull();
});
it('should hide tooltip-card on destroy', () => {
fixture.detectChanges();
const span = fixture.debugElement.query(By.css('span.test-component'));
span.triggerEventHandler('mouseenter', {});
fixture.detectChanges();
let tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).not.toBeNull();
fixture.componentInstance.directive.ngOnDestroy();
fixture.detectChanges();
tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).toBeNull();
});
it('should NOT hide tooltip-card on destroy when overlay reference is undefined', () => {
spyOn(overlayService, 'create').and.returnValue(undefined as any);
spyOn(fixture.componentInstance.directive, 'hide');
fixture.detectChanges();
const tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
expect(tooltipCard).toBeNull();
fixture.componentInstance.directive.ngOnDestroy();
expect(fixture.componentInstance.directive.hide).toHaveBeenCalledTimes(0);
});
});

View File

@@ -43,7 +43,9 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
this.hide();
if (this.overlayRef) {
this.hide();
}
}
ngOnInit(): void {
@@ -64,7 +66,7 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
@HostListener('mouseenter')
show() {
const tooltipRef: ComponentRef<TooltipCardComponent>
= this.overlayRef.attach(new ComponentPortal(TooltipCardComponent));
= this.overlayRef?.attach(new ComponentPortal(TooltipCardComponent));
tooltipRef.instance.text = this.text;
tooltipRef.instance.image = this.image;
tooltipRef.instance.width = this.width;
@@ -73,6 +75,6 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
@HostListener('mouseleave')
hide() {
this.overlayRef.detach();
this.overlayRef?.detach();
}
}