QUnit для написания модульного теста JavaScript - Быстрый старт

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

Давайте посмотрим, как мы можем просто интегрировать QUnit в наш проект. Здесь я загружаю бесплатный веб-шаблон из Интернета.
Шаблон входа взят из https://cssauthor.com/html5-and-css3-login-forms
После этого добавил файлы JavaScript и CSS соответственно (структура папок ниже).

Теперь посмотрим, как выглядит файл login.html:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/freelogin.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? <a href="#">Sign In</a></p>
</form>
<form class="login-form">
<input type="text" id="usernameId" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
<button onclick="loginClick()">login</button>
<p class="message">Not registered? <a href="#">Create an account</a></p>
</form>
</div>
</div>
</body>

Содержимое файла Freelogin.js, как показано ниже:

function loginClick(){
var username = $("#usernameId").val();
var password = $("input[name=password]").val();
console.log("Tried to login usig userame :"+username);
fieldValidation(username, password);
}
function fieldValidation(user, pwd){
if(user && pwd && pwd.length > 8){
return true;
} else if (user && pwd && pwd.length < 8) {
alert("password length should be minimum 8");
console.log("login validation password legth failed for user :"+user);
} else {
console.log("login validation failed for user :"+user);
}
return false;
}

Мы не собираемся использовать style.css для нашей интеграции модульного теста. Так что не буду здесь упоминать блок кода style.css.

Теперь мы собираемся интегрировать QUnit для написания тестовых модулей.

Для этого мы создаем папку как единое целое, а внутри модуля папка создает файл unittest.html, как показано ниже.

unittest.html - это файл, который мы собираемся импортировать в QUnit, а также написать тестовые примеры.
Файл unittest.html имеет интеграцию с QUnit.

Итак, здесь мы использовали для импорта QUnit из CDN (сети доставки контента), используя следующие строки:

<head>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
</body>

Но рекомендуемый способ использования - это загрузка и импорт.

Для рекомендуемых настроек вы можете использовать следующие шаги:
1. Перейдите на https://code.jquery.com/qunit и загрузите последнюю доступную версию.
2. Поместите загруженный qunit-git.js и qunit-git.css в каталоге вашего веб-сайта и замените приведенные выше строки кода в файле unittest.html.

unittset.html фрагмент кода:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>QUnit Example</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
<script src="../js/freelogin.js"></script>
<script src="unit/logintest.js"></script>
</body>
</html>

А теперь вот js-файл с юнит-тестами «logintest.js».

// Test data using correct values
QUnit.test( "Unit Test name1", function( assert ) {
var username = "testUser";
var pswd = "123456789"
assert.ok(fieldValidation(username, pswd));
});
// Test data using empty password
QUnit.test( "Unit Test name2", function( assert ) {
var username = "testUser";
var pswd = ""
assert.notOk(fieldValidation(username, pswd));
});
// Test data using empty username
QUnit.test( "Unit Test name3", function( assert ) {
var username = "";
var pswd = "123456789"
assert.notOk(fieldValidation(username, pswd));
});
// Test data using invalid length password
QUnit.test( "Unit Test name3", function( assert ) {
var username = "test";
var pswd = "123"
assert.notOk(fieldValidation(username, pswd));
});

Если мы извлекли один тестовый пример из приведенной выше строки кода, он будет таким, как показано ниже, и каждый тестовый пример включает
Имя: имя тестового набора, которое отображается в отчете
Функция : может иметь одно или несколько утверждений

// Test data using correct values
QUnit.test( "Unit Test name1", function( assert ) {
var username = "testUser";
var pswd = "123456789"
assert.ok(fieldValidation(username, pswd));

Пример Если мы используем более одного утверждения в одном тестовом примере:

// Test data using empty data
QUnit.test( "login validation test", function( assert ) {
assert.notOk(fieldValidation("", "123456789"));
assert.notOk(fieldValidation("testuser", ""));
assert.notOk(fieldValidation("", ""));
});

Наконец, мы можем запустить наши модульные тесты, просто загрузив файл unittest.html в веб-браузер 😊