wake-up-neo.com

ReferenceError: Modul ist nicht definiert - Karma/Jasmin-Konfiguration mit der App Angular/Laravel

Ich habe eine bestehende Angular/Laravel-App, in der Laravel als API für das Winkel-Frontend fungiert, das nur JSON-Daten liefert. Die Seite, die die Winkel-App lädt, index.php, wird derzeit von Laravel bereitgestellt. Von dort übernimmt Angular. 

Ich habe es sehr schwer, mit Karma/Jasmine anzufangen. Beim Ausführen meiner Tests mit karma start oder karma start karma.conf.js aus dem Stammverzeichnis des Projekts wird die folgende Fehlermeldung angezeigt:

ReferenceError: module is not defined

Volle Leistung:

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)

Der Chrome-Browser wird jedoch mit folgendem Bildschirm gestartet:

enter image description here

Meine karma.conf.js-Datei lautet wie folgt:

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

Meine package.json-Datei wird unten angezeigt:

{
  "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();
    });
});

Jede Hilfe wäre sehr dankbar.

55

Vielleicht hilft das jemandem.

Für mich bestand die Lösung darin, sicherzustellen, dass angular-mocks.js vor meinen Tests geladen wurde. Wenn Sie sich nicht sicher sind, steuern Sie die Reihenfolge in karma.conf.js im folgenden Abschnitt:

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

Um meinen Test zum Laden meiner Winkel-App zu erhalten, musste ich Folgendes tun:

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

});

Und in Ihrem Controller,

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

    this.message = "Hello";

});

Auch ein anderer Weg:

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

});

Viel Spaß beim Testen!

75

Der Fehler bedeutet, dass das Modul nicht von Winkle injiziert werden konnte. Meistens geschieht dies aufgrund eines fehlenden Verweises auf Skriptdateien. Stellen Sie in diesem Fall sicher, dass Ihre gesamte Skriptdatei unter [files] -Konfiguration definiert ist. Achten Sie besonders auf Pfade, denn wenn Ihr Skriptordner eine verschachtelte Struktur hat, stellen Sie sicher, dass Sie eine solche Liste erstellen. Zum Beispiel: 

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

kann als in karma.conf.js> -Dateien aufgeführt werden als: 

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

Lass das hier für zukünftige Sucher. 

Wenn Sie Winkeleinheitstests direkt im Browser ohne Karma (oder in plunkr oder jsfiddle ect ...) ausführen, kann dies der Fall sein 

<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 -->

Das Mocha-Setup geht zwischen Winkel- und Winkelspitzen

4
Fresheyeball

Ich stieß auf eine ähnliche Nachricht und stellte fest, dass mein angular-mocks-Dateipfad falsch war. Ich habe npm verwendet, um angular und angular-mocks zu installieren, und ich habe ihren Pfad in meinem Karma.conf.js folgendermaßen falsch angegeben:

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

Ich sollte den Pfad von angular-mocks.js wie folgt angeben:

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

Ein sehr einfacher Fehler, der jedoch zeitaufwendig sein kann, wenn Sie gerade mit dem AngularJS-Einheitentest begonnen haben und nicht wissen, wo Sie suchen müssen. 

0
Charlie Guan