在Angular 7中对包含@Input变量的组件进行单元测试的步骤如下:
以下是一个示例测试用例的代码:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ MyComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should display input value', () => {
component.input = 'Test Input';
fixture.detectChanges();
const element = fixture.nativeElement.querySelector('.input-value');
expect(element.textContent).toContain('Test Input');
});
});
在上面的示例中,我们首先导入了必要的依赖项,然后创建了一个describe块来描述要测试的组件。在beforeEach块中,我们使用TestBed.configureTestingModule方法配置了测试模块,并使用TestBed.createComponent方法创建了组件的实例。然后,我们编写了两个测试用例,一个是验证组件是否成功创建,另一个是验证输入值是否正确显示。
领取专属 10元无门槛券
手把手带您无忧上云