Angular 测试：重写以使用模板而不是 templateUrl

Question

我有一个包含 iframe 的组件。为了防止在测试中从 iframe 加载不存在的 URL 我想模拟组件的模板。我以为我可以使用 TestBed.overrideComponent() 来做到这一点，但它没有效果。测试运行时，我可以看到原始模板存在，而 iframe 加载不存在的 url.

我尝试了什么：

fixture = TestBed.overrideComponent(IFrameComponent, {
  remove: {
    templateUrl: './iframe.component.html'
  },
  add: {
    template: '<div></div>'
  }
}).createComponent(IFrameComponent);

如何覆盖组件以使用 template 而不是 templateUrl？

Answer 1

它对我不起作用的原因是我调用了 TestBed.overrideComponent() after compileComponents().

正确顺序是这样的：

TestBed.configureTestingModule({
   declarations: [IFrameComponent]
}).overrideComponent(IFrameComponent, {
   remove: {
      templateUrl: './iframe.component.html'
   },
   add: {
      template: '<div data-test-iframe="iframe"></div>'
   }
}).compileComponents();
fixture = TestBed.createComponent(IFrameComponent);

Angular 测试：重写以使用模板而不是 templateUrl

Angular test: override to use template instead of templateUrl

testing

mocking

testbed

angular