How to compile template HTML, and get beyond .html()?

Question

Question: I would like to access the form within my template, and test it against validation, submit, etc. I believe I have the Karma/Jasmine test setup correctly, but I do not know how to access the form.

test-module.view.html:

<div id="main">
    <form name="theForm">
        <input id="keywords" type="text" ... ></input>
        <select id="listOfThings" ... ng-options="...for list..."></select>
        <input id="somedate" type="date" ...></input>
    </form>
</div>

Directive:

(function(){
    "use strict";

    angular.module('TestModule').directive('testDirective',Directive);
    function Directive(){
        return {
            restrict: 'E',
            controller: 'TestModuleController',
            controllerAs: 'testModuleVm',
            templateUrl: 'testModule/test-module.view.html'
        };
    };

})();

Test:

describe('Directive Tests',function(){
    var element,$compile,$rootScope;

    beforeEach(module('myTemplates'));

    beforeEach(inject([
        '$compile','$rootScope',
        function($c,$rs){
            $compile = $c;
            $rootScope = $rs;
        }
    ]));

    it('should test an input element',function(){
        element = $compile('<test-directive></test-directive>')($rootScope);
        $rootScope.$digest();
        console.log(element); // Should see your template displayed
    });
});

karma.conf.js:

// Created May 04, 2016
module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'vendor/angular/angular.js',
        'vendor/angular/angular-mocks.js', 
        'test-module/test-module.view.html',
        'test-module/test-module.module.js',
        'test-module/test-module.controller.js',
        'test-module/test-module.directive.js',
        'test/test-module-tests.js',
    ],


    // list of files to exclude
    exclude: [
      'vendor/bootstrap*',
      'vendor/jquery*',
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-    preprocessor
    preprocessors: {
        // karma-ng-html2js-preprocessor for templates in directives
        'testModule/test-module.view.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
        moduleName: 'myTemplates'
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||     config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

westandy · Answer 1 · 2016-06-10T17:48:04.280

After a lot of learning and frustration, for those of you starting out with Karma from scratch like I did, with no local support, feel free to use this as a template. There are many ways to setup directive tests, but I finally got this way to work, and I can read it.

First, sadly, I was missing my directive file in the karma.conf.js.

Second, the preprocessing (preprocessors in karma.conf, ngHtml2JsPreprocessor in karma.conf, and the karma-ng-html2js-preprocessor npm module) of your HTML templates, and storing them into a module will help with your tests. In my case, I've got about 20 modules, each with a template/directive. So, it's convenient to just throw them in one big template module and load it for every test of this type.

Finally, I still don't know how to test against form validation, which prompted this question, but I'm a hell of lot closer to getting that job done.

How to compile template HTML, and get beyond .html()?

1 Answers1