В этой статье мы разберём как происходит в JavaScript тестирование кода, эта статья очень полезна, так как мало кто знает про тестирование в JS.
Также если вы плохо знаете JavaScript, то я вам рекомендую почитать наш учебник по нему, вы его найдёте по этой ссылке.
Что такое тестирование кода:
Тестирование кода, это обычно когда разработчик тестирует определённые кусок кода, обычно это функции или методы, это если мы говорим про Unit тесты.
Многие скажут, что тестировать код можно и в ручную, просто выводить результат функции в консоль, или вызвать из под браузера, так конечно можно сделать, но есть шанс что-то пропустить, и в итоге при каких то условиях функция будет не правильно работать.
Для комплексного тестирования придумали специальные функции, или как ещё называют метод Unit тестирования, он позволяет автоматизировать все тесты и сразу понять в чём ошибка.
В JavaScript тестирование гораздо интереснее чем например в PHP или в Python, в них мы уже рассматривали эту тему, теперь пришло рассмотреть это в JS.
Работа с тестами:
Теперь пришло пора разобрать как же делаться тесты в чистом JavaScript, для этого я напишу не большой пример.
Но для начала нужно нам подключить нужные скрипты в head:
1 2 3 4 5 6 7 8 9 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script> <script> mocha.setup('bdd'); </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script> <script> let assert = chai.assert; </script> |
Как видите мы подключаем специальные библиотеки, которые нам пригодятся для тестирования, они называться «mocha.js» и «chai.js», ещё запускаем mocha.setup('bdd'), она нам нужна для получения общих функций работы, и берём функции из «chai.js», они нужны для проверки что возвращает та или иная функция.
Теперь напишем несколько функций, которые мы будем тестировать, вот они:
1 2 3 4 5 6 7 8 9 10 11 12 | function sum(a, b) { return x + n; } function sub(a, b) { return a - b; } function mul(a, b) { return a * b; } function div(a, b) { return a / b; } |
Как видите мы создали несколько простых функций, также стоит предупредить, что это всё мы пишем внутри тега script во фале где всё и подключали.
Там же пишем и тесты, вот как мы их сделали:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | describe("Math", function() { it("Возвращаем результат суммы", function() { assert.equal(sum(3, 2), 5); }); it("Возвращаем результат вычитания", function() { assert.equal(sub(3, 2), 1); }); it("Возвращаем результат умножения", function() { assert.equal(mul(3, 2), 6); }); it("Возвращаем результат деления", function() { assert.equal(div(3, 2), 1.5); }); }); |
В начале мы используем функцию describe(), она нужна для обозначения блоков тестирования, которые работают внутри функции it(), в ней первый параметр нужен для описания действия, а вторая это функция в которой ведаться тестирование.
Ну и последние мы всё тестируем во функции assert.equal(), которая проверят значение которое возвращает функция.
Осталось только создать блок куда будет выводиться результат тестов и сам запуск тестов, для этого после закрывающего тега script, пишем вот что:
1 2 3 4 | <div id="mocha"></div> <script> mocha.run() </script> |
Мы создали блок с идентификатором mocha и запустили тест с помощью метода mocha.run(), теперь открываем нашу страницу и вот что мы видим:
Как видите все тесты прошлись, но что делать если есть какая то ошибка, в этом случае у нас появиться сообщение об ошибке, вот как оно будет выглядеть:
Как видите ошибки выводиться нормально, и он всё хорошо объясняет в чём проблема.
Также стоит сказать, что это только самое основное что вы можете сделать, например вы можете создать функцию которая будет создавать по циклу несколько тестов или в одном it(), вы можете запустить более одного теста.
Ещё можете использовать вложенные describe(), то есть, например примером выше, я могу внутри функции describe(), использовать ещё одну такую функцию, как в этом примере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | describe("Math", function() { function mulTests() { for(let i = 1; i <= 6; ++i) { it(`Возвращаем результат умножения 2 на ${i}`, function() { assert.equal(mul(3, i), 3*i); }); } } describe("Multiplication", function() { mulTests() }) it("Возвращаем результат суммы", function() { assert.equal(sum(3, 2), 5); }); it("Возвращаем результат вычитания", function() { assert.equal(sub(3, 2), 1); }); it("Возвращаем результат деления", function() { assert.equal(div(3, 2), 1.5); }); }); |
Как вы можете заметить, кроме вложенного describe(), мы используем функцию для создания нескольких тестов.
Вот результат работы тестов:
То есть у вас есть полная свобода для тестирования.
Дополнительные функции и методы:
Ещё стоит рассказать об дополнительных функциях которые во время работы могут оказаться полезны.
Для начала рассмотрим дополнительные функции которые нам даёт библиотека mocha.js, вот они:
- before() — Задаёт функцию которая будет выполняться до тестирования;
- after() — Задаёт функцию после тестирования;
- beforeEach() — Задаёт функцию которая будет запускаться перед каждым тестом;
- afterEach() — Задаёт функцию после теста;
Каждая из этих функция применяет в себя функцию, которую вы хотите запускать.
Также ещё рассмотрим дополнительные тесты которые даётся библиотекой chai.js:
- assert.isNaN(value) — Проверят значение на NaN;
- assert.equal(value1, value2) – проверяет равенство
value1 == value2; - assert.strictEqual(value1, value2) – проверяет строгое равенство
value1 === value2; - assert.notEqual, assert.notStrictEqual – проверяет неравенство и строгое неравенство соответственно;
- assert.isTrue(value) – проверяет, что
value === true; - assert.isFalse(value) – проверяет, что
value === false;
Можете подробно о функциях узнать по ссылке, но в целом это всё основное что вам стоит знать про тестирование.
Вывод:
В этой статье вы прочитали про в JavaScript тестирование кода, в браузере, тут мы кратко всё рассмотрели, но этого достаточно чтобы делать тесты.
Подписываетесь на соц-сети:
Оценка:
Загрузка...