单元测试辅助路由控制器

Question

目前我正在为一项学校作业开发一个简单的披萨网店。我在 Java 和 C# 方面经验丰富，但 AngularJS 对我来说是新手。

我创建了一个单页应用程序，其中包含 1 个主订单控制器（索引包含总订单的概览）和另一个菜单控制器，用于将 .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...
      });

    });
  });

但是，如果我尝试以完全相同的方式为菜单控制器编写一个简单的单元测试，它说 scope/controller 未定义 and/or 返回空值，导致以下错误留言；

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 请求。如果这是无意的，您可能需要更改其中任何一个值

单元测试辅助路由控制器

Unit-testing secondary routing controller

unit-testing

controller

angularjs

angular-routing

karma-runner