import { ViewChild , Component , ElementRef , NgModule , DebugElement } from '@angular/core' ; import { ThyPopoverDirective } from '../popover.directive' ; import { ThyPlacement } from '../../core/overlay/interface' ; import { fakeAsync , TestBed , inject , ComponentFixture , tick , flush } from '@angular/core/testing' ; import { OverlayContainer } from '@angular/cdk/overlay' ; import { Platform } from '@angular/cdk/platform' ; import { FocusMonitor } from '@angular/cdk/a11y' ; import { ThyPopoverModule } from '../module' ; import { NoopAnimationsModule } from '@angular/platform-browser/animations' ; import { By } from '@angular/platform-browser' ; import { dispatchMouseEvent } from 'ngx-tethys/testing/dispatcher-events' ; @ Component ( { selector : 'thy-demo-tooltip-basic' , template : `
        <button
            thyButton="primary"
            [thyPopover]="template"
            [thyTrigger]="trigger"
            [thyPlacement]="placement"
            [thyConfig]="config"
            [thyShowDelay]="showDelay"
            [thyHideDelay]="hideDelay"
        >
            Use Template
        </button>
        <ng-template #template>
            恩，这是一个 Template
        </ng-template>
    ` } ) class ThyDemoVisiblePopoverComponent { @ ViewChild ( ThyPopoverDirective , { static : true } ) popover : ThyPopoverDirective ; placement : ThyPlacement = 'bottom' ; trigger = 'hover' ; showDelay = 0 ; hideDelay = 0 ; config = { panelClass : 'demo-popover' } ; constructor ( public elementRef ) { } } @ NgModule ( { imports : [ ThyPopoverModule ] , declarations : [ ThyDemoVisiblePopoverComponent ] , exports : [ ] } ) export class TooltipTestModule { } describe ( `ThyTooltip` , ( ) => { let overlayContainer ; let overlayContainerElement ; let platform ; beforeEach ( fakeAsync ( ( ) => { platform = { IOS : false , isBrowser : true , ANDROID : false } ; TestBed . configureTestingModule ( { imports : [ TooltipTestModule , NoopAnimationsModule ] , providers : [ { provide : Platform , useFactory : ( ) => platform } ] } ) ; TestBed . compileComponents ( ) ; inject ( [ OverlayContainer , FocusMonitor ] , ( oc , fm ) => { overlayContainer = oc ; overlayContainerElement = oc . getContainerElement ( ) ; } ) ( ) ; } ) ) ; afterEach ( inject ( [ OverlayContainer ] , ( currentOverlayContainer ) => { currentOverlayContainer . ngOnDestroy ( ) ; overlayContainer . ngOnDestroy ( ) ; } ) ) ; describe ( `popover directive` , ( ) => { let fixture ; let popoverDirective ; let buttonDebugElement ; let buttonElement ; function getPopoverVisible ( ) { return popoverDirective . popoverOpened ; } beforeEach ( ( ) => { fixture = TestBed . createComponent ( ThyDemoVisiblePopoverComponent ) ; fixture . detectChanges ( ) ; buttonDebugElement = fixture . debugElement . query ( By . css ( 'button' ) ) ; buttonElement = buttonDebugElement . nativeElement ; popoverDirective = buttonDebugElement . injector . get < ThyPopoverDirective > ( ThyPopoverDirective ) ; } ) ; it ( 'popover visible' , fakeAsync ( ( ) => { dispatchMouseEvent ( buttonElement , 'mouseenter' ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( true ) ; const container = overlayContainerElement . querySelector ( '.thy-popover-container' ) ; dispatchMouseEvent ( buttonElement , 'mouseleave' , 0 , 0 , undefined , undefined , container ) ; flush ( ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( true ) ; dispatchMouseEvent ( overlayContainerElement . querySelector ( '.thy-popover-container' ) , 'mouseleave' ) ; flush ( ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( false ) ; dispatchMouseEvent ( buttonElement , 'mouseenter' ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( true ) ; dispatchMouseEvent ( buttonElement , 'mouseleave' , 0 , 0 , 0 , undefined , overlayContainerElement . querySelector ( '.thy-popover-container' ) ) ; flush ( ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( true ) ; dispatchMouseEvent ( overlayContainerElement . querySelector ( '.thy-popover-container' ) , 'mouseleave' ) ; flush ( ) ; fixture . detectChanges ( ) ; flush ( ) ; expect ( getPopoverVisible ( ) ) . toBe ( false ) ; } ) ) ; } ) ; } ) ;