mardi 23 mai 2017

Testing component without compile nested components in Angular 1.5

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?

Aucun commentaire:

Enregistrer un commentaire