NpmScript - Test

[dyuvzhenko]

No description provided.

[dyuvzhenko]

@dhilt Забыл issues открыть однако.

В общем, начал изучать вопрос с тестами через karma и все что нашел по части взаимодействия этой библиотеки с webpack'ом можно увидеть здесь - https://webpack.github.io/docs/usage-with-karma.html. Провел манипуляции как описано и все почти что работает (на данный момент karma ругается на браузеры по какой-то причине - но это есть и при тестах через grunt).

И собственно есть вопрос, каким должен быть желаемый результат, что должно происходить после заветной команды npm test?

[dyuvzhenko]

@dhilt Еще капельку пошаманил и теперь вроде как точно все работает. Тест запускает браузер, самолично что-то проверяет, отписывается об этом в консоль и завершается.
Есть только загвоздка с его использованием под Linux:

11 11 2017 12:23:45.043:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:8082/
11 11 2017 12:23:45.044:INFO [launcher]: Launching browser Chrome with unlimited concurrency
11 11 2017 12:23:45.048:INFO [launcher]: Starting browser Chrome
11 11 2017 12:23:45.048:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

Chrome-браузер не находит, его нужно в конфиге вписывать как 'Chromium' судя по всему.

[dyuvzhenko]

@dhilt Добавил своеобразную проверку на систему - ef1a67f. Теперь все работает и из-под Linux'а, и из-под Win10.
И еще добавил сборку проекта перед началом тестов - 5f0a6ae. Без этого при отсутствующей папке /temp тесты конечно же падали.
И перенес конфиг, описанный в Gruntfile.js, в karma.conf.js - 5677c25. Хотя сейчас понял что эти правила были предписаны для минимизированных файлов, а не для обычных (но минимизированных файлов пока что нет, webpack-сборка пока не делает этого). Думаю, дальше лучше вам сказать где, как и что должно быть.

[dhilt]

@bitden Ты движешься в правильном направлении. Как осуществить полноценную замену работы тестов? Нужно увидеть, как это работает на Гранте в оригинальном репозитории и добиться точно того же результат на webpack в форке.

Ты смотришь в Gruntfile и видишь регистрацию задачи test, которая дергается по npm-скрипту "test"

  grunt.registerTask('test', [
    'clean:temp',
    'webpack:default',
    'karma:default'
  ]);

Этот процесс распадается на три составляющих: зачистка ./temp, default-сборка дистрибутива (то есть без минификации) и запуск Karma в default-mode. Рассмотрим третий шаг. Там же в Gruntfile в конфиге ищем карму и видим

    karma: {
      options: {
        configFile: './test/config/karma.conf.js',
        runnerPort: 9100
      },
      default: {},
      compressed: {
        options: {
          files: require('./test/config/karma.conf.files.js').compressedFiles,
          port: 9876,
          autoWatch: false,
          keepalive: false,
          singleRun: true
        }
      }
    },

Там два режима: default и compressed. Так вот default всего лишь запускает карму по конфигу './test/config/karma.conf.js' на 9100 порту. Режим compressed нужен для работы npm-скрипта build, это потом.

Осталось сделать следующее.

1. Нужно добавить зачистку ./temp, т.к. в ходе разработки может меняться состав выходных файлов дистрибутива.

2. Конфиг для сборки дистрибутива в ./temp должен соответствовать текущему конфигу ./webpack.congig.js. Например, в твоей версии нет BannerPlugin, который пишет комментарии в начало дистрибутива. Не должно быть отличий в сборках оригинального репозитория и твоего.

3. Оригинальный Грантовый test запускает тесты в режиме autoWatch. Это поведение (и вообще поведение) не следует менять, его нужно скопировать.

4. Параметр preprocessors на *Spec.js не нужен. Все файлы грузятся в нужном порядке через karma.conf.files.js. Обрати внимание, там тоже идет разделение на сжатые/несжатые. Дело в том, что build осуществляет прогон тестов по сжатому дистрибутиву, тогда как test по несжатому.

5. "webpack --config webpack/config.js && " в npm-скрипте не нужно, т.к. в конфиге кармы у тебя присутствует "webpack: require('../../webpack/config.js'),".

Пока, вроде, все. Главное здесь – полностью повторить оригинальное поведение. Для этого я советую тебе держать два локальных репозитория – клон оригинального репо и твой форк – и постоянно сравнивать результат. В форке сразу переписывай npm-скрипты; они в конечном счете должны остаться теми же, меняется только начинка. И ты просто смотришь, как работает npm test на клоне оригинального репо и как работает npm test на форке. Не стоит пытаться держать две версии на одном только форке. Два репозитория, две консоли, один npm-скрипт.

