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

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

2 个答案: