web-dev-qa-db-fra.com

ReferenceError: le module n'est pas défini - Configuration Karma/Jasmine avec l'application Angular/Laravel

J'ai une application Angular/Laravel existante dans laquelle Laravel agit comme une API pour l'interface angulaire servant uniquement les données JSON. La page qui charge l'application angulaire, index.php, est actuellement servie par Laravel. À partir de là, Angular prend le relais. 

J'ai beaucoup de difficulté à essayer de commencer avec Karma/Jasmine. Lorsque j'exécute mes tests avec karma start ou karma start karma.conf.js à partir du répertoire racine de mon projet, le message d'erreur suivant s'affiche:

ReferenceError: module is not defined

Plein rendement:

INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/raph/coding/webroot/digitalocean/rugapp/public/rugapp/*.js" does not match any file.
INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket 3OCUMp_xhrGtlGHwiosO with id 7897120
Chrome 39.0.2171 (Mac OS X 10.9.5) hello world encountered a declaration exception FAILED
    ReferenceError: module is not defined
        at Suite.<anonymous> (/Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:3:16)
        at jasmineInterface.describe (/Users/raph/coding/webroot/digitalocean/rugapp/node_modules/karma-jasmine/lib/boot.js:59:18)
        at /Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:1:1
Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 2 of 2 (1 FAILED) (0.005 secs / 0.003 secs)

Cependant, le navigateur chrome se lance avec l’affichage suivant:

enter image description here

Mon fichier karma.conf.js est le suivant:

// Karma configuration
// Generated on Mon Dec 22 2014 18:13:09 GMT-0500 (EST)

module.exports = function(config) {
  config.set({

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


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


    // list of files / patterns to load in the browser
    files: [
      '*.html',
      '**/*.js',
      '../../tests/js/test.js',
      '../../tests/js/angular/angular-mocks.js'
    ],


    // list of files to exclude
    exclude: [

    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


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

Mon fichier package.json est présenté ci-dessous:

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "karma": "^0.12.28",
    "karma-chrome-launcher": "^0.1.7",
    "karma-jasmine": "^0.3.2",
    "laravel-elixir": "*"
  }
}

test.js

describe("hello world", function() {
    var CreateInvoiceController;
    beforeEach(module("MobileAngularUiExamples"));
    beforeEach(inject(function($controller) {
        CreateInvoiceController = $controller("CreateInvoiceController");
    }));

    describe("CreateInvoiceController", function() {
        it("Should say hello", function() {
            expect(CreateInvoiceController.message).toBe("Hello");
        });
    });
});

describe("true", function() {
    it("Should be true", function() {
        expect(true).toBeTruthy();
    });
});

Toute aide serait grandement appréciée.

javascriptangularjskarma-runnerkarma-jasmine
55
Raphael Rafatpanah

Cela aidera peut-être quelqu'un.

La solution, pour moi, était de m'assurer que angular-mocks.js était chargé avant mes tests. Si vous n'êtes pas sûr, vous contrôlez l'ordre dans karma.conf.js dans la section suivante:

// list of files / patterns to load in the browser
files: [
// include files / patterns here

Ensuite, pour que mon test charge réellement mon application angulaire, je devais procéder comme suit:

describe("hello world", function() {
    var $rootScope;
    var $controller;
    beforeEach(module("YourAppNameHere"));
    beforeEach(inject(function($injector) {

        $rootScope = $injector.get('$rootScope');
        $controller = $injector.get('$controller');
        $scope = $rootScope.$new();

    }));
    beforeEach(inject(function($controller) {
        YourControllerHere = $controller("YourControllerHere");

    }));

    it("Should say hello", function() {
        expect(YourControllerHere.message).toBe("Hello");
    });

});

Et dans votre manette,

app.controller('YourControllerHere', function() {

    this.message = "Hello";

});

En outre, une autre façon:

describe("YourControllerHere", function() {
    var $scope;
    var controller;

    beforeEach(function() {

        module("YourAppNameHere");

        inject(function(_$rootScope_, $controller) {

            $scope = _$rootScope_.$new();
            controller = $controller("YourControllerHere", {$scope: $scope});

        });

    });

    it("Should say hello", function() {
        expect(controller.message).toBe("Hello");
    });

});

Profitez des tests!

75
Raphael Rafatpanah

L'erreur signifie que angular n'a pas pu injecter votre module. La plupart du temps, cela se produit car il manque une référence aux fichiers de script. Dans ce cas, assurez-vous que tout votre fichier de script est défini dans la configuration [fichiers] de karma. Portez une attention particulière aux chemins car, si votre dossier de script a une structure imbriquée, veillez à répertorier en tant que tel. Par exemple: 

Scripts/Controllers/One/1.js 
Scripts/Controllers/One/2.js

peut être répertorié comme dans karma.conf.js> fichiers comme: 

Scripts/Controllers/**/*.js
5
Maksood

Laissez simplement ceci ici pour les futurs chercheurs. 

Si vous exécutez des tests unitaires angulaires dans le navigateur directement sans Karma (ou dans plunkr ou jsfiddle ect ...), il se peut alors que 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-cookies.js"></script> 

    <!-- The Mocha Setup goes BETWEEN angular and angular-mocks -->
    <script>
      mocha.setup({
        "ui": "bdd",
        "reporter": "html"
      });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular-mocks.js"></script>
    <script src="myApp.js"></script>
    <script src="myTest.js"></script> <!-- test is last -->

La configuration de moka va entre les mocs angulaires et angulaires

4
Fresheyeball

J'ai rencontré un message similaire et il s'est avéré que mon chemin de fichier angular-mocks était erroné. J'ai utilisé npm pour installer angular et angular-mocks, et j'ai spécifié leur chemin incorrectement dans mon Karma.conf.js comme ceci:

files: [
    'node_modules/angular/angular.js',
    'node_modules/angular/angular-mocks.js',
    'scripts/*.js',
    'tests/*.js'
],

Je devrais spécifier le chemin de angular-mocks.js comme ceci:

'node_modules/angular-mocks/angular-mocks.js'

Une erreur très simple, mais qui pourrait prendre beaucoup de temps à localiser si vous venez de commencer avec les tests unitaires AngularJS et ne savez pas où chercher. 

0
Charlie Guan