Cannot mock providedIn:'root' service

Hi, I am not able to use that awesome tool, due to that issue 😦

How to reproduce

I’ve used code from your examples and extended it with my use-case.

https://stackblitz.com/github/getsaf/shallow-render-stackblitz?file=examples%2Fcomponent-with-service.spec.ts

In file component-with-service.spec.ts you can paste next code:

import { Component, Injectable, NgModule } from '@angular/core';
import { Shallow } from 'shallow-render';

////// Module Setup //////
@Injectable({
  providedIn: 'root'
})
class ColorService {
  red() {
    return "RED";
  }
  blue() {
    return "BLUE"
  }
}

@Injectable({
  providedIn: 'root'
})
class RedService {
  constructor(private serv: ColorService) {}

  color() {
    return this.serv.red();
  }
}

@Component({
  selector: 'color-label',
  template: '<label>{{redService.color()}}</label>',
})
class ColorLabelComponent {
  constructor(public redService: RedService) {}
}

@NgModule({
  declarations: [ColorLabelComponent],
})
class ColorModule {}
//////////////////////////

describe('component with service', () => {
  let shallow: Shallow<ColorLabelComponent>;

  beforeEach(() => {
    shallow = new Shallow(ColorLabelComponent, ColorModule)
      .mock(RedService, {color: () => 'MOCKED COLOR'});
  });

  it('Uses the color from the RedService', async () => {
    const {element} = await shallow.render();

    expect(element.nativeElement.innerText).toBe('MOCKED COLOR');
  });
});

Actual result

Ran 1 of 40 specs - run all1 spec, 1 failure, randomized with seed 62283Spec List | Failures
component with service > Uses the color from the RedService
Expected 'RED' to be 'MOCKED COLOR'.

Expected result

Test passed

[getsaf]

Ok, I see what you’re getting at now. I may look into your suggestion to modify the mock method to use overrideProvider. I didn’t even realize that root providers worked with TestBed until this example 😃

[getsaf]

Oh, in the mean-time you may use the provideMock or alwaysProvideMock feature to mock these things out in your tests with a one-liner.

edit: The more I think about it, this actually seems like the preferred way to deal with root providers. Shallow cannot automatically mock root providers because Angular does not expose a list of the providers marked as such. That being the case, it’s up to the tester to provide mocks for these manually and the simplest way to do this would be to use provideMock.

I will still do some research to see if I can extract a list of all the available root-providers. I don’t know if Angular supports this but I could potentially “hook” into the Injectable decorator and track them myself. Would rather Angular expose a method that lets me fetch them but we’ll see how it works out. If I can get this working, then shallow-render will support auto-mocking these services.