import { OverlayContainer } from '@angular/cdk/overlay' ; import { registerLocaleData } from '@angular/common' ; import zh from '@angular/common/locales/zh' ; import { Component , DebugElement , TemplateRef , ViewChild } from '@angular/core' ; import { ComponentFixture , fakeAsync , flush , inject , TestBed , tick } from '@angular/core/testing' ; import { FormsModule } from '@angular/forms' ; import { By } from '@angular/platform-browser' ; import { dispatchMouseEvent } from 'ngx-tethys/testing' ; import { ThyDatePickerModule } from './date-picker.module' ; registerLocaleData ( zh ) ; describe ( 'ThyYearPickerComponent' , ( ) => { let fixture ; let fixtureInstance ; let debugElement ; let overlayContainer ; let overlayContainerElement ; beforeEach ( fakeAsync ( ( ) => { TestBed . configureTestingModule ( { imports : [ ThyDatePickerModule , FormsModule ] , providers : [ ] , declarations : [ TestYearPickerComponent ] } ) ; TestBed . compileComponents ( ) ; } ) ) ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( TestYearPickerComponent ) ; fixtureInstance = fixture . componentInstance ; debugElement = fixture . debugElement ; } ) ; beforeEach ( inject ( [ OverlayContainer ] , ( oc ) => { overlayContainer = oc ; overlayContainerElement = oc . getContainerElement ( ) ; } ) ) ; afterEach ( ( ) => { overlayContainer . ngOnDestroy ( ) ; } ) ; describe ( 'general api testing' , ( ) => { it ( 'should open by click and close by click at outside' , fakeAsync ( ( ) => { fixture . detectChanges ( ) ; dispatchMouseEvent ( getPickerTriggerWrapper ( ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( getPickerContainer ( ) ) . not . toBeNull ( ) ; dispatchMouseEvent ( queryFromOverlay ( '.cdk-overlay-backdrop' ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( getPickerContainer ( ) ) . toBeNull ( ) ; } ) ) ; it ( 'should support thyAllowClear and work properly' , fakeAsync ( ( ) => { const clearBtnSelector = By . css ( 'thy-picker .thy-calendar-picker-clear .thy-icon' ) ; const date = new Date ( ) ; fixtureInstance . thyValue = date ; fixtureInstance . thyAllowClear = false ; fixture . detectChanges ( ) ; expect ( debugElement . query ( clearBtnSelector ) ) . toBeFalsy ( ) ; fixtureInstance . thyAllowClear = true ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( fixtureInstance . thyValue ) . toBe ( date ) ; expect ( debugElement . query ( clearBtnSelector ) ) . toBeDefined ( ) ; const thyOnChange = spyOn ( fixtureInstance , 'modelValueChange' ) ; debugElement . query ( clearBtnSelector ) . nativeElement . click ( ) ; fixture . detectChanges ( ) ; expect ( fixtureInstance . thyValue ) . toBe ( null ) ; expect ( thyOnChange ) . toHaveBeenCalledWith ( null ) ; expect ( debugElement . query ( clearBtnSelector ) ) . toBeFalsy ( ) ; } ) ) ; it ( 'should support thyDisabled' , fakeAsync ( ( ) => { fixtureInstance . thyValue = new Date ( ) ; fixtureInstance . thyDisabled = true ; fixture . detectChanges ( ) ; flush ( ) ; fixture . detectChanges ( ) ; expect ( debugElement . query ( By . css ( 'thy-picker .thy-input-disabled' ) ) ) . toBeDefined ( ) ; fixtureInstance . thyDisabled = false ; fixture . detectChanges ( ) ; flush ( ) ; fixture . detectChanges ( ) ; expect ( debugElement . query ( By . css ( '.thy-picker .thy-input-disabled' ) ) ) . toBeNull ( ) ; } ) ) ; it ( 'should support thyDisabledDate' , fakeAsync ( ( ) => { fixture . detectChanges ( ) ; fixtureInstance . thyValue = new Date ( '2006-2-11' ) ; fixture . detectChanges ( ) ; fixtureInstance . thyDisabledDate = ( date ) => { return date > new Date ( '2009-2-1' ) ; } ; fixture . detectChanges ( ) ; dispatchMouseEvent ( getPickerTriggerWrapper ( ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; const allDisabledCells = queryFromOverlay ( '.thy-calendar-year-panel-cell-disabled' ) ; expect ( allDisabledCells . textContent ) . toContain ( '2009' ) ; } ) ) ; it ( 'should support thyPlaceHolder' , ( ) => { const featureKey = ( fixtureInstance . thyPlaceHolder = 'TEST_PLACEHOLDER' ) ; fixture . detectChanges ( ) ; expect ( getPickerTrigger ( ) . getAttribute ( 'placeholder' ) ) . toBe ( featureKey ) ; } ) ; it ( 'should support modelValueChange' , fakeAsync ( ( ) => { fixture . detectChanges ( ) ; fixtureInstance . thyValue = new Date ( '2018-11-1' ) ; fixture . detectChanges ( ) ; const thyOnChange = spyOn ( fixtureInstance , 'modelValueChange' ) ; fixture . detectChanges ( ) ; openPickerByClickTrigger ( ) ; const cell = getFirstYearCell ( ) ; const cellText = cell . textContent ; dispatchMouseEvent ( cell , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( thyOnChange ) . toHaveBeenCalled ( ) ; const result = thyOnChange . calls . allArgs ( ) [ 0 ] [ 0 ] ; expect ( new Date ( result * 1000 ) . getFullYear ( ) ) . toBe ( parseInt ( cellText ) ) ; } ) ) ; } ) ; describe ( 'panel switch and move forward/afterward' , ( ) => { it ( 'should support decade panel changes' , fakeAsync ( ( ) => { fixtureInstance . thyValue = new Date ( '2018-1-1' ) ; fixture . detectChanges ( ) ; tick ( ) ; fixture . detectChanges ( ) ; openPickerByClickTrigger ( ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; dispatchMouseEvent ( queryFromOverlay ( '.thy-calendar-year-btn' ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( queryFromOverlay ( '.thy-calendar-decade' ) ) . toBeDefined ( ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '2000' ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '2099' ) ; dispatchMouseEvent ( queryFromOverlay ( '.thy-calendar-prev-year-btn' ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '1900' ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '1999' ) ; dispatchMouseEvent ( queryFromOverlay ( '.thy-calendar-next-year-btn' ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; dispatchMouseEvent ( queryFromOverlay ( '.thy-calendar-next-year-btn' ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '2100' ) ; expect ( queryFromOverlay ( '.thy-calendar-decade-btn' ) . textContent ) . toContain ( '2199' ) ; } ) ) ; } ) ; function getPickerContainer ( ) { return queryFromOverlay ( '.thy-calendar-picker-container' ) as HTMLElement ; } function getFirstYearCell ( ) { return queryFromOverlay ( '.thy-calendar-year td.thy-calendar-year-panel-cell' ) as HTMLElement ; } function queryFromOverlay ( selector ) { return overlayContainerElement . querySelector ( selector ) as HTMLElement ; } function openPickerByClickTrigger ( ) { dispatchMouseEvent ( getPickerTriggerWrapper ( ) , 'click' ) ; fixture . detectChanges ( ) ; tick ( 500 ) ; fixture . detectChanges ( ) ; } function getPickerTriggerWrapper ( ) { return debugElement . query ( By . css ( 'thy-picker .thy-calendar-picker' ) ) . nativeElement as HTMLInputElement ; } function getPickerTrigger ( ) { return debugElement . query ( By . css ( 'thy-picker input.thy-calendar-picker-input' ) ) . nativeElement as HTMLInputElement ; } } ) ; @ Component ( { template : `
        <thy-year-picker
            class="d-block w-50 mb-3"
            [(ngModel)]="thyValue"
            (ngModelChange)="modelValueChange($event)"
            [thyAllowClear]="thyAllowClear"
            [thyDisabled]="thyDisabled"
            [thyDisabledDate]="thyDisabledDate"
            [thyPlaceHolder]="thyPlaceHolder"
        >
        </thy-year-picker>
    ` } ) class TestYearPickerComponent { thyAllowClear : boolean ; thyDisabled : boolean ; thyDisabledDate : ( d : Date ) => boolean ; thyPlaceHolder : string = '请选择年' ; thyPanelClassName : string ; thyValue : Date ; thyOpen : boolean ; modelValueChange ( ) { } }