Угловая, Карма, цифы, беды

Я пытаюсь настроить тесты, где мы используем Angular 1.5, TSify и Karma. Я очень, близко, но я столкнулся с проблемой, которую я не совсем понял:

Я следую настройке, описанной здесь: https://github.com/cmlenz/tsify-test (этот пример не включает angular)

Я получаю сообщение об ошибке от angular-mocks: «Невозможно установить свойство« макет »неопределенного»

Это должно быть либо время, либо область действия - либо angular-mocks загружается слишком рано, либо browserify оборачивает область действия угловой переменной, и mocks не могут ее видеть. Без понятия.

Вот соответствующие части моего файла karma.conf.js:

    frameworks: ['browserify', 'jasmine'],

    files: [
        'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
        './node_modules/angular-mocks/angular-mocks.js',
        './modules/**/*.spec.ts'
    ],

    exclude: [],

    preprocessors: {
        '**/*.ts': 'browserify'
    },

    browserify: {
        debug: true,
        plugin: [
            ['tsify']
        ]
    },

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

Любые подсказки?


angularjs karma-runner browserify tsify
person JMarsch    schedule 13.09.2016    source источник
comment
Ваш массив files должен включать все файлы, необходимые для тестирования. Где находится angular.js, а также ваши файлы приложений?   -  person Phil    schedule 13.09.2016
comment
Из вашей конфигурации видно, что angular-mocks был установлен с NPM. Если angular также был установлен с NPM и включается в пакет через require в файле .ts, скорее всего, проблема в этом, так как angular-mocks нужно загрузить после angular.   -  person cartant    schedule 13.09.2016
comment
@Phil Browserify объединяет все файлы (включая файлы поставщиков) в один пакет. В примере, с которым я работаю, они просто зарегистрировали глобус */.ts в разделе препроцессора. Если что не так, могу поменять. Что это должно быть? (Я предполагаю, что мне не нужно специально указывать на каждый файл поставщика, поскольку браузер упаковывает их в пакет).   -  person JMarsch    schedule 13.09.2016
comment
@cartant, вы правы - мы используем NPM для скриптов поставщиков, а в нашем типскрипте мы импортируем модули и используем флаг компилятора CommonJS. Затем мы используем browserify с подключаемым модулем tsify, чтобы скомпилировать наш типскрипт и связать импортированные скрипты поставщиков для браузера. Я думаю, что мы ломаемся, потому что я нигде не импортирую angular-mocks в основном приложении. Есть ли способ импортировать angular-mocks для моего тестирования, но не импортировать его в производственные сборки?   -  person JMarsch    schedule 13.09.2016
comment
Я добавлю ответ - в первую очередь потому, что в комментарии недостаточно места, - но да, это можно сделать множеством способов.   -  person cartant    schedule 14.09.2016

Ответы (1)


arrow_upward
1
arrow_downward

angular-mocks необходимо загрузить после angular, и с вашей текущей конфигурацией кармы этого не происходит - angular не загружается до тех пор, пока это не потребуется в одном из .ts файлов, от которых зависит один из ваших .spec.ts файлов.

Одним из решений было бы добавить дополнительный файл, для которого требуются как angular, так и angular-mocks, и убедиться, что файл предшествует файлам .spec.ts в конфигурации Karma files.

Например, можно создать файл с именем require-angular-mocks.js:

require('angular');
require('angular-mocks');

И можно было бы добавить в конфигурацию Karma (заменив angular-mocks на node_modules):

files: [
    'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
    './require-angular-mocks.js',
    './modules/**/*.spec.ts'
],

preprocessors: {
    '**/*.js': 'browserify',
    '**/*.ts': 'browserify'
},

Это должно гарантировать, что angular и angular-mocks загружаются в правильном порядке и загружаются перед вашими спецификациями. Обратите внимание, что если это файл .js, вам потребуется еще одна запись в конфигурации Karma preprocessors.

person cartant    schedule 13.09.2016
comment
Меня сняли с работы, и я просто пришел, чтобы попробовать это. Это сработало! Это было отлично! Спасибо за помощь. Я хотел бы больше узнать о том, как работает конвейер кармы. Вы знаете, что такое запись? - person JMarsch; 28.09.2016
comment
К сожалению, нет, я не знаю каких-либо полезных статей о Карме. Думаю, мое понимание постепенно расширилось благодаря чтению документации по настройке для решения насущных проблем. Суть в настройке files. Karma использует это для создания HTML-файла, который он обслуживает. Функция Browserify должна работать, сводя .js записей в files к одному пакету, включенному как <script>. - person cartant; 29.09.2016
comment
Думаю, мне придется строить так же. Я столкнулся с одной вещью, которая меня удивила: мы используем машинописный текст, и я изначально думал, что файлы .ts нужно передать в препроцессор, а файлы .js поместить в блок файлов. Вместо этого я обнаружил, что мне нужно указать файлы .ts как в препроцессоре, так и в блоке файлов, поэтому я предполагаю, что конвейер идет от файлов к препроцессору на сервер кармы или, по крайней мере, что создание исходного потока из файлов происходит перед предварительной обработкой. - person JMarsch; 29.09.2016