如何在角度飞镖测试中触发组件事件？

Question

我使用angular_test.dart来测试我的组件。我想测试点击某个特定的<li>会将其标记为选中状态。

multiple_choice_quiz_component.html

<div> 
    <div class="contain-center"> 
    <h1>{{quiz.getDescription}}</h1> 
    </div> 
    <div class="contain-center"> 
     <ul> 
      <li *ngFor="let answer of quiz.getChoiceList" 
       (click)="onSelect(answer)" 
       [class.selected]="answer == selectedAnswer" 
       [class.correct]="correctAnswer && answer == selectedAnswer" 
       [class.incorrect]="!correctAnswer && answer == selectedAnswer" 
      > 
       {{answer}} 
      </li> 
     </ul> 
    </div> 
</div> 

multiple_choice_quiz_component.dart

class MultipleChoiceQuizComponent 
{ 
    String selectedAnswer; 
    String description; 
    bool correctAnswer = false; 
    Quiz quiz; 

    MultipleChoiceQuizComponent(QuizService quizService) 
    { 
     this.quiz = quizService.getQuiz(); 
    } 

    void onSelect(String answer) 
    { 
     selectedAnswer = answer; 
     this.correctAnswer = this.quiz.isAnswer(answer); 
    } 
} 

test.dart

... 
import 'package:angular_test/angular_test.dart'; 
.... 
group('My Tests',() { 
    test('should change li element to selected',() async { 
    var bed = new NgTestBed<MultipleChoiceQuizComponent>(); 
    var fixture = await bed.create(); 
    await fixture.update((MultipleChoiceQuizComponent Component) { 
    }); 
});}); 

在我的测试中，如何触发点击让我们说第二个<li>并评估它具有选定的属性？我该如何嘲笑测验服务并将其注入构造函数？

Answer 1

我以为我不想弄明白，但我做到了。

使用debug html test file帮助了很多。在控制台上，我可以设置断点。使用控制台，我可以浏览这些对象的方法来找出我需要调用的内容。

NgTestBed bed = new NgTestBed<MultipleChoiceQuizComponent>(); 
    NgTestFixture fixture = await bed.create(); 
    Element incorrectAnswer = fixture.rootElement.querySelector('.quiz-choice:nth-child(2)'); 
    incorrectAnswer.dispatchEvent(new MouseEvent('click')); 
    bool hasClass = incorrectAnswer.classes.contains('incorrect'); 
    expect(true, hasClass); 

Answer 2

您可以使用PageObjects与网页互动： https://github.com/google/pageloader