How do I render a template that is not wrapped by a component or a directive?

[eyalellenbogen]

Here is a simplified version of a component I'm trying to test.

@Component({
  selector: 'whatever',
  template: `
    <ng-template #tpl>
      <ng-container [ngTemplateOutlet]="content"></ng-container>
    </ng-template>
  `,
  standalone: true,
})
class TargetComponent {
  @Input() public readonly content?: TemplateRef<any>;
}

I would like to render the content of that template. But all the examples show how to do that when the template is inside a child component or a directive. The render method requires a mocked component instance as the first param.

Any ideas?

Here's a stackblitz demostrating the problem

Thanks!

[jackwalton01]

i'm having a similar issue, i'm trying to test a component similar to the example bellow. But this doesn't appear possible with-in ng-mock because, as is mentioned in the above post, render requires that the component to be a mock. Or more specifically to have the __mock flag set. ( I'm curious what the use of ngMocks.render is if not to render a template in the component under test? )

In this case this example if from testing the content of an ng-boostrap ngbModal.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'modal-selector',
  template:
  `
    <ng-template #content>
      <div class="modal-header">
        <h4 class="modal-title">header</h4>
      </div>

      <div class="modal-body">
        <ng-content></ng-content>
      </div>
      <div class="modal-footer">
        <button (click)="modal.close()">
                Yes
        </button>
        <button (click)="modal.dismiss()">
                No
        </button>
      </div>
    </ng-template>
  `,
})
export class ConfirmationModalComponent {
  @ViewChild('content') content!: TemplateRef<any>;

  modal!: NgbModalRef;

  constructor(private modalService: NgbModal) {}

  open(): void {
    this.modal = this.modalService.open(this.content);
  }
}

Is there any kind of work around for testing a component like above with-in ng-mock @satanTime ?

[eyalellenbogen]

So I was trying to find a way to do that using NgMocks and I completely forgot I don't need an abstraction around it. Once we have a template reference, using ngMocks.findTemplateRef(), we can call theTemplateRefInstance.createEmbeddedView(context, injector) and get the generated HTML.

cc @jackwalton01