jeudi 28 juillet 2016

Angular 2 unit test parsing error using webpack

I'm getting the follow error when I run Angular 2 unit test using webpack:

FAILED TESTS:
  Other Trims Tested
    ✖ should display other trims articles
      PhantomJS 2.1.1 (Linux 0.0.0)
    Error: Template parse errors:
    Unexpected closing tag "div" ("module.exports = "<div *ngFor=\"let trim of otherTrims\">\n  \n[ERROR ->]</div>\n\n<!--<div class='test-name'></div>-->\n";"): OtherTrimsTestedComponent@0:78 in /app/config/spec-bundle.js (line 52805)

I see that it is testing webpacks bundle-js file but I am not sure if there is another import I have to do from angular core tests

I have my HTML setup as:

<div *ngFor="let trim of otherTrims">
  
</div>

and spec test as:

import {
  it,
  fdescribe,
  expect,
  inject,
  async,
  TestComponentBuilder
} from '@angular/core/testing';

import { OtherTrimsTestedComponent } from './other-trims-tested.component';

let mockData = [
  {
    'featured_image': 'http://test.url.com',
    'article_type': 'Test',
    'article_url': 'http://test.url.com',
    'name': 'Ford F-150 Raptor',
    'specs' : '4 Door AWD Pickup Truck, 150Bhp, 285 lb-ft, 8-sp Automatic',
    'msrp': '50,000'
  }
];

fdescribe('Other Trims Tested', () => {

  it('should have a selector', () => {
    let annotations = Reflect.getMetadata('annotations', OtherTrimsTestedComponent);
    expect(annotations[0].selector).toBe('other-trims-tested');
  });

  it('should display other trims articles', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(OtherTrimsTestedComponent).then(fixture => {

      // Get components
      let otherTrimsTestedComponent = fixture.componentInstance; // Get component instance
      let element = fixture.nativeElement; // Get test component elements

      otherTrimsTestedComponent.otherTrims = mockData;

      // Detect changes? (How?)
      fixture.detectChanges();

      // Test against data
      expect(element.querySelector('.test-name').innerText).toBe('Ford F-150 Raptor2');
    });
  })));
});

and Component:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'other-trims-tested',
  template: require('./other-trims-tested.component.html')
})
export class OtherTrimsTestedComponent implements OnInit {

  @Input() otherTrims: any[];

  constructor() { }

  ngOnInit() { }

}

Any hints/articles can help. Thanks

Aucun commentaire:

Enregistrer un commentaire