Angular test: override to use template instead of templateUrl

Question

I have a component which contains iframe. To prevent loading not existing URL from iframe in tests I would like to mock component's template. I thought I could do it using TestBed.overrideComponent() but it has no effect. When test runs I can see the original template is present and iframe loads non-existing url.

What I tried:

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

How can I override component to use template instead of templateUrl?

score 9 · Accepted Answer · answered Oct 22 '18 at 13:57

The reason why it didnt work for me was that I called TestBed.overrideComponent() after compileComponents().

Proper order is this:

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 test: override to use template instead of templateUrl

1 Answers1