Angular 2 App Testing，如何访问和操作html元素？

Question

我有一个要测试的 Angular 2 前端，我在一个站点 (https://kendaleiv.com/angular-2-component-testing-template-using-testbed/) 上发现了一个使用 ng-test（角度核心测试）TestBed 的人，这是一个非常基本的示例，它没有解释如何进行操作与元素。

我的应用程序有一个输入表单元素，一旦输入信号通过表单元素发送，它就会在信息框元素上显示一个结果集。 所以我想做的是从 TestBed 中检索元素 Form 提供一个字符串来搜索它并从输入框中获取响应。 （测试 3）

1) 我如何检索元素（表单和信息框）？

2) 如何从 InfoBox 获取要处理的信号？

3) 处理完信号后，如何从 InfoBox 元素中检索结果集？

这是我正在使用的代码示例，当我使用命令“ng test”运行它时，它会启动 Chrome，并且前两个测试正在运行。

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AgsResultsComponent,
        AppComponent,
        FormularComponent,
        FormularAutocompleteComponent,
        InfoBoxComponent,
        InfoBoxAgencyDetailsComponent,
        InfoBoxAgencyItemComponent
      ],
      providers: [ConfigurationService],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  }));

  // Test 1
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    console.log(app);
    expect(app).toBeTruthy();
  }));

  // Test 2
  it('should render agsheading in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Agentursuche');
  }));

  // Test 3
  it('should execute a search using Form', async(() => {
    const formular = TestBed.createComponent(FormularComponent);
    const infoBox = TestBed.createComponent(InfoBoxComponent);
    formular.detectChanges();
    infoBox.detectChanges();
    const formularCompiled = formular.debugElement.nativeElement;
    const infoBoxCompiled = infoBox.debugElement.nativeElement;
    formularCompiled.sendInput('Just a Test');
    expect(infoBoxCompiled).toContain(something);
  }));

});

Answer 1

你应该使用另一个 beforeEach 方法来创建组件并将它们存储在一个局部变量中，这样你就可以避免在每个测试中编写相同的东西。

为了从组件中获取 html 元素，可以在调试元素上使用 query 方法：

const inputDebugElement = formular.debugElement.query(By.css('input'));
const inputHtmlElement = inputDebugElement.nativeElement as HTMLInputElement;

一旦你有了它，你就可以设置它的值并调度事件：

inputHtmlElement.value = 'foo';
inputHtmlElement.dispatchEvent(new Event('input'));

请记住，为了触发更改检测，您需要在夹具上调用 detectChanges()，然后通过 whenStable() 调用或在 fakeAsync 测试中调用 tick() 等待它稳定。

建议阅读official testing guidelines 以更好地了解如何测试 Angular 应用程序。