在 Angular/Jasmine 中扩展其他两个组件的测试组件

Question

I have three components that are extending each other TileComponent -> CollectionElementComponent -> SelectableItemComponent. Now, I am trying to write some unit tests for the TileComponent class using Jasmine 3.4.0 and Angular 8. However, the test (should create component) fails, because the mocked selectableService is not properly injected in the extended extended component:

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)

With selectable-item.component.ts:26:14 referring to this call (also see the code snippet further down): this.selectableService.onDeselectAllSelectedItems.pipe(...)

I init the testing component like this:

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>();
}

This way of injecting the service into the component worked for other component tests, so I am not entirely sure why it fails here. I have tried pretty much everything already, using ng-mocks and MockComponent() in the declarations for the two parent components, trying to mock both parents and injecting them using { provide: ComponentName, useClass: MockComponentName} . Also tried to override the ngOnInit methods using component.ngOnInit = () => {} in the beforeEach method or CollectionElementComponent.prototype.ngOnInit = () => {} etc. All of them result in the same error.

The affected components look like this:

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

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

This class is extended by the CollectionElementComponent:

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

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

And last, the TileComponent extending the CollectionElementComponent

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

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

Any help or tips are highly appreciated, since I am really out of ideas... Thanks for the support!

Answer 1

If you are using ng-mocks you could use MockBuilder or MockProvider too:

beforeEach(() => MockBuilder(
  TileComponent,
  [
    CollectionElementComponent,
    SelectableItemComponent,
    SelectableService,
  ],
));

it('test', () => {
  // mocking the prop of SelectableService 
  const selectedItems$ = new EventEmitter();
  MockInstance(
    SelectableService,
    'onDeselectAllSelectedItems',
    selectedItems$,
  );

  const fixture = MockRender(TileComponent);
  // should work properly now
});