Testing ng-template templates projected into dependency component?

The component I am trying to test uses a PrimeNG Datatable, which accepts various things as named ng-templates. (e.g. a caption)

I am trying to test that the templates being projected into the mocked dependency are correct, but can’t see any way to do that.

Am I missing something, or is this not possible?

I had a look at ng-mocks and noticed it does have an example using MockRender() and MockedComponent<>.__render(), but it is testing the dependency component, not involving the component under test at all…

e.g.

under-test.component.ts @Input() caption: string;

under-test.component.html

<dependency-component>
<ng-template pTemplate="caption"><div class="my-caption">{{caption}}</div></ng-template>
</dependency-component>

under-test.component.spec.ts

const  rendering = new Shallow(UnderTestComponent, M).render({ bind: { caption: 'Test' } });
rendering.find('.my-caption'); // hasn't been rendered

[getsaf]

FYI, I did not get this worked out in a generic way. Unfortunately, I see no way to do this except:

• Using the actual PrimeNG directives (which may work out well)
• Providing hand-written mock replacements of the PrimeNG directives that mimic the same behavior.
• Writing a host-component that mimics the behavior of the PrimeNG directives (not sure if a host component would have access to a child’s templates though).

If you have any other ideas or want to give it a go in a PR to prove out an idea we can continue trying. I don’t even mind taking a functional POC in a PR and formalizing the code in my free time from there.

Let me know if you want to pick this back up. Gonna close the issue for now.

[getsaf]

This is an interesting use-case. It seems like what you need here is something from Shallow that can render templates (with optional context) on-demand.

const rendering = await shallow.render();
renderTemplate('#my-template-id', {caption: 'Here is my caption'});

I’m bummed that there is no type-safety here but there isn’t any in the Angular implementation either.

Does this solution sound work-able to you? I’m making a few assumptions because I’ve never used PrimeNG before. Definitely open to suggestions.