1

コンポーネントがあります。彼の主な役割はラッパーです。

どんなトラブルで？

コンポーネントを実行するメソッドcompileComponentsにプロパティtitleがない場合。それが、私が思うに、コンソールにエラーが表示される理由です ここに画像の説明を入力

質問: 最初にプロパティをバインドしてから compileComponents メソッドを実行するにはどうすればよいですか?

コンポーネント テンプレート:

<div class="card">
    <div *ngIf="title" class="card-header clearfix">
        <h3 class="card-title">{{ title }}</h3>
    </div>
    <div class="card-body">
        <ng-content></ng-content>
    </div>
</div>

説明セクション:

describe('CardComponent', () => {

    let comp: CardComponent;
    let fixture: ComponentFixture<CardComponent>;
    let titleEl: DebugElement;  // the DebugElement with the welcome message

    // async beforeEach
    beforeEach( async(() => {
        TestBed.configureTestingModule({
            declarations: [ CardComponent ],
        }).compileComponents(); // compile template and css
    }));

    // synchronous beforeEach
    beforeEach(() => {
        fixture = TestBed.createComponent(CardComponent);
        comp    = fixture.componentInstance;
        titleEl = fixture.debugElement.query(By.css('.card-title'));

        comp.title   = "Greatest title";
        fixture.detectChanges(); // trigger initial data binding
    });

    it('Card check title', () => {
        expect(titleEl.nativeElement.textContent).toContain("Greatest title");
    });
});
4

1 に答える 1

2

それは、要素が存在する前に要素を取得しようとしているからです。は、要素が表示titleされるかどうかを決定します。*ngIf変更を検出した後、要素を取得しようとして移動するだけです

beforeEach(() => {
  fixture = TestBed.createComponent(CardComponent);
  comp = fixture.componentInstance;
  // titleEl = fixture.debugElement.query(By.css('.card-title'));

  comp.title = 'Greatest title';
  fixture.detectChanges(); // trigger initial data binding
  titleEl = fixture.debugElement.query(By.css('.card-title'));
});
于 2016-10-10T13:51:14.387 に答える