Angular 2 App Testing, how to access and operate on html elements?

问题

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.

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) How do I retrieve the elements (form and InfoBox)?

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

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

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

});

回答1:

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.

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

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.

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

来源：https://stackoverflow.com/questions/45802387/angular-2-app-testing-how-to-access-and-operate-on-html-elements

标签

javascript

angular

karma-jasmine