Cách sử dụng vị từ trong angular2

Question

Tôi đã tạo trang đăng nhập bằng cách sử dụng angular2. Nó có hai trường nhập là userName và password. Và có một nút trong thông tin đăng nhập đó. Khi tôi viết trường hợp thử nghiệm cho số loginComponent, phải sử dụng predicate để nhận dạng button. Đây là trường hợp thử nghiệm của tôi.

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { LoginComponent } from './login.component'; 


export class LoginComponentTest { 
    constructor(public loginComponent: LoginComponent){ 
    this.loginComponent.logIn('Chathura', '1234'); 

    } 
} 

describe('LoginComponent',() => { 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     LoginComponent 
     ], 
    }) 
    }); 

    const fixture = TestBed.createComponent(LoginComponent); 

    const button = fixture.query(predicate: Predicate<DebugElement>, scope?: Function) : DebugElement 

}); 

Tôi sẽ kiểm tra bằng cách cung cấp giá trị đầu vào, sau đó nhấp vào nút đăng nhập và xem điều gì sẽ xảy ra tiếp theo.

Tôi không thể tìm thấy hướng dẫn chính xác để sử dụng vị từ chính xác.

Answer 1

Cách dễ nhất để tạo Predicate là sử dụng một trong các phương pháp tĩnh By tĩnh, tức là css, directive.

const button = fixture.debugElement.query(By.css('.the-button')).nativeElement; 

By.css để bạn vượt qua bất kỳ bộ chọn css nào. Kết quả của query sẽ là DebugElement, vì vậy bạn cần có được nativeElement nếu bạn muốn tương tác với phần tử DOM gốc.