mardi 16 janvier 2018

Testing Angular-Module (Components and Service) with Karma/Jasmine (NullInjectorError)

I wrote a MappingModule which exports all its components (LayerComponent, MarkerComponent, ...) and provides a MappingService. I am using Angular 5 and OpenLayers. The MappingService provides methods like initMap() to create a new ol.Map(), addLayer(layer) to add a new Layer to the created Map etc. All components are using the same instance of this service: it is provided by the MapBuilderComponent

Here is a simple insight how it works:

<map-builder [width]="800">
  <layer [name]="TestLayer">
     <marker [lat]="lat" [lng]="lng"><marker>
  </layer>
<map-builder>

map-builder calls initMap() on the Service. layer calls addLayer(layer), marker calls addFeature(feature).

My NgModule looks like this:

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        MapBuilderComponent,
        LayerComponent,
        MarkerComponent,
        WeatherComponent,
        HeatmapComponent,
        FeatureComponent,
        OverlayComponent,
        ControlPanelComponent,

    ],
    providers: [
        MappingService        
    ],
    exports: [
        MapBuilderComponent,
        LayerComponent,
        MarkerComponent,
        WeatherComponent,
        HeatmapComponent,
        FeatureComponent,
        OverlayComponent,
        ControlPanelComponent,        
    ]
})

Now I want to test it with Karma and Jasmine, but I've no experience with it. I get Errors like "NullInjectorError: No provider for MappingService!"

My layer.component.spec.ts looks like this:

import { TestBed, async, ComponentFixture, inject} from '@angular/core/testing';
import { MapBuilderComponent } from './../map-builder.component';
import { LayerComponent } from './layer.component';
import { MappingService } from '../services/mapping.service';

describe('LayerComponent', () => {
    let mapBuilderComponent: MapBuilderComponent,
        mbFixture: ComponentFixture<MapBuilderComponent>,
        layerComponent: LayerComponent,
        layerFixture: ComponentFixture<LayerComponent>;

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

  }));

  beforeEach(()=>{       
    mbFixture = TestBed.createComponent(MapBuilderComponent);
    mapBuilderComponent = mbFixture.componentInstance;
    mbFixture.detectChanges();

  });


  it('should create Layer Component', ()=> { 
    layerFixture = TestBed.createComponent(LayerComponent);
    layerComponent = layerFixture.componentInstance;
    layerFixture.detectChanges();    
    expect(layerComponent).toBeDefined(); 

    layerComponent.name = "TestLayer";
    layerComponent.type = "vector";
    let layer = layerComponent.getLayer();        
    expect(layer).toBeDefined();
  });


});

I tried adding providers:[MappingService] to the TestBed-Module but its not working. I also tried to add imports:[MappingBuilderModule] to the TestBed instead, but its not working either. How can I test all the components and inject the Service successfully?

I would really appreciate some help.

All the best, Thalion

Aucun commentaire:

Enregistrer un commentaire