Как протестировать браузерный проект с помощью karma/jasmine

Я совершенно новичок в концепции тестирования, и мне нужен один надежный пример того, как это сделать в моем проекте:

У меня файл gulp выглядит так (не весь, только важные части)

gulp.task('bundle', function() {
    gulp.src('public/angular-app/main.js')
        .pipe(browserify({
            debug: true
        }))
        .pipe(gulp.dest('public/min-js'));           
});

Это небольшая часть моего main.js:

'use strict';

    angular.module('myApp', [
        'ui.router',
        'ui.bootstrap',
        'ngSanitize',
        'ngFx',
        ...
    ], ['$interpolateProvider',
        function($interpolateProvider) {
            $interpolateProvider.startSymbol('{{');
            $interpolateProvider.endSymbol('}}');
        }
    ])

    .config(require('./config/routes'))

        .config(require('./config/authInterceptor'))
        .run(require('./config/runPhase'))
        .run(require('./config/xeditable'))



        .controller('homeController', require('./controllers/homeController'))
        .controller('modalInstanceCtrl', require('./controllers/modalInstanceCtrl'))
        .controller('modalparticipantCtrl',require('./controllers/modalParticipantCtrl'))
        .controller('generatorController',require('./controllers/generatorController'))
        .controller('navController', require('./controllers/navController'))
        .controller('signInController', require('./controllers/signInController'))
        .controller('pricingController', require('./controllers/pricingController'))
        .controller('howItWorksController',require('./controllers/howItWorks'))
        ...

Теперь это мой файл конфигурации для кармы:

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: [
      'public/vendor/jquery/dist/jquery.js',
      'public/vendor/angular/angular.js',
      'public/vendor/angular-mocks/angular-mocks.js',
      'public/angular-app/**/*.js',
      'test/**/*Spec.js'
    ],


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

Когда я запускаю карму с запуском кармы, это то, что я получаю:

Неперехваченная справочная ошибка: требование не определено в root/public/angular-app/main.js

Итак, мой вопрос прост, как я могу проводить тесты, например, на своем домашнем контроллере...

//Обновить

Поэтому я обновил свой тестовый файл следующим образом:

describe("An Angularjs test suite",function(){
    var target, rootScope;
    beforeEach(inject(function($rootScope) {
      rootScope = $rootScope;

      // Mock everything here
      spyOn(rootScope, "$on")
    }));

    beforeEach(inject(function(homeController) {
      target = homeController;
    }));

    it('should have called rootScope.$on', function(){
      expect(rootScope.$on).toHaveBeenCalled();
    });

});

и мой файл конфигурации к этому:

// list of files / patterns to load in the browser
files: [
  'public/vendor/jquery/dist/jquery.js',
  'public/vendor/angular/angular.js',
  'public/vendor/angular-mocks/angular-mocks.js',
  'public/min-js/main.js',
  'test/**/*Spec.js'
],


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


browserify: {
        watch: true,
        debug: true
},

preprocessors: {
    'test/*': ['browserify']
},

Все еще ничего не работает, сначала он говорит «неизвестный провайдер homeControllerProvider», теперь, если я удалю эти строки:

beforeEach(inject(function(homeController) {
          target = homeController;
        }));

он все еще дает мне ошибку, ожидается, что будет вызван шпион $ on, как мне это исправить?


person totothegreat    schedule 23.10.2014    source источник


Ответы (1)


Вам необходимо сообщить Karma о запуске Browserify перед запуском тестов.

Вы можете добавить это в свою конфигурацию Karma:

    {
        browserify: {
            watch: true,
            debug: true
        },
        preprocessors: {
            'test/*': ['browserify']
        }
    }

Ссылка на файл конфигурации Karma: http://karma-runner.github.io/0.12/config/configuration-file.html

Или взгляните на один из моих проектов, который использует Karma для тестирования: smild.

person Mattia Franchetto    schedule 24.10.2014
comment
Мне просто нужен простой пример того, как внедрить модуль homecontroller, когда вся моя программа находится в браузере на основе содержимого, которое я там написал... gulp берет этот main.js и минимизирует его до другого main.js, теперь, если я включу который минимизирован в мой тестовый конфигурационный файл, как я могу сказать ему: смотри, вставляй хоумконтроллер, делай с ним кое-что... - person totothegreat; 24.10.2014
comment
Вам нужен модуль angular.mock от команды AngularJS. Вот вопрос, который может помочь вам: > stackoverflow.com/questions/16022320/. - person Mattia Franchetto; 24.10.2014