使用 Karma 测试 Angular 时选择性地模拟服务

     2023-03-10     17

关键词:

【中文标题】使用 Karma 测试 Angular 时选择性地模拟服务【英文标题】:Selectively Mock Services when Testing Angular with Karma 【发布时间】:2017-08-15 06:10:32 【问题描述】:

虽然有很多关于在 Karma 中模拟单个 Angular 服务的问题,但我遇到了一个问题,即在测试我的应用程序时让我的模拟更加普遍。

在我当前的设置中,我有一个名为 serviceMocks 的模块,其中包含一个工厂,其中包含应用程序中每个服务的模拟。

人为的例子:

angular.module('serviceMocks',['ngMock'])
    .factory('myServiceOne', function() ...)
    .factory('myServiceTwo', function($httpBackend,$q) ...)

这在测试可能使用一个或多个服务作为依赖项的控制器和指令时非常有用。我在我的测试文件中包含了我的应用程序模块和 serviceMocks 模块,并且每个服务都被正确替换了。

beforeEach(module('myApp'));
beforeEach(module('serviceMocks'));

it('properly substitutes mocks throughout my tests', function() ...);

但是,在测试服务本身时,我不能包含 serviceMocks 模块,因为我正在测试的服务被它的模拟所取代,从而使测试变得毫无用处。但是,我仍然希望 所有其他 服务被模拟为一项服务可能依赖于一个或多个服务来执行。

我想到的一种方法是让我的服务模拟在全球范围内可用,也许通过将一个对象附加到保存模拟的window。然后我可以在测试这样的服务时单独包含模拟:

beforeEach(module('myApp', function($provide) 
    $provide.value('myServiceOne',window.mocks.myServiceOneMock);
    $provide.value('myServiceTwo',window.mocks.myServiceTwoMock);
);

但是这种方法不起作用,因为一些模拟使用$q 或其他角度服务来正常运行,而当简单地将工厂对象附加到窗口时,这些服务没有正确注入。

我正在寻找一种方法来测试服务,同时在一个位置为所有服务定义模拟。我想像但未能成功的可能性:

A) 让 serviceMocks 模块的 .run() 块在 myApp 模块的配置阶段。 (在这种情况下我可以附上 每个服务到窗口,因为角度依赖将是 正确注入,如上图所示分别注入) B) 能够用每个服务的测试文件中的实际实现覆盖我正在测试的服务 C) 否则能够在全局范围内定义和访问这些模拟,同时仍确保每个模拟都可以访问某些角度服务,例如$q

【问题讨论】:

【参考方案1】:

问题包含答案的线索。如果serviceMocks 模块导致设计问题,使用它是错误的。

正确的模式是每个单元有一个模块(在这种情况下为模拟服务)。 ngMock 不需要,它会在 Jasmine 测试中自动加载。模块可以一一使用:

beforeEach(module('app', 'serviceOneMock', 'serviceTwoMock'));

或联合起来:

angular.module('serviceMocks', ['serviceOneMock', 'serviceTwoMock'])

serviceMocks 模块应该存在的情况并不多。只是因为每个describe 块都应该决定哪些服务应该被模拟,哪些不应该被模拟。

大多数时候,模拟服务对于当前规范是单独的,或者依赖于局部变量。在这种情况下,服务是就地模拟的:

var promiseResult;

