각도 다트 테스트에서 컴포넌트 이벤트를 트리거하는 방법은 무엇입니까?

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