Angular 组件类测试

最新推荐文章于 2024-04-20 12:24:22 发布

江小虫儿

最新推荐文章于 2024-04-20 12:24:22 发布

阅读量753

点赞数

分类专栏： Angular 前端开发文章标签： angular.js typescript 前端

本文链接：https://blog.csdn.net/Kate_sicheng/article/details/122284320

版权

文章目录

测试没有依赖的组件类
- 知识点：toBe、toMatch、更多matchers
测试 @Input 和 @Output
测试有依赖的组件类 TestBed

Angular测试组件的基础知识之一是 “测试组件类”。

测试没有依赖的组件类

测试没有依赖的组件类，需要遵循与没有依赖的服务相同的步骤：

使用 new 关键字创建一个组件。
调用它的 API。
对其公开状态的期望值进行断言。

// 没有依赖的组件类
@Component({
   
  selector: 'lightswitch-comp',
  template: `
    <button (click)="clicked()">Click me!</button>
    <span>{
    {message}}</span>`
})
export class LightswitchComponent {
   
  isOn = false;
  clicked() {
    this.isOn = !this.isOn; }
  get message() {
    return `The light is ${
     this.isOn ? 'On' : 'Off'}`; }
}

// 测试
describe('LightswitchComp', () => {
   
  it('#clicked() should toggle #isOn', () => {
   
    const comp = new LightswitchComponent();
    expect(comp.isOn).toBe(false, 'off at first');
    comp.