В большинстве фронтенд-проектов Карма используется как средство запуска модульных тестов, написанных на 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 будут отслеживаться и выполняться. Просто сконцентрируйтесь на написании кода.
Удачного тестирования!