Angular 1.5 unit testing component while ignoring child components

Question

I am trying to write a unit test for a component in Angular 1.5. I want to unit test that component and its dom nodes. This component contains a child component that is quite complex.

My goal is to unit test the outer component without compiling the child component.

Since I want to test the DOM as well, it is not sufficient to use $componentController for this test.

Here is a short example of what I would like to achieve:

Component code:

angular.module('app').component('myComponent', {
  bindings: {
    username: '<',
  },
  template: `
    <span>{{ $ctrl.username }}</span>
    <my-complex-component />
  `
  controller: function () {}
});

Unit test for my-component:

it('my-component should render username', function () {
  var template = '<my-component username="username"></my-component>',
    element,
    scope,
    date;

  scope = $rootScope.$new();
  scope.username = 'John';

  element = $compile(template)(scope);
  scope.$digest();

  username = element.find('span');
  expect(username.text()).to.be.equal('John');
});

my-complex-component should not be instantiated. It should resist in the template as it is. Creating the element in the unit test should result in

<span>John</span>
<my-complex-component />

Is there any way to do this?

Answer 1

Here is a very good explanation of how to test a component without rendering the whole tree under the current component.

What you want is called

shallow rendering (avoid rendering the whole template of the child component)

and Angular 1.5 doesn’t offer it out-of-the-box.

If you take a look at the link above, Wojciech Zawistowski shows how to use the helper below in order to achieve shallow rendering.

export function componentSpyOn(name) {
  function componentSpy($provide) {
    componentSpy.bindings = [];

    $provide.decorator(name + 'Directive', ($delegate) => {
      let component = $delegate[0];

      component.template = '';
      component.controller = class {
        constructor() {
          componentSpy.bindings.push(this);
        }
      };

      return $delegate;
    });
  }

  return componentSpy;
}