How to trigger component event in angular dart tests?

Question

I'm using angular_test.dart to test my components. I want to test that clicking on a particular <li> will mark it as selected.

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

In my test, how can I trigger a click on let's say the second <li> and evaluate that it has the selected property? And how do I mock the quiz service and inject it to the constructor?

Tek · Accepted Answer · 2017-03-18 14:27:26Z

2

I thought I wasn't going to figure it out, but I did.

Using a debug html test file helped a lot. On the console I could set breakpoints. Using the console I could navigate through the methods of these objects to find out what I needed to call.

    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);

answered Mar 18, 2017 at 14:27

Tek

3,1105 gold badges50 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rkj · Accepted Answer · 2017-03-19 16:03:00Z

1

You can use PageObjects to interact with the page: https://github.com/google/pageloader

answered Mar 19, 2017 at 16:03

rkj

9,4612 gold badges32 silver badges36 bronze badges

1 Comment

Tek Over a year ago

How is it used for an example like mine?

Collectives™ on Stack Overflow

How to trigger component event in angular dart tests?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related