AngualrJS和Karma

编程入门 行业动态 更新时间:2024-10-22 20:35:13
本文介绍了AngualrJS和Karma-如何为工厂编写单元测试?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我正在编写一个简单的AngularJS 1.x Web应用程序.

I am writing a simple AngularJS 1.x web app.

我有一个模块:

main.js:

var app = angular.module('app', []);

factory.js

factory.js

app.factory('DataFactory', function(){ var DataService = {}; DataService.something = function() { return 5; }; return DataService; });

controller.js

controller.js

app.controller('DataController', function ($scope, DataFactory) { $scope.searchText = null; $scope.results = DataFactory.something(); });

index.html:

index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="ajax.googleapis/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </script> </head> <body ng-app="app" ng-controller="DataController"> <script src="app.js"></script> <script src="factory.js"></script> <script src="controller.js"></script> </body> </html>

测试文件:

describe('Data Factory Test', function() { var Factory; beforeEach(function() { angular.module('app'); }); beforeEach(inject(function() { var $injector = angular.injector(['app']); Factory = $injector.get('DataFactory'); })); it('is very true', function(){ expect(Factory).toBeDefined(); // var output = Factory.something(); // expect(output).toEqual(5); }); });

karma.conf.js:

karma.conf.js:

frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ 'node_modules/angular/angular.js', 'node_modules/angular-mocks/angular-mocks.js', 'app.js', 'factory.js', 'controller.js', 'test/*.js' ]

我该如何编写单元测试来检查工厂是否存在,并检查退货情况?

How do I write a unit test to check if the factory exists, and to check the return of something?

运行业力启动时,我不断收到错误消息: 错误:[$ injector:modulerr]由于以下原因,无法实例化模块应用程序: 错误:[$ injector:unpr]未知提供程序:$ controllerProvider

I keep getting an error when i run karma start: Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $controllerProvider

我开始工作了.在有工厂和没有工厂的情况下,我该如何为控制器编写单元测试?

I got it working. How would I write the unit test for the controller with and without a factory?

推荐答案

第一部分显示了如何测试服务/工厂. 第二部分展示了控制器测试的两种方式

First part shows how service / factory can be tested. Second part show two ways of controller testing

  • 我们只是希望$ scope中的某些变量已更改
  • 我们希望某些服务/工厂已被呼叫

也许所有这些类型的测试都能满足我们的所有需求.

Probably all those kind of tests covers all our needs.

angular.module('app', []).factory('DataFactory', function() { var DataService = {}; DataService.something = function() { return 5; }; return DataService; }).controller('DataController', function($scope, DataFactory) { $scope.searchText = null; $scope.results = DataFactory.something(); }); describe('Data Factory Test', function() { var Factory; beforeEach(module('app')); beforeEach(inject(function(_DataFactory_) { Factory = _DataFactory_ })); it('is very true', function() { expect(Factory).toBeDefined(); var output = Factory.something(); expect(output).toEqual(5); }); }); describe('DataController ', function() { var $scope, instantiateController, DataFactory beforeEach(module('app')); beforeEach(inject(function($rootScope, $controller, _DataFactory_) { $scope = $rootScope.$new() DataFactory = _DataFactory_ instantiateController = function() { $controller('DataController', { $scope: $scope, DataFactory: DataFactory }) } })) // It shows that controller chenges $scope.results it('Calculates results', function() { expect($scope.results).toBe(undefined) instantiateController() expect($scope.results).toBe(5) }) // It shows that DataFactory was called it('Calls `DataFactory.something`', function() { spyOn(DataFactory, 'something'); instantiateController() expect(DataFactory.something).toHaveBeenCalled() }) });

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" /> <script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script> <script src="//ajax.googleapis/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="//ajax.googleapis/ajax/libs/angularjs/1.5.0/angular-mocks.js"></script>

更多推荐

AngualrJS和Karma

本文发布于:2023-11-15 13:51:04,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1595010.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:AngualrJS   Karma

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!