Testing AngularJS directives with external templates for unit testing

Question

Testing AngularJS directives with external templates for unit testing

I have been utilizing the npm package karma-ng-html2js-preprocessor to achieve this task.

This is the content of my spec file:

describe('Directive: aGreatEye (external)', function() {
    var elm, scope;

    beforeEach(module('my-thing.template.html'));
    beforeEach(module('templates'));

    beforeEach(inject(function($rootScope, $compile) {

        elm = angular.element('<a-great-eye></a-great-eye>');
        scope = $rootScope;
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should execute first directive unit test correctly', function() {
        // add your assertions here
    });
});

However, I encountered an error message stating

Error: [$injector:modulerr] Failed to instantiate module my-thing.template.html due to:
    Error: [$injector:nomod] Module 'my-thing.template.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Even though the URL seems correct based on the basePath specified in the karma.config.js file.

Below is the content of my karma.config.js file:

module.exports = function (config) {

    // VIEW ONLINE AT: MAIN_ROOT/tests/jasmineReport/
    // You can either run via WebStorm or go online to do tests

    config.set({
        basePath: '.',
        frameworks: ['jasmine'],
        files: [
            // Vendor Files
            'bower_components/angular/angular.js',
            'bower_components/angular-mocks/angular-mocks.js',
            'bower_components/angular-ui-router/release/angular-ui-router.js',
            'bower_components/angular-filter/dist/angular-filter.js',
            'bower_components/angular-sanitize/angular-sanitize.js',
            'bower_components/lodash/lodash.min.js',

            // App-Specific Files
            'app/index.js',
            'app/common/models/*.js',
            'app/common/directives/*.js',
            'app/common/filters/*.js',
            'app/main/main.js',

            // App-Specific HTML Templates
            '*.html',
            '*.html.ext',

            // Test-Specific Files
            'tests/mock/**/*.js'
        ],
        exclude: [],
        preprocessors: {

            // HTML to JavaScript Preprocessors for
            // AngularJS Template Directives
            '*.html': ['ng-html2js']

        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        singleRun: true,
        concurrency: Infinity,

        // NgHTML 2 JS Pre-Processor - OPTIONS
        ngHtml2JsPreprocessor: {
            stripPrefix: 'public/',
            stripSuffix: '.ext',
            prependPrefix: 'served/',
            moduleName: "templates"
        }
    })
};

What am I missing here?

javascript angularjs unit-testing

Answer 1

Answer №1

These are the tests I created to evaluate my directive, ensuring that the template is called and processed correctly:

'use strict';

/**
* @author Sophia Rodriguez
* 
* Test suite for menu widget directive
*/
describe('Menu Widget Directive Rendering', function () {

    beforeEach(module('myModule'));

    var compile, mockBackend, rootScope;

    // Step 1 - Inject the $compile service into the test
    beforeEach(inject(function ($compile, $httpBackend, $rootScope) {
        compile = $compile;
        mockBackend = $httpBackend;
        rootScope = $rootScope;
    }));


    it('should render HTML based on scope correctly', function () {
        var scope = rootScope.$new();

        mockBackend.expectGET('views/directives/menu.html').respond(
            '<div class="menu">' +
            '<ul>' +
            '<li><a href="#/" class="waves-effect waves-light">HOME</a></li>' +
            '<li><a href="#/activities" class="waves-effect waves-light">ACTIVITIES</a></li>' +
            '<li><a href="#/people" class="waves-effect waves-light">PEOPLE</a></li>' +
            '<li><a href="#/locations" class="waves-effect waves-light">LOCATIONS</a></li>' +
            '<div class="clear-both"></div>' +
            '</ul>' +
            '</div>');

        var element = compile('<menu></menu>')(scope);

        scope.$digest();
        mockBackend.flush();

        expect(element.html()).toEqual(
            '<div class="menu">' +
            '<ul>' +
            '<li><a href="#/" class="waves-effect waves-light">HOME</a></li>' +
            '<li><a href="#/activities" class="waves-effect waves-light">ACTIVITIES</a></li>' +
            '<li><a href="#/people" class="waves-effect waves-light">PEOPLE</a></li>' +
            '<li><a href="#/locations" class="waves-effect waves-light">LOCATIONS</a></li>' +
            '<div class="clear-both"></div>' +
            '</ul>' +
            '</div>'
        );
        mockBackend.verifyNoOutstandingExpectation();
    });

    it('should not render HTML if used not as element 1', function () {
        var scope = rootScope.$new();

        var element = compile('<div menu></div>')(scope);

        scope.$digest();

        expect(element.html()).toEqual('');
        mockBackend.verifyNoOutstandingRequest();
    });

    it('should not render HTML if used not as element 2', function () {
        var scope = rootScope.$new();

        var element = compile('<div class="menu"></div>')(scope);

        scope.$digest();

        expect(element.html()).toEqual('');
        mockBackend.verifyNoOutstandingRequest();
    });

    it('should not render HTML if used not as element 3', function () {
        var scope = rootScope.$new();

        var element = compile('<!-- directive: menu -->')(scope);

        scope.$digest();

        expect(element.html()).toBeUndefined();
        mockBackend.verifyNoOutstandingRequest();
    });
});

This test validates that the directive must be called using <menu></menu> to adhere to its restrictions

/**
* @author Sophia Rodriguez
*
* Menu directive to manage a menu based on the current $location.path
*/
angular.module('myModule')
    .directive('menu', ['Page', function (Page) {
        return {
            restrict: 'E',
            scope: true,
            templateUrl: 'views/directives/menu.html',
            link: function ($scope, $element, $attrs) {
                $scope.isCurrentPage = function (page) {
                    return Page.getActualPage() == page;
                };
            }
        };
}]);

Answer 2

These are the tests I created to evaluate my directive, ensuring that the template is called and processed correctly:

'use strict';

/**
* @author Sophia Rodriguez
* 
* Test suite for menu widget directive
*/
describe('Menu Widget Directive Rendering', function () {

    beforeEach(module('myModule'));

    var compile, mockBackend, rootScope;

    // Step 1 - Inject the $compile service into the test
    beforeEach(inject(function ($compile, $httpBackend, $rootScope) {
        compile = $compile;
        mockBackend = $httpBackend;
        rootScope = $rootScope;
    }));


    it('should render HTML based on scope correctly', function () {
        var scope = rootScope.$new();

        mockBackend.expectGET('views/directives/menu.html').respond(
            '<div class="menu">' +
            '<ul>' +
            '<li><a href="#/" class="waves-effect waves-light">HOME</a></li>' +
            '<li><a href="#/activities" class="waves-effect waves-light">ACTIVITIES</a></li>' +
            '<li><a href="#/people" class="waves-effect waves-light">PEOPLE</a></li>' +
            '<li><a href="#/locations" class="waves-effect waves-light">LOCATIONS</a></li>' +
            '<div class="clear-both"></div>' +
            '</ul>' +
            '</div>');

        var element = compile('<menu></menu>')(scope);

        scope.$digest();
        mockBackend.flush();

        expect(element.html()).toEqual(
            '<div class="menu">' +
            '<ul>' +
            '<li><a href="#/" class="waves-effect waves-light">HOME</a></li>' +
            '<li><a href="#/activities" class="waves-effect waves-light">ACTIVITIES</a></li>' +
            '<li><a href="#/people" class="waves-effect waves-light">PEOPLE</a></li>' +
            '<li><a href="#/locations" class="waves-effect waves-light">LOCATIONS</a></li>' +
            '<div class="clear-both"></div>' +
            '</ul>' +
            '</div>'
        );
        mockBackend.verifyNoOutstandingExpectation();
    });

    it('should not render HTML if used not as element 1', function () {
        var scope = rootScope.$new();

        var element = compile('<div menu></div>')(scope);

        scope.$digest();

        expect(element.html()).toEqual('');
        mockBackend.verifyNoOutstandingRequest();
    });

    it('should not render HTML if used not as element 2', function () {
        var scope = rootScope.$new();

        var element = compile('<div class="menu"></div>')(scope);

        scope.$digest();

        expect(element.html()).toEqual('');
        mockBackend.verifyNoOutstandingRequest();
    });

    it('should not render HTML if used not as element 3', function () {
        var scope = rootScope.$new();

        var element = compile('<!-- directive: menu -->')(scope);

        scope.$digest();

        expect(element.html()).toBeUndefined();
        mockBackend.verifyNoOutstandingRequest();
    });
});

This test validates that the directive must be called using <menu></menu> to adhere to its restrictions

/**
* @author Sophia Rodriguez
*
* Menu directive to manage a menu based on the current $location.path
*/
angular.module('myModule')
    .directive('menu', ['Page', function (Page) {
        return {
            restrict: 'E',
            scope: true,
            templateUrl: 'views/directives/menu.html',
            link: function ($scope, $element, $attrs) {
                $scope.isCurrentPage = function (page) {
                    return Page.getActualPage() == page;
                };
            }
        };
}]);

Testing AngularJS directives with external templates for unit testing

Answer №1

Similar questions

Implementing useReducer in React for dynamic pagination changes

Is there a way to trigger a function with ng-click in my AngularJS directive?

I believe there may be a gap in the communication between TypeScript, JavaScript, Angular, Nginx, Alpine, and Docker within the network using Nginx. I am

To initiate animation upon a click event, follow these steps

Tips for creating a breakpoint in Sass specifically for a 414px iPhone screen size

Accurate information typed into a text field

Setting background colors for classes based on an array

The instance is referencing a property or method (...) that has not been defined, resulting in an error during rendering

The Vue.createApp function seems to be malfunctioning, whereas using the new Vue() method is functioning correctly

Leveraging the power of Restangular by utilizing a complete URL

combining the use of $.ajax

Disappearance of array data

Run a function upon clicking a button in JavaScript

Error: ReactJs unable to find location

Tips for using JavaScript to style an array items individually

Inquiries about ngshow and the scope concept

Click on a link element within a container and create a pop-up window using jQuery

Navigating through integration challenges between Angular UI Calendar and Google Calendar v3 API

What troubleshooting steps should I take to address MQTT issues affecting the rendering of my website while using React and Raspberry Pi?

Intermittently play a series of sound files, with only the final sound ringing out