如何与约翰爸爸的风格，因果报应，和Jasmine数据服务测试角的应用程序？ [英] How to test angular app with John Papa style, Karma, and Jasmine with data service?
问题描述
由于某些原因，甚至继乔希在帖子回复中提供的示例<一个href=\"http://stackoverflow.com/questions/28456747/how-to-test-john-papa-vm-model-unit-testing-with-jasmine\">How与茉莉测试约翰爸爸vm.model单元测试？，我不能让我的控制器的价值观在试验区露面。我想这是因为数据服务，但它是我们的SPA的必要组成部分，因为用的就是约翰爸爸的造型。
下面是一个code段举行code和展示我收到的错误。
（函数（）{\r
使用严格的;\r
angular.module（'门票'）\r
。服务（DataService的DataService的）\r
\r
/ * * @ngInject /\r
。DataService的$喷出= [$ rootScope，$ Q];\r
\r
DataService的功能（$ rootScope，$ Q）{\r
VAR VM =这一点;\r
vm.nameDefault =姓名 - 请验证;\r
vm.name = vm.nameDefault;\r
};\r
\r
}）（）;\r
\r
（函数（）{\r
使用严格的;\r
angular.module（'门票'）\r
.controller（HomeController中'，HomeController的）;\r
\r
/ * * @ngInject /\r
。HomeController中注入$ ='$范围，$位置，DataService的'];\r
\r
功能的HomeController（$范围，$位置的DataService）{\r
VAR VM =这一点;\r
vm.name = DataService.name;\r
vm.nameDefault = DataService.nameDefault;\r
};\r
\r
}）（）; \r
＆LT;链接HREF =https://cdnjs.cloudflare.com/ajax /libs/jasmine/2.1.0/jasmine.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine-html.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/boot.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js\"></script>\r
\r
＆LT;脚本＆GT;\r
使用严格的;\r
\r
描述（控制器：HomeController中'，函数（）{\r
\r
beforeEach（模块（'票'））;\r
\r
VAR控制器，$位置，DataService的;\r
变种测试= 0;\r
\r
beforeEach（注（函数（$控制器，_ $位置指定：，_DataService_）{\r
$位置= _ $位置指定：;\r
DataService的= _DataService_;\r
范围= {};\r
\r
控制器= $控制器（HomeController中'，{}）;\r
}））;\r
\r
VAR控制器，适用范围，$位置，DataService的;\r
变种测试= 0;\r
\r
/ * //这个版本的作品，直到我试图验证控制器的名称和nameDefault \\\\\r
*\r
* beforeEach（注（函数（$ rootScope，$控制器_ $位置指定：，_DataService_）{\r
* $位置= _ $位置指定：;\r
* DataService的= _DataService_;\r
*范围= $ rootScope $新的（）。\r
*\r
*控制器=功能（）{\r
*回报$控制器（HomeController中'，{}）;\r
*};\r
*}））;\r
* /\r
\r
afterEach（函数（）{\r
测试+ = 1;\r
}）;\r
\r
描述（局部变量，函数（）{\r
\r
描述（加载所有相关变量的数据模型和价值观，函数（）{\r
它（'应该被实例化'，函数（）{\r
期待（DataService的）.toBeDefined（）;\r
}）;\r
它（'应该包含一个名认证前的初始值'，函数（）{\r
期待（DataService.nameDefault）.toBe（'名称 - 请验证'）;\r
期待（DataService.name）.toEqual（DataService.nameDefault）;\r
}）;\r
}）;\r
描述（应装入数据模型值控制器，并更新数据模型值更新'，函数（）{\r
它（'应该被实例化'，函数（）{\r
期待（控制器）.toBeDefined（）;\r
}）\r
它（'不应该有一个可以从这里到达一个虚拟机属性'，函数（）{\r
期待（controller.vm）.toBeUndefined（）;\r
}）\r
它（'应该包含一个名身份验证之前，无论是从数据模型的初始值'，函数（）{\r
期待（controller.name）.toBe（DataService.name）;\r
期待（controller.nameDefault）.toBe（DataService.nameDefault）;\r
}）;\r
}）;\r
}）;\r
\r
它（'应该有测试，函数（）{\r
期待（测试）.toBeGreaterThan（0）;\r
}）;\r
}）;\r
＆LT; / SCRIPT＆GT; \r
我的code，当我使用它在我们本土的环境，一起验证，一切数据服务已正确实例（并使用注释掉beforeEach块），但使用的示例中的问题造型上面引用抛出甚至约不被实例化范围以上的错误，即使它是相同的（与加入的依赖），为这一问题
我希望答案是类似的（目前没有答案）的问题：<一href=\"http://stackoverflow.com/questions/31620332/how-to-test-john-papa-vm-model-controllers-and-factories-unit-testing-with-jasmi\">How测试约翰爸爸vm.model控制器和工厂单元测试茉莉花？
我AP preciate任何帮助你们提供。
-C§
修改尽管我已经回答了，并有成功，我很想得到为什么下面工作的执行情况和其他两个尝试没有一些反馈。这是使用噶版本0.13.8（最新的），茉莉2.1.0和1.4.0角
我知道这好像我想出了解决方案pretty很快，但我一直在这个摔跤，因为周五下午（8/7），并尝试了十多种不同格式都没有成功。
同样，我欢迎你的评论和投票，这样我可以更好地理解为什么下面的作品版本和另一些则没有，特别是因为我还是很绿色AngularJS（1个月，现在）。
再次感谢，
-C§
我现在明白了。刚看<一个href=\"http://stackoverflow.com/questions/22869822/globally-mock-object-in-angularjs-for-jasmine-karma-testing?rq=1\">Globally在angularjs茉莉花/人缘测试以及我的大脑模拟对象点击。
在测试开始时的声明和beforeEach块需要看起来像这样：
VAR控制器，适用范围，$位置，DataService的;
变种测试= 0; beforeEach（注（函数（$ rootScope，$控制器_ $位置指定：，_DataService_）{
$位置= _ $位置指定：;
DataService的= _DataService_;
范围= $ rootScope $新的（）。 控制器= $控制器（HomeController中'，{
$适用范围：适用范围
}）;
}））;
我觉得既然我已经与我们最初的设置弄乱一点也不为过（从开始的模板SPA），我需要一个奇怪的实施，使这一切的工作。现在我越来越成功的测试贯穿：
![在这里输入的形象描述](\"http://i.stack.imgur.com/N8A4c.png\")
我希望这可以帮助其他人有类似的问题。
For some reason, even following the example provided by Josh in the post reply How to test John papa vm.model unit testing with jasmine?, I can't get my controller's values to show up in the testing area. I think it's because of the data service, but it is a necessary component for our SPA, as is using John Papa's styling.
Below is a code snippet to hold the code and display the errors I'm receiving.
(function() {
'use strict';
angular.module('tickets')
.service("DataService", DataService)
/* @ngInject */
DataService.$inject = ["$rootScope", "$q"];
function DataService($rootScope, $q) {
var vm = this;
vm.nameDefault = "Name -- Please Authenticate";
vm.name = vm.nameDefault;
};
})();
(function() {
'use strict';
angular.module('tickets')
.controller('HomeController', HomeController);
/* @ngInject */
HomeController.$inject = ['$scope', '$location', 'DataService'];
function HomeController($scope, $location, DataService) {
var vm = this;
vm.name = DataService.name;
vm.nameDefault = DataService.nameDefault;
};
})();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.1.0/boot.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular-mocks.js"></script>
<script>
'use strict';
describe('Controller: HomeController', function() {
beforeEach(module('tickets'));
var controller, $location, DataService;
var tests = 0;
beforeEach(inject(function($controller, _$location_, _DataService_) {
$location = _$location_;
DataService = _DataService_;
scope = {};
controller = $controller('HomeController', {});
}));
var controller, scope, $location, DataService;
var tests = 0;
/* // This version works up until I try to verify the name and nameDefault in controller \\
*
* beforeEach(inject(function ($rootScope, $controller, _$location_, _DataService_) {
* $location = _$location_;
* DataService = _DataService_;
* scope = $rootScope.$new();
*
* controller = function () {
* return $controller('HomeController', {});
* };
* }));
*/
afterEach(function() {
tests += 1;
});
describe('local variables', function() {
describe('load the data model and values for all pertinent variables', function() {
it('should be instantiated', function() {
expect(DataService).toBeDefined();
});
it('should contain a name with an initial value before authentication', function() {
expect(DataService.nameDefault).toBe('Name -- Please Authenticate');
expect(DataService.name).toEqual(DataService.nameDefault);
});
});
describe('should load the controller with data model values, and update as data model values update', function() {
it('should be instantiated', function() {
expect(controller).toBeDefined();
})
it('should not have a vm attribute that can be reached from here', function() {
expect(controller.vm).toBeUndefined();
})
it('should contain a name with an initial value before authentication, both from the data model', function() {
expect(controller.name).toBe(DataService.name);
expect(controller.nameDefault).toBe(DataService.nameDefault);
});
});
});
it('should have tests', function() {
expect(tests).toBeGreaterThan(0);
});
});
</script>
My code, when I use it in our native environment, works to verify that everything in the data service has been instantiated properly (and using the commented out beforeEach block), but the styling using the example in the question referenced above throws even more errors about the scope not being instantiated, even though it is the same (with added dependencies) as that question.
I would expect the answer to be similar to the (currently unanswered) question: How to test John papa vm.model controllers and factories unit testing with jasmine?
I appreciate any help you guys offer.
-C§
Edit Even though I've answered and have success, I would love to get some feedback on why the implementation below works and the other two attempts do not. This is using Karma version 0.13.8 (latest), jasmine 2.1.0, and Angular 1.4.0.
I know it seems like I came up with the solution pretty quickly, but I've been wrestling with this since Friday afternoon (8/7) and have tried a dozen different formats without success.
Again, I welcome your comments and votes so that I can better understand why the version below works and the others have not, especially since I am still very green to AngularJS (1 month in, now).
Thanks again,
-C§
I get it now. Just had to look at Globally mock object in angularjs for jasmine/karma testing and my brain clicked.
The declaration and beforeEach block in the beginning of the test needs to look like this:
var controller, scope, $location, DataService;
var tests = 0;
beforeEach(inject(function ($rootScope, $controller, _$location_, _DataService_) {
$location = _$location_;
DataService = _DataService_;
scope = $rootScope.$new();
controller = $controller('HomeController', {
$scope: scope
});
}));
I think since I've messed with our initial setup a little too much (started the SPA from a template), I needed a strange implementation to make it all work. I'm now getting successful tests throughout:
I hope this helps someone else with similar issues.
这篇关于如何与约翰爸爸的风格，因果报应，和Jasmine数据服务测试角的应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
