Angular 1.5 使用 webpack 进行组件单元测试

Question

我正在尝试使用控制器和一些绑定来测试组件：

class AppSpecificController {
  constructor() {
    this.text = this.initialText ? this.initialText : 'No initial text has been specified.';
  }
}

export const AppSpecificComponent = {
  bindings: {
    'initialText': '<bindInitialText'
  },
  templateUrl: '/app/components/app-specific/app-specific.html',
  controller: AppSpecificController,
  controllerAs: 'appSpecific'
};

export default AppSpecificComponent;

在我的单元测试文件中，我不想加载完整的应用程序，只加载我需要的东西。所以我想模拟一个模块或者只是用模拟创建一个名为 something 的新模块，将组件添加到该模块，然后加载该模块：

import {AppSpecificComponent} from './app-specific.component';

describe('AppSpecificComponent', () => {
    let controller;
    let scope;
    let $componentController;

    beforeEach(() => {
      angular.module('mock-module', [])
        .component('appSpecific', AppSpecificComponent);

      // this fails
      module('mock-module');

      inject((_$componentController_, $rootScope) => {
        scope = $rootScope.$new();
        $componentController = _$componentController_;
      });

      controller = $componentController('appSpecific', {$scope: scope}, {initialText: 'Some text'});
    });

    it('should test something', () => {
      expect(true).toBeTruthy();
    });
});

创建模块 mock-module 没问题，但加载它失败了，显然在 not-so-much-loaded-module 中注入东西失败了，以及创建一个我可以开始测试的控制器。如果能够单独测试组件，独立于它运行的应用程序，那就太好了。

仅对 class AppSpecificController 使用 new 运算符不起作用，因为那时您从组件收到的绑定不存在：

// fails, no bindings available in controller
controller = new AppSpecificController();

Answer 1

我在 Whosebug 的其他地方找到了答案，但不确定是在哪里。然而我正在寻找的答案是：

angular.mock.module($provide => {
  $provide.controller('SomeController', () => { ... });
  $provide.constant('someConstant', 'some constant');
});

Angular 1.5 使用 webpack 进行组件单元测试

Angular 1.5 component unit testing with webpack

unit-testing

jasmine

angularjs

webpack

angularjs-ngmock