Угловой 2 компонент тестирования html

Question

Я пытаюсь выполнить угловое испытание и столкнуться с проблемами. Я пытаюсь проверить привязку в HTML. Кратко код выглядит следующим образом:

Компонент:

export class NavbarComponent { 
    projectName = "Quiz!" 
} 

Шаблон:

<a class="navbar-brand" routerLink="/intro">{{projectName}}</a> 

Я пытался следовать примерам онлайн, ив попробовал следующие способы сделать это:

describe('NavBar component',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [NavbarComponent], 
     }); 
    }); 
}); 

it('should contain the projectName variable',() => { 
    let fixture = TestBed.createComponent(NavbarComponent); 
    fixture.detectChanges(); 

    let nav = fixture.nativeElement 
    let title = nav.querySelectorAll('.navbar-brand'); 

    expect(title.textContent).toContain(nav.projectName); 
}); 

Этот метод дает эту ошибку: Ошибка: не удается создать компонент NavbarComponent поскольку он не был импортирован в модуль тестирования!

Второй способ, который я попробовал:

let fixture: ComponentFixture<NavbarComponent>; 
let component: NavbarComponent; 
let debug: DebugElement; 
let element: HTMLElement; 

describe('NavBarComponent',() => { 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      declarations: [NavbarComponent] 
     }); 
    }); 

    fixture = TestBed.createComponent(NavbarComponent); 
    component = fixture.componentInstance; 

    debug = fixture.debugElement.query(By.css('.navbar-brand')); 
    element = debug.nativeElement 

}); 

describe('navbar title check, project name variable', function() { 
    it('should be Quiz!', function() { 
     fixture.detectChanges(); 
     expect(element.textContent).toContain(component.projectName); 
    }); 
}); 

Для этого метода, я получаю следующее сообщение об ошибке: TypeError: Не удается прочитать свойство «detectChanges» неопределенной

Я новичок в программировании не говоря уже тестирование , поэтому любая помощь будет высоко оценена. Спасибо

Answer 1

Поместите все в describe, и избавитесь от второго describe и положите it внутри первого. Кроме того, все ваши задания должны идти внутри beforeEach

describe('',() => { 
    let someVar; 

    beforeEach(() => { 
    TestBed.configureTestingModule({}); 
    someVar = whatever; 
    }) 

    it('',() => { 

    }) 
}) 

Это должно заставить вас начать.