import { TestBed , inject , ComponentFixture , fakeAsync , flush , tick } from '@angular/core/testing' ; import { ThySelectModule } from './module' ; import { Component , Sanitizer , SecurityContext , DebugElement } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; import { ThyIconRegistry } from '../icon' ; import { By } from '@angular/platform-browser' ; import { ThySelectComponent } from 'ngx-tethys' ; @ Component ( { selector : 'app-basic-select-demo' , template : `
        <thy-select
            [thySize]="size"
            [disabled]="disabled"
            [(ngModel)]="value"
            (ngModelChange)="change($event)"
            [thyAllowClear]="allowClear"
        >
            <option value="">请选择</option>
            <option value="option1">选项1</option>
            <option value="option2">选项2</option>
        </thy-select>
    ` } ) class BasicSelectComponent { value = '' ; allowClear = false ; size = '' ; disabled = true ; change ( ) { } } describe ( `select` , ( ) => { beforeEach ( ( ) => { TestBed . configureTestingModule ( { imports : [ ThySelectModule , FormsModule ] , declarations : [ BasicSelectComponent ] , providers : [ { provide : Sanitizer , useValue : { sanitize : ( context , html ) => html } } ] } ) . compileComponents ( ) ; } ) ; describe ( `basic` , ( ) => { let fixture ; let testComponent ; let debugComponent ; let selectElement ; let selectElementChildren ; beforeEach ( ( ) => { fixture = TestBed . createComponent ( BasicSelectComponent ) ; testComponent = fixture . debugElement . componentInstance ; debugComponent = fixture . debugElement . query ( By . directive ( ThySelectComponent ) ) ; selectElement = debugComponent . nativeElement ; selectElementChildren = selectElement . children ; } ) ; it ( 'should create' , ( ) => { expect ( fixture ) . toBeTruthy ( ) ; expect ( debugComponent ) . toBeTruthy ( ) ; expect ( selectElement ) . toBeTruthy ( ) ; } ) ; it ( 'should create correct DOM structure' , fakeAsync ( ( ) => { expect ( debugComponent . name ) . toEqual ( 'thy-select' ) ; expect ( selectElementChildren . length ) . toEqual ( 2 ) ; expect ( selectElementChildren [ 0 ] . nodeName ) . toEqual ( 'SELECT' ) ; expect ( selectElementChildren [ 0 ] . nodeType ) . toEqual ( 1 ) ; expect ( selectElementChildren [ 0 ] . parentNode . nodeName ) . toEqual ( 'THY-SELECT' ) ; expect ( selectElementChildren [ 0 ] . nextElementSibling . nodeName ) . toEqual ( 'THY-ICON' ) ; expect ( selectElementChildren [ 0 ] . attributes [ 0 ] . nodeName ) . toEqual ( 'thyinput' ) ; expect ( selectElementChildren [ 0 ] . attributes [ 0 ] . nodeType ) . toEqual ( 2 ) ; expect ( selectElementChildren [ 1 ] . nodeName ) . toEqual ( 'THY-ICON' ) ; expect ( selectElementChildren [ 1 ] . nodeType ) . toEqual ( 1 ) ; fixture . detectChanges ( ) ; expect ( selectElementChildren [ 1 ] . classList . value . includes ( 'thy-icon-angle-down' ) ) . toBe ( true ) ; } ) ) ; it ( 'should has correct size' , ( ) => { const sizes = [ 'xs' , 'sm' , 'md' , 'lg' ] ; testComponent . size = '' ; fixture . detectChanges ( ) ; sizes . forEach ( size => { expect ( selectElementChildren [ 0 ] . classList . value . includes ( `form-control-${ size }` ) ) . toBe ( false ) ; } ) ; sizes . forEach ( size => { testComponent . size = size ; fixture . detectChanges ( ) ; expect ( selectElementChildren [ 0 ] . classList . value . includes ( `form-control-${ size }` ) ) . toBe ( true ) ; } ) ; } ) ; it ( 'thyAllowClear' , ( ) => { testComponent . allowClear = true ; fixture . detectChanges ( ) ; expect ( selectElementChildren [ 0 ] . classList . value . includes ( 'thy-select-selection-allow-clear' ) ) . toBe ( true ) ; testComponent . allowClear = false ; fixture . detectChanges ( ) ; expect ( selectElementChildren [ 0 ] . classList . value . includes ( 'thy-select-selection-allow-clear' ) ) . toBe ( false ) ; } ) ; it ( 'should exist remove btn when allowClear is true and value is not null' , fakeAsync ( ( ) => { fixture . componentInstance . allowClear = true ; fixture . componentInstance . value = '有值了' ; fixture . detectChanges ( ) ; tick ( ) ; fixture . detectChanges ( ) ; const removeBtn = debugComponent . nativeElement . querySelector ( '.thy-select-remove' ) ; const removeIcon = debugComponent . nativeElement . querySelector ( '.remove-link-icon' ) ; expect ( removeBtn ) . toBeTruthy ( ) ; expect ( removeIcon ) . toBeTruthy ( ) ; expect ( removeBtn . nodeName ) . toEqual ( 'A' ) ; expect ( removeIcon . nodeName ) . toEqual ( 'THY-ICON' ) ; expect ( removeIcon . attributes [ 'thyiconname' ] . nodeType ) . toEqual ( 2 ) ; expect ( removeIcon . attributes [ 'thyiconname' ] . nodeValue ) . toEqual ( 'close-circle-bold-fill' ) ; expect ( removeIcon . attributes [ 'class' ] . nodeType ) . toEqual ( 2 ) ; expect ( removeIcon . attributes [ 'class' ] . nodeValue ) . toContain ( 'remove-link-icon thy-icon-close-circle-bold-fill thy-icon' ) ; } ) ) ; it ( 'show clear value when click remove btn' , fakeAsync ( ( ) => { const spy = spyOn ( fixture . componentInstance , 'change' ) ; fixture . componentInstance . allowClear = true ; fixture . componentInstance . value = '有值了' ; fixture . detectChanges ( ) ; tick ( ) ; fixture . detectChanges ( ) ; expect ( debugComponent . componentInstance . _innerValue ) . toBe ( '有值了' ) ; const removeBtn = debugComponent . nativeElement . querySelector ( '.thy-select-remove' ) ; expect ( removeBtn ) . toBeTruthy ( ) ; removeBtn . click ( ) ; fixture . detectChanges ( ) ; tick ( ) ; fixture . detectChanges ( ) ; expect ( debugComponent . componentInstance . _innerValue ) . toBe ( '' ) ; expect ( spy ) . toHaveBeenCalled ( ) ; } ) ) ; it ( 'disabled' , fakeAsync ( ( ) => { expect ( debugComponent . attributes [ 'ng-reflect-is-disabled' ] ) . toBeUndefined ( ) ; fixture . debugElement . componentInstance . disabled = true ; fixture . detectChanges ( ) ; expect ( debugComponent . attributes [ 'ng-reflect-is-disabled' ] ) . toBe ( 'true' ) ; fixture . debugElement . componentInstance . disabled = false ; fixture . detectChanges ( ) ; expect ( debugComponent . attributes [ 'ng-reflect-is-disabled' ] ) . toBe ( 'false' ) ; } ) ) ; } ) ; } ) ;