beforeEach(module('app'));
beforeEach(module( foo: 'instead of $provide.value(...)' );
beforeEach(($provide) => 
  $provide.factory('bar', ($q) => 
    return $q.resolve(promiseResult);
  
);
...

在专用的 serviceOneMock 等模块中执行此操作可能需要在任何时候重构模拟服务,因为它们太通用并且不适合这种情况。

如果在规范中多次使用模拟服务且行为略有不同并导致 WET 测试,则最好创建一个辅助函数来为当前规范生成它,而不是将其硬编码为 serviceOneMock 等. 模块。

【讨论】:

Angular Karma 使用 CUSTOM_ELEMENTS_SCHEMA 测试超时测试 AppComponent

】AngularKarma使用CUSTOM_ELEMENTS_SCHEMA测试超时测试AppComponent【英文标题】:AngularKarmateststimeouttestingAppComponentwithCUSTOM_ELEMENTS_SCHEMA【发布时间】:2019-11-2804:27:44【问题描述】:我正在向我的Angular项目添加一个应用程序组件测试,但在... 查看详情

有没有办法批量处理 Karma - Angular 单元测试?

】有没有办法批量处理Karma-Angular单元测试?【英文标题】:IsthereawaytoprocessKarma-Angularunittestsinbatches?【发布时间】:2017-10-0114:17:18【问题描述】:我们面临一个问题,即我们的测试将在某个时间点后开始失败或运行速度极慢。我... 查看详情

使用 karma 和 jamis 进行 Angular 单元测试

】使用karma和jamis进行Angular单元测试【英文标题】:AngularUnitTestingwithkarmaandjamis【发布时间】:2019-07-0106:26:46【问题描述】:我已经设置了我的Angularjs应用程序,用于使用Karma和Jasmin进行单元测试。但是当我尝试使用karmastart运行... 查看详情

Karma 测试 Angular - TypeError:无法读取 null 的属性“recipientAddressId”

】Karma测试Angular-TypeError:无法读取null的属性“recipientAddressId”【英文标题】:KarmaTestingAngular-TypeError:Cannotreadproperty\'recipientAddressId\'ofnull【发布时间】:2020-11-1615:08:25【问题描述】:当我尝试使用karma进行测试时,我收到了这个... 查看详情

使用 Karma 的 Angular 单元测试 Observable/Subject

】使用Karma的Angular单元测试Observable/Subject【英文标题】:AngularUnitTestObservable/SubjectwithKarma【发布时间】:2018-01-2419:23:11【问题描述】:我正在尝试在我的组件中测试主题更改,但覆盖范围从未进入订阅功能。titlebar-search.component.t... 查看详情

使用 jasmine 和 karma 进行单元测试时形成数组错误

...rma【发布时间】:2021-01-1909:04:36【问题描述】:我正在为Angular应用程序版本9编写单元测试用例。但我遇到了错误。TypeError:无法读取未定义的属性“get”如何监视getFormControls方法,否则我必须使用spyonproperty,我 查看详情

使用 Angular 和 Jasmine/Karma 的私有方法进行测试和代码覆盖

】使用Angular和Jasmine/Karma的私有方法进行测试和代码覆盖【英文标题】:Testsandcode-coveragewithprivatemethodswithAngularandJasmine/Karma【发布时间】:2020-06-0219:06:18【问题描述】:所以,我在按钮组件上使用了这些方法。exportclassSidebarButtonC... 查看详情

每个测试文件的 Karma 运行时

...发布时间】:2020-10-0608:57:25【问题描述】:我目前在我的Angular项目中使用karma和jasmine,我注意到一些测试很慢。所以,我正在寻找一个显示每个文件执行时间的解决方案/报告器。【问题讨论】:【参考方案1】:做npmi--save-devkarm... 查看详情

使用 Karma Jasmine 的 Angular 1.5 组件模板单元测试

】使用KarmaJasmine的Angular1.5组件模板单元测试【英文标题】:Angular1.5ComponenttemplateunittestwithKarmaJasmine【发布时间】:2017-09-1522:06:34【问题描述】:我正在尝试使用KarmaJasmine对Angular组件和模板进行单元测试。我正在使用ng-html2js测试... 查看详情

使用 jasmine / karma 进行 Angular 4 单元测试和 http post mocking - 如何修复

】使用jasmine/karma进行Angular4单元测试和httppostmocking-如何修复【英文标题】:Angular4unittestingwithjasmine/karmawithhttppostmocking-howtofix【发布时间】:2018-03-0708:01:12【问题描述】:我有一项服务,我想在Angular4typescriptjasmine中进行单元测试... 查看详情

在 Angular 8 (Karma 4.1.0) 升级后,在 Angular 7 (Karma 2.0.4) 中成功完成的 Karma 测试失败

】在Angular8(Karma4.1.0)升级后,在Angular7(Karma2.0.4)中成功完成的Karma测试失败【英文标题】:KarmatestswhichruntosuccessfulcompletioninAngular7(Karma2.0.4)failafterAngular8(Karma4.1.0)upgrade【发布时间】:2019-12-0302:40:03【问题描述】:我们有一套约1100个... 查看详情

Angular5 / Karma'选择器'不是已知元素[重复]

】Angular5/Karma\\\'选择器\\\'不是已知元素[重复]【英文标题】:Angular5/Karma\'selector\'isnotaknownelement[duplicate]Angular5/Karma\'选择器\'不是已知元素[重复]【发布时间】:2018-09-1813:32:45【问题描述】:我的组件有一个小问题。在我的浏览器... 查看详情

如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例

】如何在Angular7中使用Karma/Jasmine为App_Initializer编写单元测试用例【英文标题】:howtowriteunittestcasesforApp_InitializerusingKarma/Jasmineinangular7【发布时间】:2019-06-3002:41:22【问题描述】:我已经在我的app.module.ts文件中导入了APP_INITIALIZER... 查看详情

Angular 4:如何在没有任何浏览器的情况下通过 Karma 运行测试用例

】Angular4:如何在没有任何浏览器的情况下通过Karma运行测试用例【英文标题】:Angular4:HowtoruntestcasesbyKarmawithoutanybrowser【发布时间】:2018-05-1506:06:06【问题描述】:是否可以在不使用任何浏览器的情况下运行Karma的Angular4测试用... 查看详情

Karma 为具有无效行号的 Angular 项目生成 lcov 报告

】Karma为具有无效行号的Angular项目生成lcov报告【英文标题】:Karmaproduceslcovreportforangularprojectwithinvalidlinenumbers【发布时间】:2016-10-0221:39:39【问题描述】:我有一个带有一些测试的Angular项目。我的构建是用Gulp编写的。我使用Karm... 查看详情

Karma + Jasmine 下 angular.mock.inject 的 TypeScript AngularJS 控制器测试问题

】Karma+Jasmine下angular.mock.inject的TypeScriptAngularJS控制器测试问题【英文标题】:TypeScriptAngularJScontrollertestissuewithangular.mock.injectunderKarma+Jasmine【发布时间】:2016-09-1315:40:18【问题描述】:我正在尝试使用Jasmine+Karma测试用TypeScript编写... 查看详情

Angular/Karma 单元测试错误“1 个计时器仍在队列中”

】Angular/Karma单元测试错误“1个计时器仍在队列中”【英文标题】:Angular/Karmaunittesterror"1timer(s)stillinthequeue"【发布时间】:2020-02-1310:49:10【问题描述】:这不是我第一次遇到"1timer(s)stillinthequeue",但通常我会找到... 查看详情

Angular - Jasmine/karma - 订阅 lambda 表达式未执行

】Angular-Jasmine/karma-订阅lambda表达式未执行【英文标题】:Angular-Jasmine/karma-subscribelambdaexpressionisnotgettingexecuted【发布时间】:2020-01-1220:22:38【问题描述】:我正在使用Jasmine/karma为angular6组件中的observable编写单元测试用例。请找到... 查看详情