CODEWITHSUNDEEP
javascriptangularjsunit-testingkarma-jasmineejs
SuperVeetz
SuperVeetz

Reputation: 2136

Angular Karma-Jasmine Unit Testing with EJS index

I am trying to implement front-end unit-tests on an Angular project which uses a server-side templating engine to render an index.ejs or index.dust. This file also includes a global variable var cdn = "http://s3.amazon.com"; which is used throughout the angular app.

When I runstart karma karma.config.js, I receive ReferenceError: cdn is not defined: app.js L20.

The cdn var is available when I run my app with Node, but when I try to run unit-tests on my Angular Ctrls, I receive the error above.

I tried to use the karma-ejs-preprocessor module (here: https://www.npmjs.com/package/karma-ejs-preprocessor) to instantiatecdn in my tests, but I get a new error: No provider for "framework: jasmine".

index.ejs

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Test</title>

    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/angular-mocks/angular-mocks.js"></script>
    <script src="./bower_components/angular-resource/angular-resource.js"></script>

    <script src="./app.js"></script>

  </head>
  <body>
    <h1>Angular Unit Testing</h1>

    <script>
      var cdn = "./";
    </script>

    <main>
      <div ui-view></div>
    </main>
  </body>
</html>

karma.conf.js

    // Karma configuration
// Generated on Sat Mar 12 2016 02:53:19 GMT-0800 (Pacific Standard Time)

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: [
      'client/src/bower_components/angular/angular.js',
      'client/src/bower_components/angular-ui-router/release/angular-ui-router.js',
      'client/src/bower_components/angular-mocks/angular-mocks.js',
      'client/src/bower_components/angular-resource/angular-resource.js',
      'client/src/app.js',
      'tests/test.js'
    ],


    // list of files to exclude
    exclude: [
    ],

    plugins: [
      'karma-qunit',
      'karma-ejs-preprocessor',
      'karma-jasmine',
      'karma-chrome-launcher'
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'server/_views/index.ejs': ['ejs']
    },

    ejsOptions: {
      parentPath: './server/_views/index.ejs'
    },


    // 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: ['Chrome'],


    // 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
  })
}

test.js

describe('State1Ctrl', function () {
  var $rootScope,
      $scope,
      controller;

  beforeEach(function () {
    module('app', 'ui.router');

    inject(function ($injector) {
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();
      controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
    });
  });

  describe('Init', function () {
    it('should be init', function () {
      expect($scope.test).toBeTruthy();
    });
  });
});

app.js

(function() {
  'use strict';

  angular.module('app', [
    'ui.router'
  ])

  .controller('State1Ctrl', ['$scope', function($scope) {
    console.log('cdn2', cdn);
    $scope.test = 'hi';
    console.log($scope.test);
  }])

  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
     // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");

  // cdn is available here
  console.log("cdn: ", cdn);

  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: cdn + "views/state1.html",
      controller: 'State1Ctrl'
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "views/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "views/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "views/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });

  }]);

})();

Repo here demonstrating problem: https://github.com/superveetz/Loopback-Tests.git

  1. npm install from base.
  2. bower install from /client/src
  3. karma start karma.conf.js from base.
  4. node . from base to see cdn is avail normally.

Upvotes: 3

Views: 1229

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15290

Please update your plugin part in karma.config.

plugins: [
  'karma-qunit',
  'karma-ejs-preprocessor',
  'karma-jasmine',
  'karma-chrome-launcher'
],

and run these command.

npm install karma-jasmine --save-dev

npm install karma-chrome-launcher --save-dev

for further details please check here

EDIT 1:

Please do thihs changes.

inject(function ($injector) {
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();
      controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
    });

Instead of $rootScope.new() use $rootScope.$new()

Define cdn console.log('cdn2', cdn) your cdn so it will not stop your test script

Upvotes: 1

Related Questions