Я написал тест компонента для простого компонента, который отображает только поле ввода свойства name
.
В тесте компонента я устанавливаю свойство ввода компонента name
на 'Stephan'
и ожидаю, что мое имя появится в поле ввода, но этого не происходит.
В тесте я обернул свой компонент в хост-компонент (как предлагается в нескольких руководствах и подобных вопросах о переполнении стека).
Я пробовал различные комбинации вызовов detectChanges()
/whenStable()
, но ни одна из них не сработала.
имя.компонент.html
<input id = "name" [(ngModel)] = "name" />
имя.компонент.ts
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'name',
templateUrl: './name.component.html',
standalone: true,
imports: [FormsModule],
})
export class NameComponent {
@Input() name: string = '';
}
имя.компонент.спец.ц
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NameComponent } from './name.component';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
describe('NameComponent', () => {
@Component({
imports: [NameComponent],
standalone: true,
template: `<name [name] = "name"></name>`,
})
class TestHostComponent {
name: string = '';
}
let hostComponent: TestHostComponent;
let hostFixture: ComponentFixture<TestHostComponent>;
beforeEach(async () => {
hostFixture = TestBed.createComponent(TestHostComponent);
hostComponent = hostFixture.componentInstance;
hostFixture.detectChanges();
});
it('should display my name', async () => {
hostComponent.name = 'Stephan';
hostFixture.detectChanges();
const input = hostFixture.debugElement.query(By.css('input[id = "name"]'));
console.info(input.nativeElement);
expect(input.nativeElement.textContent).toEqual('Stephan');
});
});
Вы можете попробовать это на Stackblitz здесь: https://stackblitz.com/edit/stackblitz-starters-gqas1y?file=src%2Fname-comComponent%2Fname.comComponent.spec.ts
во-первых, элемент <input>
имеет .value
, а не .textContent
. во-вторых, в ngModel есть некоторый асинхронный код, который обрабатывает состояние элемента управления и позволяет использовать его в родительском шаблоне, например control.valid
, .prestine
и подобных.
поэтому фиксированные тесты будут выглядеть так
it('should display my name', async () => {
hostComponent.name = 'Stephan';
hostFixture.detectChanges();
await hostFixture.whenStable();
const input = hostFixture.debugElement.query(By.css('input[id = "name"]'));
console.info(input.nativeElement);
expect(input.nativeElement.value).toEqual('Stephan');
});