目前我正在为学校作业开发一个简单的披萨网店。我在Java&C#，但AngularJS对我来说是新的。
我创建了一个单页应用程序，其中有一个主订单控制器(索引包含总订单的概述(和另一个菜单控制器，用于将.JSON菜单加载到部分视图中。
订单控制器在索引中设置如下：；
index.html
<html ng-app="pizzaApp" ng-controller="orderCtrl">
<head>
<link rel="stylesheet" href="CSS/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
<script src="Apps/pizzaApp.js"></script>
<script src="Controllers/menuCtrl.js"></script>
<script src="Controllers/orderCtrl.js"></script>
</head>
并且菜单控制器在应用程序的路由中设置如下；
pizzaApp.js
var app = angular.module("pizzaApp", ["ngRoute"]);
// View routing
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'Views/main.html'
})
.when('/pizzas', {
templateUrl: 'Views/pizzas.html',
controller: 'menuCtrl'
})
.when('/pizzas/:param', {
templateUrl: 'Views/pizzaInfo.html',
controller: 'menuCtrl'
})
.when('/orders', {
templateUrl: 'Views/orders.html',
})
});
我设法为订单控制器编写了一个工作(并通过(的单元测试，如下所示；
orderCtrl.spec.js
describe('Controllers', function() {
beforeEach(module('pizzaApp'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe('orderCtrl Test', function() {
var $scope, controller;
beforeEach(function() {
$scope = {};
controller = $controller('orderCtrl', { $scope: $scope });
});
it('orderCtrl.addPizza methode', function() {
//code...
});
it('orderCtrl.clearList methode', function() {
//code...
});
});
});
然而，如果我试图以完全相同的方式为菜单控制器编写一个简单的单元测试，它会说作用域/控制器未定义和/或返回null，从而导致以下错误消息；
Expected null to equal [ ].
at UserContext.<anonymous> (C:/Users/Ken/Git repositories/angular-phonecat/app/practicum/Unit_tests/menuCtrl.spec.js:88:34)
Error: Unexpected request: GET Models/menu.json
Expected GET ../Models/menu.json
菜单Ctrl.spec.js
describe('menuCtrl Tests', function() {
beforeEach(module('pizzaApp'));
var $controller, $httpBackend;
beforeEach(inject(function(_$controller_, _$httpBackend_){
$controller = _$controller_;
$httpBackend = _$httpBackend_;
$httpBackend.expectGET("../Models/menu.json").respond([{name: 'Margaritha'}, {name: 'Shoarma'}, {name: 'Supreme'}]);
}));
describe('menuCtrl Tests', function() {
var $scope, controller;
beforeEach(function() {
$scope = {};
controller = $controller('menuCtrl', { $scope: $scope});
});
it('should create a `menu` property with 3 pizzas with `$httpBackend`', function() {
jasmine.addCustomEqualityTester(angular.equals);
expect($scope.Menu).toEqual([]);
$httpBackend.flush();
expect($scope.Menu).toEqual([{name: 'Margaritha'}, {name: 'Shoarma'}, {name: 'Supreme'}]);
});
});
});
menuCtrl.js
app.controller('menuCtrl', function ($scope, $http, $routeParams) {
$scope.param = $routeParams.param; //URL Parameter (.../index.html#!/pizzas/#)
$scope.test="123";
//Menu array inladen vanuit .JSON
$http.get('Models/menu.json')
.then(function (menu) {
$scope.Menu = menu.data;
});
});
我已经阅读了f*cking手册，在谷歌上搜索了很多小时，阅读了stack上所有类似的问题，我已经尝试解决了大约两周，但都无济于事。。。
我尝试过更改单元测试、控制器、前端、路由、依赖注入、使用控制器而不是范围等……但我完全被卡住了！
在菜单Ctrl.js中，添加：
$scope.Menu = [];
在GET请求之前，即之后
$scope.test="123";
该测试需要一个作用域变量Menu到exist，并且由于它直到GET请求之后才初始化，因此该测试未通过。
还有一个旁注，在测试中，您期望对URI"../Models/menu.json"(在$httpBackend.expectGET()中(发出GET请求，并对URI"Models/menu.json"发出GET请求。如果这是无意的，您可能需要更改中的任何一个值