Quickly Mock Child Components

mockDirective.js

export function mockDirective(...names) {
  return angular.mock.module(($compileProvider) => {
    names.forEach((name) => {
      $compileProvider.directive(name, () => {
        return {
          priority: 9999,
          terminal: true,
          restrict: 'EAC',
          template:`<mock-${dashCase(name)}></mock-${dashCase(name)}>`,
          replace: true
        };
      });
    });
  });
}

function dashCase(str) {
  return str.replace(/([A-Z])/g, function ($1) {
    return '-' + $1.toLowerCase();
  });
}


// usage
beforeEach(mockDirective('myCustom', 'myOtherCustom'));
// now they appear as <mock-my-custom/> and <mock-my-other-custom/> in your parent component template