当父组件方法被调用 Angular 2 单元测试时，子组件的模板不会改变 [英] Child component's template does not change, when parent component method is called Angular 2 unit tests

问题描述

这对我不起作用.请让下面的 Plunkr 工作.

This doesn't work for me. Please make the Plunkr below work.

describe("trying a test", () => {
  beforeEach(() => {
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,  platformBrowserDynamicTesting());
    TestBed.configureTestingModule({
      declarations: [myCmp, ChildCmp]
    });
  });

  it("test should work", () => {
    const fixture = TestBed.createComponent(myCmp);
    const div = fixture.debugElement.children[0];
    const childCmp = div.queryAll(By.directive(ChildCmp));

    const divEl = div.queryAll(By.css('div'));

    divEl[0].triggerEventHandler('click', <Event>{});
    fixture.detectChanges();

    expect(childCmp[0].nativeElement.textContent).toBe("updated  value");

  });

}); 

https://plnkr.co/edit/wWJMDi3ZFC6RTSvCw4HH?p=preview

推荐答案

这对我来说不再是问题.在大多数情况下(除了我将在下面概述的一个例外)，我的父组件和子组件都会在我的真实应用代码中更新，尽管我没有更新 Plunkr.

This is no longer an issue for me. For the most part (with one exception I will outline below), both my parent components and child components get updated in my real app code, though I haven't updated the Plunkr.

我只是在被监视的父组件方法上使用 .and.callThrough() ，当在模板上单击某些内容时.而不是一个简单的间谍.

I just use .and.callThrough() on the spyed on parent component method that is called, when something is clicked on the template. Rather than a simple spy.

我确实遇到了 ngFor 呈现的子组件未更新的问题.这是我的另一个问题:Angular 2 单元测试:让ngFor呈现，子组件的模板改变?

I do have an issue with ngFor rendered child components not updating. This is my other question: Angular 2 unit testing: Make ngFor rendered, child components' templates change?

这篇关于当父组件方法被调用 Angular 2 单元测试时，子组件的模板不会改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！