Unit testing 用模拟单元测试替换Dart提供程序

在角省道单元测试中，如何将提供者

QuizService

替换为

quickservicecomck

我尝试使用

addProviders

方法，但没有用

QuizkServiceMock

替换

QuizService

看来，

multiplechicequizcomponent

仍在使用原始类

QuizkService

，而不是像我希望的那样使用

quizservicecomock

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

}

---

我缺少什么？

您不能覆盖小部件的

@组件
注释中的
提供者：

您可以做的是将绑定移到树中更高的位置，以便父级（或应用程序引导）提供绑定。
您不能覆盖小部件的
@组件
注释中的
提供程序：

您可以做的是将绑定移到树中更高的位置，以便父级（或应用程序引导）提供绑定。
您是否在
multipleechoicequizcomponent
中提供
QuizkService
？（或者在
AppComponent
或者
bootstrap（AppComponent，[…]）
？@GünterZöchbauer，在
multipleechoicequizcomponent
中提供的服务看起来不像
TestBed
支持替换组件的提供者。该死，我以为
addProviders
就是这么做的：（在我看来，
addProviders
允许在测试组件的父级提供服务。您是否在
multipleechoicequizcomponent
中提供
quizservice
？（或者在
AppComponent
或
bootstrap（AppComponent，[…]）
？@GünterZöchbauer在
MultipleChiceQuizComponent
中提供的服务看起来不像
测试床
支持替换组件的提供者。该死，我以为
添加提供者
就是这么做的：（在我看来，
addProviders
允许在测试组件的父级提供服务。我已将组件代码添加到我的问题中。我不确定将绑定移到更高的位置是什么意思。您可以将
QuizService
放在组件的
providers
中，而不是将其放在cal中的providers中吗l到
bootstrap
？“树中较高的位置”表示在DOM树中较高的组件的提供程序中，或在作为DI根的引导程序中tree@Nate太糟糕了，这与Angular best practices@Tek背道而驰-每个
MultipleChiceQuizComponent
是否需要自己的
QuizService
？这就是您链接的指南中讨论的情况。如果是这样的话那么，我建议您不要在测试中模拟QuizService。@Nate啊，好吧。它现在不需要自己的实例。虽然我仍然不明白模拟服务是如何使我的测试通过的。我已经在我的问题中添加了组件代码。我不确定将绑定移到更高的位置是什么意思。而不是将
QuizService
在组件上的
提供程序中，您可以将其放入调用
引导程序的提供程序中吗？“在树中的较高位置”表示在DOM树中较高的组件的提供程序中，或在作为DI根的引导程序中tree@Nate太糟糕了，这与Angular best practices@Tek背道而驰-每个
MultipleChiceQuizComponent
是否需要自己的
QuizService
？这就是您链接的指南中讨论的情况。如果是这样的话那么我建议不要在你的测试中模拟QuizService。@Nate啊，好吧。它现在不需要自己的实例。尽管我仍然不明白模拟服务是如何让我的测试通过的。
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);
    }
}