Я рад, что ты разобрался с Хромиумом под Линукс. Это позволит нам запускать тесты при деплое на Travis как на FF, так и на Chrome (сейчас только FF, как ты можешь судить по process.env.TRAVIS ? ['Firefox']), что будет очень полезно. Travis будем в последнюю очередь переводить. Но даже если вся эта затея с отказом от Grunt провалится (что уже невозможно, поскольку тесты почти вычленены), то по крайней мере мы сможем сделать от тебя фикс для Хромиума.

[dyuvzhenko]

@dhilt Так, ну теперь точно уловил разницу между default/compressed. И вернул обычное состояние на место - f622243.

С вашим 5-ым пунктом я бы поспорил, так как после указания webpack'а в karma.conf.js сборки файлов в папку /temp не происходит. Можно просто удалить папку /temp, запустить npm-test без "webpack --config webpack.config.js", и увидеть ошибки по отсутствию файлов.
Во всяком случае, я пока что не догадался как через karma.conf.js спровоцировать запуск сборки самым первым процессом. Мне казалось что это должно делаться через preprocessors, но что-то пошло не так, как говорится.

И вопрос насчет удаления папки temp. Где оно должно происходить, в команде package.json или может можно это сделать усилиями node.js в файле karma.conf.js? (и да, то что в коммите я написал конечно же неразумно, ибо подходит для одной платформы)

[dyuvzhenko]

@dhilt Если добавить preprocessors, то тесты выдают 9 ошибок вместо 210. И все ошибки связаны с отсутствием некоего module, который как я понял по комментарию внутри файлов *Spec.js должен быть объявлен глобально. Правда не могу уловить где же он объявляется.
Коммит - c1a4cca.

[dhilt]

@bitden Я выкинул Webpack из Кармы и сделал другие изменения. Теперь npm test работает как надо за исключением затирания ./temp и сборки в стиле оригинального репозитория (п.2 из предыдущего комментария). Пока это некритично.

Создай задачу для npm run build и воспроизведи процесс. Используй оригинальный конфиг Webpack. Разведи сборку на два режима. Давай назовем их 'development' и 'production'. Ранее в качестве 'production' выступал 'compressed'. Новые названия более семантически достоверны, будем придерживаться их. Еще будет третье окружение 'travis', об этом позднее. Так вот, npm run build должен выполнять сборку в 'production', а npm test в 'development'.

[dhilt]

@bitden В этой задаче решение через concurrently работает, но не идеально. Поскольку комамнды запускаются параллельно, Карма пытается захватить ./temp, когда Вебпак его удаляет и еще не наполнил. Да, Карма достаточно умен, чтобы не обломаться и потом предпринять еще одну попытку. Но лучше было бы найти такой подход, при котром:

• сначала выполняется dev-build (до момента watch)
• потом dev-test
• а потом они оба работают в режиме concurrently

Мне кажется, это невозможно. М лоя этого и нужны были все эти пляски с karma-webpack. Но все же я бы попробовал.

Главный момент в текущей процедуре такой: при изменении в ./src, watch процесса dev-build форсирует перепаковку дистрибутива, в результате чего переписывается содержимое ./temp, в ответ на это watch процесса dev-test перезапускает тесты на обносленном дистрибутиве.

[dyuvzhenko]

@dhilt Как закончим с - #3, еще попробую пошаманить с этой задачей.

[dhilt]

@bitden 92544d6 это существенно улучшает поведение.

[dyuvzhenko]

@dhilt Вот что теперь показывает консоль при изменениях в *Spec.js:

Chromium 62.0.3202 (Ubuntu 0.0.0): Executed 0 of 0 ERROR (0.001 secs / 0 secs)

Он ведь с этим ключом заново прогоняет тест?

[dyuvzhenko]

@dhilt Хм, кажется нашел маленькую идею, как заставить karma следить за .js-файлами в ./src:

