В большинстве фронтенд-проектов Карма используется как средство запуска модульных тестов, написанных на JavaScript. Karma выполняет тесты в реальном и автономном браузерах. Хорошо зарекомендовавший себя безголовый браузер - PhantomJS. В этом сообщении в блоге я продемонстрирую подход к быстрому тестированию с помощью Karma. Сами тесты написаны на всем известном фреймворке Jasmine. Мы также будем использовать бандлер Webpack и karma-webpack, чтобы объединить все тесты вместе и подготовить их к запуску в Karma.

Стандартный подход

Обычно люди запускают все тесты сразу. Приведу пример. В качестве справки я буду использовать конфигурацию Karma из одного из моих POC. Это типичная конфигурация для бесперебойной работы с Webpack.

Файл spec-bundle.js объединяет все тестовые файлы вместе. В проектах на основе TypeScript все тестовые файлы заканчиваются на .spec.ts. В проектах JavaScript они заканчиваются на .spec.js. Лучше всего давать тестовым файлам имена * .spec.js. Обычно простой spec-bundle.js состоит всего из пары строк:

Для проектов AngularJS 2 нужно немного больше настроек.

Теперь вы можете писать сценарии npm в package.json, подобные этому

и запустите все тесты одним из следующих способов:

  • тест npm
  • npm run test: без головы
  • npm run test: chrome

Если вы разрешите запуск тестов в Chrome, откроется браузер и вы увидите кнопку «Отладка». Щелчок по этой кнопке открывает новую вкладку браузера, где вы можете отлаживать свои тесты в Chrome Dev Tools с точками останова и т. Д. F5 обновляет страницу и снова запускает тесты.

Оптимизированный подход

В реальном веб-приложении у вас может быть много тестовых файлов. Объединение и запуск всех тестовых файлов может занять некоторое время. Karma также требует времени для загрузки. Для быстрой разработки программного обеспечения неудовлетворительно, если вам всегда приходится запускать сотни и больше тестов, чтобы проверить небольшое изменение в одном файле. Вы хотите ограничить тестирование файлов, для которых вы пишете тесты. Следует тестировать ровно один файл или определенную коллекцию файлов. И это без перезагрузки Кармы. Хм… Как это сделать?

В этом случае вам может помочь karma-webpack-grep. Это позволяет ограничить файлы, которые объединяются karma-webpack. Сначала установите его.

После этого нам нужно расширить файл karma.conf.js. Поместите новый подключаемый модуль karma-webpack-grep в массив всех подключаемых модулей Webpack. Все остальное остается без изменений.

Примечание. Параметр testContext в точности совпадает с параметром require.context (…) (см. spec-bundle.js). Но откуда берется config.grep? Карма анализирует аргументы командной строки. Это означает, что если вы выполните

для config.grep будет установлено значение some / path. Давайте расширим скрипты npm

Пришло время написать тест с Жасмин. В своем POC я написал следующий тест:

Этот тестовый файл находится в src / app / model / emf / EMFRegistry. Теперь я могу выполнить этот тест одним из двух способов:

  • npm run test: chrome: grep - app / model / emf / EMFRegistry.spec.ts
  • npm run test: headless: grep - app / model / emf / EMFRegistry.spec.ts

Передаем путь к тестовому файлу из папки src. Результат теста для PhantomJS выглядит следующим образом

Бегун Karma продолжает работать и наблюдает за изменениями файла. Результаты теста появляются очень быстро при каждом изменении файла. Также можно просматривать и запускать тестовые файлы в определенной папке. Для этого вы можете просто передать эту папку сценарию npm. Например:

  • npm run test: chrome: grep - app / model / emf

Теперь все тесты в src / app / model / emf будут отслеживаться и выполняться. Просто сконцентрируйтесь на написании кода.

Удачного тестирования!