mercredi 21 novembre 2018

Angular 6. How to test injected components

I have a FAB component separated in 3 parts: trigger component, actions component and main component, gathering all together.

Trigger and Actions components have an injected parent like this:

constructor(
  @Inject(forwardRef(() => FabSpeedDialComponent)) private _parent: 
FabSpeedDialComponent,
  private renderer: Renderer
) { }

Parent have circular dependency to it's actions: @ContentChild(FabSpeedDialActionsComponent) _childActions: FabSpeedDialActionsComponent;

It works great, but I have a problem with testing this behaviour. As an exaple, there's test for actions component:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { FabSpeedDialActionsComponent } from './fab-speed-dial-actions.component';

describe('FabSpeedDialActionsComponent', () => {
  let component: FabSpeedDialActionsComponent ;
  let fixture: ComponentFixture<FabSpeedDialActionsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [FabSpeedDialActionsComponent]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FabSpeedDialActionsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

It fails with this error:

Error: StaticInjectorError(DynamicTestModule)[FabSpeedDialActionsComponent -> FabSpeedDialComponent]: StaticInjectorError(Platform: core)[FabSpeedDialActionsComponent -> FabSpeedDialComponent]: NullInjectorError: No provider for FabSpeedDialComponent!

Even if I try to add it to declarations it still fails.

Aucun commentaire:

Enregistrer un commentaire