javascript - 如何在 Angular 中对组件进行单元测试？

Question

我正在测试我在网上找到的外部 Bower 组件。它在我的代码上按预期工作，但我在对其进行单元测试时遇到了麻烦。

我的代码:

Controller :

function testCtrl(externalComponent) {
   //other codes
   externalComponent.loadFile('test.txt').then(function(res) {
       console.log(res)
   })

单元测试

describe..
    beforeEach(module('testApp'));
    beforeEach(inject(function($injector) {
        externalComponent = $injector.get('externalComponent');
        $rootScope = $injector.get('$rootScope');
        $httpBackend = $injector.get('$httpBackend');    
    });

    describe('my test', function () {
        beforeEach(function () {

        });

        it('should test external component', function () {
            //not sure how to test external component. 
            $httpBackend.flush()
        });
    })
}

Answer 1

下面的代码是基于代码测试单元测试的通用方法

Controller 代码:

function testCtrl(externalComponent,$scope) {
   //other codes
   externalComponent.loadFile('test.txt').then(function(res) {
       $scope.data = res;
   })
}

测试代码:

beforeEach(module('testApp'));
beforeEach(inject(function($injector) {
    $controller = $injector.get('$controller')
    externalComponent = $injector.get('externalComponent');
    $rootScope = $injector.get('$rootScope');
    $httpBackend = $injector.get('$httpBackend');    
});

describe('my test', function () {
    var testCtrl, data = {a:1}, $scope = {};
    beforeEach(function () {
       $httpBackend.when('GET', '/test.txt')
                        .respond(data)
       testCtrl = $controller('testCtrl', { $scope: $scope });
    });

    it('should test external component', function () {
        //not sure how to test external component. 
        $httpBackend.flush()
        expect($scope.data).toEqual(data);
    });
  })
}

说明:

• httpbackend 处理 get test.txt 请求
• Controller 已创建
• 期望数据分配给 $scope.data