Angular에서 $resource 서비스 테스트JS

Angular에서 $resource 서비스 테스트JS

테스트 가능한 방법으로 서비스를 정확하게 조롱하는 방법을 잘 모르기 때문에 각도 어플리케이션에 대한 단위 테스트를 시작하려고 합니다.
REST 콜을 조롱할 방법이 없을까?그렇지 않으면 시험에서는 서비스 내의 모든 것을 반영해야 할 것 같지만, 저는 작문 테스트에 익숙하지 않기 때문에 아마 이렇게 해야 할 것 같습니다.어떤 도움이라도 주시면 감사하겠습니다.

서비스 내용은 다음과 같습니다.

angular.module('resources.users', ['ngResource'])
.factory('User', function($resource) {
   var resource = $resource('/api/index.php/users/:username', {}, {
      'update': {method: 'PUT'}
   });

   resource.getUser = function(username, successCb) {
      return resource.query({username: username}, successCb);
   };

   return resource;
});

지금까지의 테스트 내용은 다음과 같습니다.

describe('User', function() {
    var mockUserResource;
    beforeEach(module('resources.users'));
    beforeEach(function() {
        mockUserResource = sinon.stub({
            getUser: function(username) {
                mockUserResource.query({username: username});
            },
            query: function() {}
        });
        module(function($provide) {
            $provide.value('User', mockUserResource);
        })
   });
   describe('getUser', function() {
      it('should call getUser with username', inject(function(User) {
          User.getUser('test');
          expect(mockUserResource.query.args[0][0]).toEqual({username: 'test'});
      }));
   })
});

ngResource의 요청을 다음과 같이 조롱할 수 있습니다.

describe('User', function () {
    var mockUserResource, $httpBackend;
    beforeEach(angular.mock.module('myApp'));

    beforeEach(function () {
        angular.mock.inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            mockUserResource = $injector.get('User');
        })
    });

    describe('getUser', function () {
        it('should call getUser with username', inject(function (User) {
            $httpBackend.expectGET('/api/index.php/users/test')
                .respond([{
                username: 'test'
            }]);

            var result = mockUserResource.getUser('test');

            $httpBackend.flush();

            expect(result[0].username).toEqual('test');
        }));

    });
});

Demo

zsong의 답변은 이해에 큰 도움이 되었지만, 그 방법에 대해 자세히 설명하겠습니다.편집될 경우에 대비하여 코드를 다시 여기에 나열합니다.

describe('User', function () {
    var mockUserResource, $httpBackend;
    beforeEach(angular.mock.module('myApp'));

    beforeEach(function () {
        angular.mock.inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            mockUserResource = $injector.get('User');
        })
    });

    describe('getUser', function () {
        it('should call getUser with username', inject(function (User) {
            $httpBackend.expectGET('/api/index.php/users/test')
                .respond([{
                username: 'test'
            }]);

            var result = mockUserResource.getUser('test');

            $httpBackend.flush();

            expect(result[0].username).toEqual('test');
        }));

    });
});

이게 무슨 일이야?

1

beforeEach(angular.mock.module('myApp'));

Angular 인젝터($injector 및 )에, 에 정의되어 있는 것을 주입하도록 지시합니다.myApp모듈.의존 모듈을 사용하지 않고 모듈 의존성을 정의하는 것으로 간주할 수 있습니다.에 정의되어 있는 것과 비교합니다.myApp예를 들어, 컨트롤러에 모듈을 삽입할 수 있습니다.angular.module('myOtherApp', ['myApp'])모듈.

2

beforeEach(function () {
    angular.mock.inject(function ($injector) {
        $httpBackend = $injector.get('$httpBackend');
        mockUserResource = $injector.get('User');
    })
});

각 사양 전에function ($injector)종속성이 주입된 함수입니다.이 경우 의존관계($injector)는 파라미터 이름에서 암묵적으로 해결됩니다.이 스니펫의 기능상 동등한 변형은 다음과 같습니다.

beforeEach(function () {
    angular.mock.inject(['$httpBackend', 'User', function ($httpB, User) {
        $httpBackend = $httpB;
        mockUserResource = User;
    }]);
});

여기서는 의존관계를 명시적으로 선언하고 원하는 파라미터 이름을 자유롭게 사용할 수 있습니다.

3

it('should call getUser with username', inject(function (User) {

다시, 테스트 함수는 암묵적으로 해결된 것으로 주입됩니다.Userservice를 파라미터로 지정합니다.단, 실제로는 사용되지 않습니다.

이 시간에는, Wrapper 기능이 없습니다.inject불러.injectspec이 현재 실행 중인 경우 전달된 함수를 즉시 호출하지만 그렇지 않은 경우 래퍼 함수(inject docs 및 source code 참조)를 반환하므로 래퍼 함수는 실제로 필요하지 않습니다.그래서 이렇게 쓸 수도 있었는데beforeEach위의 스니펫은 다음과 같습니다.

beforeEach(angular.mock.inject(function ($injector) {
    $httpBackend = $injector.get('$httpBackend');
    mockUserResource = $injector.get('User');
}));

언급URL : https://stackoverflow.com/questions/18258490/testing-resource-services-in-angularjs