WedX - журнал о программировании и компьютерных науках

Проблемы с работой Karma с SystemJS, Angular2 и Typescript

Я столкнулся с проблемами, связанными с тем, что Karma работает с SystemJS, Angular2 и Typescript.

Вот мой karma.conf.js:

'use strict';
module.exports = function (config) {
    config.set({

        // base path, that will be used to resolve files and exclude
        basePath: '.',

        // frameworks to use
        frameworks: ['systemjs', 'jasmine'],

        plugins: ['karma-systemjs', 'karma-jasmine', 'karma-phantomjs-launcher'],

        files: [
            'node_modules/reflect-metadata/Reflect.js',
            'app/**/*.spec.ts',
            //'jspm_packages/system-polyfills.js',
            'karma-test-shim.js'
        ],

        systemjs: {
            configFile: "systemjs.config.js",
            config: {
                //baseURL: ".",
                transpiler: "typescript",
                paths: {
                    "systemjs": "jspm_packages/system.js",
                    "system-polyfills": "jspm_packages/system-polyfills.js",
                    "typescript": "node_modules/typescript/lib/typescript.js"
                },
                packages: {
                    'app': {
                        defaultExtension: 'ts'
                    }
                }
            },
            includeFiles: [
                'node_modules/reflect-metadata/Reflect.js'
            ],
            serveFiles: [
                'app/**/*.ts',
                'main-bundle.js'
            ]
        },


        // proxied base paths
        proxies: {
            // required for component assets fetched by Angular's compiler
            "/app/": "/base/app/",
            "/jspm_packages/": "/base/jspm_packages/",
            "/node_modules/": "/base/node_modules/"
        },


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


        // 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_DEBUG,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,


        // Start these browsers, currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera
        // - Safari (only Mac)
        // - PhantomJS
        // - IE (only Windows)
        browsers: ['PhantomJS'],


        // If browser does not capture in given timeout [ms], kill it
        captureTimeout: 60000,


        // Continuous Integration mode
        // if true, it capture browsers, run tests and exit
        singleRun: true
    });
};

Моя карма-test-shim.js:

/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};


function isJsFile(path) {
    return path.slice(-3) == '.js';
}

function isSpecFile(path) {
    return path.slice(-8) == '.spec.js';
}

function isBuiltFile(path) {
    var builtPath = '/base/app/';
    return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
    .filter(isSpecFile)
    .filter(isBuiltFile);

// Load our SystemJS configuration.
System.config({
    baseURL: '/base'
});

System.config(
    {
        map: {
            'rxjs': 'node_modules/rxjs',
            '@angular': 'node_modules/@angular',
            'app': 'app'
        },
        packages: {
            'app': {
                main: 'main.js',
                defaultExtension: 'js'
            },
            '@angular/core': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/compiler': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/common': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            '@angular/platform-browser-dynamic': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'rxjs': {
                defaultExtension: 'js'
            }
        }
    });

Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];

    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
        testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

}).then(function() {
    // Finally, load all spec files.
    // This will run the tests directly.
    return Promise.all(
        allSpecFiles.map(function (moduleName) {
            return System.import(moduleName);
        }));
}).then(__karma__.start, __karma__.error);

Мой systemjs.config.js:

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'crypto': '@empty'// this fixed my last issue
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {main: 'main.js', defaultExtension: 'js'},
        'rxjs': {defaultExtension: 'js'},
        'angular2-in-memory-web-api': {defaultExtension: 'js'}
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = {main: 'index.js', defaultExtension: 'js'};
    });

    var config = {
        map: map,
        packages: packages
    };

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) {
        global.filterSystemConfig(config);
    }

    System.config(config);

})(this);

Когда я запускаю свои тесты с karma start karma.conf.js, мои тесты располагаются рядом с основными файлами ts.

Я получаю эту ошибку:

11 05 2016 17:02:24.306:DEBUG [web-server]: serving (cached): /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/typescript/lib/typescript.js
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: eval code
    eval@[native code]
    F@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:12217
    H@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:11846
    when@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:15520
    run@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:14559
    _drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:3250
    drain@/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/jspm_packages/system-polyfills.js:4:1667
    Evaluating /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js
    Error loading /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/karma-test-shim.js


11 05 2016 17:02:24.316:DEBUG [karma]: Run complete, exiting.
11 05 2016 17:02:24.316:DEBUG [launcher]: Disconnecting all browsers
11 05 2016 17:02:24.324:DEBUG [launcher]: Process PhantomJS exited with code 0
11 05 2016 17:02:24.324:DEBUG [temp-dir]: Cleaning temp dir /var/folders/1p/pcqq7s0x58l_s7ds52gxt_fw0000gp/T/karma-62098834
11 05 2016 17:02:24.329:DEBUG [launcher]: Finished all browsers
npm ERR! Test failed.  See above for more details.

Кто-нибудь может помочь?


  • Вы проверили этот учебник и пример проекта? jaxenter.com/ 11.05.2016
  • Спасибо, Томас. Я просмотрел предложенный образец проекта, но он не основан на Karma-SystemJS. Вам лично удалось получить проект Karma/SystemJs/Typescript? 11.05.2016
  • В примере используется System.js, но он основан на более старой версии Angular 2. Я предполагаю, что вы неправильно настроили System.js в файле karma-shim. У вас есть «базовый» каталог? 11.05.2016
  • @balteo Я предлагаю вам установить angular-cli и создать там проект, настройка кармы в сгенерированных проектах использует ту же цепочку инструментов. (TypeScript, Карма, SystemJS) 11.05.2016
  • Спасибо всем за ваши предложения. Я скорее пытаюсь определить, что не так с моей конфигурацией, понимая корень проблемы. 12.05.2016

Ответы:


1

Я вижу несколько проблем в том, что вы сделали.

Сначала я думаю, что вы дважды настраиваете SystemJS:

  • один раз в файле test-shim-karma.js
  • один раз в karma.conf.js один через плагин кармы SystemJS.

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

packages['base/app'] = {
  defaultExtension: 'js',
  format: 'cjs',
  map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
};

Вы несколько раз вызываете метод System.config.

Я бы также добавил несколько записей в раздел files вашего файла karma.conf.js:

files: [
  // Paths loaded by Karma
  {pattern: 'node_modules/es6-shim/es6-shim.min.js', included: true, watched: true},
  {pattern: 'node_modules/reflect-metadata/Reflect.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},
  {pattern: 'node_modules/zone.js/dist/async-test.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true},
  {pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true},
  {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
  {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
  {pattern: 'karma-test-shim.js', included: true, watched: true},

  // Paths loaded via module imports
  {pattern: 'app/**/*.js', included: false, watched: true},

  // Paths to support debugging with source maps in dev tools
  {pattern: 'app/**/*.ts', included: false, watched: true},
  {pattern: 'app/**/*.js.map', included: false, watched: false}
],

Вы можете взглянуть на этот проект для рабочей конфигурации Karma с Angular2 RC1 и TypeScript:

30.05.2016
  • Спасибо, Тьерри. Я адаптировал свою конфигурацию, чтобы она соответствовала вашей. Я получаю сообщение об ошибке на mac osX, которое несколько человек получают с кармой 0.13.22, см. здесь: github.com/karma-runner/karma/issues/ 30.05.2016
  • В большинстве случаев эта ошибка соответствует неправильному пути в вашей конфигурации files. Например: {pattern: 'node_modules/zone.js/dist/zonejs.js', included: true, watched: true}, instanceof {pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true},. В старых версиях Кармы сообщение было не очень явным ;-) В последних версиях это было исправлено... 03.06.2016
  • Я использую последнюю версию Кармы, хотя 04.06.2016
  • Есть ли у вас какие-либо советы, чтобы получить более явное сообщение об ошибке? Какую версию вы имеете в виду под последними версиями? 04.06.2016

  • 2

    Я провел последние пару дней, просматривая все различные семена/клисы A2, и 90% из них используют старый код A2, и мне было трудно интерпретировать их в новейший код A2.

    В конце концов я нашел это. https://github.com/juliemr/ng2-test-seed

    Это заставило мои тесты кармы работать с systemjs. Это очень хороший, очень простой проект, который дает вам основы и не навязывает вам лишнего мусора.

    Вам нужно будет изменить некоторые URL-адреса файлов, чтобы они соответствовали тому, с чем вы работаете. Используя это как руководство, я смог запустить модульные тесты с typescript и systemjs.

    11.05.2016
  • в том числе system-polyfill спас меня при работе с phantomjs 03.09.2016
  • на самом деле с этим у меня такая же проблема, как и без него, я клонирую ее репо и запускаю сборку, а затем тесты, 0 из 0 тестов - карма не будет соответствовать ни одному пути к файлу 07.09.2016
  • @longbow убедитесь, что на вашем пути нет символических ссылок или что символические ссылки используются правильно 12.12.2016
  • Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]