Question

我正在编写一个简单的单元测试，我想测试我的应用程序的“基础”组件是否已定义。它有两个子组件：1）story-outline，2）story-dialog。但是，Karma抱怨缺少这些子组件中的依赖项。我认为在测试主机组件中声明它们的重点是避免这种情况。也许我做错了或者不理解它是如何工作的。我一直在关注官方Angular 2网站上的单元测试文档。

spec import语句是AppComponent的所有依赖项。我不需要包含我在beforeEach中声明的其他两个组件的依赖项，对吗？

当前规范

import {Component, ViewChild, AfterViewInit, ViewContainerRef, ViewEncapsulation, DebugElement} from '@angular/core';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {StoryDialog} from '...';
import {StoryDialogService} from '...';
import {AppComponent} from '...;
import {StoryComponent} from '...';
import {TestBed, ComponentFixture, async} from '@angular/core/testing';

let testHost: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let de: DebugElement;
let el: HTMLElement;

let translateServiceStub = {

};

let storyDialogServiceStub = {
    storyDialog: StoryDialog
};

describe('Component:App', () => {
    beforeEach( async(() => {
        TestBed.configureTestingModule({
            imports: [],
            declarations: [AppComponent, StoryDialog, StoryComponent],
            providers: [
                {provide: TranslateService, useValue: translateServiceStub},
                {provide: StoryDialogService, useValue: storyDialogServiceStub}
            ]
        }).compileComponents();
    }));    

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        testHost = fixture.componentInstance;
        de = fixture.debugElement;
    });

    it('should be defined', () => {
        fixture.detectChanges();
        expect(testHost).toBeDefined();
    });
});

要测试的课程

import {Component, ViewChild, AfterViewInit, ViewContainerRef, ViewEncapsulation} from '@angular/core';
import {TranslateService} from 'ng2-translate/ng2-translate';
import {StoryDialogService} from '...';
import {StoryDialog} from '...';    

@Component({
  selector: 'app',
  template: `
        <story-outline></story-outline>
        <story-dialog></story-dialog>            
    `,
  styles: [require('./app.component.scss')],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
  @ViewChild(StoryDialog)
  storyDialog: StoryDialog;

  private viewContainerRef: ViewContainerRef;

  constructor(private translate: TranslateService,
              private storyDialogService: StoryDialogService,
              viewContainerRef: ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;

    translate.addLangs(['en-US']);
    this.translate.setDefaultLang('en-US');
    this.translate.use('en-US');
  }

  ngAfterViewInit() {
    this.storyDialogService.storyDialog= this.storyDialog;
  }
}

堆栈跟踪焦点

18 11 2016 11:32:03.150:WARN [reporter]: SourceMap position not found for trace: Error: Template parse errors:
There is no directive with "exportAs" set to "bs-modal" ("<div bsModal [config]="{backdrop:'static', show:false, keyboard:false}" [ERROR ->]#storyDialog="bs-modal"
     (onShow)="onShowHandler($event)" (onHide)="onHideHandler($event)"
 "): StoryDialog@0:72
Can't bind to 'config' since it isn't a known property of 'div'. ("<div bsModal [ERROR ->][config]="{backdrop:'static', show:false, keyboard:false}" #storyDialog="bs-modal"
     (onShow)"): StoryDialog@0:13
The pipe 'translate' could not be found ("         </div>
            <div class="media-body">
              <div class="story-heading">[ERROR ->]{{'STORY_HEADING' | translate }}</div>
              <div class="story-messages" *ngFor="let msg "): StoryDialog@15:47 in http://localhost:9876/base/spec-bundle.js?49d17eb052faf1cac3d7948dc8d95dee63357e3d (line 52498)

TestHost子组件具有未定义的属性

0 个答案: