Question

我正在尝试测试当有人尝试使用错误的凭据进行登录时，我的登录页面是否显示正确的错误消息。问题是我的错误消息功能遍及两个组件（与我编写的其他测试不同，它完美地工作）并且我不确定如何测试它。我是否测试主要组件的夹具或警报组件的夹具？下面是我写的一些代码

 it('should show an error message when login is not a success', async(() =>{

component.model.username = "muXAXO";
component.model.password = "12345";


alertFixture.detectChanges();
fixture.detectChanges();
elLoginButton.click();
alertFixture.detectChanges();
fixture.detectChanges();

fixture.whenStable().then(() => {
  alertFixture.detectChanges();
  fixture.detectChanges();
  elErrorWrongCredentials = alertFixture.nativeElement.querySelector('.alerrt');
  expect(elErrorWrongCredentials.textContent).toContain('Authentication Failed: Bad credentials');
});



}));

使用我正在测试的当前组件创建Fixture AlertFixture是使用在我的HTML中调用的组件创建的。

所以在我的HTML中我有这个（这显示了我正在尝试测试的警报消息）：

     <div id="container" class="bottom">
        <alert class="alerrt"></alert>
    </div>

然后我还有一个警报组件，用于在上面的HTML中显示警告消息：

<div *ngIf="message" class="alerrt" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>

有什么想法吗？当前代码给出了这个错误：

TypeError：无法读取null
的属性'textcontent'

因此，由于某种原因，他无法找到'alerrt'类（我猜是因为他只搜索属于测试类的组件）

跨组件的Angular2 queryselector

0 个答案: