javascript - ngMock 在预期请求时提示意外请求

标签 javascript angularjs unit-testing angularjs-ngmock

我的 ng 应用程序工作正常,但我正在尝试为我的 Controller 编写 ngMock 测试;我基本上是按照 Angular 网站上的示例进行操作的:https://docs.angularjs.org/api/ngMock/service/ $httpBackend

我遇到的问题是,即使请求是预期的,它也会提示意外的请求。

PhantomJS 1.9.8 (Windows 8 0.0.0) NotificationsController should fetch notification list FAILED

Error: Unexpected request: GET Not valid for testsapi/AspNetController/AspNetAction Expected GET api/AspNetController/AspNetAction

我不明白的是,在错误行上,为什么在我的服务网址之前附加了“测试”一词? 我认为它应该发送到“api/AspNetController/AspNetAction” 我在这里做错了什么。我通过 google 找不到其他人和我遇到同样问题的人。

Edit: I noticed that, if i remove the sendRequest portion from my controller, and have the unit test log my request object in console, i see the following json.

{  
   "method":"GET",
   "url":"Not valid for testsapi/AspNetController/AspNetAction",
   "headers":{  
      "Content-Type":"application/json"
   }
}

这是 Controller 代码

angular.module('MainModule')
    .controller('NotificationsController', ['$scope', '$location', '$timeout', 'dataService',
        function ($scope, $location, $timeout, dataService) {
            //createRequest returns a request object
            var fetchNotificationsRequest = dataService.createRequest('GET', 'api/AspNetController/AspNetAction', null);
            //sendRequest sends the request object using $http
            var fetchNotificationsPromise = dataService.sendRequest(fetchNotificationsRequest);
            fetchNotificationsPromise.then(function (data) {
                //do something with data.
            }, function (error) {
                alert("Unable to fetch notifications.");
            });
    }]
);

测试代码

describe('NotificationsController', function () {
    beforeEach(module('MainModule'));
    beforeEach(module('DataModule')); //for data service

    var $httpBackend, $scope, $location, $timeout, dataService;

    beforeEach(inject(function ($injector) {

        $httpBackend = $injector.get('$httpBackend');

        $scope = $injector.get('$rootScope');
        $location = $injector.get('$location');
        $timeout = $injector.get('$timeout');
        dataService = $injector.get('dataService');

        var $controller = $injector.get('$controller');

        createController = function () {
            return $controller('NotificationsController', {
                '$scope': $scope,
                '$location': $location,
                '$timeout': $timeout,
                'dataService': dataService,
            });
        };
    }));

    afterEach(function () {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });

    it('should fetch notification list', function () {
        $httpBackend.expectGET('api/AspNetController/AspNetAction');        //this is where things go wrong
        var controller = createController();

        $httpBackend.flush();
    });

});

数据服务代码

    service.createRequest = function(method, service, data) {
        var req = {
            method: method, //GET or POST
            url: someInjectedConstant.baseUrl + service,
            headers: {
                'Content-Type': 'application/json'
            }
        }

        if (data != null) {
            req.data = data;
        }

        return req;
    }

    service.sendRequest = function (req) {
        return $q(function (resolve, reject) {
            $http(req).then(function successCallback(response) {
                console.info("Incoming response: " + req.url);
                console.info("Status: " + response.status);
                console.info(JSON.stringify(response));

                if (response.status >= 200 && response.status < 300) {
                    resolve(response.data);
                } else {
                    reject(response);
                }
            }, function failCallback(response) {
                console.info("Incoming response: " + req.url);
                console.info("Error Status: " + response.status);
                console.info(JSON.stringify(response));

                reject(response);
            });
        });
    }

ANSWER:

since dataService created the finalized webapi url by someInjectedConstant.baseUrl + whatever_relative_url passed in from controller, In the test that I am writting, I will have to inject someInjectedConstant and

$httpBackend.expectGET(someInjectedConstant.baseUrl + relativeUrl)

instead of just doing a $httpBackend.expectGET(relativeUrl)

最佳答案

显然对测试无效在代码中的某处被添加到您的网址前面。它也没有添加硬编码域(请参阅下面的注释)。检查所有代码以及测试管道中可能将其添加到 URL 的任何其他部分。

关于您的代码的几点:

  • 避免在代码中对域名进行硬编码(我发现您已在更新的答案中修复了此问题)
  • 也许someInjectedConstant可以更明确地命名
  • 您无需使用 $q 包装 $http,因此 service.sendRequest 可以是:

    service.sendRequest = function (req) {
        $http(req).then(function (response) { // no need to name the function unless you want to call another function with all success/error code in defined elsewhere
            console.info("Incoming response: " + req.url);
            console.info("Status: " + response.status);
            console.info(JSON.stringify(response));
            return response.data; // angular treats only 2xx codes as success
        }, function(error) {
            console.info("Incoming response: " + req.url);
            console.info("Error Status: " + response.status);
            console.info(JSON.stringify(response));
        });
    }
    

关于javascript - ngMock 在预期请求时提示意外请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33877337/

相关文章:

javascript - iOS 8.3 Mobile Safari 禁用表情符号渲染

javascript - 如何在 Istanbul 尔编写 lambda 单元测试?

javascript - $interval 不适用于回调函数,angular js

angularjs - 在 Angular Dart 中将数据绑定(bind)到 map

java - Junit集成测试

javascript - 如何在不需要运行浏览器或服务器的情况下在 Maven 中运行 javascript 单元测试?

javascript - 使用 Javascript 的 XML 显示未显示在 html div 上

javascript - 强制元素为 :hover with JavaScript when dragging an element over it. 否 jQuery

angularjs - AngularJS 与 PassportJS 组合时的 CORS 问题

c# - 如何填充 OpenFileDialog.ShowDialog 方法