angular2ユニットテスト入力変化を検出していません

Question

私の問題は、私は私のテストで愚かな何かをしなければなりませんHow do I trigger a ngModel model update in an Angular 2 unit test?

とまったく同じです。誰もが私が

コンポーネントを見下ろすよ、明らかな誤りを指摘してもらえ

@Component({ 
    moduleId: module.id, 
    selector: 'od-tree', 
    templateUrl: 'tree.component.html', 
    styleUrls: ['tree.component.css'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class TreeComponent implements OnInit, OnChanges, AfterViewChecked { 
    @Input() allResources: { items: {} }; 
    @Input() resourceGroups = { items: {} }; 
    @Input() selectedNodes: ITree.SelectedNode[]; 
    @Input() showIcons: boolean; 
    @Input() showCheckboxes: boolean; 
    @Input() omitAncillaryDBs: boolean; 

    @Output() selectNode = new EventEmitter<any>(); 

    searchResource$ = new Subject<string>(); 
    searchField = ''; 
    tabs = [ 
    { title: TABS.ALL_RESOURCES, active: true }, 
    { title: TABS.RESOURCE_GROUPS, active: false } 
    ]; 
    inSearchMode = false; 
    trees = { 
    ALL_RESOURCES: { 
     searchText: null, 
     tree: [] 
    }, 
    RESOURCE_GROUPS: { 
     searchText: null, 
     tree: [] 
    } 
    }; 

    private _allResourcesTreeState = []; 
    private _resourceGroupsTreeState = []; 
    private ancillaryDBList = ['App-Services', 'Documents', 'Extensions', 'Fab', 'Last-Login', 
    'Meters', 'Modules', 'Schemas', 'Security', 'Triggers']; 

    constructor(private _cd: ChangeDetectorRef) { } 
... 
... 
... 
} 

テンプレート

<div class="input-with-icon"> 
     <i class="icon-search"></i> 
     <input type="text" [(ngModel)]="searchField" name="searchField" class="form-control" id="search-resources" placeholder="Search" (ngModelChange)="searchResource$.next(searchField)"> 
     </div> 
... (truncated) 
.... 
.... 

ユニットテスト

describe('tree component',() => { 
    //let activatedRoute: ActivatedRouteStub; 
    let comp: TreeComponent; 
    let fixture: ComponentFixture<TreeComponent>; 
    let de: DebugElement; 
    let el: HTMLElement; 


    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
     imports: [TreeModule], 
     }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
     fixture = TestBed.createComponent(TreeComponent); 
     comp = fixture.componentInstance; 
     de = fixture.debugElement; 
     el = de.nativeElement; 
     comp.ngOnInit(); 
     fixture.detectChanges(); 
    }); 


    it('should bind value to ngmodel',() => { 
     let inputEl = de.query(By.css('input#search-resources')) 
     inputEl.nativeElement.value = 'node'; 
     inputEl.triggerEventHandler('input', {target: inputEl.nativeElement}); 
     fixture.detectChanges(); 
     expect(comp.searchField).toEqual('node'); 
     }); 

// another approach 
    it('should filter resources when used in host component',fakeAsync(() => { 
     let inputEl = de.query(By.css('input#search-resources')); 
     inputEl.nativeElement.value = 'node'; 
     dispatchEvent('input', inputEl.nativeElement); 
     tick(); 
     fixture.detectChanges(); 
     expect(de.queryAll(By.css('li.host-leaf:not([hidden])')).length).toEqual(2, 'should show filtered hosts'); 
    })); 

    } 

Answer 1

これは、OnPushの変更検出戦略と併用すると、現在のテストベッド実装のdetectChanges（）での既知のバグです。あなたはそれについてもっとここで読むことができます。確かに非常に迷惑な。

@入力変更は、現在のコンポーネント自体からではなく、親コンポーネントからトリガされます。ここで

は、私は私のテストは、角V2.4

fixture.changeDetectorRef['internalView']['compView_0'].markAsCheckOnce(); 
fixture.detectChanges(); 

https://github.com/angular/angular/issues/12313

Answer 2

ngModelバインディングを動作させるには、FormsModuleをテストモジュールにインポートする必要があります。

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    imports: [ 
    TreeModule 
    FormsModule 
    ] 
    }) 
    .compileComponents(); 
}));