How do I test a directive that requires a service provided by the host?

[Simon-TheHelpfulCat]

I have a directive that needs a service that is provided by the host component. To ensure that it is provided by the host component, Iuse the @Host() decorator in the constructor:

@Directive({
  selector: "[myDirective]",
  standalone: true
})
export class MyDirective {
  constructor(@Host() public readonly service: MyService) {}
}

I am trying to test it like this:

describe("my sandbox", () => {
  beforeEach(async () => MockBuilder(MyDirective).mock(MyService));

  it("should create", () =>
    expect(MockRender(MyDirective).point.componentInstance).toBeTruthy());
});

but I get an error telling me that there is no provider for MyService. If I remove the @Host() the directive is rendered correctly. How can I mock MyService so that it will be provided when the @Host() directive is used?

I have a minimal reproduction of the problem here.

[satanTime]

Hi @Simon-TheHelpfulCat,

you can provide MyService in MockRender, in this case it will be considered as Host injection: https://codesandbox.io/s/upbeat-ioana-fzqdkj?file=/src/test.spec.ts:474-534

import {Directive, Host, Injectable,} from '@angular/core';
import {MockBuilder, MockProvider, MockRender} from 'ng-mocks';

@Injectable()
class MyService {}

@Directive({
  selector: "[myDirective]",
  standalone: true
})
export class MyDirective {
  constructor(@Host() public readonly service: MyService) {}
}

describe('my sandbox', () => {
  beforeEach(() => MockBuilder(MyDirective));

  it("should create", () => {
    const fixture = MockRender(MyDirective, null, {
      providers: [
        MockProvider(MyService),
      ],
    });

    expect(fixture.point.componentInstance.service).toBeDefined();
  });
});

[Simon-TheHelpfulCat]

Thank you, that worked perfectly. Easy when you know how!