Angular test with karma

Question

I have used the yo angular 1 generator and it created a landing page and some tests. I am not able to compile the code in VS because "module('fountainFooter');" is undefined.

/// <reference path="../../typings/index.d.ts" />

import * as angular from 'angular';
import 'angular-mocks';
import {footer} from './footer.ts';

describe('footer component', () => {
  beforeEach(() => {
    angular
      .module('fountainFooter', ['src/app/footer.html'])
      .component('fountainFooter', footer);
    module('fountainFooter');
  });

  it('should render \'FountainJS team\'', inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
    const element = $compile('<fountain-footer></fountain-footer>')($rootScope);
    $rootScope.$digest();
    const footer = element.find('a');
    expect(footer.html().trim()).toEqual('FountainJS team');
  }));
});

I am guessing that the module is the module defined in angular-mocks so I have tried to declare the module as angular.mock.module. but when I do that I get this error:

PhantomJS 2.1.1 (Windows 8 0.0.0) footer component should render 'FountainJS team' FAILED
        TypeError: undefined is not an object (evaluating 'angular.mock.module') (line 21)

As I understand it the module is declared on the browser window. using just module works using gulp and systemjs. When I use angular-mock.module then VS and typescript is happy but of curse nothing works.

score 0 · Answer 1 · answered Jul 21 '16 at 14:55

This is one way to do it.

/// <reference path="../../typings/index.d.ts" />

describe('footer component', () => {
  beforeEach(angular.mock.module('app', ($provide: ng.auto.IProvideService) => {
    $provide.factory('fountainFooter', () => {
      return {
        templateUrl: 'app/footer.html'
      };
    });
  }));
  it('should render \'FountainJS team\'', inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
    const element = $compile('<fountain-footer></fountain-footer>')($rootScope);
    $rootScope.$digest();
    const footer = element.find('a');
    expect(footer.html().trim()).toEqual('FountainJS team');
  }));
});

Also taken from the yo angular#1 generator but generated with option script injecting.

Angular test with karma

1 Answers1