Angular + RequireJS + Karma + Mocha + Chai

[Shitbox2]

Второй день бьюсь. Что-то Chai не заводится с RequireJS. Есть подобные проекты https://github.com/cuzzo/grunt-requi...-sinon-example, но их сразу не вкурить.

Кто-нибудь делал такую связку? Может посоветовать как запустить все это?

[melky]

в файлах тестов проект нормально видится? т.е. RJS настроен?

попробуй чай грузить через config.frameworks (в karma.config)

или же попробуй прописать его (чай) явно, в конфиге RJS.

ну или напиши конкретней, что именно не получается и какие при этом ошибки выводятся (поищи, как включить отладочные сообщения в Karma)


P.S. RequireJS + Angular ? 2 раза ведь придется описывать зависимости ...

[tsigel]

Мы делали связку Angular + RequireJs, но когда проект разросся отказались от этой связки и оставили только angular.
На самом деле для angular не нужен require потому что подключение скриптов можно сделать с помощью gulp или grunt. При работе с данной связкой и подключении плагинов для ангулара иногда возникают ошибки, которые очень мало описаны и их приходится исправлять самостоятельно. Времени на это уходит безумное количество.

К тому же ангулар обещал к версии 2.0 сделать свой require.

[Shitbox2]

Разобрался. Нужно было подключать в таком порядке:

frameworks: ['mocha', 'requirejs', 'chai']

"P.S. RequireJS + Angular ? 2 раза ведь придется описывать зависимости ..."

По сути, нужно скопировать рекваеровский конфиг в конфиг тестов. Не так уж и сложно.

RJS давно настроен. Никаких проблем ни со сборкой ни с работой проекта нет. Проект большой, поэтому вскоре будем реализовывать загрузку модулей на лету, а без рекваера это невозможно.

[melky]

По сути, нужно скопировать рекваеровский конфиг в конфиг тестов. Не так уж и сложно.

ради любовытства, покажи свой app.js ? т.е. файл инициализации

[Shitbox2]

Инициализации тестов? Что-то типа этого https://github.com/marcoslin/angular...main.mustache?

[melky]

Инициализации тестов? Что-то типа этого https://github.com/marcoslin/angular...main.mustache?

не тестов, а приложения

хотя, тут понятно - зависимости пишутся 2 раза. сначала для RequireJS, затем для Angular

*!*
define(['angularAMD', 'angular-route'], function (angularAMD) {
*/!*
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    angularAMD.bootstrap(app);
    return app;
});

[Shitbox2]

require.js

require.config({
    baseUrl: '/app/',
    paths: {
        jquery: '../vendor/jquery/jquery',
        selectize: '../vendor/selectize/dist/js/selectize',
        microplugin: '../vendor/microplugin/src/microplugin',
        sifter: '../vendor/sifter/sifter',
        swfobject: 'common/vendor/swfobject/swfobject',
        postscribe: '../vendor/postscribe/dist/postscribe',

        lodash: '../vendor/lodash/dist/lodash',
        XRegExp: '../vendor/xregexp/src/xregexp',
        XRegExpU: '../vendor/xregexp/src/addons/unicode/unicode-base',

        angular: '../vendor/angular/angular',
        angularLocale: '../vendor/angular-i18n/angular-locale_' + (typeof window !== 'undefined' ? window.currentLocale : 'ru'),
        angularResource: '../vendor/angular-resource/angular-resource',
        angularRoute: '../vendor/angular-route/angular-route',
        angularSanitize: '../vendor/angular-sanitize/angular-sanitize',
        angularAnimate: '../vendor/angular-animate/angular-animate',

        uiRouter: '../vendor/angular-ui-router/release/angular-ui-router',
        uiBootstrap: '../vendor/angular-bootstrap/ui-bootstrap',
        uiBootstrapTpl: '../vendor/angular-bootstrap/ui-bootstrap-tpls',

        angularAMD: '../vendor/angularAMD/angularAMD',
        ngload: '../vendor/angularAMD/ngload',

        angularTranslate: '../vendor/angular-translate/angular-translate',

        'jquery.cookie': '../vendor/jquery.cookie/jquery.cookie',
        'jquery.file-uploader': '../vendor/blueimp-file-upload/js/jquery.fileupload',
        'jquery.ui.widget': '../vendor/blueimp-file-upload/js/vendor/jquery.ui.widget',
        deparam: '../vendor/jquery-deparam/jquery-deparam',

        config: '../compiled/app/config',
        citiesIds: '../compiled/app/citiesIds',

        userVoiceWidget: (typeof document !== 'undefined' && 'https:' === document.location.protocol ? 'https:' : 'http:') + '//widget.uservoice.com/hx0cRsWoXF2dstLeXS4A',
        googleAnalytics: (typeof document !== 'undefined' && 'https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga',
        YandexMetrika: (typeof document !== 'undefined' && document.location.protocol === 'https:' ? 'https:' : 'http:') + '//mc.yandex.ru/metrika/watch',
        facebook: (typeof document !== 'undefined' && document.location.protocol === 'https:' ? 'https:' : 'http:') + '//connect.facebook.net/' + (typeof window !== 'undefined' ? window.currentLocale + '_' + window.currentLocale.toUpperCase() : 'ru_RU') + '/all'
    },
    shim: {
        angular: {
            exports: 'angular'
        },
        angularLocale: ['angular'],
        angularTranslate: ['angular'],
        angularTranslateLoader: ['angularTranslate'],
        jquery: ['angular'],
        angularRoute: ['angular'],
        uiRouter: ['angular'],
        angularSanitize: ['angular'],
        angularAnimate: ['angular'],
        uiBootstrap: ['angular'],
        uiBootstrapTpl: ['angular'],
        angularAMD: ['angular'],
        angularResource: ['angular'],
        XRegExp: {
            exports: 'XRegExp'
        },
        XRegExpU: {
            exports: 'XRegExp',
            deps: ['XRegExp']
        },
        'jquery.file-upload': ['jquery', 'angular'],
        userVoiceWidget: {
            exports: 'UserVoice'
        },
        facebook: {
            exports: 'FB'
        },
        swfobject: {
            exports: 'swfobject'
        },
        postscribe: {
            exports: 'postscribe'
        }
    },
    deps: ['bootstrap']
});

app.js

define([

    'angular',
    'angularLocale',
    'angularAMD',

    'angularResource',
    'angularRoute',
    'angularSanitize',
    'angularAnimate',

    'angularTranslate',

    'uiRouter',
    'uiBootstrap',
    'uiBootstrapTpl',

    'lodash'

], function(angular) {
    return angular.module('app', [
        'ngRoute', 'ui.router', 'ui.bootstrap', 'ngResource', 'ngSanitize', 'ngAnimate', 'pascalprecht.translate'
    ]);
});

bootstrap.js

define([

    'app',

    'angularAMD',

    'config',

    'common/config',

    'banner/config',

    'popup/config',

    'video/config',

    'login/config',

    'tvPage/config',

    'sidebar/config',

    'cities/config',

    'preloader/config',

    'videoPlayer/config',

    'preloader/config',

    'auth/config',

    'paginator/config',

    'flashMessage/config',

    'form/config',

    'meta/config',

    'userVoice/config',

    'webAnalytics/config',

    'sharing/config',

    'comments/config',

    'emotions/config',

    'fanzone/config',

    'errorPages/config'

    /*= templates */

    /*= translations */

], function(app, angularAMD) {
    angularAMD.bootstrap(app);
});