web-dev-qa-db-fra.com

Angular test avec Karma: "le module n'est pas défini"

Je sais que cette question a été posée à plusieurs reprises, et je sais que dans la plupart des cas, il manque les angular-mocks.js fichier.

Je rencontre le même problème, essayant de tester une usine sur un module. Malheureusement, je continue de rencontrer des problèmes avec les tests (pourquoi, Angular, oh pourquoi devez-vous supposer un objet window et document?), Qui indiquent que le module n'est pas défini. Je suis à perte. J'ai également essayé d'utiliser angular.mocks.module, mais ensuite je reçois un message disant Angular n'est pas défini. Que fais-je de mal?

À noter, j'utilise gulp en tant que gestionnaire de tâches. Mon gulpfile (pas encore parfait, les tâches ne sont pas liées):

var gulp = require('gulp'),

    uglify = require('gulp-uglify'),
    jshint = require('gulp-jshint'),
    jasmine = require('gulp-jasmine'), 
    karma = require('gulp-karma'),

    paths = {
        scripts: "scripts/*.js",
        spec: "spec/*.js",
        dist: "dist"
    };

gulp.task('prepare', function () {
    return gulp.src(paths.scripts)
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist))
});

gulp.task('test', function () {
    gulp.src([paths.scripts, paths.spec])
        .pipe(karma({
            configFile: 'karma.conf.js',
            action: 'run'
        }));
});

gulp.task('default', ['prepare', 'test']);

Mon karma.conf.js, généré par karma init:

// Karma configuration
// Generated on Fri Mar 14 2014 14:24:30 GMT-0400 (EDT)

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: [
      './lib/angular/angular.min.js',
      './lib/angular-mocks/angular-mocks.js',
      './src/*.js',
      './spec/*.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: false,


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

Et enfin, ma suite de tests (rien n'est encore configuré, si je peux passer cet obstacle, nous serons bons):

/* Tests for memento.js. */

describe('memento core test suite', function () {
    var memento;

    beforeEach(module('Memento'));

    beforeEach(function() {
        inject(function(_memento_) {
            memento = _memento_;
        });
    });

    // Check functions.
      // check to see if it has the expected function
    it('should match expected interface', function () { 
        expect(angular.isFunction(memento.canUndo)).toBe(true);
        expect(angular.isFunction(memento.canRedo)).toBe(true);
        expect(angular.isFunction(memento.undo)).toBe(true);
        expect(angular.isFunction(memento.redo)).toBe(true);
        expect(angular.isFunction(memento.Push)).toBe(true);
    });

    it('should initialize', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should Push() a changed object', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not Push() an unchanged object', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should return original object on undo()', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should return modified object on redo()', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not undo() if at beginning of stack', function () {
        this.fail(Error('Test not implemented'));
    });

    it('should not redo() if at end of stack', function () {
        this.fail(Error('Test not implemented'));
    });

    // TODO: Implement revert to original, clearing history.
    // 
    // it('should return seed object on revert()', function () {
    //  this.fail(Error('Test not implemented'));
    // });

    // it('should clear the stack on clear()', function () {
    //  this.fail(Error('Test not implemented'));
    // });
});

Quelqu'un voit-il quelque chose de mal? Je ne sais pas s'il y a quelque chose de vraiment évident qui me manque - je pourrais utiliser un jeu d'yeux supplémentaire, ou plusieurs. Au départ, je pensais que je serais en mesure d'exécuter cela comme une simple suite de tests Jasmine sans Karma, mais en raison d'Angular, cela a des problèmes. Si je ne parviens pas à faire fonctionner cela, je pourrais simplement utiliser le package Angular Angular $ et modifier mon module Angular afin qu'il prenne en charge CommonJS ...

Merci tout le monde! J'espère que je ne suis pas fou.

Edit: j'ai inclus mes dépendances de développement.

  "devDependencies": {
    "gulp": "~3.5.6",
    "gulp-uglify": "~0.2.1",
    "gulp-jshint": "~1.5.0",
    "gulp-jasmine": "~0.2.0",
    "angular": "~1.2.10",
    "karma": "~0.12.0",
    "gulp-karma": "0.0.4",
    "karma-jasmine": "~0.2.2",
    "karma-chrome-launcher": "~0.1.2"
  }
javascriptnode.jsangularjskarma-runnergulp
23
jedd.ahyoung

Le message indiquant que module/angular n'est pas défini signifie que votre fichier angular-mocks.js n'est pas en cours de chargement, malgré le fait qu'il soit répertorié dans votre fichier karma.conf.js.

Le problème que vous rencontrez est gulp-karma ignorant votre tableau de fichiers karma.conf.js. Cela se produit lorsque vous passez une chaîne ou un glob dans gulp.src dans le gulpfile.

Pour contourner ce problème, transmettez à gulp.src une chaîne pour un faux fichier, "./foobar" par exemple, et cela provoquera l'utilisation du tableau de fichiers dans le fichier karma.conf.js.

gulp.task('test', function () {
  gulp.src('./foobar')
    .pipe(karma({
      configFile: 'karma.conf.js',
      action: 'run'
    }));
});

J'espère que cela t'aides!

Référence: https://github.com/lazd/gulp-karma/issues/9

38
Himal

Ce n'est pas la réponse à votre problème particulier, mais j'ai eu un symptôme similaire dans un scénario très similaire. Cependant, la cause première était différente, je vais donc la partager ici au cas où d'autres trouveraient ce message et qu'ils auraient le même problème que moi.

Dans mon cas, parce que j'ai introduit des tests plus tard dans le jeu, il y avait un décalage entre les versions de angular (1.4.7) et angular-mocks (1.6. 9).

J'ai découvert que c'était la cause principale en utilisant le débogage de Karma dans le navigateur. Réduire la version de angular-mocks pour correspondre à angular a résolu le problème.

1
Guilherme Dellagustin