AngularJS checks directive with replacement to true

Question

My <custom-directive> has replace:true and template: '<img />' . How can I write unit test for this? I think I want to verify that it actually replaces the special directive with img.

 it('should be transformed to <img>', function(){ var elm = $compile('<custom-directive></custom-directive>')(scope); scope.$digest(); var t = elm.find('img'); // wrong! it replaces the element. it won't find another one inside //expect(elm).toBeAnImgElement ? }); 

I can not find the right match. The closest case I've seen is a content check ( elm.html() or elm.text() ), but my tag is empty.

Answer 1

wrap your directive in a div like:

 describe('Directive: custom', function () { beforeEach(module('App')); var element, $scope; it('should be transformed to <img>', inject(function ($rootScope, $compile) { $scope = $rootScope.$new(); element = angular.element('<div><custom-directive></custom-directive></div>'); element = $compile(element)($scope); expect(element.children('img').length).toBe(1); })); }); 

Answer 2

You can get the actual HTMLElement object and check its tag. Get the actual HTMLElement using elm[0] :

 expect(elm[0].tagName).toEqual('A');