Why is this Angular directive not compiling inside of Jasmine unit test?

Question

Preconditions: I am using Karma to run Jasmine unit tests against my Angular.js app modules.

My app uses the following pattern to expose modules (services/directives/controllers):

simple.js

'use strict';

export default (angular) => {
    angular.module('simple', [])
        .directive('simple', [function() {
            return {
                restrict: 'E',
                replace: true,
                template: '<h1>COMPILED!</h1>'
            };
        }]);
};

The corresponding unit test for the above example looks like this:

simple.test.js

import angular from 'angular';
import mocks from 'angular-mocks';
import simpleModule from './simple';

describe('simple', () => {
    var $compile,
        $rootScope;

    // Load the simple module, which contains the directive
    beforeEach(() => {
        let simpleComponent = new simpleModule(angular);
        // module('simple') raises a TypeError here
        // I have also tried angular.module('simple') which
        // I am pretty sure is incorrect.
    });

    // Store references to $rootScope and $compile
    // so they are available to all tests in this describe block
    beforeEach(inject((_$compile_, _$rootScope_) => {
        // The injector unwraps the underscores (_) from around the
        // parameter names when matching
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

    it('Replaces the element with the appropriate content', () => {
        // Compile a piece of HTML containing the directive
        var element = angular.element("<simple>not compiled</simple>");

        var compiledElement = $compile(element)($rootScope);

        // fire all the watches, so the scope expressions evaluate
        $rootScope.$digest();

        // Check that the compiled element contains the templated content
        expect(element.html()).toContain("COMPILED!");

    });

});

Problem: when running the above test with Karma in a web browser, the test fails and the element does not appear to be getting compiled.

What am I missing?

Answer 1

I can see in your code that you are missing the creation of the new $scope before do the $compile. You should do something like this:

it('Replaces the element with the appropriate content', () => {
    // Compile a piece of HTML containing the directive
    var scope = $rootScope.$new(); // create a new scope
    var element = angular.element("<simple>not compiled</simple>");
    var compiledElement = $compile(element)(scope);

    // fire all the watches, so the scope expressions evaluate
    scope.$digest();

    // Check that the compiled element contains the templated content
    expect(element.html()).toContain("COMPILED!");
});