От тестирования одного файла javascript до тестирования проекта Angular
Javascript - один из самых популярных языков программирования в настоящее время. Мы отправляем тысячи строк кода в производство каждый день, и уверенная доставка очень важна как для бизнеса, так и для разработчиков. Очень сложно предсказать поведение приложения в производственной среде, и небольшая ошибка в производственной среде приводит к неожиданному поведению и недоступности приложений.
Jasmine - отличная среда для тестирования приложений javascript, которая предоставляет множество хороших функций для тестирования приложений как в браузере, так и на стороне сервера. Jasmine - это фреймворк javascript, управляемый поведением, и в сочетании с karma средство запуска тестов становится мощным средством тестирования для наших приложений javascript.
Вот темы, которые мы рассмотрим в этой статье
- Тестирование с жасмином в браузере
- Тестирование с жасмином на сервере (узле)
- Методы установки и удаления
- целенаправленные, ожидающие и пропущенные тесты
- Использование этого ключевого слова
- Интеграция с кармой (javascript)
- Интеграция с кармой (машинописный текст)
- Тестирование с помощью простого проекта angular
Тестирование с жасмином в браузере
Скачайте автономный zip-архив jasmine отсюда. После загрузки и распаковки вы увидите следующую структуру папок, все исходные файлы находятся в src, а все тестовые спецификации - в spec папка
Давайте удалим файлы spec и src по умолчанию и поместим эти файлы в эти папки.
Calculator.js - это простой файл, в котором есть три метода сложения, вычитания и умножения, а CalculatorSpec.js - файл спецификации, который проверяет все методы.
Загрузите SpecRunner.html в браузер, и мы сможем увидеть результаты, и мы можем щелкнуть каждый результат, чтобы увидеть конкретный результат.
Тестирование с жасмином на сервере (узле)
настроить жасмин на стороне сервера довольно просто. Сделаем следующие шаги.
// create a nodejs project npm init // install dependencies for jasmine and console reporter npm install jasmine --save npm install jasmine-console-reporter --save-dev
Добавьте два файла Calculator.js и CalculatorSpec.js.
Важной частью здесь является jasmine.js, который является файлом конфигурации для jasmine. Он состоит из папки spec, и мы используем jasmine-console-reporter для вывода на консоль.
Давайте запустим npm test, чтобы увидеть следующий результат. Мы видим аналогичный результат, как и в версии браузера. Вот полный проект с GitHub.
Методы установки и удаления
Существуют методы настройки и разборки тестов.
beforeEach () и afterEach () запускаются до и после каждого набора тестов.
beforeAll () и afterAll () запускаются до и после всех наборов тестов.
Давайте применим это на практике: у нас есть этот файл со всеми методами настройки и удаления.
Мы можем увидеть порядок этих методов в действии.
целенаправленные, ожидающие и пропущенные тесты
На самом деле мы можем запускать определенные тесты, пропускать некоторые тесты и даже можем объявить некоторые из них в состоянии ожидания.
сосредоточенный
мы можем просто добавить f к методу it (), чтобы запустить только этот конкретный тест.
в ожидании
Мы можем просто добавить ожидающие (сообщение) в любой метод, чтобы пометить тесты как ожидающие.
исключать
Мы можем пропустить тест с помощью метода xit ().
Использование этого ключевого слова
Мы можем инициализировать и совместно использовать переменные с помощью ключевого слова this в jasmine среди методов beforeEach (), it () и afterEach ().
Давайте посмотрим на это в действии.
Интеграция с кармой (Javascript)
Зачем нам карма?
Karma - это средство запуска тестов для приложений javascript, все, что нам нужно для определения файла конфигурации, и karma позаботятся от запуска тестов до их отображения в браузере. Мы даже можем настроить, в каком браузере запускать тесты.
Например, мы запускаем CalculatorSpec.js в браузере с помощью SpecRunner.html, и каждый раз, когда нам нужно запускать этот html-файл вручную, и нам нужно перезагружать каждый раз, когда мы редактируем тестовые файлы. Karma - отличный инструмент для автоматизации всего этого для нас.
Давайте применим все это на практике.
Теперь у нас есть два простых файла test.spec.js и Calculator.spec.js, которые мы хотим запустить с кармой. Вот полный проект
Во-первых, нам нужно установить все эти зависимости и запустить karma test или npm test
// install all these dependencies npm install jasmine-core karma karma-chrome-launcher karma-jasmine karma-jasmine-html-reporter karma-spec-reporter --save-dev
Затем нам нужно добавить karma.conf.js, в котором есть все настройки для запуска тестов, такие как используемые фреймворки, браузер, расположение файлов и т. Д.
Когда мы запускаем npm test, который автоматически запускает браузер и отображает результаты как в стандартном выводе, так и в браузере.
попробуйте отредактировать и изменить тестовый файл, чтобы увидеть сбои
Интеграция с кармой (машинописный текст)
Нам нужно использовать веб-пакет для преобразования машинописного текста в javascript и тестирования этого транспилированного пакета.
Различия в том, что у нас есть файлы .ts и веб-пакет, который транслируется в javascript и указывает карму на каталог пакета для запуска тестов.
Давайте запустим npm test, чтобы увидеть результаты в браузере.
Тестирование с помощью простого проекта angular
Давайте протестируем простой проект Angular с жасмином и кармой. Я создал следующий проект с помощью angular CLI, и этот проект поставляется с настройкой кармы и жасмина и запускает все компоненты из коробки. Мы можем изменить компоненты и написать наши тестовые примеры в соответствии с нашими требованиями.
Все, что нам нужно сделать, это запустить npm test, чтобы запустить тесты в проекте angular.
Заключение
Мы рассмотрели основы жасмина, кармы и то, как настроить среду тестирования с их помощью. Понимание этих фреймворков тестирования очень важно, поскольку написание приложения не менее важно, чем написание модульных тестов.
Спасибо, что прочитали, и если вы сочтете это полезным, хлопните в ладоши и помогите другим найти его. Следуйте за мной, чтобы узнать больше интересных историй :)
