Javascript Unit Testing и тестирование по разработке

1. Обзор тестирования программного обеспечения Тестирование программного обеспечения - это процесс,...
2. Acceptance Test Driven Development (ATDD)
3. Технологический процесс разработки на основе приемочных испытаний с использованием TDD
4. Уровни тестирования для разработки на основе приемочных испытаний
5. Почему мы используем Test Driven Development?
6. Разработка через тестирование с помощью React.JS
7. Модульное тестирование с заглушкой
8. Модульное тестирование с макетом
9. Настройка среды для TDD
10. Тестовые инструменты разработки
11. Юнит-тестирование React App с ферментом
12. Фермент API
13. 1. Мелкий рендеринг
14. 2. Полный рендеринг
15. 3. Статический рендеринг
16. Стамбул - инструмент покрытия кода Javascript
17. Модульные тесты Redux
18. Redux Редуктор Тесты
19. Подведение итогов тестовой разработки
20. Чем может помочь XenonStack?
21. Сервисы визуальной аналитики
22. Интерактивная разработка пользовательского интерфейса
23. Услуги визуализации данных

Обзор тестирования программного обеспечения

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

Тестирование программного обеспечения направлено на получение его намерений (как явных, так и явных), но оно имеет определенные недостатки. Тем не менее, тестирование может быть сделано более эффективно, если следовать определенным установленным принципам.

Без надлежащего тестирования никто из заинтересованных сторон приложения не может быть уверен, работает ли он должным образом или нет. Несмотря на наличие ограничений, тестирование программного обеспечения распространяется на другие методы проверки, такие как статическая интерпретация, проверка моделей и данные. Поэтому необходимо понимать цели, ограничения и принципы тестирования программного обеспечения, чтобы повысить эффективность тестирования программного обеспечения.

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

Такая тщательная трансформация полезного проекта постконструктивного тестирования превращает его в нечто иное, кроме тестирования. Такой процесс перестает быть деятельностью по тестированию и превращается в разработку через тестирование.

Разработка через тестирование (TDD)

Test Driven Development (TDD) - это практика программирования, которая сочетает в себе Test First Development (TFD) с рефакторингом. TDD включает в себя написание теста для кода перед фактическим кодом, а затем код для прохождения предварительно написанного теста.

Это методика циклического развития. Каждый цикл совпадает с реализацией небольшой функции. Каждый цикл считается завершенным после прохождения модульных тестов, предоставляющих функцию, а также всех существующих реверсионных тестов.

В TDD каждый из циклов начинается с написания модульного теста. Затем следует реализация, необходимая для прохождения теста и завершения рефакторинга кода с целью устранения любого дублирования, замены переходного поведения или улучшения дизайна.

TDD является ключевой практикой экстремального программирования, он предписывает, чтобы код разрабатывался или изменялся исключительно на основе результатов модульного тестирования. Первый разработчик создает классы системы вместе с соответствующими интерфейсами классов.

Затем разработчик пишет тестовый набор для каждого класса. Наконец, каждый из компонентов участвует в процессе тестирования, состоящем из двух действий: выполнить тесты и, в случае сбоя некоторых из них, провести рефакторинг кода с целью устранения ошибок, двойственности и запахов кода, которые должны быть причина неудачи. Процесс считается завершенным, когда все тесты пройдены успешно.

TDD может быть скомпилирован в следующие три шага -

Шаг 1 - Написать провальный тест

Напишите тест для вашей программы, учитывая все возможные проблемы, с которыми она может столкнуться. Поскольку кода пока нет, он определенно потерпит неудачу.

Шаг 2 - Пройди тест

Напишите минимальное количество кода для вашего теста, чтобы пройти тест.

Шаг 3 - Рефакторинг

Повысьте качество своего кода, не влияя на предварительно написанные и новые результаты тестов (то есть на уже пройденные тесты).

Acceptance Test Driven Development (ATDD)

ATDD - сокращение от Acceptance Test Driven Development. В этом процессе участвуют пользователь, бизнес-менеджер и разработчик. Сначала они обсуждают, что пользователь хочет в своем продукте, затем бизнес-менеджер создает спринт-истории для разработчика.

После этого разработчик пишет тесты перед запуском проектов, а затем начинает кодирование своего продукта. Каждый продукт / программное обеспечение разделено на небольшие модули, поэтому разработчик кодирует самый первый модуль, затем тестирует его и видит, что он выходит из строя.

Если тест пройден, и код работает в соответствии с требованиями пользователя, он переходит к следующей истории пользователя; в противном случае в код или программу вносятся некоторые изменения для прохождения теста.

Этот процесс называется Acceptance Test Driven Development.

Технологический процесс разработки на основе приемочных испытаний с использованием TDD

Вы также можете любить читать Разработка через тестирование на Java

Уровни тестирования для разработки на основе приемочных испытаний

Модульные тесты сосредоточены на тестировании определенного модуля или компонента, такого как метод класса. Это подтверждает, что функция построена правильно.

Интеграционные тесты направлены на тестирование нескольких «Единиц» вместе в группе.

Системные тесты направлены на тестирование всего программного обеспечения или продукта в целом.

Приемочные тесты - это последний уровень тестирования, который проверяет, соответствует ли функциональность системы требуемой спецификации или нет. Это подтверждает, правильно ли мы разработали или нет.

Почему мы используем Test Driven Development?

Разработка через тестирование (TDD) - это не только хорошая практика программирования, но и множество преимуществ. Ниже приведены преимущества реализации Test Driven Development в коде:

• Высокий охват тестами является одним из преимуществ TDD. Как и в случае с TDD, тесты пишутся перед фактическим кодом, что позволяет легко выполнять рефакторинг кода.
• TDD улучшает коды без ошибок, так как ошибки обнаруживаются в самом начале разработки программы.
• Рефакторинг выполняется с уверенностью, так как реализованный код тестируется и проверяется непрерывным прохождением предварительно написанных тестов.
• Поддерживать код легко, так как в любое время можно проверить функциональность функции, и это помогает отслеживать ваш код и его функциональность.
• Это позволяет вам писать небольшие тестовые коды, которые легко отлаживать, и избавляет вас от сложности кода. Как вы хорошо знаете, когда кодируете с помощью React, код быстро растет.
• Вы не заканчиваете с мертвыми кодами.
• И последнее, но не менее важное: оно заставляет вас задуматься, прежде чем писать код, и дает вам довольно четкое представление о том, чего вы пытаетесь достичь с помощью программы, которую вы собираетесь построить.

Разработка через тестирование с помощью React.JS

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

Если вы используете React.JS для разработки своей части пользовательского интерфейса вы поняли, что ваш код может очень быстро расти, поскольку вы создаете компонент React.js, в котором есть состояния, свойства, функции и классы.

И если вы использовали Redux с вашим React.js, и вы знакомы с Dispatcher, Reducers, Actions и Store, то вам необходимо использовать TDD для вашего приложения React.js, чтобы протестировать каждый компонент, чтобы проверить, дают ли ваши компоненты правильный вывод или нет, независимо от того, правильно ли ваши диспетчеры отправляют действия и хранят ваши данные реквизита для хранения или нет, а также, меняются ли ваши состояния в зависимости от того, хотите вы их изменить или нет.

Для обработки асинхронных вызовов в React.js вам необходимо промежуточное программное обеспечение. Предположим, что вы используете сотни API в своем приложении, вам нужно будет создать общее промежуточное ПО для всех запросов API. И вы должны протестировать свое промежуточное ПО с помощью инструментов тестирования, которые дают правильный ответ от API, чтобы сохранить эти данные API в редукторах.

В ReactJS мы используем различные инструменты тестирования, некоторые для модульного тестирования, некоторые для модульного тестирования, некоторые инструменты для реагирования на утилиты и некоторые инструменты для получения результатов тестирования.

Как все мы знаем, React.js разработан Facebook, их разработчики используют Jest для тестирования javascript.

Ниже мы описали некоторые инструменты, которые можно использовать для их приложения Reactjs.

Модульное тестирование с заглушкой

Заглушка - это объект с предопределенным поведением функции. Он заменяет функцию и использует предопределенные данные для ответа на вызовы функции во время тестов.

Заглушки предоставляют записанные ответы на вызовы, сделанные во время теста, обычно вообще не отвечая ни на что, кроме того, что указано для теста. Заглушки используются, когда мы не хотим, чтобы реальная функция взаимодействовала с тестами.

Заглушки могут быть полезны для ряда задач, некоторые из них перечислены ниже:

• Замена внешних вызовов, которые делают тест медленным и трудным для записи.
• Запуск различных компонентов в зависимости от выходов одной функции.
• Тестирование неожиданных условий.

let stub = sinon.stub (); заглушки ( 'hello_world'); console.log (stub.firstCall.args); // вывод: ['hello_world']

Модульное тестирование с макетом

Функция mock позволяет легко проверять связи между кодом, клонируя функцию как новый поддельный объект со всеми переданными параметрами функции. Это не влияет на фактическую реализацию функции и проверяет связи с новым поддельным объектом. Мы также можем использовать Mock, когда мы не хотим вызывать производственный код, но в то же время мы хотим убедиться, что наш код действительно выполнялся.

Макет полезен, если вам нужно заглушить различные функции из одного объекта. Если нет, заглушка гораздо проще, так как вы просто заменяете одну функцию. В отличие от заглушки, макеты могут определять ожидаемый результат теста.

Пример,

Давайте возьмем функцию, которая вызывает функцию обратного вызова при каждом рендеринге массива.

function forEach (items, callback) {for (пусть index = 0; index <items.length; index ++) {callback (items [index]); }}

Теперь мы протестируем вышеуказанную функцию, используя функцию mock, чтобы убедиться, что обратный вызов вызывается как положено или нет.

const mockCallback = jest.fn (); forEach ([0, 1], mockCallback); // фиктивная функция вызывается дважды ожидаем (mockCallback.mock.calls.length) .toBe (2); // Первый аргумент первого вызова функции был ожидаемым 0 (mockCallback.mock.calls [0] [0]). ToBe (0); // Первый аргумент второго вызова функции был 1 ожидаем (mockCallback.mock.calls [1] [0]). ToBe (1);

Вы также можете любить читать Разработка через тестирование в Scala

Настройка среды для TDD

При начале тестирования самое важное, что нам нужно сделать, - это настроить среду для наших тестов. Нам нужна среда для написания и запуска наших тестов. Нам в основном нужна библиотека утверждений, такая как Chai, и среда тестирования, такая как Enzyme, Jest или Mocha, для реализации наших тестовых кодов и проверки, работают ли тесты должным образом или нет.

Мы можем использовать любую из платформ тестирования от Enzyme, Jest, Mocha, Istanbul и т. Д. Обычно рекомендуется использовать Jest для модульного тестирования, так как он содержит почти все необходимые инструменты для выполнения модульного тестирования компонента, а также Facebook использует jest для все его коды JavaScript.

Вам необходимо установить Node.js обеспечить среду выполнения для вашего кода javascript, а также NPM, поскольку мы используем пакеты NPM для наших тестовых кодов.

Вот шаги для настройки среды -

Установка пакетов для ваших тестов.

Синтаксис -

$ npm install --save-dev jest $ npm install --save-dev энзим $ npm install --save-dev istanbul

После установки фреймворков ваш package.json должен выглядеть так:

//package.json {"name": "demo", "version": "0.1.0", "private": true, "dependencies": {"реаги": "^ 16.1.1", "реагировать на дом ":" ^ 16.1.1 ", "act-scripts": "1.0.17"}, "scripts": {"start": "response-scripts start", "build": "act-scripts build "," test ": "act-scripts test --env = jsdom", "eject": "response-scripts eject"}, "devDependencies": {"фермент": "^ 3.2.0", "istanbul": "^ 0.4 .5 "," jest ":" ^ 21.2.1 "}}

Простой пример для Jest,

//test.js description ('Addition', () => {it ('должно знать, что 5 + 4 равно 9', () => {Ожидайте (5 + 4) .toBe (9);});}) ;

Тестовые инструменты разработки

• Модульное тестирование React App с Jest

Модульное тестирование - это тест, выполняемый на компонентах для проверки функциональности компонента. Модульные тесты независимы (свободны от зависимостей). С компонентом можно выполнить ряд тестов, начиная с его рендеринга и заканчивая ожидаемым конечным результатом от компонента.

Модульные тесты должны быть выполнены на функциональность определенной функции и предположить поведение окружающих компонентов. Модульное тестирование должно быть простым, легким в реализации кода и должно легко и быстро выполняться, ожидая быстрого ответа. Маленькие модульные тесты компилируются в несколько модульных тестов для компонента, и чем больше тестов, тем больше ошибок обнаруживается, что приводит к лучшему качеству кода.

Jest - это среда тестирования с открытым исходным кодом. Он запускает тесты внутри фальшивого DOM в командной строке. Он поддерживает создание фиктивной функции и предоставляет хороший набор совпадений, который облегчает понимание утверждений. Jest также предоставляет новую функцию, называемую Snapshot Testing, которая сохраняет выходные данные визуализированного компонента в файл и сравнивает файл со снимком следующих компонентов рендеринга. Это помогает нам узнать, находится ли наш компонент на правильном пути или отклонился от ожидаемого поведения.

Для использования модульного теста Jest в приложении React.js необходимо установить Jest с помощью следующей команды:

$ npm install –save-dev jest

И добавьте следующую строку в ваш файл package.json.

{"scripts": {"test": "jest", "test: watch": "npm test - --watch"}}

Простой пример для Jest,

//test.js description ('Addition', () => {it ('должно знать, что 5 + 4 равно 9', () => {Ожидайте (5 + 4) .toBe (9);});}) ;

• Юнит-тестирование React App с ферментом

Фермент это утилита для тестирования JavaScript с открытым исходным кодом, поддерживаемая Airbnb для React, которая упрощает утверждение, манипулирование и обход выходных данных вашего компонента React.

React становится все более популярной и широко используемой библиотекой JavaScript для разработки библиотеки на основе веб-приложений и компонентов. Фермент используется для тестирования компонента как единицы, основанного на структуре компонента, манипулировании и выходе компонентов.

Если вы хотите использовать фермент с пользовательскими утверждениями и удобными функциями для тестирования ваших компонентов React, вы также можете работать с другими фреймворками, такими как -

сооружения

Чтобы начать с Enzyme, вы можете просто установить его через NPM.

$ npm i - энзим save-dev

Перед тем, как приступить к тестированию / установке Enzyme, вы должны убедиться, что Enzyme совместим с версией вашего приложения React, и на основании этого вы должны установить фермент с его адаптером, соответствующим версии реакции, которую вы используете с вашим приложением. ,

В настоящее время энзим совместим с React 15.x, React 0.14.x и React 0.13.x.

Если вы используете React версии 0.14 или React <15.5, вам необходимо установить следующие модули NPM с ферментом:

npm я –save-dev реагировать-дополнения-тест-утили реагировать-дом

Если вы используете React версии 16 и> = 15,5, вы должны установить следующие модули npm с ферментом:

npm i - save-dev реагировать-тестировать-рендерер реагировать-дом

Фермент API

Enzyme API фокусируется на визуализации реагирующего компонента и получении определенных узлов. Существует три способа визуализации компонента.

1. Мелкий рендеринг

Мелкий рендеринг можно использовать при написании юнит-тестов для React. Неглубокий рендеринг используется для того, чтобы ограничить себя тестированием компонента как модуля и точек состояния относительно того, что возвращает его метод рендеринга, не заботясь о поведении дочерних компонентов, которые не создаются или не создаются, и гарантирует, что ваши тесты не косвенно утверждаются на поведение дочерних компонентов.

Импорт :

импорт {неглубокий} из «фермента»;

shallowRenderer () используется для визуализации тестируемого компонента, из которого вы можете извлечь выходные данные компонента.

shallowRenderer.render () сравним с ReactDom.render (), но не требует DOM и отображает только один уровень. Это означает, что вы можете тестировать компоненты, которые изолированы от реализации их дочерних элементов.

2. Полный рендеринг

В отличие от поверхностного или статического рендеринга, полный рендеринг используется, когда у вас есть компоненты, которые должны взаимодействовать с API-интерфейсами DOM, или требуется полный жизненный цикл для полного тестирования компонента, например componentDidMount ().

Полное DOM-рендеринг предполагает наличие полного DOM API, что означает, что он должен работать в среде, похожей на среду браузера. Если вы не хотите запускать свои тесты в среде браузера, вы можете использовать Mount, который зависит от библиотеки jsdom.

При полной визуализации DOM компонент монтируется в DOM, поэтому тесты могут влиять друг на друга, если все они используют один и тот же DOM, поэтому пишите свои тесты и, если необходимо, используйте .unmount () или что-то подобное для очистки.

Импортировать :

import {mount} из 'энзима'

3. Статический рендеринг

Статическая визуализация использует функцию render () для визуализации реагирующих компонентов на статическую визуализацию HTML и анализа выходных данных. Render возвращает выходные данные, аналогичные другим методам рендеринга ферментов, таким как mount и shallow. Однако для статического рендеринга используется сторонняя библиотека Cheerio для анализа и обхода HTML.

Импортировать

импорт из 'фермента';

пример

импорт React из 'реакции'; демонстрационный класс расширяет React.Component {render () {return (<div className = "demo"> <span> демонстрационный компонент </ span> </ div>); }} экспорт по умолчанию Demo; //test.js import React из 'реакция'; импорт {неглубокий} из «фермента»; импортировать демо из '../demo'; description ("Набор", function () {it ("должен отображать демонстрационный компонент", function () {Ожидаем (true) .toBe (true); ожидаем (неглубоко (<Demo />) .contains (<span>) Демо-компонент </span>)).toBe(true);});});

Этот тест проверяет демонстрационный компонент и проверяет наличие у него тега «span span Demo Component </ span>».

• Стамбул - инструмент покрытия кода Javascript

Стамбул является инструментом покрытия кода Javascript, написанным на JS Он используется как инструмент командной строки, а также библиотека. Может использоваться как генератор кода escodegen. Он также используется для создания отчетов HTML и консоли.

Он отслеживает покрытие операторов, ветвей и функций, давая результаты построчно со 100% точностью. Istanbul - это JS-код со счетчиками строк, чтобы вы могли отслеживать, насколько хорошо ваши юнит-тесты выполняют вашу кодовую базу.

Istanbul.js может быть легко реализован с помощью модулей реагирующего тестирования, таких как Mocha, TAP, AVA.

Чтобы использовать тестовое покрытие Istanbul в приложении React.js, вы должны установить nyc с помощью следующей команды.

$ npm i nyc –save-dev

И добавьте следующую строку в ваш файл package.json.

{"scripts": {"test": "nyc mocha"}}

Теперь начните писать свои тесты, и в конце, когда вы хотите охватить ваши тесты, просто запустите команду.

$ nyc npm test

Это найдет все тесты в вашем коде и предоставит ваш отчет на вашей консоли в хорошо организованной структурированной таблице.

Модульные тесты Redux

Redux Action Tests

Тесты действий с использованием библиотеки утверждений chai для модульного тестирования действий для функций отображения.

//action.test.js import * как действия из '../../actions/display'; импортировать * как типы из '../../constants/DisplayType'; импорт chai из 'chai'; пусть ожидают = chai.expect; description ('actions', () => {it ('должно создать действие для изменения значения выбранного содержимого', () => {const value = "Item"; const Ожидаемое действие = {type: types.SELECT_ITEM, selectItem: «Item»} Ожидается (actions.itemSelect (value)). To.deep.equal (Ожидаемое действие)}) it ('должно создать действие для изменения индекса выбранного элемента', () => {const value = "2 "; const Ожидаемое действие = {тип: types.SELECT_INDEX, selectIndex:" 2 "} Ожидайте (actions.indexSelect (значение)). to.deep.equal (Ожидаемое действие)}) оно ('должно создать действие, чтобы открыть уведомление о закрытии объявления menu ', () => {const value = true; const Ожидаемое действие = {тип: types.OPEN_NOTIFICATION, NotificationOpen: true} Ожидайте (actions.isNotifyOpen (значение)). to.deep.equal (Ожидаемое действие)})})

Redux Редуктор Тесты

Тесты редуктора с использованием библиотеки утверждений chai для модульного тестирования редуктора для функций дисплея.

импортировать displayReducer из '../../reducers/displayReducer'; импортировать * как типы из '../../constants/DisplayType'; импорт chai из 'chai'; пусть ожидают = chai.expect; description ('actionReducer', () => {it ('должен возвращать начальное состояние', () => {const Ожидаемое действие = {selectedItem: 'default', selectedIndex: '1', isNotificationOpen: false} Ожидайте (displayReducer (undefined) , {})). to.eql (pectedAction)}) it ('должно возвращать логическое значение для уведомления об открытии и закрытии', () => {const value = true; const ОжидаемоеAction = {isNotificationOpen: value} Ожидается (displayReducer ( [], {type: types.OPEN_NOTIFICATION, NotificationOpen: value})). to.deep.equal (Ожидаемое действие)})})

Подведение итогов тестовой разработки

В конце концов, можно с уверенностью сказать, что Test Driven Development должна быть принята как можно большим числом разработчиков, чтобы повысить их производительность и улучшить не только качество кода, но и повысить производительность и общую разработку программного обеспечения / программы. TDD также приводит к более модульному, гибкому и расширяемому коду.

Чем может помочь XenonStack?

XenonStack использует подход, основанный на тестировании, при разработке приложений уровня предприятия в соответствии с методологией Agile Scrum.

• Сервисы визуальной аналитики

Превратите свои данные в графическое представление с помощью служб Visual Analytics. Visual Analytics с Javascript помогает вам понимать тенденции, анализируя и объясняя данные в режиме реального времени. Раскройте потенциал вашего Большие данные с интерактивной визуальной аналитикой. Наши высококвалифицированные специалисты по статистике помогут вам проанализировать и расшифровать ваши данные, чтобы визуально представить их в виде изображений, графиков, диаграмм, чтобы открыть новые возможности и улучшить процесс принятия решений.

• Интерактивная разработка пользовательского интерфейса

Создайте интерактивный интерфейс и панель инструментов, применяя принципы функционального реактивного программирования. В XenonStack мы используем компоненты Material Design от Google в экосистеме React для создания панелей мониторинга. React облегчает создание повторно используемых высокопроизводительных компонентов пользовательского интерфейса, которые можно составлять для формирования современных веб-интерфейсов.

• Услуги визуализации данных

Откройте для себя скрытые данные в ваших данных с визуализацией данных. Предоставьте визуально привлекательную и информативную аналитику BI с такими инструментами визуализации данных, как живописная картина , PowerBI , Превратите свои данные в интеллектуальные идеи с помощью интеллектуального моделирования, используя Сбор данных ,

Похожие

Комментарии