Угловое испытание 2

Question

У меня есть компонент. Основная роль Hes - быть оберткой.

В чем проблема?

Когда метод compileComponents выполнения компонент не имеет свойства названия. Вот почему, как я думаю, в консоли я вижу ошибки

Вопрос: Как я могу связать первое свойство, а затем запустить метод 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"); 
    }); 
}); 

Answer 1

Это потому, что вы пытаетесь получить элемент, прежде чем он даже не существует. 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')); 
});