config.set({
...
    files: [
      ...require('./karma.conf.files.js')[ENV],
      {pattern: '../../src/*.js', watched: true}
    ],

[dyuvzhenko]

@dhilt Ну, я думаю что-то вроде варианта получилось придумать, исходя из этой вышеописанной идеи - f5ceb4b.
Я пока это дело рассматривал только с помощью npm run dev-test.

В общем, karma имея в конфиге preprocessors и webpack, перед тем как запустить тесты проводит сборку. И похоже в preprocessors надо бы писать те файлы, которые могут измениться в течение тестов.

Из-за {pattern: '../../src/*.js', watched: true, served: false} нам выкидывается куча warning'ов в консоль.
Почему webpack - это пустой объект в коммите, даже и не спрашивайте. Но на будущее если будем ставить существующий конфиг, надо обязательно из него entry вытаскивать.
И restartOnFileChange: true пришлось убрать (закомментировал пока). Ибо если изменения произошли в ./src, значит происходит rebuild, значит надо бы все целиком проверить, наверное.

Очень коревянько, но вроде бы решение соответствует всем условиям. Сначала сборка, затем слежка за изменениями и пересборка с последующими тестами. Если в тестах вписать еще один it, он отобразится в консоли, а вот что касается изменений в ./src, я пока думаю как бы там что-нибудь непреднамеренно сломать.

[dyuvzhenko]

@dhilt И как сейчас вижу, решение не работает.
Еще один коммит - b535ac1.
Webpack-конфиг передаю (plugins затираю пустым массивом, чтобы не удалял ./temp), сборку делаю перед стартом karma, и все безрезультатно - на изменения в ./src пересборки не происходит.
(И временно очень радикально затер watch - b535ac1#diff-d878d2e3214b3e9fae02a34123a87635R110)

[dhilt]

@bitden Оставь эти попытки, я переиграл всю работу с development. Больше не будет папки ./temp, все происходит в памяти. Теперь npm test запускает только Карму и т.п.. Посмотри на код, если что-то непонятно, спроси.

[dyuvzhenko]

@dhilt К сожалению пока не могу посмотреть на результат, так как появилась странноватая ошибка:

Uncaught Error: Module build failed: TypeError: _.contains is not a function

Немного ранее она тоже как-то проявилась и исчезла без причины.

Карма учитывает изменения в ./src и пересобирает проект, то есть если из ui-scroll-grid.js убрать или закомментить следующий участок кода

.directive('uiScrollViewport', function () {
    return {
      restrict: 'A',
      controller: [
        '$scope',
        '$element',
        function (scope, element) {
          this.container = element;
          this.viewport = element;
          this.scope = scope;

          angular.forEach(element.children(), (child => {
            if (child.tagName.toLowerCase() === 'tbody') {
              this.viewport = angular.element(child);
            }
          }));

          return this;
        }
      ]
    };
  })

то посыпятся ошибки? Или же это вышло из обязанностей npm test?

[dyuvzhenko]

@dhilt Да, ошибки посыпались, значит все здорово и сборка проходит успешно.
А свой баг пришлось починить ручным инсталлированием lodash, и это конечно же не попадет в наш package.json.

[dhilt]

@bitden В таких случаях я рекомендую удалить package-lock.json и выполнить npm install. По следам этих приключений я опубликовал следующее сочинение: https://stackoverflow.com/a/47283941/3211932. Поставь +1! Если тебя нет на Stackoverflow, надо зарегистрироваться (через GitHub например).

[dyuvzhenko]

@dhilt Отличный совет, и правда помогло. Плюсик поставил конечно же, но ввиду репутации меньше 15 баллов меня пока не хотят учитывать похоже или что-то вроде того.

[dyuvzhenko]

@dhilt Сейчас заметил, что после npm run dev-build, ui-scroll.js и ui-scroll-grid.js оказываются после сборки в корневой папке проекте. Это так задумано или все-таки нет?

[dhilt]

@bitden Нет... это нехорошие новости и надо с этим разобраться. Хотя нет. Мы просто уберем npm run dev-build, он нам не нужен, будем пользоваться только test и start, а эти процессы будут работать исключительно в памяти.

Интересно, а как набрать первые 15 очков? Задать вопрос, за который дадут три голоса (по +5 каждый) или дать ответ с положительной реакцией (по +10 за голос)...

[dyuvzhenko]

@dhilt Видимо, надо всячески активничать. Вот список с нужными действиями:

    question is voted up: +5
    answer is voted up: +10
    answer is marked “accepted”: +15 (+2 to acceptor)
    suggested edit is accepted: +2 (up to +1000 total per user)
    bounty awarded to your answer: + full bounty amount
    one of your answers is awarded a bounty automatically: + half of the bounty amount (see more details about how bounties work)
    site association bonus: +100 on each site (awarded a maximum of one time per site)
    example you contributed to is voted up: +5
    proposed change is approved: +2
    first time an answer that cites documentation you contributed to is upvoted: +5

[dhilt]

@bitden Я уточнил дела, связанные с jshint для тестов и нарисовал issue в jshint: jshint/jshint#3212. Сейчас мы имеем такую проблему: запустившись через && дальнейший watch Кармы игнорирует jshint, что приводит к тому, что если мы испортим с точки зрения jshint какой-нибудь тест (добавив, скажем объявление var kill;), то Karma отработает без проверки jshint. А следующий запуск npm test при этом уже завалится, т.к. jshint это не пропустит.