jeudi 6 avril 2017

Angular 2 Testing with Javascript Library as a dependency

I'm currently trying to write a test for a component, that uses also a Javascript library. Therefore I declared the Object on top, to make it available in typescript. So far so good :-) No I'm trying the run a test, which always fails because the test doesn't know about the declared Object in the component.

How do I make the object also available inside the test spec?

import { Component } from '@angular/core';
declare var H: any;

@Component({
  selector: 'fb-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'Request a vehicle';
  test = this.title == this.title;

  ngOnInit(): void {
    var mapContainer = document.createElement('div');
    var uiView = document.getElementById('map-container');

    mapContainer.setAttribute('id', 'map');
    mapContainer.setAttribute('style', 'width: 100%; height: 100vh; background: grey');
    uiView.appendChild(mapContainer);

    let platform = new H.service.Platform({
      app_id: '',
      app_code: '',
      useCIT: true,
      useHTTPS: true
  });


  // Obtain the default map types from the platform object:
  var defaultLayers = platform.createDefaultLayers();

  // Instantiate (and display) a map object:
  var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map,
    {
      zoom: 10,
      center: { lat: 53, lng: 18 }
    });
  }
}



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

import { AppComponent } from './app.component';

describe('AppComponent', () => {

beforeEach(async(() => { 
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule
    ],
    declarations: [
      AppComponent
    ],
  }).compileComponents();
 }));

it('should create the app', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.debugElement.componentInstance;
  expect(app).toBeTruthy();
}));

it(`should have as title 'Request a vehicle'`, async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.debugElement.componentInstance;
  expect(app.title).toEqual('Request a vehicle');
}));

it('should render title in a h1 tag', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('h1').textContent).toContain('Request a vehicle');
 }));
});

Aucun commentaire:

Enregistrer un commentaire