Dart Angular 在单元测试中用模拟替换提供者

Question

如何在 Angular Dart 单元测试中将提供程序 QuizService 替换为 QuickServiceMock？

我尝试使用addProviders 方法，但没有将QuizService 替换为QuizkServiceMock。

似乎MultipleChoiceQuizComponent 仍在使用原始类QuizkService 而不是QuizServiceMock，就像我想要的那样。

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

我错过了什么？

Answer 1

您不能在小部件的@Component 注释中覆盖providers:。

您可以做的是将绑定移到树中更高的位置，以便父（或应用引导程序）提供绑定。