jeudi 25 août 2016

Angular module not found when testing with Karma

I'm trying to learn how to create unit tests for my controller and scope variables in an Angular app using ui-router. I have a basic test created but when I try to run it, it throws an error: ReferenceError: Can't find variable: module in unit/testingAngularUnitSpec.js (line 4).

The angular app is working fine - no issues there, but whenever I attempt to run my basic scope test I receive that error.

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
        '../../bower_components/angular/angular.js',
        '../../bower_components/angular-mocks/angular-mocks.js',
        '../../bower_components/angular-ui-router/release/angular-ui-router.js',
        '../app.js',
        'unit/*.js'
    ],
    exclude: [
    ],
    preprocessors: {
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

testingAngularUnitSpec.js file:

describe('Testing AngularJS Test Suite', function() {

    it('should initialize the title in the scope', function() {
        module('bp');

        var scope = {};
        var ctrl;

        inject(function($controller) {
            ctrl = $controller('testingAngularCtrl', {$scope:scope});
        });

        expect(scope.title).toBeDefinied();
    })
})

server.js file:

var express = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use('/app', express.static(__dirname + "/app"));
app.use('/node_modules', express.static(__dirname + "/node_modules"));


//GET REQUESTS
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

app.listen('3000', function(){
    console.log("I'm listening!");
});

app.js file:

(function() {
angular.module('bp', ['ui.router'])
.config(function($stateProvider) {

    $stateProvider

        .state('signUp', {
            url: '/signup',
            templateUrl: 'app/views/signup.html',
            controller: 'SignupController'
        })
        .state('test', {
            url: '/test',
            templateUrl: 'app/views/test.html',
            controller: 'testingAngularCtrl'
        })
})

}());

and finally the index file:

<!DOCTYPE html>
<html ng-app="bp">
    <head>
        <title></title>
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="node_modules/angular/angular.min.js"></script>
        <script src="app/app.js"></script>
        <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
        <link rel="stylesheet" type="text/css" href="app/css/main.css">

        <!-- CONTROLLERS -->
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div>
                    <a ui-sref="signUp">Create an Account</a>
                    <a ui-sref="test">Testing</a>
                </div>
            </div>
        </nav>
        <div>Working!</div>
        <div ui-view></div>
    </body>
    <!-- Controllers: -->
    <script src="app/controllers/signup-controller.js"></script>
    <script src="app/controllers/testing-angular-controller.js"></script>
</html>

Aucun commentaire:

Enregistrer un commentaire