CODEWITHSUNDEEP
unit-testingangularmockingdartmockito
Tek
Tek

Reputation: 3050

Dart Angular replacing provider with mock in unit testing

How can I replace the provider QuizService to QuickServiceMock in Angular Dart unit testing?

I tried using addProviders method but that didn't replace QuizService with QuizkServiceMock.

It seems MultipleChoiceQuizComponent is still using the original class QuizkService and not QuizServiceMock like I want it to.

import 'dart:html';
import 'package:angular2/angular2.dart';
import 'package:angular_test/angular_test.dart';
import 'package:test/test.dart';
import 'package:mockito/mockito.dart';

import '...quiz_service.dart';
import '...multiple_choice_quiz_component.dart';
import '...multiple_choice_quiz.dart';

class MockQuizService extends Mock implements QuizService {}

@AngularEntrypoint()
void main()
{
    group('$MultipleChoiceQuizComponent', () {
        MockQuizService quizServiceMock;
        setUp(() async {
            quizServiceMock = new MockQuizService();
            List<String> mockChoiceList = [
                "incorrect1",
                "incorrect2",
                "correct answer",
                "incorrect3"
            ];
            when(quizServiceMock.getQuiz())
                .thenReturn(
                    new MultipleChoiceQuiz(
                        mockChoiceList,
                        "correct answer",
                        'test question description'
                )
            );
        });

        test('should add "incorrect" css class to incorrect answer', () async {
            NgTestBed bed = new NgTestBed<MultipleChoiceQuizComponent>().addProviders([
                provide(QuizService, useValue: quizServiceMock)
            ]);
            NgTestFixture fixture = await bed.create();
            Element answer = fixture.rootElement.querySelector('.quiz-choice:nth-child(2)');
            answer.dispatchEvent(new MouseEvent('click'));
            bool hasClass = answer.classes.contains('incorrect');
            expect(hasClass, true);
        });
    });

}

multiple_choice_quiz_component.dart:

import 'package:angular2/core.dart';
import 'package:angular2/common.dart';
import 'package:angular2_components/angular2_components.dart';

import '.../quiz/quiz.dart';
import '.../service/quiz_service.dart';

@Component
(
    selector: 'multiple-choice-quiz-component',
    directives: const [materialDirectives, NgFor],
    providers: const [materialProviders, QuizService],
    templateUrl: 'multiple_choice_quiz_component.html',
    styleUrls: const['/app_component.css', 'quiz.css']
)

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

What am I missing?

Upvotes: 0

Views: 484

Answers (1)

rkj
rkj

Reputation: 9311

You cannot override providers: in the @Component annotation of the widget.

What you can do is move the binding higher in the tree, so that parent (or app bootstrap) provide the binding.

Upvotes: 3

Related Questions