Angular Testing: How to test Content-Projected components

Question

I have the following scenario:

I have 3 components:

• carousel-images.component, that contains carousel images and next, prev buttons to update the "index" and it shares the index by @Output
• carousel-info.component, that contains the text description and share the index by @Output
• carousel-gallery.component, The orchestrator component.

---

Important update

I've made an app on codesandbox.io with built-in tests showing how the components work so you have a better idea of what my problem is.

Code example: https://codesandbox.io/s/ng-content-testing-use-case-wrzj51

---

carousel-gallery is the "parent" component which has the following structure in the component that use it.

<app-carousel-gallery>
  <app-carousel-images></app-carousel-images>
  <app-carousel-info></app-carousel-info>
</app-carousel-gallery>

Both carousel-images and carousel-info should be synced by their current "index", so when you switch on one side it should switch on the other side. Internally, carousel-gallery is the one that orchestrates the shared index between both components in the following way:

@Component(
...
)
export class CarouselGallery implements AfterContentInit {

  @ContentChild(CarouselInfoComponent) carouselInfo: CarouselInfoComponent;
  @ContentChild(CarouselImagesComponent) carouselImages: CarouselImagesComponent;

  ngAfterContentInit(): void {
    // receiving the output updating for carouselInfo
    this.carouselInfo.selectedItem.subscribe((index: number) => {
      this.setActiveCarouselImages(index);
    });

    // receiving the output updating for carousel
    this.carousel.selectedItem.subscribe((index: number) => {
      this.setActiveCarouselInfo(index);
    });

    setActiveCarouselImages(index: number) {
      this.carouselImages.setItem(index); // internally, carouselImages has a method that update the index for the carousel.
    }

    setActiveCarouselInfo(index: number) {
      this.carouselInfo.setItem(index); // internally, carouselINfo has a method that update the index for the Info.
    }
  }
}

The template is similar to this:

<div class="left">
  <ng-content select="app-carousel-info"></ng-content>
</div>

<div class="right">
  <ng-content select="app-carousel-images"></ng-content>
</div>

This works fine in a development scenario (in the browser) but not in my unit test, because I don't HAVE the projected components available, how can I simulate the projection of the CarouselInfoComponent and CarouselImagesComponent components).

Could you tell me how I should do my test considering this scenario?