сбой тестовых случаев при запуске теста ng в angular2.0 с компонентами angular2-material

Я использую angular2.0 в своем приложении

Я установил компоненты angular2-material и импортировал их в необходимые модули.

Я попытался написать тестовый пример для одного из моих компонентов.

//о.компонент.html

<md-card>
    <h3>{{title}}</h3>
    <md-card-content>
           <button md-raised-button class="md-raised md-primary primary-bg" (click)="fnnavigate()">CHOOSE </button> 
    </md-card-content>
</md-card>

//о.component.ts

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

@Component({
  selector: 'app-about',
  templateUrl: 'about.component.html',
  styleUrls: ['about.component.css']
     })

    export class AboutComponent implements OnInit {

  constructor(
    private router: Router
  ) { }

  title:string="welcome";

  ngOnInit() {

  }

  fnnavigate() {
    this.router.navigateByUrl('app/home1');
  }
}

//о.component.spec.ts

import { ComponentFixture, TestBed  } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';
import { async, inject } from '@angular/core/testing';
import { AboutComponent } from './about.component';
import { Router} from '@angular/router';

class RouterStub {
  navigateByUrl(url: string) { return url }
}



let comp: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;


describe('Component: About', () => {


  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AboutComponent], 
     providers: [
        { provide: Router, useClass: RouterStub }
      ]
     });

     fixture = TestBed.createComponent(AboutComponent);
     comp = fixture.componentInstance; 

  });
   it('should have title property', () => {
    comp.ngOnInit();
    expect(comp.title).toBe("welcome");
   });

  it('should tell ROUTER to navigate when button clicked',
     inject([Router], (router: Router) => {
       comp.fnNavigate(); // trigger >
        ...................
    }));

});

//package.json

...

"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"angulartics2": "^1.1.9",
"core-js": "^2.4.1",
"process-nextick-args": "^1.0.7",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
   }

...

когда я делаю ng test, я получаю:

Error: Template parse errors:
        'md-card-content' is not a known element:
        1. If 'md-card-content' is an Angular component, then verify that it is
part of this module.
        2. If 'md-card-content' is a Web Component then add "CUSTOM_ELEMENTS_SCH
EMA" to the '@NgModule.schema' of this component to suppress the message.

AboutComponent@34:4
        'md-card' is not a known element:
        1. If 'md-card' is an Angular component, then verify that it is part of
this module.
        2. If 'md-card' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to
the '@NgModule.schema' of this component to suppress the message. AboutComponent@32:0
            at TemplateParser.parse (http://localhost:9876/_karma_webpack_/0.bun
dle.js:7320:19)
            at RuntimeCompiler._compileTemplate (http://localhost:9876/_karma_we
bpack_/0.bundle.js:15619:51)
            at http://localhost:9876/_karma_webpack_/0.bundle.js:15542:83
            at Set.forEach (native)
            at compile (http://localhost:9876/_karma_webpack_/0.bundle.js:15542:
47)
            at RuntimeCompiler._compileComponents (http://localhost:9876/_karma_
webpack_/0.bundle.js:15544:13)
            at RuntimeCompiler._compileModuleAndAllComponents (http://localhost:
9876/_karma_webpack_/0.bundle.js:15461:37)
            at RuntimeCompiler.compileModuleAndAllComponentsSync (http://localho
st:9876/_karma_webpack_/0.bundle.js:15449:21)
            at TestingCompilerImpl.compileModuleAndAllComponentsSync (http://loc
alhost:9876/_karma_webpack_/0.bundle.js:20491:35)
            at TestBed._initIfNeeded (webpack:///D:/myFolder/transfer(9)/transfer/~
/@angular/core/bundles/core-testing.umd.js:1059:0 <- src/test.ts:4427:40)

Есть ли способ исправить эту проблему?


person mounika20    schedule 29.09.2016    source источник
comment
Возможный дубликат компонента Angular 2 Karma Test 'component- name' не является известным элементом   -  person Kim Kern    schedule 12.01.2018


Ответы (1)


Точно так же, как вы импортировали MdWhateverModule в свое основное приложение, вы также должны импортировать его в конфигурацию тестового стенда.

TestBed.configureTestingModule({
  imports: [ MdWhateverModule ],
  declarations: [ AboutComponent ]
})

Используя испытательный стенд, вы практически начинаете с нуля создание модуля для тестовой среды. Поэтому вам нужно включить все, что вы собираетесь использовать для этого теста AboutComponent.

person Paul Samsotha    schedule 29.09.2016
comment
спасибо, если у меня есть другие компоненты в компоненте about, скажем about11.component, about22.component и использовать их в about.component.html с помощью селекторов ‹about1.component›‹/about1.component› и как их протестировать, что это лучший подход - person mounika20; 29.09.2016
comment
Вам также необходимо объявить их, или, если вам не нужно проверять их функциональность, вы можете игнорировать их, используя schema: CUSTOM_ELEMENTS_SCHEMA. Или вы можете создать фиктивные компоненты для использования вместо них и добавить их в объявление. - person Paul Samsotha; 29.09.2016