Статьи

Быстрое и простое тестирование JavaScript с помощью «Assert»

Март 20, 2019

Несколько лет назад я изучил обманчиво простую функцию «утверждения» у Джона Резига для тестирования вашего JavaScript. Удивительно, что всего пять или шесть строк этого кода обеспечивают отличный уровень мощности и контроля над вашим кодом при тестировании. Я покажу вам, как использовать его в сегодняшнем видео, быстрый совет.

Полный скринкаст

Код «Утверждай»

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html lang=»en-US»>
<head>
    <meta charset=»UTF-8″>
    <title>Easy JavaScript Testing </title>
    <style>
        .pass:before {
            content: ‘PASS: ‘;
            color: blue;
            font-weight: bold;
        }
  
        .fail:before {
            content: ‘FAIL: ‘;
            color: red;
            font-weight: bold;
  
        }
    </style>
</head>
<body>
  
<ul id=»output»></ul>
  
<script>
var output = document.getElementById(‘output’);
  
function assert( outcome, description ) {
    var li = document.createElement(‘li’);
    li.className = outcome ?
    li.appendChild( document.createTextNode( description ) );
  
    output.appendChild(li);
};
</script>

Это все, что вам нужно для самого базового тестирования! Функция assert принимает два параметра:

  1. результат: логическое значение, которое указывает, пройден ли ваш тест или нет
  2. описание: краткое описание вашего теста.

Затем функция assert просто создает элемент списка, применяет класс «pass» или «fail», в зависимости от того, вернул ли ваш тест true или false, и затем добавляет описание к элементу списка. Наконец, этот блок кода добавляется на страницу. Это безумно просто, но работает отлично.

Тест 1: ваш первый пример 

 
 function add (num1, num2) { 
	 вернуть num1 + num2; 
 } 
 
 var result = add (5, 20); 
 assert (результат == 24, 'Проверка функции добавления'); 
 
 // ИЛИ 
 assert (add (5, 20) == 24, «Проверка функции добавления»);

Тест 2: Закрытия 

 
 var someArray = [1,2,3,4,5], 
	 len = someArray.length, 
	 я = 0; 
 
 var count = 0; 
 
 for (; i <len; i ++) { 
	 setTimeout (function () { 
		 assert (count ++ === i, 'Проверка значения:' + i); 
	 }, я * 300); 
 }

Ой! Что произошло?

Это общая проблема, и ответом является реализация замыкания, чтобы мы могли запомнить значение «i». В противном случае, как мы заметили выше, код будет отображать только окончательное значение в последовательности: 5. 

 
 var someArray = [1,2,3,4,5], 
	 len = someArray.length, 
	 я = 0; 
 
 var count = 0; 
 
 for (; i <len; i ++) (function (i) { 
	 setTimeout (function () { 
		 assert (count ++ === i, 'Проверка значения:' + i); 
	 }, я * 300); 
 })(я);

Вывод

Сначала это может выглядеть так, как будто бы только огромные библиотеки JavaScript и такие требуют некоторой формы тестирования; однако это далеко от истины. Как мы продемонстрировали, даже простая функция, такая как «утверждение» Ресига, потенциально может спасти нас от часов отладки! Так что вы лично используете для тестирования своего кода?

32
Share: