Подтвердить что ты не робот

KarmaJS, Жасмин, RequireJS и т.д.: Как использовать Требование для модулей тестирования

Запуск тестов Karma + Jasmine с требованиемJS - Выход из земли

Помогите!,, _ _ _., SOS!

В настоящее время у меня есть проект упражнений, чтобы получить удовольствие от KarmaJS - и Unit Testing, в целом. Широкая проблема заключается в том, что у меня действительно нет прозрачного представления о том, что Карма делает за кулисами, и я не могу найти адекватную документацию в соответствующих областях. Без дальнейшей задержки...

Вот моя структура папок:

root
    |-/lib
        |-/[dependencies] (/angular, /angular-mocks, /bootstrap, /etc)  # from bower
    |-/src                                                              
        |-/[unreferenced directories] (/js, /css, /views)               # not referenced anywhere
        |-app.js                                                        # sets up angular.module('app', ...)
        |-globals.js                                                    # may be referenced in RequireJS main file; not used.
        |-index.html                                                    # loads bootstrap.css and RequireJS main file
        |-main.js                                                       # .config + require(['app', 'etc'])
        |-routeMap.js                                                   # sets up a single route
        |-test-file.js                                                  # *** simple define(function(){ return {...}; })
    |-/test
        |-/spec
            |-test-test-file.js                                         # *** require || define(['test-file'])
    |-.bowerrc                                                          # { "directory": "lib" }
    |-bower.json                                                        # standard format
    |-karma.conf.js                                                     # *** HELP!
    |-test-main.js                                                      # *** Save Our Souls!!!

karma.conf.js

// Karma configuration
// Generated on Wed Nov 19 2014 15:16:56 GMT-0700 (Mountain Standard Time)

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', 'requirejs'],


    // list of files / patterns to load in the browser
    files: [
      //'test/spec/test-test-file.js',
      //'lib/**/*.js',
      //'src/**/*.js',
      //'test/spec/**/*.js',
      'test-main.js',
      {pattern: 'lib/**/*.js', included: false},
      {pattern: 'src/**/*.js', included: false},
      {pattern: 'test/spec/*.js', included: true}
    ],


    // list of files to exclude
    exclude: [
        'lib/**/!(angular|angular-mocks|angular-resource|angular-route|require|text).js',
        'lib/**/**/!(jquery|bootstrap).js',
        'src/app.js'
    ],


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

тест-main.js

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
    return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(pathToModule(file));
    }
});

require.config({
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/src',

    paths: {

        angular: '../lib/angular/angular',
        ngRoute: '../lib/angular-route/angular-route',
        jquery: '../lib/jQuery/dist/jquery',
        bootstrap: '../lib/bootstrap/dist/js/bootstrap',
        models: 'models',
        controllers: 'controllers',
        globals: 'globals',
        routeMap: 'routeMap'
    },
    shim: {
        angular: {
            exports: 'angular'
        },
        ngRoute: {
            deps: ['angular']
        },
        jquery: {
            exports: '$'
        },
        bootstrap: {
            deps: ['jquery']
        }
    },

    // dynamically load all test files
    deps: allTestFiles,

    // we have to kickoff jasmine, as it is asynchronous
    callback: window.__karma__.start
});

тест-тест-file.js

console.log('....................');

define(function(){
    //console.log('testing test-file', testFile);

    describe('Testing testing', function(){
        it('should work', function(){
            expect(true).toEqual(true);
        });
    });

});

тест-file.js

define('testFile', [], function(){

    return function init(sandbox){
        var app, application = app = sandbox.app
          , globals = sandbox.globals;

        return {
            some: 'module'
        };
    };

});

Вопросы и описания

Ключевые моменты, которые я хотел бы услышать, - это

  • что делает {pattern: '...', include: true | false} do?
  • лучший способ исключить все лишние вещи в каталогах bower.
  • какие файлы мне нужно включить в файл test-main.js?
  • какие файлы мне нужно включить в файл karma.conf.js?
  • что делает test-main.js на самом деле; для чего это?

Время, в которое я получаю ошибки и проблемы, - это как только я завершу свой spec в событии вызова define(...), когда я даю модулю идентификатор - define('someId', function(){ ... }) - мне нужно что-то вернуть из этого модуль, так как это вызов define?

В других случаях я получаю сообщение "ОШИБКА ОШИБКИ:" Нет метки времени для /base/src/app.js! "." Временная метка, конечно! Как глупо от меня... "- что в мире это значит?! Иногда я получаю печально известное" Выполнено 0 из 0 ERROR "- я мог бы также использовать некоторую ясность здесь, пожалуйста. На самом деле, я получаю много ERROR:"... no timestamp..." ошибки - и даже 404, когда кажется, что я должен потянуть эту библиотеку с помощью karma.conf.js files config...???

Кажется, что обычно, когда я явно говорю карме, чтобы исключить src/app.js, я все равно получаю 404 и ошибки.

TL;DR

Очевидно, я немного путаный новичок о Карме и * DD в целом...

Я могу запустить test-test-file.js отлично, когда массив karma.conf.js files выглядит как [ 'test-main.js', 'test/spec/test-test-file.js' ] - но, все же, если я завершу свой тест в вызове define RequireS, я получаю "Несоответствие анонимного определения ( )", упомянутой выше.

Кажется, что когда я добавляю {pattern: '...', include: false}, тогда карма просто не добавляет ни одного из моих файлов для данного шаблона вообще (???).

Если кто-то даже может просто направить меня к тому, как использовать RequireJS с кармой, а именно, чтобы я мог просто обернуть мои тесты в вызове define/require и вытащить модуль, который я хочу проверить... Это было бы очень оценены.

Как его несколько сложно удержать эти типы вопросов короткими и по-прежнему предоставлять адекватную информацию, я надеюсь, что я не сделал это слишком долго.


ИЗМЕНИТЬ

После того, как я прочитал ответ от glepretre и немного поработал, я переконфигурировал свой проект следующим образом:

  • Перемещено test-main.js в test/test-main.js,
  • переименовал test-test-file.js в testFileSpec.js - переместил его с test/spec в test/,

karma.conf.js:

...
// list of files / patterns to load in the browser
files: [
    {pattern: 'lib/**/*.js', included: false},
    {pattern: 'src/**/*.js', included: false},
    {pattern: 'test/**/*Spec.js', included: false},

    'test/test-main.js'

],
....

тест/тест-main.js:

/* **************** HOW COME THE DEFAULT (Karma-generated) CONFIGURATION DOES ***NOT WORK???
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

var pathToModule = function(path) {
    return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(pathToModule(file));
    }
});
*/

var tests = [];
for (var file in window.__karma__.files) {
    if (/Spec\.js$/.test(file)) {
        tests.push(file);
    }
}

require.config({
    // Karma serves files under /base, which is the basePath from your config file
    baseUrl: '/base/src',

    paths: {},
    shim: {},

    // dynamically load all test files
    //deps: allTestFiles,
    //
    deps: tests,

    // we have to kickoff jasmine, as it is asynchronous
    callback: window.__karma__.start
});

Теперь я успешно выполняю Unit Tests! Особая благодарность glepretre и всем другим участникам.


Спасибо за любую проницательность:)

4b9b3361

Ответ 1

ОК, я постараюсь решить каждый вопрос одновременно:

Вопрос 1

  • что делает {pattern: '...', включено: true | false} do?

Карма по умолчанию:

  • найти все файлы, соответствующие pattern (обязательное свойство)
  • наблюдать за изменениями (watched), чтобы перезапустить модульные тесты, чтобы дать вам живые результаты при редактировании кода (работает, если вы оставите по умолчанию autoWatch по умолчанию значение true).
  • обслуживать их с помощью собственного веб-сервера (served)
  • включить их в браузер с помощью опции <script> (included)

Итак, в массиве files конфигурации karma вы можете использовать поведение по умолчанию, добавляя только строковые шаблоны:

files: [
  // this will match all your JS files 
  // in the src/ directory and subdirectories
  'src/**/*.js'
]

Или используйте полный синтаксис объекта для настройки каждой опции:

files: [
  {pattern: 'src/**/*.js', watched: true, served: true, included: false}
]

Используя requireJS, вы НЕ хотите, чтобы они были включены, потому что они будут противоречить запросу requireJS!

Включено. Описание:. Должны ли файлы быть включены в браузер с помощью тега <script>? Используйте false, если вы хотите загрузить их вручную, например. используя Require.js.

из karma/config/files docs

Примечание. Обратите внимание на порядок, в котором вы добавляете файлы/шаблоны в массив. Это важно! Для лучшего понимания установите logLevel: config.LOG_DEBUG в конфигурацию вашей кармы.

Вопрос 2

  • какие файлы мне нужно включить в файл karma.conf.js?

По крайней мере, все необходимые файлы для правильного функционирования ваших компонентов для модульного тестирования.

В принципе, все файлы, перечисленные в блоках define([]) и require().

Вопрос 3

  • лучший способ исключить все лишние вещи в каталогах bower.

Что вы пытаетесь сделать точно?

Основываясь на том, что я написал ранее, вы можете видеть, что вы можете выборочно добавлять файлы, которые вам понадобятся в ваших тестах.

Я использую для добавления шаблона '/bower_components/**/*.js' и даже '/bower_components/**/*.html', когда мои пакеты bower используют шаблоны. Я никогда не замечал каких-либо существенных проблем с производительностью, если это вас беспокоит... До вас, чтобы определить шаблоны файлов, которые вам понадобятся.

Вопрос 4 и 5

  • что делает test-main.js на самом деле; для чего это?

  • какие файлы мне нужно включить в файл test-main.js?

Цель файла test-main.js - найти и загрузить ваши тестовые файлы перед началом кармы. Он соединяет точки между кармой и requireJS

Вы должны выбрать соглашение, чтобы назвать свои тестовые файлы, а затем определить TEST_REGEXP, чтобы они соответствовали всем им.

"Официальное" angular руководство по стилю и лучшие практики для структуры приложения рекомендует использовать суффикс *_test.js.

EDIT: ваше регулярное выражение не работает, потому что оно определено для того, чтобы поймать "spec.js" || "test.js" в конце или ваше имя файла спецификации заканчивается на "file.js";) См. http://regex101.com/r/bE9tV9/1

Еще одна вещь

Надеюсь, я был достаточно ясен. Вы можете посмотреть нашу структуру стартового приложения для наших проектов, используя Angular + Требовать: angular-requirejs-ready. Он уже настроен и протестирован как с кармой, так и с Протрактором.