如何在angular2中使用谓词

发布时间：2020-12-17 07:25:04 所属栏目：安全来源：网络整理

导读：我使用angular2创建了一个登录页面.它有两个输入字段userName和password.登录中有一个按钮. 当我要为该loginComponent编写测试用例时,必须使用谓词来识别按钮.这是我的测试用例. import { async,ComponentFixture,TestBed } from '@angular/core/testing';im

我使用angular2创建了一个登录页面.它有两个输入字段userName和password.登录中有一个按钮.
当我要为该loginComponent编写测试用例时,必须使用谓词来识别按钮.这是我的测试用例.

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

});

我将通过提供输入值进行测试,然后单击登录按钮并查看接下来会发生什么.

我无法找到正确使用谓词的正确教程.

创建谓词的最简单方法是使用 By个静态方法之一,即css,directive.

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

By.css让你传递任何css选择器.查询的结果将是DebugElement,因此如果要与本机DOM元素进行交互,则需要获取nativeElement.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!