在Angular 1.5中测试没有编译嵌套组件的组件

Question

I'm currently facing a situation where I have to test a component which contains another component which has its own UT isolated. Something like this:

<parent-component>
    <div>
       <child-component form-data="formData"></child-component>
    </div>
</parent-component>

Before test cases I compile the element passing scope params along with its template:

 beforeEach(inject((_$q_, _$rootScope_, $compile) => {
        $q = _$q_;
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();
        makeComponent = (scopeParam, template) => {
          const componentTemplate = template || defaultTemplate;
          const scope = _.merge($scope, scopeParam);
          element = $compile(angular.element(componentTemplate))(scope);
          scope.$apply();
        };

        makeController = (params, template) => {
          makeComponent(params, template);
          return element.controller(component.name);
        };

      }));

One of the scope params its referring to formData which is passed one-binding to child-component and whenever changes are (on $onInit of parent-component in fact), $onChanges of child-component is fired and listening to this changes causes to call a method which retrieve some data from an endpoint which I'm mocking in its UT respectively.

The thing is I want to avoid the need of rendering this child-component on parent-component and replicate the test logic when the sole purpose of UT is to testing component logic separately. How could I do to UT only test this parent component and discard whatever nested component on it?

Answer 1

I answer myself with a solution. The idea is to use decorators to modify a behaviour for an existing class without modifying the code itself. Learn more: https://docs.angularjs.org/guide/decorators . The only thing we need to do is instantiate our mock module and pass $provide and calling decorator method with our component name follow with 'Directive' passing at the same time $delegate which contains the component/service before to register against the provider. We only need to set a custom template and controller, in this case: emtpy values, and return it. Simply as that, the child component will result as an empty template along its empty controller and we can stay focused on testing our parent component isolated.

beforeEach(angular.mock.module(module, ($provide) => {
 $provide.decorator('myComponent' + 'Directive', ($delegate) => {
   const comp = $delegate[0];

   comp.template = '';
   comp.controller = class {};

   return $delegate;
 });
});