什么是导入角度模拟的正确方法

Question

版本

typescript: 2.1.4
systemjs: 0.19.41
angular: 1.5.10
angular-mocks: 1.5.10

问题

我试图加载angular-mocks与systemjs在打字稿2.0项目.

如果我使用以下它可以工作,但我得到一个TS错误,并{module}在webstorm中也被标记为错误.

import {module} from 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(module('someModule'));

    ...
});

error TS2305: Module '"/node_modules/@types/angular-mocks/index"' has no exported member 'module'.

我最初只是尝试导入angular-mocks,但导入的angular对象没有mock属性(即使window.angular.mock已定义),因此它会引发错误.

import * as angular from 'angular';
import 'angular-mocks';

describe('someClass', function () {
    'use strict';

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

    ...
});

Uncaught TypeError: Cannot read property 'module' of undefined

Systemjs配置

System.config({
    transpiler: 'typescript',
    paths: {
        'src:*': '/src/*',
        'npm:*': '/node_modules/*'
    },
    map: {
        'angular': 'npm:angular/angular.js',
        'angular-mocks': 'npm:angular-mocks/angular-mocks.js',
        'lib': 'src:lib',
        'typescript': 'npm:typescript/lib/typescript.js',
        'systemjs': 'npm:systemjs/dist/system.src.js'
    },
    packages: {
        lib: {
            defaultExtension: 'js'
        }
    },
    meta: {
        angular: {
            format: 'global',
            exports: 'angular'
        },
        'angular-mocks': {
            format: 'global',
            deps: ['angular']
        }
    }
});

题

知道导入这个的正确方法是什么？

更新

这是我正在使用的解决方案,它导入mock正确分配给它的完整角度对象.

import * as angular 'angular-mocks';

describe('someClass', function () {
    'use strict';

    beforeEach(module('someModule'));

    ...
});

注意添加exports: 'angular'到angular-mocksmeta,以便它正确导入整个角度对象:

System.config({
    ...
    meta: {
        angular: {
            format: 'global',
            exports: 'angular'
        },
        'angular-mocks': {
            format: 'global',
            exports: 'angular',
            deps: ['angular']
        }
    }
}

这仍然会产生TS错误,但此时它是最短的错误,因此更容易区分其他错误...

error TS2304: Cannot find name 'module'.

Answer 1

导入angular-mocks和使用它的正确方法(注意beforeEach()):

import * as angular from 'angular';
import 'angular-mocks';

describe('some component', () => {

    beforeEach(() => {
        angular.mock.module('someModule');
    });

});

这是因为angular-mocks不出口任何东西.它增强了角度物体.

这是它的声明的样子.注意mock添加到IAngularStatic界面的属性.

import * as angular from 'angular';

///////////////////////////////////////////////////////////////////////////////
// ngMock module (angular-mocks.js)
///////////////////////////////////////////////////////////////////////////////

declare module 'angular' {

  ///////////////////////////////////////////////////////////////////////////
  // AngularStatic
  // We reopen it to add the MockStatic definition
  ///////////////////////////////////////////////////////////////////////////
  interface IAngularStatic {
    mock: IMockStatic;
  }

  ...

  interface IMockStatic {
    ...

    inject: IInjectStatic

    // see https://docs.angularjs.org/api/ngMock/function/angular.mock.module
    module: {
      (...modules: any[]): any;
      sharedInjector(): void;
    }

    ...
  }
  ...
}

完整声明:https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/angular-mocks/index.d.ts