Mock NgxPermissionsService in component and subcomponent doesn't work

[Lempkin]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

Current behavior

I have a component which use *ngxPermissionsOnly in its template, so in the UT i've used NgxPermissionsAllowStubDirective/NgxPermissionsRestrictStubDirective

I have another component which also use *ngxPermissionsOnly in its template.

Everything used to work perfectly until now that one of the component is a sub component of the other.
When I run tests, I have the following error in the parent component unit tests :

Failed: Uncaught (in promise): NullInjectorError: R3InjectorError(DynamicTestModule)[NgxPermissionsService -> NgxPermissionsService]:
NullInjectorError: No provider for NgxPermissionsService!
NullInjectorError: R3InjectorError(DynamicTestModule)[NgxPermissionsService -> NgxPermissionsService]:
NullInjectorError: No provider for NgxPermissionsService!

Expected behavior

Test should not fail

Minimal reproduction of the problem with instructions

Component A template:

<div *ngxPermissionsOnly="whatEver">
    test
</div>

<componentB></componentB>

Component B template:

<div *ngxPermissionsOnly="whatEver">
    test
</div>

Component A .spec.ts :

...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ComponentA,
        NgxPermissionsAllowStubDirective]
...

Component B .spec.ts :

...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ComponentB,
        NgxPermissionsAllowStubDirective]
...

Environment

Angular version: ~9.1.11
ngx-permissions version: ~7.0.3


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

[omnibrain]

I'm having the same Problem...

[chrsi]

Yes we're experiencing the same.

As a current workaround I'll had to mock some internals:

TestBed.configureTestingModule({
  providers: [
    {
      provide: NgxPermissionsService,
      useValue: {
        permissions$: NEVER,
      },
    },
    {
      provide: NgxPermissionsConfigurationService,
      useValue: jest.fn(),
    },
    {
      provide: NgxRolesService,
      useValue: {
        roles$: NEVER,
      },
    },
  ]
})

All we needed was our tests to pass again. Since they didn't rely on any permissions, providing a NEVER observable was sufficient for us. In order to properly mock the permission library you'll have to add proper values for the NgxRolesService.roles$ and NgxPermissionsService.permissions$ observable. (eg. using the rxjs helper of(...)).

Please note: We're using jest, so your mock setup might differ depending on your test runner.

Hopefully this issue is resolved soon, so we can remove those internal mocks again. 🙏