如何让我的Angular5 spyOn按预期工作？
要让Angular5的spyOn按预期工作，需要遵循以下步骤：
- 确保正确引入所需的依赖：在测试文件的顶部，引入
TestBed、ComponentFixture和要测试的组件。 - 在测试文件中创建一个测试用例，并在其中进行必要的设置和准备工作。
- 在测试用例中，使用
TestBed.configureTestingModule方法来配置测试模块。这将包括导入要测试的组件、服务和其他依赖项。 - 使用
TestBed.createComponent方法创建组件的实例，并将其分配给一个变量。 - 使用
fixture.detectChanges()方法来触发变更检测，并确保组件的初始化完成。 - 在测试用例中，使用
spyOn方法来创建一个间谍函数，并指定要间谍的对象和方法。 - 执行需要进行测试的操作，以触发间谍函数的调用。
- 使用
expect断言来验证间谍函数的调用情况，例如expect(spy).toHaveBeenCalled()。
以下是一个示例代码，展示了如何使用spyOn来测试一个Angular5组件中的方法：
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { MyComponent } from './my.component';
describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [MyComponent]
});
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should call myMethod when button is clicked', () => {
spyOn(component, 'myMethod');
const button = fixture.nativeElement.querySelector('button');
button.click();
expect(component.myMethod).toHaveBeenCalled();
});
});在这个示例中，我们创建了一个MyComponent的测试用例，并在其中使用spyOn来间谍myMethod方法。然后，我们模拟了一个按钮点击事件，并使用expect断言来验证myMethod方法是否被调用。
请注意，这只是一个简单的示例，实际的测试用例可能会更复杂。根据具体的测试需求，你可能需要模拟其他依赖项、使用async和fakeAsync来处理异步操作，或者使用其他测试工具和技术。
关于Angular5的更多信息和相关产品介绍，你可以参考腾讯云的官方文档和网站。
相关·内容
1回答
这个测试正在抛出错误Expected spy phone to have been called. --正如终端中的log所演示的那样，正在调用模拟类方法。模拟类不会被任何其他测试调用。我想我在这里遗漏了一些简单的东西，但我不知道为什么测试中的formatSpy失败了。
TestBed.ConfigureTestingModule:中的提供程序
{provide: FormatService, useClass: FormatServiceMock},
My Mock类：
export class FormatServiceMock {
浏览 0提问于2020-01-30得票数 0
回答已采纳
我有一个控制器函数，如下所示：
$scope.clearMarkers = function(){
for(var i = 0; i < $scope.markers.length; i++){
$scope.markers[i].setMap(null);
}
$scope.markers = [];
};
我的上述单元测试如下所示：
describe('clearMarkers Test', function(){
it('should call the setMap() method on each array
浏览 15提问于2016-09-25得票数 0
2回答
我正在开发一个AngularJS应用程序，在一个具体的指令中，我面临着茉莉花的SpyOn的一些问题。
指令非常简单，只需调用服务的方法，当它解析/拒绝承诺时，就会相应地设置一些值或另一些值。
The problem：当我试图模拟SignatureService.getSignatureData SpyOn时，它不像我所期望的那样工作，并且表现得好像是在通过getSignatureData调用茉莉花的callThrough方法。
我一直在其他指令和服务中使用spyOn和mocks，这些都没有问题。
在过去的两天里，我一直试图解决这个问题，与其他解决方案和用户的答案相比，但我找不到一个有效的解决方
浏览 2提问于2018-04-04得票数 1
我知道在设备中运行时如何禁用YellowBox警告：
YellowBox.ignoreWarnings(ignoredYellowBox);
但我不知道如何在笑话测试中让他们安静下来。有一些弃用的警告，我们不能处理atm，他们使我们的测试非常嘈杂。我不希望从我们的测试中阻止每一个YellowBox警告，但如果必要的话，这也可以工作。
浏览 20提问于2019-07-17得票数 3
1回答
如何测试(使用Jasmine)当knockoutJs中的可观察变量发生变化时，是否调用预定义的函数，如compute或subscribe
例如：
self.report.subscribe(function(){
clearAll();
});
如果我更改了report observable的值，则会调用clearAll函数，但subscribe函数并未按预期执行
提前谢谢。
浏览 0提问于2014-08-18得票数 0
工作在angular5项目，我正在使用角度材料选择列表，这是不像预期的工作，输入文本搜索在顶部。
这是stackblitz的代码。
步骤:
从列表中选择“运动鞋”和"Moccasins“
用文字搜索"clo“
从输入框中删除文本。
请参阅“选择列表”，以前选择的选项会自动取消选择不应该发生的情况。
如何将先前选择的选项保留在列表中？提前谢谢。
浏览 0提问于2018-04-24得票数 3
回答已采纳
如果文件不存在并返回404，则我有一个角指令替换元素的图像src。下面是：
myApp.directive('fallBackSrc', function() {
var fallBackSrc = {
link: function postLink(scope, element, attrs) {
element.bind('error', function () {
angular.element(this).attr("src", '/images/im
浏览 6提问于2014-10-27得票数 3
回答已采纳
1回答
目前，我正在使用这个库来尝试让我的meteor应用程序()的服务器端的把手工作。
我已经让它工作了，但现在我想修复我的单元测试。我在Jasmine还是个初学者，所以希望这个问题不会太愚蠢。如果我完全走错了路，请告诉我。
目前，我正试图在一个jasmine单元测试中模拟这一行。
Handlebars.templates['ResponseToSubscribers']({dateSent: new Date()})
我知道如何模拟方法，但我不确定如何模拟数组值。
我试过这样做。
spyOn(Handlebars, 'templates').andReturn({&
浏览 3提问于2014-01-09得票数 2
我按如下方式使用exec-maven-plugin
<plugin>
<artifactId>exec-maven-plugin</artifactId>
<groupId>org.codehaus.mojo</groupId>
<version>1.6.0</version>
<executions>
<execution>
<id>npm i
浏览 5提问于2018-07-17得票数 1
1回答
我有一个类似这样的函数，我无法思考如何模拟这个用例。我被赋予了这样的函数，所以我不确定我能不能改变它，除非有一个更好的方法。
函数的测试窗口是全局的，因此不需要传入。
getWindowNamespace() {
if (!window.namespace) {
return false;
}
return window[window.namespace];
}
就像同一个窗口对象被用作两种不同的类型，它真的让我感到恶心。
测试逻辑到目前为止(只有相关的代码，这样就不能按原样运行，但我可以根据需要提供更多的信息。现在，我可以测试第一个阴性的情况，但不是最
浏览 7提问于2022-02-25得票数 0
1回答
我写了以下html文件：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script
浏览 7提问于2017-01-27得票数 0
回答已采纳
在这种人为的情况下，我有一个服务，需要一个依赖项。服务公开了一个需要调用依赖项的方法。
如果我将这个方法调用包装在它自己的函数中，那么spyOn按预期工作(MyService1)。但是，如果我直接委托该服务，那么spyOn失败(MyService2)。
我的问题是：
有人能解释一下这种行为吗？
如果我想使用spyOn，我必须将所有直接委托的方法重写为包装器，还是有办法解决这个问题？
谢谢。
describe('spyOn problem', function() {
// wraps dependency function - can spy on
浏览 3提问于2014-01-20得票数 0
我有一个复选框，它有一个( change )函数，它将变量'isSelected‘设置为更改函数的event.checked值。现在我尝试在的帮助下测试它，但是，我觉得(更改)事件没有触发，因为'isSelected‘没有改变。我还尝试对在(更改)之后触发的函数使用spyOn，但这仍然返回该函数未被调用(当前测试)。也许有人知道如何发现变化和我做错了什么。这是我的代码：
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
浏览 3提问于2017-08-01得票数 2
回答已采纳
1回答
我试图通过html测试一个按钮事件组件调用。该按钮在手动运行时工作。我可以直接测试组件。我也可以成功地测试按钮呈现，但是测试在通过html执行时看不到函数调用。
Html:
<div class="row">
<button id="homeBtn" class="btn btn-primary" [routerLink]="['home']">Home</button>
</div>
组件代码：
export class AppComponent {
浏览 4提问于2018-01-02得票数 0
1回答
不调用内部函数的预期间谍
、、、
我正在用AngularJS编写一个应用程序。我正在用业力和茉莉写单元测试我的角质服务。由于单元测试不断给我带来以下错误，所以它不像预期的那样工作：
预计间谍照片会被称为。
下面是我对bug的代码理解：
下面是我的单元测试的代码片段：
it('should process the plain clocking settings', function () {
ClockingRecordTypeFactory.getRecord('plain', 'here', null, null, null, null, null);
浏览 0提问于2019-04-25得票数 1
回答已采纳
1回答
我正在使用jest、酶、react和rxjs编写单元测试。我模仿了rxjs/ajax，如下所示。 import { ajax } from 'rxjs/ajax';
jest.mock('rxjs/ajax', () => {
return {
ajax: jest.fn().mockImplementation((args) => {
return {
subscribe: jest.fn().mockImplementation(args => {
浏览 25提问于2021-03-24得票数 0
如何通过Angular5中的服务让ParamMap与HttpClient协同工作？
组件
// importing the service, ActivatedRoute, ParamMap, switchMap, etc
public value;
constructor(private myService: MyService, private activatedRouter: ActivatedRoute) { }
ngOnInit() {
this.value = this.activatedRouter.paramMap
.switchMap((params: P
浏览 1提问于2017-12-08得票数 0
回答已采纳
1回答
您好，我正在编写单元测试用例，我正在为我的Angular 5组件使用Jasmine。在页面加载时，我调用loadscopesdata数据方法来填充html代码中的网格。下面是我的单元测试用例。
it('Ng on init', () => {
component.ngOnInit();
});
下面是我的实际组件代码。
ngOnInit() {
this.loadScopesData();
}
下面是我的loadscopedata数据函数。
loadScopesData() {
this.scopeService.getSco
浏览 1提问于2018-05-18得票数 1
2回答
我有这样的功能：
$scope.doIt = function( x, y )
{
$timeout( function ()
{
$rootScope.$broadcast( 'xxx',
{
message: xxx,
status: xxx
} );
} );
}
到目前为止，这个函数运行良好。但是在写测试的时候我遇到了一些麻烦。
describe( 'test doIt function...', function ()
{
var $ro
浏览 3提问于2014-12-24得票数 10
1回答
使用jest模拟组件方法
、、、、
假设我有以下组件：
export class ExampleComponent extends Component {
exampleMethod1 = () => {
console.log('in example 1')
}
exampleMethod2 = () => {
console.log('in example 2')
this.exampleMethod1()
}
render() {
return (
<Touchab
浏览 0提问于2017-12-11得票数 0
1回答
我一直在将测试覆盖率添加到现有代码中，最近有几次遇到了测试困难的模式。
给出一些现有的方法，例如：
public foo(): void {
SomeResource.get().then((someResource) => {
someOtherMethod(someResource);
});
}
我需要测试是否使用正确的param调用someOtherMethod。天真地，我会做这样的事情：
it("gets called", () => {
spyOn(SomeResource, "get").and.
浏览 4提问于2020-04-16得票数 0
2回答
错误:预期间谍创建已被调用
、、、、
我用 7编写单元测试用例，并得到这个错误：
错误:预期间谍创建已被调用一次。它被叫了0次。
这是我的组成部分：
export class RegistrationComponent implements OnInit {
submitRegistrationForm() {
if (this.profileForm.invalid) {
this.validateAllFields(this.profileForm);
} else {
// send a http request to save
浏览 0提问于2019-06-18得票数 3
回答已采纳
1回答
我对react中的jasmine测试是个新手，这让我抓狂。
我正在尝试测试下面的一个简单的按钮点击。但是间谍不工作了。
it('fires the clearTags handler', function() {
var handler = jasmine.createSpy();
var element = ReactTest.renderIntoDocument(
React.createElement(SomeComponent));
spyOn(element,'clearTags')
v
浏览 1提问于2015-12-04得票数 1
1回答
这是我的简单服务，它处理我的应用程序上的导航。如果用户按当前状态点击“下一步”，他将被重定向到下一页。
'use strict';
angular
.module('myAngularmodule')
.service('ButtonBarService',
function ($state, StatesConstants) {
return {
next: next
};
function next() {
switch ($state.current.name) {
浏览 0提问于2016-08-23得票数 0
我正在构建一个具有输入"file“类型元素的React组件。
export default function NavBar() {
return (
<label htmlFor='upload-image' className={classes.label}> Upload </label>
<input type='file'
id='upload-image'
onChange={ (e) => { up
浏览 5提问于2022-01-13得票数 2
回答已采纳
1回答
是否可以迁移angular1.6和angular5。
我的问题是：
不改变角1.6码和新角5码同时运行？
如何为此定义代码结构？
如何咕哝这些angular1.6和angular5代码？
所需经费：
因为我需要独立运行应用程序angular1.6和angular5。
请举一些例子来解决这个问题。
浏览 0提问于2018-01-20得票数 0
我从事Typescript的Jest单元测试，我创建了一个方法 addNumbers:() {
return 6;
} 它只是一种静态测试方法，用于测试目的。 我使用jest创建了一个单元测试 spyOn(object, 'addNumbers').mockReturnValue(6);
expect(object.addNumbers).toHaveBeenCalled(); // expect is success 单元测试运行良好，但是在检查代码覆盖率时，没有覆盖"return 6;“。 不确定丢失了什么，配置或任何其他问题。 因为一旦开始工作，就需要
浏览 39提问于2020-04-27得票数 0
2回答
使用Jasmine可以对方法执行spyOn操作，但我不清楚它什么时候会真正有用。我的理解是，单元测试不应该关注实现细节，如果方法被调用，则测试将是实现细节。
我可能想到的一个地方是监视scope.$broadcast (Angular)等，但这仍然是实现细节，不确定单元测试是否应该关心代码是如何工作的，只要它能给出预期的结果。
显然，使用spyOn有很好的理由，那么在什么地方使用它更好呢？
浏览 0提问于2015-04-13得票数 0
2回答
我正在尝试让jqueryui拖放来使用emberjs。我在这里设置了一个小提琴：，但是我似乎不能触发drop事件。mixin来自这个演示：
编辑：
如果我将jQueryUI可拖动辅助函数更改为“原始”，它将按预期工作。正如#7 中指出的，这似乎是jquery ui .clone()和ember的问题。codebrief博客文章中的safeClone方法似乎不支持
有人知道如何让它按预期工作吗？
浏览 0提问于2012-04-29得票数 4
回答已采纳
2回答
我为我的角度应用程序编写了这个测试：
it('should request confirmation before deleting & abort action if user declined', fakeAsync(() => {
spyOn(appService, 'confirm').and.returnValue(of(false));
spyOn(personService, 'delete').and.callThrough();
component.deleteEntry(testPerso
浏览 1提问于2018-09-10得票数 1
1回答
在同一个文件中的测试函数被调用
、、、、
我有两个函数，其中一个函数调用另一个函数，而另一个函数返回某个函数，但我无法让测试正常工作。
使用expect(x).toHaveBeenCalledWith(someParams);需要使用间谍，但我不知道如何监视同一文件中的函数.
错误：：期待一个间谍，但得到了功能。
用法: expect().toHaveBeenCalledWith(...arguments)
Example.ts
doSomething(word: string) {
if (word === 'hello') {
return this.somethingElse(1);
浏览 1提问于2018-08-29得票数 1
回答已采纳
1回答
我有一个相对简单的组件，但无法成功地获得一个间谍注册电话。这些电话肯定是按预期发生的，因为我黑了我自己版本的间谍，但茉莉花间谍似乎并没有像预期的那样工作。我希望这与异步性有关，因为我肯定不明白所有这些都是如何在测试框架内工作的，只是拼凑了一些例子。
在下面的示例中，当前测试正在通过，但最终的日志输出显示间谍没有检测到任何调用。
如果从代码中看不出来，这个组件由一个简单的登录页面组成。有两个输入字段(电子邮件和密码)和一个登录按钮，它触发组件的login()函数，触发(在这里模拟的)用户服务的登录函数，其值在电子邮件字段中(当前不使用密码)
import { DebugElement } fro
浏览 4提问于2017-10-03得票数 1
回答已采纳
2回答
当使用jest库的ES6类时，我很难模拟一个方法。
示例：
export default class CalculatorService {
constructor() {
// setup stuff
}
public add(num1: number, num2: number): number {
return num1 + num2;
}
}
预期的工作如下：
import CalculatorService from 'services/calculatorService';
jest.mock('services/calcu
浏览 12提问于2022-11-07得票数 0
我正在更新一个项目，从滑稽版本26到开玩笑版本27。作为更新的一部分，我不得不从setTimeout上的断言切换到jest.spyOn(window, "setTimeout")上的断言。
我想在每次测试之前对间谍进行全局定义并重新设置，如下所示：
const timeoutSpy = jest.spyOn(window, "setTimeout");
beforeEach(() => {
jest.resetAllMocks();
});
这段代码不像我预期的那样工作。对于expect(timeoutSpy).toHaveBeenCalledTi
浏览 13提问于2022-01-06得票数 0
1回答
下面是我要测试的代码。
const Component: React.FC = () => {
const handleSubmit = (action) => {
doSomethingAsynchronous()
.then(() => /* something on success */)
.catch((err) => {
// Display the error message
action();
// R
浏览 2提问于2021-06-03得票数 0
我想创建一个JavaScript Github操作，并将Jest用于测试目的。基于，我开始解析输入，给出了下面的示例代码
import { getInput } from '@actions/core';
const myActionInput = getInput('my-key', { required: true });
在开发过程中运行此代码会引发以下错误
输入所需但未提供:我的键
正如预期的那样，因为代码没有在Github操作环境中运行。但是，是否有可能为此创建测试？例如。
describe('getMyKey', () =&
浏览 6提问于2022-04-06得票数 2
回答已采纳
1回答
我正在尝试对一个应该在任何工作之前获得ContainerRef的服务进行测试，下面的方法将动态组件插入或移除到这个容器中。
我无法测试我的任何方法，因为它们需要设置ContainerRef。
this.containerRef.clear不是一个函数
但是，我不知道如何模拟或存根这个ContainerRef。
浏览 0提问于2019-06-21得票数 0
1回答
我有以下看法：
...
var TreeView = Backbone.View.extend({
el: '#org-tree',
initialize: function() {
eventBus.on("route:change", _.bind(this.triggerFilterEvent, this));
},
render: function() { ... },
foo: function() { console.log("foo"); },
trigge
浏览 0提问于2014-01-07得票数 2
回答已采纳
对于我正在实现的测试用例，我需要模拟process.cwd()函数。在测试用例中，我按如下方式实现了它：
process.cwd = jest.fn(() => '/base/dir')
当在测试用例中调用process.cwd()时，它会按预期工作。在我测试的模块中，它返回原始值。我做错了什么？
浏览 1提问于2019-04-29得票数 4
1回答
如何在同一个服务中模拟一个方法
、、、、
我有这样的服务：
var myApp = angular.module('myApp', []);
myApp.factory('myService', function() {
var a = function() {
return b();
}
function b() {
return 'foo';
}
return {
a: a
};
});
现在，我想通过模拟a();来测试b();，例如让它返回栏。我的测试会是这样的：
it('
浏览 4提问于2015-10-20得票数 3
1回答
我是一个在Angular中使用Jest进行单元测试的初学者。在我的组件中，我有this.router.navigate()方法。早些时候，我使用Jasmine来测试它。为此，我做了以下工作： import { Router } from '@angular/router'; 然后, let router:Router; 然后，在beforeEach中， router = TestBed.get(Router); 然后，在测试用例中， it('should show news intially ', () => {
const navigateSpy
浏览 13提问于2021-03-30得票数 2
我正在做一个项目(Ionic3和Angular5)。
我从外部.js文件中更改了以下输入中的值
<input [(ngModel)]="name"
(ngModelChange)="valueChange()"
id="data">
但是函数valueChange()不被调用。
我以前在Angular1中使用$scope.$apply做过这件事，但是在Angular5中我不知道如何做同样的事情。在Angular5中这样做的等效方式是什么？
浏览 0提问于2018-05-05得票数 1
1回答
需要模拟spec文件中的方法objBBB.GetResult()来处理失败场景。因为它是在AAA模块中导入的，所以无法访问和模拟所需的结果。 另外，我总是得到“成功”的结果，因为我的模拟方法没有被调用。请务必让我知道，有任何工作可以解决这个问题。 // Service code
import BBB = require('../data_layer/BBB_dl');
const objBBB: BBB.BBBDL = new BBB.BBBDL();
export default class AAA{
public async DoThings(event, call
浏览 15提问于2019-08-22得票数 0
当我导航到results组件时，ngOnInit中的服务按预期工作。然后我打开侧边菜单，导航到另一个页面，然后再次导航到结果页面。但是这次不呈现页面，而是呈现results.The ng-template。控制台上没有错误，什么都没有。ngOnInit正在工作，正在显示console.log('init')；但是服务调用没有。如果我将服务调用粘贴到构造函数或函数中，它也不能工作。我试着用和不用ngZone，什么都没有..
我需要指出的是，如果我直接在结果页面上按F5，它就会起作用。当我通过this.router.navigate(['/resultados'])
浏览 9提问于2018-02-11得票数 3
我正在学习如何使用jasmine为我的angular应用程序编写测试用例，在一个特定的场景中，我在一个组件中有一个调用其他私有函数/方法的函数，如下所示
public rPage() {
this.setData(); // private method
this.setPage(); // private method
}
我编写了测试用例来测试它，如下所示
it('should call setData from RPage', () => {
//@ts-ignore
const spy = spyOn(component,
浏览 1提问于2020-11-20得票数 0
4回答
我正在测试一个使用vue路由器来监视$route的文件组件。问题是我不能让测试既改变路由又触发观察者的功能。
测试文件：
import { createLocalVue, shallow } from 'vue-test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
const $route = {
path: '/my/path',
query
浏览 124提问于2017-12-15得票数 6
回答已采纳
如何从Angular5中的URL获取查询参数？
链接到我的网页，就像：
我想让他们为我服务..。
在Angualr1.x中，我可以从$location获得查询参数，如下所示：
var searchObject = $location.search();
在Angular5中，我可以从PlatformLocation获得它们，就像：
this.platformLocation.search
但是在文档中: PlatformLocation --‘这个类不应该由应用程序开发人员直接使用。相反，使用Location.‘
在Class Location中，我找不到任何获得查询参数的解决方案。
有人
浏览 0提问于2018-04-30得票数 1
我目前正在尝试打开和关闭一个角度材料2对话框在我的一个单元测试。开头看起来很好，但是我注意到了一个函数，它应该在结束后被调用，而且它从来没有被调用过，我认为这是因为对话框没有像我想要的那样关闭。
我要测试的代码：
openDialog() {
this.dialogRef = this.dialog.open( ConfirmationDialogComponent, {
height: '210px',
width: '335px',
disableClose: true
});
this.dialo
浏览 4提问于2017-08-03得票数 3
我正在尝试测试一个内部库，它在ajax:success事件上触发了一些JS行为。
库创建的链接如下：
<%= link_to 'click here', '/some_path', class: 'special-link', remote: true %>
在库的JS部分中有事件绑定代码，是我希望通过它对DOM的影响进行黑箱测试的部分。
$(document).on 'ajax:success', '.special-link', (e, data, status, xhr) ->
# Co
浏览 4提问于2016-04-12得票数 10
I am testing a controller that uses a service that returns a promise. I need to resolve promise. I am using Jasmine 2.
Here is Spec code
beforeEach(inject(function ($controller, $rootScope, _myService_, _$q_, _$rootScope_, _$httpBackend_, $http) {
scope = $rootScope.$new(
浏览 7提问于2018-12-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
