How do you mock directives to enable unit testing of higher level directive?

Question

In our app we have several layers of nested directives. I\'m trying to write some unit tests for the top level directives. I\'ve mocked in stuff that the directive itself ne

Answer 1

Here is another small idea. Just put this code in jasmine helpers (coffee script)

window.mockDirective = (name, factoryFunction) ->
  mockModule = angular.module('mocks.directives', ['ng'])
  mockModule.directive(name, factoryFunction)

  module ($provide) ->
    factoryObject = angular.injector([mockModule.name]).get("#{name}Directive")
    $provide.factory "#{name}Directive", -> factoryObject
    null

And use it:

beforeEach mockDirective, "myLowerLevelDirective", ->
  link: (scope, element) ->

This will completely remove all other implementations of given directive, giving a full access to test passed arguments to the directive. FOr example, mm.foundation alert directive can be mocked with:

beforeEach mockDirective 'alert', ->
  scope:
    type: '='

and then tested:

expect(element.find('alert').data('$isolateScopeNoTemplate').type).toEqual