mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
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:
committed by
GitHub
parent
c382ac06ec
commit
ff60cb594e
@@ -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);
|
||||
});
|
||||
});
|
||||
|
@@ -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();
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user