Question: Mocking structural directive that's a part of a module

[DmitryEfimenko]

I have a structural directive that's used in the component under test. When simply mocked using MockDirective(MyDirective) or MockBuilder.mock(MyDirective), it does not render the contents. I know, I can pass a configuration object { render: true } to make it render. However, that directive is a part of a module that's being mocked. Here's how my mocks look like:

const dependencies = MockBuilder()
  .mock(TheModuleThatContainsDirectiveAndOtherThings)
  .build();

I know that I could mock all the things from the TheModuleThatContainsDirectiveAndOtherThings separately and use the { render: true } on the directive, but that seems inefficient:

const dependencies = MockBuilder()
  .mock(SomeComponent)
  .mock(SomeOtherComponent)
  .mock(...etc)
  .mock(MyDirective, { render: true })
  .build();

Is there a way to configure the directive to render content with a shorter syntax?

[satanTime]

Hi @DmitryEfimenko,

Thanks for the question.

What you wrote is all true and there is not other way currently. However, I'll take a look what is possible here. Maybe, something like with route guards or http interceptors, or ngMocks.defaultConfig.

Issues appear when a structural directive requires a context, then simply passing 'render: true' isn't enough. But, I think, if you were needed only to define contexts for such directives, it would still require less configuration than at the moment.

Let's keep the issue open as a feature request. I'll implement it in some weeks and will be pinging you for your feedback time to time.

[satanTime]

@DmitryEfimenko,

could you also describe how you would imagine its usage / implementation from your point of view?

[DmitryEfimenko]

thanks for a quick reply! Glad my question might result in a new feature for ng-mocks!

Not sure if the following would be possible:

const dependencies = MockBuilder()
  .mock(ModuleThatContainsDirective)
  .mock(DirectiveIncludedInTheModuleAbove, { render: true, /* any other config */ })

The idea here is similar to the functionality described here.
This way we get everything from the module mocked as well as provide an "override" for one directive from that module. I think it also takes care of the requirement to pass context if needed.

[satanTime]

Hm... actually the example you gave is exactly as it should be used currently: https://ng-mocks.sudo.eu/api/MockBuilder#render-flag

I think I'm missing something.

[DmitryEfimenko]

then it must be either a bug or I'm doing something wrong. Let me see if I can create a repro

[satanTime]

Thee is an example on stackblitz / codesandbox: https://ng-mocks.sudo.eu/guides/directive-structural

Looks like it's a potential bug.

[satanTime]

Ah. A wrong link sorry

[satanTime]

Ha. yeah. I guess we need at least to cover it as a separate test in ng-mocks. The only example I was able to find so far is that one: https://github.com/ike18t/ng-mocks/blob/master/examples/MockBuilder/test.deep.spec.ts#L90-L96

However, I'm not 100% sure it's exactly what you have.

[DmitryEfimenko]

I must have done something wrong in my other project at work today. For now, I can't reproduce the issue. Here's my attempt.

I'll poke around in the other project tomorrow and see if I can spot something weird. But for now, I'll assume I did something weird and close the issue. I'll reopen it if I find something out!

Thanks again!

[satanTime]

Sounds good, happy coding!

[DmitryEfimenko]

as a minor comment for docs improvement, the dependencies variable needs to have the as any thing. Otherwise, TS is not happy: https://ng-mocks.sudo.eu/extra/with-3rd-party

[satanTime]

Let's keep it as a feature request for global config for all directives in a module.
I'll try to do research and to play around, maybe something useful would pop up.

[satanTime]

v13.2.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.

[satanTime]

Hi @DmitryEfimenko, I hope you and your relatives and friends are safe.

I fixed types for MockBuilder and spectator. And added a global config support for MockBuilder which allows to set a flag to always render a structural directive: https://ng-mocks.sudo.eu/api/ngMocks/defaultConfig.

[DmitryEfimenko]

Thank you for the kind words! Everything is all right here. I wish the same for you and your family.

Love it! I'll be sure to get the latest version and give it a spin!