Question

目前，我正在为学校作业开发一个简单的比萨网上商店。我有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

menuCtrl.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手册，在Google上搜索了很多小时，在堆栈上阅读了所有类似的问题，并且我一直试图解决这一问题，总计约2周，但无济于事...

我试图更改单元测试，控制器，前端，路由，依赖项注入，使用控制器而不是范围等。。。。。。。。。

Answer 1

在 menuCtrl.js 中，添加：

$scope.Menu = [];

在GET请求之前，即在

之后

$scope.test="123";

该测试期望范围变量Menu为存在，并且由于直到GET请求之后它才被初始化，因此该测试未通过。

还有一个注意事项，在测试中，您期望对URI "../Models/menu.json"（在$httpBackend.expectGET()中的GET请求，并对URI "Models/menu.json"进行GET请求。如果这是无意的，则可能需要更改其中两个值

单元测试辅助路由控制器

1 个答案: