поделился раньшеИдеи построения библиотеки компонентов пользовательского интерфейсаа такжеКак реализованы компонентыто, чем я делюсь сегодня, это то, что я думаю, находится в библиотеке компонентов разработки'最'.repeat(1e8)Часть с (зэй) означает (ма) мышление (фан) -модульный тест, на данный момент мойбиблиотека компонентов пользовательского интерфейсаПокрытие92%, все функциональные компоненты закрыты с одной стороны, а инструменты закрыты не полностью. Отчет выглядит так:
предисловие
Эта статья условно разделена на три части.В первой части кратко рассказывается о модульном тестировании, чтобы у каждого было предварительное представление о его функциях и преимуществах. Вторая часть знакомит с техническим выбором юнит-тестирования и его реальным применением в проекте, а также дает простой пример, чтобы представить, как его использовать. В третьей части описывается, как использовать инструменты службы интеграции для повышения нашей производительности.
Я надеюсь, что после прочтения этой статьи у вас появится предварительное представление о концепции модульного тестирования. Далее мы подходим к функциональной части.
положительный
Сначала возникают два вопроса.
Что такое модульное тестирование?
На английском языке это называется модульным тестированием, также известным как модульное тестирование, которое представляет собой тестовую работу для проверки правильности программных модулей. Программный модуль — это наименьшая тестируемая часть приложения. В процедурном программировании единицей является отдельная программа, функция, процедура и т. д.; в объектно-ориентированном программировании наименьшая единица — это метод, включая методы базового класса (суперкласса), абстрактного класса или производного класса (подкласса). .
Следует отметить следующие ситуации:
- Тесты, которым требуется доступ к базе данных, не называются модульными тестами;
- Требуется тестирование доступа к сети не называется тестированием подразделения;
- Тесты, требующие доступа к файловой системе, не называются модульными тестами.
Зачем нужно модульное тестирование?
Модульное тестирование Я резюмирую следующие три преимущества.
1. Может обнаруживать скрытые ошибки в функциональности
Когда я писал модульные тесты, я не раз сталкивался с мыслью, что вывод должен бытьa, но результат естьbСлучай. Вот когда вам нужно пересмотреть свой код.
2. Обеспечьте безопасность рефакторинга кода
Каждый компонент в библиотеке компонентов может подвергаться рефакторингу или обновлению итеративно.Чем выше покрытие модульным тестом, тем выше вероятность того, что вы обнаружите потенциальные проблемы после изменения кода. Например, некоторые функциональные коды случайно удалены. Это приведет к отсутствию ранее использовавшихся функций при обновлении пользователями последней версии, что вызовет некоторую путаницу.
3. Простой в тестировании код — результат хорошего дизайна
Одним словом, когда я начал добавлять юнит-тесты в библиотеку компонентов, я понял, насколько плохой код я написал.
В дополнение к ним существует методология проектирования, называемаяРазработка через тестирование (TDD), что является основной практикой и технологией гибкой разработки. Прежде чем разрабатывать функциональный код, напишите код модульного тестового примера и протестируйте код, чтобы определить, какой код необходимо написать. Другая методология проектирования называетсяРазвитие, управляемое поведением (BDD). Заинтересованные студенты могут проверить это самостоятельно.
Переходим ко второй части, как мы используем модульное тестирование.
Технический отбор
Инструменты, используемые в модульном тестировании, можно условно разделить на три части:инструменты управления,тестовая среда,Библиотека утверждений.
я выбираюKarma,Mochaа такжеChaiДалее давайте поговорим о своей роли.
KarmaЭто инструмент управления процессом выполнения тестов JavaScript, основанный на Node.js, также известный какTest Runner. Общие инструменты управления включаютJestЖдать.
MochaЭто многофункциональная среда тестирования переднего плана. «Тестовая среда» — это инструмент для запуска тестов. Через него можно добавлять тестовые случаи для JavaScript-приложений, тем самым обеспечивая качество кода.MochaОн может работать как в среде Node.js, так и в среде браузера. Обычно используемые тестовые фреймворки:Asmine,JasmineЖдать.
ChaiЭто доставляющая библиотека, аналогичная встроенному утверждению узла. Предоставляя ряд утверждений, которые могут быть запущены для кода, это облегчает тестирование. Синтаксис разных утверждений отличается, по сравнению со следующей картинойexpect,shouldа такжеassertРазница между тремя библиотеками утверждений:
expect(a).to.equal(b) // expect
a.should.equal(b) // should
assert.equal(a, b) // assert
В приведенном выше примереaпредставляет результат вывода,bПредставляет желаемый результат, все три тестовых примера являются суждениями.aРавен ли онb.
Далее вводится реальный пример в проекте.
пример модульного теста
ПримерSwitchКомпоненты следующие:
На рисунке есть две части информации: четыре измерения и маркеры.
- Измерение размеров
Покрытие строки: выполняется ли каждая строка
покрытие функций: вызывается ли каждая функция
охват ветвления: выполняется ли каждый блок if
Покрытие операторов: было ли выполнено каждое выражение
- отметка
'E': 'иначе путь не выбран', который появляется в выражении if/else, означает, что тест if пройден, но тест else не пройден.
«I»: «если путь не выбран», появляется в операторе if/else без проверки if.
'x(N)': строка выполняется несколько раз.
Невыполненные строки или сегменты кода будут выделены красным
Давайте взглянемSwitchкод модульного теста.
import Vue from 'vue'
import { destroyVM, createVue, createTest } from '../util'
import Switch from 'packages/switch'
describe('Switch', () => {
let vm
afterEach(() => {
destroyVM(vm)
})
it('use', () => {
Vue.use(Switch)
expect(Vue.component(Switch.name))
.to.be.a('function')
})
it('disabled', () => {
vm = createTest(Switch, {
disabled: true
}, true)
let switchElm = vm.$el.querySelector('.owl-switch-input')
expect(switchElm.disabled).to.be.true
})
it('init callback event', done => {
const btnHandler = sinon.spy()
vm = createVue({
template: `
<owl-switch v-model="val"
:init-callback="true"
:color="color"
@callback="handle">
</owl-switch>
`,
data: {
val: false,
color: '#584628',
},
methods: {
handle () {
return btnHandler()
}
}
})
expect(btnHandler).to.be.called
setTimeout(() => {
vm.val = true
done()
})
})
})
Синтаксическая структура тестовой среды:describe,it,expect, тестовый файл может иметь несколько описаний,itОн определяет тестовый пример, а второй параметр — это функция обратного вызова.В функции возвращаемый результат, предоставленный библиотекой утверждений, может использоваться для оценки того, проходит ли тестовый пример или нет.
Интерпретируя приведенный выше код, я создаю три тестовых примера, первый тестовый примерSwitchМожно ли нормально внедрить компонент; второй тестовый пример определяет, что компонент настроен наdisabledКогда компонент отключен, третий тестовый пример в основном проверяет, выполняется ли событие обратного вызова компонента.Если у вас есть логика, которая должна отложить вызов, вам нужно использоватьdoneметод.
Одна сторона такого простого компонента написана. Из-за того, что функций мало, нужно написать очень мало тестового кода. Фактически, некоторые сложные компоненты будут иметь от 7 до 8 тестовых случаев или больше.
Далее идет последняя часть -Инструменты службы интеграции
Инструменты службы интеграции
Помимо разработки функций в нашей работе много времени занимает написание кода, а также много времени уходит на сборку и тестирование проектов. Использование инструментов автоматизации сборки и тестирования поможет нам сэкономить время, что косвенно повысит нашу производительность.
Представьте два инструмента службы интеграции, которые я использую,Travis CIа такжеCodecov.
Travis CI
Travis Ci предоставляет услугу непрерывной интеграции (CI). Он связывает проект над Github, пока есть новый код, он будет автоматически захвачен. Затем он предоставляет работающую среду, исполняемый тест, завершение сборки, а также развертывается на сервере.
Под непрерывной интеграцией понимается автоматический запуск сборок и тестов до тех пор, пока изменяется код, и обратная связь о результатах. Убедившись, что это ожидаемо, "интегрируйте" новый код в магистраль.
Преимущество непрерывной интеграции заключается в том, что вы можете видеть результаты каждого небольшого изменения в коде, поэтому вы можете продолжать накапливать небольшие изменения, а не объединять большой блок кода в конце цикла разработки.
Здесь я делаю только краткое введение, вы можете нажать на учебник, чтобы использоватьпонять большеПроверить.
Codecov
Codecov предоставляет высокоинтегрированные инструменты для группировки, объединения, архивирования и сравнения отчетов о покрытии. Codecov, как и Travis CI, поддерживает вход в учетную запись Github, а также синхронизирует проекты в Github.
При использовании сначала установите егоnpm i codecov -D,существует.travis.ymlфайл добавленcodecovПросто выполните команду. Таким образом, Travis CI будет выполнять одностороннюю работу каждый раз, когда вы меняете свой код, но такжеcodecov, отправьте результат в Codecov.
Все они предоставляют свои собственные значки, чтобы ваш проект выглядел более профессионально.
Эпилог
Часть модульного тестирования была кратко объяснена здесь.Если вы также хотите попробовать модульное тестирование на работе, вам нужно много практиковаться и использовать себя. При этом не избежать повторных операций рытья и засыпки ям.Я думаю, что то, что может устоять до конца, требует не только сильного упорства, ни богатства знаний, но требует настоящей любви к этому. Желаю тебе всего наилучшего в учебе.