Question

我制作了一个Angular项目 - 一个简单的音乐库应用程序。它允许您显示，编辑或删除有关相册的数据。与服务器的通信是通过API进行的。目前，该项目工作得很好，但我需要编写单元测试。问题是，在我的案例中，我无法找到关于如何做到这一点的明确教程。

让我为您提供我的代码。

albums.controller.js：

'use strict';

angular.module('albums').controller('AlbumsController', ['AlbumService', '$location', function (AlbumService, $location) {
    var vm = this;

    AlbumService.getData().then(function successCallback(data) {
        vm.albums = data;
    }, function errorCallback(data) {
        console.log('Error!');
        console.log(data);
    });
}]);

albumService.service.js：

'use strict';

angular.module('core').service('AlbumService', function ($http) {

    this.getData = function () {
        var promise = $http.get('/albums/list')
            .then(function successCallback(r) {
                return r.data;
            }, function errorCallback(r) {
                return r.data;
            });
        return promise;
    }
});

albums.component.spec.js：

'use strict';

describe('albums', function () {

    beforeEach(module('albums'));

    describe('AlbumsController', function () {
        var $httpBackend, ctrl, serverResponse;

        serverResponse = {
            "0": {
                "title": "Cool Album",
                "artist": "Unknown",
                "country": "USA",
                "company": "UMG",
                "price": 7.9,
                "year": 2005,
                "id": 0
            },
            "1": {
                "title": "Bright Vibes",
                "artist": "Jonnie Rush",
                "country": "UK",
                "company": "Sunny Records",
                "price": 8.99,
                "year": 2011,
                "id": 1
            }
        };

        beforeEach(inject(function ($componentController, _$httpBackend_) {
            $httpBackend = _$httpBackend_;
            $httpBackend.expectGET('/albums/list')
                .respond(serverResponse);

            ctrl = $componentController('albums');
        }));

        it('should create a `albums` property with 2 albums fetched with `$http`', function () {
            jasmine.addCustomEqualityTester(angular.equals);

            expect(ctrl.albums).toEqual([]);

            $httpBackend.flush();
            expect(ctrl.albums).toEqual(serverResponse);
        });
    });

});

但业力输出是下一个：

Expected undefined to equal [  ].
        src/tests/albums.component.spec.js:42:40
        loaded@http://localhost:9999/context.js:162:17
        Error: No pending request to flush ! in src/html/bower_components/angular-mocks/angular-mocks.js (line 1846)
        flush@src/html/bower_components/angular-mocks/angular-mocks.js:1846:83
        src/tests/albums.component.spec.js:44:31
        loaded@http://localhost:9999/context.js:162:17
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.047 secs / 0.017 secs)

我试着弄清楚自己的问题是什么，花了整整一天的时间。但坦率地说我是一个新手进行测试，所以我仍然不清楚如何让它工作。如果你帮助我会很棒。

使用$ httpBackend为Angularjs控制器测试Jasmine

0 个答案: