Модульное тестирование контроллера вторичной маршрутизации - PullRequest
Новая
       9

Модульное тестирование контроллера вторичной маршрутизации

0 голосов
/ 17 ноября 2018

В настоящее время я разрабатываю простой интернет-магазин пиццы для школьного задания. Я имею опыт работы с 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...
      });

    });
  });

Однако, если я пытаюсь написать простой модульный тест для контроллера меню точно таким же образом, он говорит, что область действия / контроллер не определена и / или возвращает мне нули, что приводит к следующему сообщению об ошибке; 

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 недель, но все безрезультатно ...

Я попытался изменить юнит-тесты, контроллеры, интерфейс, маршрутизацию, инъекции зависимостей, используя контроллер вместо области видимости и т. Д. И т. Д. ... и я ПОЛНОСТЬЮ застрял!

1 Ответ

0 голосов
/ 17 ноября 2018

В menuCtrl.js , добавить: 

$scope.Menu = [];

до запроса GET, то есть после 

$scope.test="123";

Тест ожидает, что переменная области действия Menu до существует , и поскольку он не инициализируется до тех пор, пока не будет получен запрос GET, тест не будет пройден.

Также примечание, В тесте вы ожидаете GET-запрос к URI "../Models/menu.json" (в $httpBackend.expectGET()) и делаете GET-запрос к URI "Models/menu.json". Если это непреднамеренно, вам может потребоваться изменить любое из этих значений

...