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

您需要将 FormsModule 导入测试模块，才能使 ngModel 绑定正常工作。

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

Answer 2

这是当前 Testbed 实现 detectChanges() 与 OnPush 更改检测策略结合使用时的已知错误。你可以在这里读更多关于它的内容。确实很烦人。

事实证明，@Input 更改不是从当前组件本身触发的，而是从父组件触发的。

这是我为使我的测试与 angular v2.4

一起工作所做的工作

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

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

angular2单元测试未检测到输入变化

angular2 unit test not detecting input change

unit-testing

karma-runner

karma-jasmine

angular