How do I create a helper for Jasmine/Angular to combine multiple beforeEach's

Question

I keep repeating some code in my spec file that injects a template and then compiles it. I extracted this code into a helper function to keep things DRY. I believe the problem is in trying to place to beforeEach's in a helper function. Here is the piece of my code that I am trying to abstract into a function:

  beforeEach(module('app/views/header.html'));

  beforeEach(inject(function($templateCache, $compile, $rootScope) {
    template = $templateCache.get('app/views/header.html');
    $templateCache.put('views/header.html', template);
    var directive = angular.element('<clinical-header></clinical-header>');
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
  }));

Here is the helper function that I created:

var setupTemplate = function(templateName, element) {
  beforeEach(module('app/views/' + templateName));
  beforeEach(inject(function($templateCache, $compile, $rootScope) {
    var template = $templateCache.get('app/views/' + templateName);
    $templateCache.put('views/' + templateName, template);
    var directive = angular.element(element);
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
  }));

And now this is the call to the helper function:

setupTemplate('header.html', '<clinical-header></clinical-header>');

At the end of my helper function, everything looks good, but when I jump to my it block, everything is undefined. Can I extract multiple beforeEach's? What is the right way to do this? Also, where is the proper place to put jasmine helper functions and how is that done?

Answer 1

You can create global beforeEach() functions by writing them outside the context of a specific describe function. You should create a spec-helper.js class with these function and load it thru Karma config.

Note that the beforeEach functions will execute before any it function you are running (as they are global).

I created a fiddle to demonstrate, however the key with Karma is to add the file to the configuration so it is loaded by the browser.

Spec Helper:

var myGlobal;
beforeEach(function() {
    // This will run before any it function.
    // Resetting a global state so the change in this function is testable
   myGlobal = 10
});

Test Suite:

describe('first suite', function(){
   it('is a test', function(){
     expect(myGlobal).toBe(10);
     // Reset the value to show that beforeEach is executed for each it function
     myGlobal = 20;
     expect(myGlobal).toBe(20);
  });

  it('is another test', function($location){
     expect(myGlobal).toBe(10);
     myGlobal = 20;
     expect(myGlobal).toBe(20);
  });
});