Компонент тестирования, расширяющий два других компонента в Angular / Жасмин

Question

У меня есть три компонента, которые расширяют друг друга. TileComponent -> CollectionElementComponent -> SelectableItemComponent. Теперь я пытаюсь написать некоторые модульные тесты для класса TileComponent, используя Jasmine 3.4.0 и Angular 8. Однако тест (должен создать компонент) завершается неудачей, потому что mocked selectableService неправильно вставлен в расширенный расширенный компонент:

Failed: Uncaught (in promise): TypeError: Cannot read property 'pipe' of undefined
TypeError: Cannot read property 'pipe' of undefined
    at TileComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/shared/components/selectable/selectable-item.component.ts:26:14)
    at TileComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/collection/view/elements/collection-element/collection-element.component.ts:32:15)
    at TileComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/collection/view/elements/tile/tile.component.ts:65:15)

Если selectable-item.component.ts:26:14 ссылается на этот вызов (см. Также фрагмент кода ниже): this.selectableService.onDeselectAllSelectedItems.pipe(...)

Я запускаю компонент тестирования следующим образом:

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                TileComponent,
            ],
            providers: [
                { provide: SelectableService, useClass: MockSelectableService },
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
        })
            .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(TileComponent);
                component = fixture.componentInstance;
                fixture.detectChanges();
            });
    }));

it('should create component', () => {
        expect(component).toBeTruthy();
    });
});


  ...

@Injectable()
class MockSelectableService {
    onDeselectAllSelectedItems = new EventEmitter<void>();
}

Этот способ внедрения службы в компонент работал для других тестов компонентов, поэтому я не совсем уверен, почему он не работает здесь. Я уже почти все попробовал, используя ng-mocks и MockComponent() в объявлениях для двух родительских компонентов, пытаясь насмехаться над обоими родителями и вводя их, используя { provide: ComponentName, useClass: MockComponentName}. Также попытался переопределить методы ngOnInit, используя component.ngOnInit = () => {} в методе beforeEach или CollectionElementComponent.prototype.ngOnInit = () => {} et c. Все они приводят к одной и той же ошибке.

Уязвимые компоненты выглядят следующим образом:

export class SelectableItemComponent implements OnInit {
      constructor(
          public selectableService: SelectableService
      ) { }

      ngOnInit() {
          this.selectableService.onDeselectAllSelectedItems
              .pipe(takeUntil(this.componentDestroyed$))
              .subscribe(this.deselectItem.bind(this));
      }
}

Этот класс расширяется с помощью CollectionElementComponent:

export class CollectionElementComponent extends SelectableItemComponent implements OnInit {
          constructor(
             public selectableService: SelectableService,
          ) {
             super(selectableService);
          }

          ngOnInit() {
             super.ngOnInit();
             // some other stuff
          }
}

И наконец, TileComponent, расширяющий CollectionElementComponent

export class TileComponent extends CollectionElementComponent implements OnInit {
              constructor(
                 public selectableService: SelectableService,
              ) {
                 super(selectableService);
              }

              ngOnInit() {
                 super.ngOnInit();
                 // some other stuff
              }
    }

Любая помощь или советы высоко ценятся, так как у меня действительно нет идей ... Спасибо за поддержку!