Jasmine сайт предварительного просмотра с угловыми 2 cli

Question

Я очень новичок в тестировании жасмина с помощью Angular 2 CLI и написав свои первые тесты после руководства по тестированию на угловом.io.

Когда я перехожу к живым примерам на плункере, все результаты теста отображаются очень хорошо в index.html, но когда я запускаю тесты с моим угловым приложением CLI, браузер открывает Карму, откуда я могу нажать кнопку отладки , Выполнение этого следующего шага - нажать F12 для консоли инструментов разработчика.

Здесь я могу увидеть результаты всех моих тестов вместе с консольными журналами, и это не дает мне очень четкого обзора, особенно когда я скоро проведу множество тестов.

Уверен, что у меня нет информации об этом, но я не могу найти больше об этом.

Все проводники, которые я нашел, выполняют несколько тестов и запускают их в консоли, но в случае, если я должен протестировать большое приложение, должен быть другой способ иметь хороший обзор без другой информации о консоли между ,

Что мне не хватает?

Answer 1

При тестировании компонента, например, теста, создающего шаблон компонента.

это позволяет вам нажать кнопку или проверить, сколько у вас элементов в * ngFor директиве.

Вы можете получить элемент по:

let myComponentElement = fixture.nativeElement 

вы можете использовать элемент, чтобы проверить ваш элемент, например:

кнопка:

<button id="my-test-button" (click)="myTestFunction()>ClickMe</button> 

тестирование кнопки:

it("click on my_test_button should call myTestFunction() ",()=> { 
    spyOn(componentInstance.myTestFunction); 
    let my_test_button = myComponentElement.querySelector("my-test-button") 
    my_test_button.click(); 
    fixture.detectChanges(); 
    expect(componentInstance.myTestFunction).toHaveBeenCall(); 
}) 

Последняя вещь, вы можете увидеть, как вы тестируете шаблон, поместив «dubugger» в свой тест и нажмите «f12» на хроме.

, например:

it("click on my_test_button should call myTestFunction() ",()=> { 
     spyOn(componentInstance.myTestFunction); 
     let my_test_button = myComponentElement.querySelector("my-test-button") 
     **debugger;** 
     my_test_button.click(); 
     fixture.detectChanges(); 
     expect(componentInstance.myTestFunction).toHaveBeenCall(); 
    }) 

вы shuold увидеть ваш шаблон компонента при отладке.

Удачи !!!