单元测试 – 单元测试AngularJS服务

前端之家收集整理的这篇文章主要介绍了单元测试 – 单元测试AngularJS服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找出如何测试我的AngularJS服务,它依赖于$http.

当使用$httpBackend来模拟AJAX post(whenPOST)时,你发布的对象是否决定响应?

这是我的服务和我的测试例如:

(function () {
    "use strict"

    var app = angular.module('cs');

    app.service('PlateCheckService',['$http',function ($http) {
        return {
            checkPlate: function (plateNumber) {
                return $http.post('PlateCheck/Index',{
                    plateNumber: plateNumber
                }).then(function (response) {
                    return {
                        message: response.data.VehicleAtl === null ? 'Clean' : 'Hot',alertClass: response.data.VehicleAtl === null ? 'alert-success' : 'alert-danger'
                    }
                });
            }
        }
    }]);

}());

测试

/// <reference path="../libs/angular-1.0.8/angular.js" />
/// <reference path="../libs/angular-1.0.8/angular-mocks.js" />
/// <reference path="../libs/jasmine-1.3.0/jasmine.js" />
/// <reference path="../app.js" />
/// <reference path="../services/plate-check-service.js" />

describe('Plate Check Service',function () {
    var httpBackend,service;

    beforeEach(function () {
        module('cs');

        inject(function ($httpBackend,PlateCheckService) {
            httpBackend = $httpBackend;
            httpBackend.whenPOST('PlateCheck/Index',{ plateNumber: '123456' }).respond({
                response: {
                    message: 'Clean',alertClass: 'alert-success'
                }
            });
            httpBackend.whenPOST('PlateCheck/Index',{ plateNumber: '123456789' }).respond({
                response: {
                    message: 'Hot',alertClass: 'alert-danger'
                }
            });

            service = PlateCheckService;
        });
    });

    it('Should return a clean plate.',function () {
        var result;

        service.checkPlate('123456').then(function (response) {
            result = response;
        });

        httpBackend.flush();
        expect(result.message).toBe('Clean');
        expect(result.alertClass).toBe('alert-success');
    });
});

检测结果

Test 'Plate Check Service:Should return a clean plate.' Failed
    Expected 'Hot' to be 'Clean'.
    Expected 'alert-danger' to be 'alert-success'.
in D:\Code\Scripts\angular\specs\plate-check-service-specs.js (line 35)

0 passed,1 Failed,1 total (chutzpah).

========== Total Tests: 0 passed,1 total ==========

看起来它没有考虑到我正在传递给服务器的服务器的plateNumber.

我本来会期待这个测试通过.

这有任何意义吗?

你正在使用一个而不是期望. $httpBackend可以以两种不同的模式运行.从 the docs

There are two ways to specify what test data should be returned as
http responses by the mock backend when the code under test makes http
requests:

  • $httpBackend.expect – specifies a request expectation
  • $httpBackend.when – specifies a backend definition

Request Expectations vs Backend Definitions Request expectations provide a way to make assertions about requests made by the
application and to define responses for those requests. The test will
fail if the expected requests are not made or they are made in the
wrong order.

Backend definitions allow you to define a fake backend for your
application which doesn’t assert if a particular request was made or
not,it just returns a trained response if a request is made. The test
will pass whether or not the request gets made during testing.

如果您将设置更改为使用expectPOST,则模拟程序将考虑请求.

希望这可以帮助.

猜你在找的Angularjs相关文章