时间戳

首页 > 解决方案 > Angular 中的浅层测试 - 覆盖模板 - 这是一种好习惯吗？

angular - Angular 中的浅层测试 - 覆盖模板 - 这是一种好习惯吗？

问题描述

我有一个关于在 Angular 单元测试中覆盖模板的假设问题（如果这不是一个合适的问题，请建议关闭而不是标记它，我将删除/关闭问题）。我的团队成员喜欢在 Angular 中进行单元测试时覆盖 HTML 模板，所以如果我有一个测试，它看起来像这样：

describe('MyWhateverComponent', () => {
  let component: MyWhateverComponent;
  let fixture: ComponentFixture<MyWhateverComponent>;
  // lots more things here removed

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        MyWhateverComponent
      ],
      schemas: [...],
      imports: [...],
      providers: [...]
    }).overrideTemplate(MyWhateverComponent, '<div>Overridden template</div>')
      .compileComponents();
  }));

我的同事似乎喜欢这样做的原因是他们说它只允许他们测试组件代码（包含在 .ts 文件中），它可以防止我们不得不模拟或包含指令并且我们不想测试 Angular 绑定像ngIf, ngFor,ngClass等... 很好的论据，但对我来说似乎是错误的，因为我认为您应该测试视图中呈现的内容，因为它可以防止意外的行为或内容。这个论点似乎并没有安抚我的同事，还有其他人可以建议或想到为什么我们在 Angular 中对我们的组件进行单元测试时不应该覆盖模板的其他原因。对我来说，感觉就像我们测试的性质并没有真正处理我们真正的组件。我会假设（因为我没有做任何检查）浅层测试会更快地执行另一个支持我的同事的理由。

任何想法或意见都提前表示赞赏。

标签： angularunit-testing

解决方案

在我看来，不应该覆盖被测试组件的完整模板。模拟子组件很好，但不是实际的组件。

几个原因 ：

  1. 您可能@ViewChild()在您的组件中使用，在您的模板中引用一些 dom 元素或子组件。所以你肯定会失去这个。
  2. 我相信，组件测试更多的是测试视图模板（渲染），而不是implementation或behaviour（方法）。

  3. 组件是面向用户的，它们需要用户的输入。所以你的测试应该更多地集中在从视图中获取输入和测试输出。（不是通过直接调用该方法并期望它已被调用）

    前任 ：

    spyOn(comp, 'calculate');
comp.calculate();
expect(comp.calculate).toHaveBeenCalled();

推荐阅读