vendredi 3 février 2017

Angular 2 test isolation (template errors)

I have an Angular (2.4.5) application created using angular-cli (1.0.0-beta.26) and I am experiencing testing difficulties. I have a simple component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-empty',
  templateUrl: './empty.component.html',
  styleUrls: ['./empty.component.css']
})
export class EmptyComponent { }

(both .html and .css are empty files) and unit test:

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

import { EmptyComponent } from './empty.component';

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

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

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

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

When npm run test is started the test fails with error:

Uncaught Error: Template parse errors: Can't bind to 'value' since it
isn't a known property of 'app-detail-section-item'.

That relates to some other component which is also being tested. What I don't understand is why this other component affects test of EmptyComponent? Is it because Webpack bundles tests together? I would expect the tests to be isolated. I can make the test pass using schemas: [NO_ERRORS_SCHEMA] but that does not seem right thing to do.

Aucun commentaire:

Enregistrer un commentaire