Angular Test: Mocking Viewchild projected component and observable property

Question

I have the following code that I can't mock in my unit tests:

  @ContentChild(CarouselInfoComponent) carouselInfo: CarouselInfoComponent;
  @ContentChild(CarouselComponent) carousel: CarouselComponent;

  ngAfterViewInit(): void {
    this.carouselInfo.itemSelected.subscribe((index: number) => {
      this.setActiveCarousel(index);
    });

    this.carousel.itemSelected.subscribe((index: number) => {
      this.setActiveCarouselInfo(index);
    });
  }

I have tried something like this:

// spec
// beforeEach
TestBed.configureTestingModule({
  declarations: [ CarouselGalleryComponent, CarouselInfoComponent, CarouselComponent ]
})

// it
spyOn(component.carouselInfo, 'itemSelected').and.returnValue(of(1));

But I get the following error:

Argument of type 'string' is not assignable to parameter of type 'never'

I understand that this is used for methods and basically itemSelected is a property of the child component (which, by the way, is a component projected using ng-content).

Note: itemSelected (in both cases) is an instance of EventEmitter en every child component.

Answer 1

const myCustomSubject = new Subject();
component.carousel.itemSelected = myCustomSubject.asObservable();

So if you want to simulate a value emit then you can use:

myCustomSubject.next(1);

Answer 2

You can use ng-mocks and provide mock properties via MockInstance.

MockInstance.scope();

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      CarouselGalleryComponent,
      MockComponent(CarouselInfoComponent), // <- mock
      MockComponent(CarouselComponent), // <- mock
    ],
  });
});

it('test', () => {
  MockInstance(CarouselInfoComponent, 'itemSelected', of(1));
  MockInstance(CarouselComponent, 'itemSelected', EMPTY);

  const fixture = TestBed.createComponent(CarouselGalleryComponent);
  fixture.detectChanges();
  // now it works.
});