测试内部的角度变化组件变量

Question

我想测试按钮的功能，但该元素在页面上不可见，因为它位于*ngIf下。我想将*ngIf中的变量设置为true，以便能够显示数据。我试着用

beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
component.currentUser = {firstName: 'xxx'} as User; // Changing currentUser so it won't be undefined anymore 
fixture.detectChanges();
});

但仍然不起作用。这是我的组件：

<div class="menu-button-container">
<div class="menu-button" [ngClass]="{'menu-open': isMenuOpen}" (click)="toggleMenu()" *ngIf="currentUser">
<div class="line-menu-button line-menu-button__top"></div>
<div class="line-menu-button line-menu-button__middle"></div>
<div class="line-menu-button line-menu-button__bottom"></div>
</div>
</div>

以及我尝试运行的测试：

it('should open the menu when the button menu is clicked', () => {
const fixture = TestBed.createComponent(HeaderComponent);
fixture.detectChanges();
const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
expect(menuDebugElement).toBeTruthy();
});

这总是失败的。如果我将*ngIf规则定义为*ngIf="currentUser"，则测试正在工作。如何从测试中更改此变量？请告知！谢谢

Answer 1

更改currentUser变量的值：

it('should open the menu when the button menu is clicked', () => {
const fixture = TestBed.createComponent(HeaderComponent);
const component = fixture.componentInstance;
component.currentUser = true;
fixture.detectChanges();
const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
expect(menuDebugElement).toBeTruthy();
});

我创建了一个完整的测试，它对我有效

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestTComponent } from './test-t.component';
import { By } from '@angular/platform-browser';
fdescribe('TestTComponent', () => {
let component: TestTComponent;
let fixture: ComponentFixture<TestTComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TestTComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestTComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
component.currentUser = true;
fixture.detectChanges();
const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
expect(menuDebugElement).toBeTruthy();
});
});

Answer 2

问题是fixture.detectChanges((；触发更改detaction循环，当您从html组件中读取值时，它还没有完成更新。

使用"；当稳定((时；功能

it('should open the menu when the button menu is clicked', () => {
const fixture = TestBed.createComponent(HeaderComponent);
component.currentUser = true;
fixture.detectChanges();
fixture.whenStable()
.then(() => {
const menuDebugElement = fixture.debugElement.query(By.css('.menu-button'));
expect(menuDebugElement).toBeTruthy();
});

});