Angular 2 App Testing，如何访问和操作html元素? [英] Angular 2 App Testing, how to access and operate on html elements?

问题描述

我在网站上找到了要测试的Angular 2前端(

I have an Angular 2 Frontend to be tested, I found on a Site ( https://kendaleiv.com/angular-2-component-testing-template-using-testbed/ ) a guy using ng-test (angular core testing) TestBed, this is a really basic example it does not explain how to do operations with the Elements.

我的应用程序具有一个Input Form元素，一旦通过Form元素发送了输入信号，它就会在InfoBox元素上显示结果集. 因此，我想做的是从TestBed检索元素Form，并提供一个String进行搜索，并从Input框中获取响应. (测试3)

My App has an Input Form element, once the input signal has been sent through the Form Element it show a results set on an InfoBox element. So what I would like to do is to retrieve the element Form from the TestBed provide a String to search with it and get the response from the Input box. (Test 3)

1)如何检索元素(窗体和信息框)?

1) How do I retrieve the elements (form and InfoBox)?

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

2) How do I get the signal to be processed from the InfoBox?

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

3) How can I retrieve the result set from the InfoBox Element once the signal has been processed?

这是我正在使用的代码示例，当我使用"ng test"命令运行它时，它将启动Chrome，并且前两个测试正在工作.

Here is the code sample that I’m using, when I run it with the command ‘ng test’ it starts Chrome and the first two tests are working.

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);
  }));

});

推荐答案

您应该使用另一个 beforeEach 方法创建组件并将它们存储在局部变量中，因此避免在其中编写相同的内容每次测试.

You should use another beforeEach method to create the components and store them in a local variable, so you avoid writing the same thing in each test.

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

In order to fetch html elements from the component one can use the query method on the debug element:

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

一旦有了，就可以在其上设置值并调度事件:

Once you have that, you can set values on it and dispatch events:

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

请记住，要触发更改检测，您需要在灯具上调用detectChanges()，然后再通过whenStable()调用或在fakeAsync测试中调用tick()使其保持稳定.

Remember that in order to trigger the change detection you need to call detectChanges() on the fixture and after that wait for it to be stable with whenStable() call or call tick() inside a fakeAsync test.

建议阅读官方测试指南，以更好地了解如何测试Angular应用程序

Would recommend to read the official testing guidelines to get a better insight on how to test Angular applications.

这篇关于Angular 2 App Testing，如何访问和操作html元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！