2017-03-18 1 views
2

私は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) { 
    }); 
});}); 

私のテストでは、どのようにして2番目の<li>と言って、それが選択されたプロパティを持っていると評価するのでしょうか?そして、私はどのようにしてクイズサービスを模擬し、それをコンストラクタに注入しますか?

答えて

2

私はそれを理解するつもりはないと思ったが、私はした。

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); 
関連する問題