Figure out a way to test a mocked structural directives input

[help-me-mom]

Figure out a way to test a mocked structural directives input

[satanTime]

I've implemented helper function which works together with attribute and structural directives:

// Extracting mock.
const debugElement = fixture.debugElement.query(By.css('div'));
const directive = MockHelper.getDirective(
  debugElement,
  MockDirective(CustomNgIfDirective),
);
expect(directive).toBeTruthy();
if (!directive) {
  return;
}

[ike18t]

Maybe throw something on the directive host?

[ike18t]

Hey @satanTime

I've been messing around with this trying to come up with a solution and nothing I've tried has worked out for me. Do you happen to have any ideas on how this could be accomplished?

[satanTime]

Hi. Very good question.

I've never written any structural directive. But if it's true as docs explain: https://angular.io/guide/structural-directives#inside-ngfor (they're syntax sugar), I think your library already has almost everything, except a way to pass context to ng-template override values in let-... syntax.

The same thing I use in some my templates with let- and had idea one day to investigate how we can mock let-..., currently I don't cover 100% components with let-... in ng-template.

Once we have way to control let-... I think we can control structural directives too.

[ike18t]

It does have support for structural directives but the problem is that these directives aren't available on the host element's injector, unlike normal attribute directives. This makes getting the directive back out of the debug element in the test to assert on inputs challenging (if possible).

At this point I'd settle with throwing a data attribute on the host with the directive name and inputs but I had issues with that as well. 🤷🏻‍♂️

[satanTime]

Aha :) good to know. Let me dive inside one day to check how it works. Is there any branch where I could check what you'd tried before?

[ike18t]

Good luck! https://github.com/ike18t/ng-mocks/tree/structural

[satanTime]

☣

[satanTime]

Hi @ike18t, how do you do?

Might you review possible solution? #40
Please don't merge it, I want to find a way how to select related directive in more easier way as you have in your example: const debugElement = fixture.debugElement.query(By.css('#example-structural-directive'));, instead of iterating through everything.