Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what's the correct way to import angular-mocks

Versions

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

Problem

I'm trying to load angular-mocks with systemjs in a typescript 2.0 project.

If i use the following it works, but i get a TS error and {module} is also marked as an error in 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'.

I originally tried to simply import angular-mocks, but the imported angular object does not have a mock property (even though window.angular.mock is defined), so it throws an error.

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 config

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']
        }
    }
});

Question

Any idea what the correct way to import this is?

Update

This is the solution i'm currently using, that imports the full angular object with mock correctly assigned to it.

import * as angular 'angular-mocks';

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

    beforeEach(module('someModule'));

    ...
});

Note the addition of exports: 'angular' to the angular-mocks meta, in order for it to correctly import the whole angular object:

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

This still produces a TS error, but at this point it's the shortest one, so is easier to differentiate from other errors...

error TS2304: Cannot find name 'module'.
like image 985
james Avatar asked Jan 12 '17 15:01

james


People also ask

What is mock data in angular?

The mock feature allows you to specify the response data and then access that data from anywhere. You can also make your mock API private, protect it with a token, and set up additional headers in both requests and responses. The first step is to create a mock server from the Postman interface.


1 Answers

The correct way to import angular-mocks and use it (pay attention to beforeEach()):

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

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

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

});

It's so because angular-mocks doesn't export anything. It augments angular object.

Here is how it's declaration looks like. Pay attention to mock property, which is added to IAngularStatic interface.

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;
    }

    ...
  }
  ...
}

Full declaration: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/angular-mocks/index.d.ts

like image 175
Maxim Kulikov Avatar answered Oct 31 '22 02:10

Maxim Kulikov