describe('NzPopover', () => {
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let demoAppFixture: ComponentFixture<DemoAppComponent>;
let demoAppComponent: DemoAppComponent;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [ NzPopoverModule, NoopAnimationsModule ],
declarations: [ DemoAppComponent ]
});
TestBed.compileComponents();
}));
beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
overlayContainer.ngOnDestroy();
});
beforeEach(() => {
demoAppFixture = TestBed.createComponent(DemoAppComponent);
demoAppComponent = demoAppFixture.componentInstance;
demoAppFixture.detectChanges();
});
it('should show/hide normal tooltip', fakeAsync(() => {
const featureKey = 'NORMAL';
const triggerElement = demoAppComponent.normalTrigger.nativeElement;
expect(overlayContainerElement.textContent).not.toContain(featureKey);
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
demoAppFixture.detectChanges();
tick(150); // wait for the default 100ms delay
demoAppFixture.detectChanges();
tick();
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the trigger element to hide it
dispatchMouseEvent(triggerElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
demoAppFixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show tooltip with custom template', fakeAsync(() => {
const triggerElement = demoAppComponent.templateTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'mouseenter');
demoAppFixture.detectChanges();
tick(150); // wait for the default 100ms delay
demoAppFixture.detectChanges();
tick();
demoAppFixture.detectChanges();
expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
}));
it('should show/hide tooltip by focus', fakeAsync(() => {
const featureKey = 'FOCUS';
const triggerElement = demoAppComponent.focusTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'focus');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(triggerElement, 'blur');
tick(100); // wait for the default 100ms delay
demoAppFixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide tooltip by click', fakeAsync(() => {
const featureKey = 'CLICK';
const triggerElement = demoAppComponent.clickTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'click');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
tick();
demoAppFixture.detectChanges();
tick(500); // Wait for animations
demoAppFixture.detectChanges();
tick();
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide by nzVisible change', fakeAsync(() => {
const featureKey = 'VISIBLE';
demoAppComponent.visible = true;
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
demoAppComponent.visible = false;
demoAppFixture.detectChanges();
tick(100);
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
});
ngOnInit(): void {
let theme = 'light-custom-theme';
if (this.storageService.hasTheme()) {
theme = this.storageService.getTheme();
} else {
this.storageService.setTheme(theme);
}
document.body.classList.add(theme, 'mat-app-background');
this.overlay.getContainerElement().classList.add(theme);
}
afterEach(() => {
overlayContainer.ngOnDestroy();
});
beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
beforeEach(inject([ NzNotificationService, OverlayContainer ], (m: NzNotificationService, oc: OverlayContainer) => {
messageService = m;
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
describe('NzNotification', () => {
let messageService: NzNotificationService;
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let demoAppFixture: ComponentFixture<DemoAppComponent>;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ NzNotificationModule, NoopAnimationsModule ],
declarations: [ DemoAppComponent ],
providers : [ { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzMaxStack: 2 } } ] // Override default config
});
TestBed.compileComponents();
}));
beforeEach(inject([ NzNotificationService, OverlayContainer ], (m: NzNotificationService, oc: OverlayContainer) => {
messageService = m;
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
overlayContainer.ngOnDestroy();
});
beforeEach(() => {
demoAppFixture = TestBed.createComponent(DemoAppComponent);
});
it('should open a message box with success', (() => {
messageService.success('test-title', 'SUCCESS');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('SUCCESS');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-success')).not.toBeNull();
}));
it('should open a message box with error', (() => {
messageService.error('test-title', 'ERROR');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('ERROR');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-error')).not.toBeNull();
}));
it('should open a message box with warning', (() => {
messageService.warning('test-title', 'WARNING');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('WARNING');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-warning')).not.toBeNull();
}));
it('should open a message box with info', (() => {
messageService.info('test-title', 'INFO');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('INFO');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-info')).not.toBeNull();
}));
it('should open a message box with blank', (() => {
messageService.blank('test-title', 'BLANK');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('BLANK');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon')).toBeNull();
}));
it('should auto closed by 1s', fakeAsync(() => {
messageService.create(null, null, 'EXISTS', { nzDuration: 1000 });
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('EXISTS');
tick(1200 + 10); // Wait for animation with 200ms
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should not destroy when hovered', fakeAsync(() => {
messageService.create(null, null, 'EXISTS', { nzDuration: 3000 });
demoAppFixture.detectChanges();
const messageElement = overlayContainerElement.querySelector('.ant-notification-notice');
dispatchMouseEvent(messageElement, 'mouseenter');
tick(50000);
expect(overlayContainerElement.textContent).toContain('EXISTS');
dispatchMouseEvent(messageElement, 'mouseleave');
tick(5000);
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should not destroyed automatically but manually', fakeAsync(() => {
const filledMessage = messageService.success('title', 'SUCCESS', { nzDuration: 0 });
demoAppFixture.detectChanges();
tick(50000);
expect(overlayContainerElement.textContent).toContain('SUCCESS');
messageService.remove(filledMessage.messageId);
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).not.toContain('SUCCESS');
}));
it('should keep the balance of messages length and then remove all', fakeAsync(() => {
[ 1, 2, 3 ].forEach(id => {
const content = `SUCCESS-${id}`;
messageService.success(null, content);
demoAppFixture.detectChanges();
tick();
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(content);
if (id === 3) {
expect(overlayContainerElement.textContent).not.toContain('SUCCESS-1');
expect((messageService as any)._container.messages.length).toBe(2); // tslint:disable-line:no-any
}
});
messageService.remove();
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).not.toContain('SUCCESS-3');
expect((messageService as any)._container.messages.length).toBe(0); // tslint:disable-line:no-any
}));
it('should destroy without animation', fakeAsync(() => {
messageService.error(null, 'EXISTS', { nzDuration: 1000, nzAnimate: false });
demoAppFixture.detectChanges();
tick(1000 + 10);
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should reset default config dynamically', fakeAsync(() => {
messageService.config({ nzDuration: 0 });
messageService.create(null, 'loading', 'EXISTS');
demoAppFixture.detectChanges();
tick(50000);
expect(overlayContainerElement.textContent).toContain('EXISTS');
}));
it('should show with placement of topLeft', () => {
messageService.config({ nzPlacement: 'topLeft' });
messageService.create(null, null, 'EXISTS');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('EXISTS');
expect(overlayContainerElement.querySelector('.ant-notification-topLeft')).not.toBeNull();
});
it('should open a message box with template ref', () => {
messageService.template(demoAppFixture.componentInstance.demoTemplateRef);
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('test template content');
});
it('should update an existing notification when keys are matched', () => {
messageService.create(null, null, 'EXISTS', { nzKey: 'exists' });
expect(overlayContainerElement.textContent).toContain('EXISTS');
messageService.create('success', 'Title', 'SHOULD NOT CHANGE', { nzKey: 'exists' });
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
expect(overlayContainerElement.textContent).toContain('Title');
expect(overlayContainerElement.textContent).toContain('SHOULD NOT CHANGE');
expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-success')).not.toBeNull();
});
});
describe('NzPopover', () => {
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let fixture;
let component;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ NzPopoverModule, NoopAnimationsModule, NzToolTipModule, NzIconModule ],
declarations: [ NzPopoverTestWrapperComponent, NzPopoverTestNewComponent ],
providers : [ { provide: NZ_ICONS, useValue: [ FileOutline ] } ]
});
TestBed.compileComponents();
}));
beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
overlayContainer.ngOnDestroy();
});
describe('should not bring break changes', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NzPopoverTestWrapperComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should show/hide normal tooltip', fakeAsync(() => {
const featureKey = 'NORMAL';
const triggerElement = component.normalTrigger.nativeElement;
expect(overlayContainerElement.textContent).not.toContain(featureKey);
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 100ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the trigger element to hide it
dispatchMouseEvent(triggerElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show tooltip with custom template', fakeAsync(() => {
const triggerElement = component.templateTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 100ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
}));
it('should show/hide tooltip by focus', fakeAsync(() => {
const featureKey = 'FOCUS';
const triggerElement = component.focusTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'focus');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(triggerElement, 'blur');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide tooltip by click', fakeAsync(() => {
const featureKey = 'CLICK';
const triggerElement = component.clickTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'click');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
tick();
fixture.detectChanges();
tick(500); // Wait for animations
fixture.detectChanges();
tick();
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide by nzVisible change', fakeAsync(() => {
const featureKey = 'VISIBLE';
component.visible = true;
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
component.visible = false;
fixture.detectChanges();
tick(100);
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
});
describe('should support directive usage', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NzPopoverTestNewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should support string', fakeAsync(() => {
const triggerElement = component.stringPopover.nativeElement;
expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 100ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.querySelector('.ant-popover-title').textContent).toContain('title-string');
expect(overlayContainerElement.querySelector('.ant-popover-inner-content').textContent).toContain('content-string');
// Move out from the trigger element to hide it
dispatchMouseEvent(triggerElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
}));
it('should support template', fakeAsync(() => {
const triggerElement = component.templatePopover.nativeElement;
expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 100ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.querySelector('.ant-popover-title').textContent).toContain('title-template');
expect(overlayContainerElement.querySelector('.ant-popover-inner-content').textContent).toContain('content-template');
// Move out from the trigger element to hide it
dispatchMouseEvent(triggerElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
}));
it('should not create element', fakeAsync(() => {
fixture.detectChanges();
const triggerElement = component.inBtnGroup.nativeElement;
expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
}));
});
});
describe('NzMessage', () => {
let messageService: NzMessageService;
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let demoAppFixture: ComponentFixture<DemoAppComponent>;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [ NzMessageModule, NoopAnimationsModule ],
declarations: [ DemoAppComponent ],
providers: [ { provide: NZ_MESSAGE_CONFIG, useValue: { nzMaxStack: 2 } } ] // Override default config
});
TestBed.compileComponents();
}));
beforeEach(inject([ NzMessageService, OverlayContainer ], (m: NzMessageService, oc: OverlayContainer) => {
messageService = m;
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
overlayContainer.ngOnDestroy();
});
beforeEach(() => {
demoAppFixture = TestBed.createComponent(DemoAppComponent);
});
it('should open a message box with success', (() => {
messageService.success('SUCCESS');
demoAppFixture.detectChanges();
expect((overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement).style.zIndex).toBe('1010');
expect(overlayContainerElement.textContent).toContain('SUCCESS');
expect(overlayContainerElement.querySelector('.anticon-check-circle')).not.toBeNull();
}));
it('should open a message box with error', (() => {
messageService.error('ERROR');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('ERROR');
expect(overlayContainerElement.querySelector('.anticon-cross-circle')).not.toBeNull();
}));
it('should open a message box with warning', (() => {
messageService.warning('WARNING');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('WARNING');
expect(overlayContainerElement.querySelector('.anticon-exclamation-circle')).not.toBeNull();
}));
it('should open a message box with info', (() => {
messageService.info('INFO');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('INFO');
expect(overlayContainerElement.querySelector('.anticon-info-circle')).not.toBeNull();
}));
it('should open a message box with loading', (() => {
messageService.loading('LOADING');
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('LOADING');
expect(overlayContainerElement.querySelector('.anticon-loading')).not.toBeNull();
}));
it('should auto closed by 1s', fakeAsync(() => {
messageService.create(null, 'EXISTS', { nzDuration: 1000 });
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain('EXISTS');
tick(1200 + 10); // Wait for animation with 200ms
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should not destroy when hovered', fakeAsync(() => {
messageService.create(null, 'EXISTS', { nzDuration: 3000 });
demoAppFixture.detectChanges();
const messageElement = overlayContainerElement.querySelector('.ant-message-notice');
dispatchMouseEvent(messageElement, 'mouseenter');
tick(1000);
expect(overlayContainerElement.textContent).toContain('EXISTS');
dispatchMouseEvent(messageElement, 'mouseleave');
tick(5000);
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should not destroyed automatically but manually', fakeAsync(() => {
const filledMessage = messageService.success('SUCCESS', { nzDuration: 0 });
demoAppFixture.detectChanges();
tick(50000);
expect(overlayContainerElement.textContent).toContain('SUCCESS');
messageService.remove(filledMessage.messageId);
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).not.toContain('SUCCESS');
}));
it('should keep the balance of messages length and then remove all', () => {
[ 1, 2, 3 ].forEach(id => {
const content = `SUCCESS-${id}`;
messageService.success(content);
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(content);
if (id === 3) {
expect(overlayContainerElement.textContent).not.toContain('SUCCESS-1');
expect((messageService as any)._container.messages.length).toBe(2); // tslint:disable-line:no-any
}
});
messageService.remove();
demoAppFixture.detectChanges();
expect(overlayContainerElement.textContent).not.toContain('SUCCESS-3');
expect((messageService as any)._container.messages.length).toBe(0); // tslint:disable-line:no-any
});
it('should destroy without animation', fakeAsync(() => {
messageService.error('EXISTS', { nzDuration: 1000, nzAnimate: false });
demoAppFixture.detectChanges();
tick(1000 + 10);
expect(overlayContainerElement.textContent).not.toContain('EXISTS');
}));
it('should reset default config dynamically', fakeAsync(() => {
messageService.config({ nzDuration: 0 });
messageService.create('loading', 'EXISTS');
demoAppFixture.detectChanges();
tick(1000);
expect(overlayContainerElement.textContent).toContain('EXISTS');
}));
});
describe('NzTooltip', () => {
let overlayContainer: OverlayContainer;
let overlayContainerElement: HTMLElement;
let fixture;
let component;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports : [ NzToolTipModule, NoopAnimationsModule ],
declarations: [ NzTooltipTestWrapperComponent, NzTooltipTestNewComponent ]
});
TestBed.compileComponents();
}));
beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
overlayContainer = oc;
overlayContainerElement = oc.getContainerElement();
}));
afterEach(() => {
overlayContainer.ngOnDestroy();
});
describe('should bring no break change', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NzTooltipTestWrapperComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should show/hide most simple tooltip with moving through all around', fakeAsync(() => {
const featureKey = 'MOST-SIMPLE';
const triggerElement = component.mostSimpleTrigger.nativeElement;
const tooltipComponent = (component.mostSimpleDirective as any).tooltip as NzToolTipComponent; // tslint:disable-line:no-any
expect(overlayContainerElement.textContent).not.toContain(featureKey);
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 150ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// NOTE: the overlayElement is only available after tooltip shown up
const overlayElement = (component.mostSimpleDirective as any).tooltip.overlay.overlayRef.overlayElement; // tslint:disable-line:no-any
tooltipComponent.updatePosition(); // This line is temporarily for coverage
// Move out from the trigger element, then move into the tooltip element
dispatchMouseEvent(triggerElement, 'mouseleave');
fixture.detectChanges();
dispatchMouseEvent(overlayElement, 'mouseenter');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the tooltip element to hide it
dispatchMouseEvent(overlayElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide normal tooltip', fakeAsync(() => {
const featureKey = 'NORMAL';
const triggerElement = component.normalTrigger.nativeElement;
expect(overlayContainerElement.textContent).not.toContain(featureKey);
fixture.detectChanges();
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 150ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the trigger element to hide it
dispatchMouseEvent(triggerElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show tooltip with custom template', fakeAsync(() => {
const triggerElement = component.templateTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 150ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
}));
it('should show/hide tooltip by focus', fakeAsync(() => {
const featureKey = 'FOCUS';
const triggerElement = component.focusTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'focus');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(triggerElement, 'blur');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide tooltip by click', fakeAsync(() => {
const featureKey = 'CLICK';
const triggerElement = component.clickTrigger.nativeElement;
dispatchMouseEvent(triggerElement, 'click');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
dispatchMouseEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
tick();
fixture.detectChanges();
tick(500); // Wait for animations
fixture.detectChanges();
tick();
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should show/hide by nzVisible change', fakeAsync(() => {
const featureKey = 'VISIBLE';
component.visible = true;
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
component.visible = false;
fixture.detectChanges();
tick(100);
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
});
describe('should support directive usage', () => {
beforeEach(() => {
fixture = TestBed.createComponent(NzTooltipTestNewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should nzTitle support string', fakeAsync(() => {
const featureKey = 'title-string';
const triggerElement = component.titleString.nativeElement;
const tooltipComponent = (component.titleStringNzTooltipDirective as any).tooltip as NzToolTipComponent; // tslint:disable-line:no-any
expect(overlayContainerElement.textContent).not.toContain(featureKey);
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 150ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
expect(overlayContainerElement.querySelector('.ant-tooltip').classList).toContain('testClass');
// NOTE: the overlayElement is only available after tooltip shown up
const overlayElement = (component.titleStringNzTooltipDirective as any).tooltip.overlay.overlayRef.overlayElement; // tslint:disable-line:no-any
tooltipComponent.updatePosition(); // This line is temporarily for coverage
// Move out from the trigger element, then move into the tooltip element
dispatchMouseEvent(triggerElement, 'mouseleave');
fixture.detectChanges();
dispatchMouseEvent(overlayElement, 'mouseenter');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the tooltip element to hide it
dispatchMouseEvent(overlayElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
it('should nzTitle support template', fakeAsync(() => {
const featureKey = 'title-template';
const triggerElement = component.titleTemplate.nativeElement;
const tooltipComponent = (component.titleTemplateNzTooltipDirective as any).tooltip as NzToolTipComponent; // tslint:disable-line:no-any
expect(overlayContainerElement.textContent).not.toContain(featureKey);
// Move inside to trigger tooltip shown up
dispatchMouseEvent(triggerElement, 'mouseenter');
fixture.detectChanges();
tick(150); // wait for the default 150ms delay
fixture.detectChanges();
tick();
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// NOTE: the overlayElement is only available after tooltip shown up
const overlayElement = (component.titleTemplateNzTooltipDirective as any).tooltip.overlay.overlayRef.overlayElement; // tslint:disable-line:no-any
tooltipComponent.updatePosition(); // This line is temporarily for coverage
// Move out from the trigger element, then move into the tooltip element
dispatchMouseEvent(triggerElement, 'mouseleave');
fixture.detectChanges();
dispatchMouseEvent(overlayElement, 'mouseenter');
fixture.detectChanges();
expect(overlayContainerElement.textContent).toContain(featureKey);
// Move out from the tooltip element to hide it
dispatchMouseEvent(overlayElement, 'mouseleave');
tick(100); // wait for the default 100ms delay
fixture.detectChanges();
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
});
});
configurationService.getApplicationConfiguration().subscribe((conf) => {
overlayContainer.getContainerElement().classList.add(conf.application.theme + '-theme')
})