Тестирование и отладка программ на JavaScript

Автор: |

Оглавление

В статье мы рассмотрим основные подходы к тестированию и отладе программ на JavaScript без использования сторонних библиотек, используя встроенные средства популярных браузеров.

Они предоставляют мощные инструменты для отладки JavaScript-кода. Рассмотрим наиболее популярные браузеры и их возможности для отладки.

Инструменты тестирования в браузерах

Google Chrome

Google Chrome предлагает инструмент Developer Tools, который позволяет разработчикам просматривать и изменять HTML/CSS/JS-код прямо в браузере. Для открытия Developer Tools нажмите F12 или выберите соответствующий пункт в меню браузера.

Основные функции:

Console: Позволяет выводить данные и ошибки в консоль. Можно использовать команды вроде console.log(), console.error() и другие для отслеживания выполнения кода.

console.log(«Hello World!»);

Sources: Здесь можно установить точки останова (breakpoints), пошагово проходить код и проверять значения переменных.

Network: Отслеживает сетевые запросы и позволяет анализировать HTTP-запросы и ответы.

Performance: Инструмент для анализа производительности страницы, включая загрузку ресурсов, рендеринг и выполнение скриптов.

Mozilla Firefox

Mozilla Firefox также имеет встроенный набор инструментов для разработчиков, называемый Firefox Developer Tools. Эти инструменты схожи с инструментами Chrome и включают такие же функции, как Console, Sources, Network и Performance.

Microsoft Edge

Microsoft Edge основан на движке Chromium, поэтому его инструменты для разработчиков аналогичны инструментам Google Chrome. Открыть Developer Tools можно нажатием клавиши F12.

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

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

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

Приведём начала простую программу.

Программа, которая позволяет пользователям вводить текст и видеть его отображение в реальном времени. Страница будет содержать текстовое поле ввода и область для отображения введённого текста.

Вот пример HTML-кода для такой страницы:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Web Page</title>
</head>
<body>
    <h1>Real-time Text Display</h1>
    <input type="text" id="inputText" placeholder="Enter text here...">
    <div id="outputText"></div>

    <script>
        document.getElementById('inputText').addEventListener('input', function() {
            document.getElementById('outputText').innerHTML = this.value;
        });
    </script>
</body>
</html>

Этот код создаёт страницу с текстовым полем ввода и областью для отображения текста. Когда пользователь вводит текст в поле ввода, он сразу же появляется в области отображения благодаря событию input.

Для тестирования воспользуемся встроенными инструментами браузера.

Google Chrome предоставляет мощный инструмент Developer Tools, доступный через комбинацию клавиш F12. С его помощью можно просмотреть и изменить HTML/CSS/JS-код прямо в браузере.

Проведение тестирования

Откроем нашу веб-страницу в браузере и начнём:

Ввод текста: Введите любой текст в текстовом поле и убедитесь, что он немедленно отображается в области вывода.

Отсутствие текста: Оставьте текстовое поле пустым и убедитесь, что область вывода остаётся пустой.

Специальные символы: Попробуйте ввести специальные символы, такие как &, <, > и убедитесь, что они корректно отображаются.

Пустое значение: Удалите весь текст из поля ввода и убедитесь, что область вывода очищена.

Точки останова: Установите точку останова в обработчике события input и проследите за изменением значений элементов DOM.

Консольные сообщения: Добавьте консольное сообщение внутри обработчика события, чтобы отслеживать изменение состояния элемента:

document.getElementById('inputText').addEventListener('input', function() {
    console.log(this.value);
    document.getElementById('outputText').innerHTML = this.value;
});});

Это позволит вам следить за изменениями в консоли браузера.

Google Chrome предоставляет мощный инструмент Developer Tools, доступный через комбинацию клавиш F12. С его помощью можно просмотреть и изменить HTML/CSS/JS-код прямо в браузере.

Проведение тестирования
Откроем нашу веб-страницу в браузере и начнём:

Ввод текста: Введите любой текст в текстовом поле и убедитесь, что он немедленно отображается в области вывода.

Отсутствие текста: Оставьте текстовое поле пустым и убедитесь, что область вывода остаётся пустой.

Специальные символы: Попробуйте ввести специальные символы, такие как &, <, > и убедитесь, что они корректно отображаются.

Пустое значение: Удалите весь текст из поля ввода и убедитесь, что область вывода очищена.

Точки останова: Установите точку останова в обработчике события input и проследите за изменением значений элементов DOM.

Консольные сообщения: Добавьте консольное сообщение внутри обработчика события, чтобы отслеживать изменение состояния элемента:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Web Page</title>
</head>
<body>
    <h1>Real-time Text Display</h1>
    <input type="text" id="inputText" placeholder="Enter text here...">
    <div id="outputText"></div>

    <script>
        document.getElementById('inputText').addEventListener('input', function() {
            document.getElementById('outputText').innerHTML = this.value;
        });
    </script>
</body>
</html>

Это позволит вам следить за изменениями в консоли браузера.

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




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Calculator</title>
</head>
<body>
    <h1>Web Calculator</h1>
    <input type="number" id="num1" placeholder="Enter first number">
    <select id="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="number" id="num2" placeholder="Enter second number">
    <button id="calculate">Calculate</button>
    <p id="result"></p>

    <script>
        document.getElementById('calculate').addEventListener('click', function() {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const operation = document.getElementById('operation').value;

            let result;
            switch (operation) {
                case '+':
                    result = num1 + num2;
                    break;
                case '-':
                    result = num1 - num2;
                    break;
                case '*':
                    result = num1 * num2;
                    break;
                case '/':
                    if (num2 === 0) {
                        result = "Error: Division by zero";
                    } else {
                        result = num1 / num2;
                    }
                    break;
                default:
                    result = "Error: Invalid operation";
            }

            document.getElementById('result').textContent = result;
        });
    </script>
</body>
</html>

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




// Функция для выполнения тестов
function runTests() {
    // Тест 1: Проверка сложения
    try {
        const num1 = 5;
        const num2 = 10;
        const operation = '+';
        const expectedResult = 15;

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 1 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 1 passed.");
    } catch (e) {
        console.error("Test 1 failed:", e.message);
    }

    // Тест 2: Проверка вычитания
    try {
        const num1 = 10;
        const num2 = 5;
        const operation = '-';
        const expectedResult = 5;

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 2 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 2 passed.");
    } catch (e) {
        console.error("Test 2 failed:", e.message);
    }

    // Тест 3: Проверка умножения
    try {
        const num1 = 5;
        const num2 = 10;
        const operation = '*';
        const expectedResult = 50;

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 3 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 3 passed.");
    } catch (e) {
        console.error("Test 3 failed:", e.message);
    }

    // Тест 4: Проверка деления
    try {
        const num1 = 10;
        const num2 = 2;
        const operation = '/';
        const expectedResult = 5;

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 4 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 4 passed.");
    } catch (e) {
        console.error("Test 4 failed:", e.message);
    }

    // Тест 5: Проверка деления на ноль
    try {
        const num1 = 10;
        const num2 = 0;
        const operation = '/';
        const expectedResult = "Error: Division by zero";

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 5 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 5 passed.");
    } catch (e) {
        console.error("Test 5 failed:", e.message);
    }

    // Тест 6: Проверка неправильной операции
    try {
        const num1 = 10;
        const num2 = 5;
        const operation = '!';
        const expectedResult = "Error: Invalid operation";

        const result = calculate(num1, num2, operation);
        if (result !== expectedResult) {
            throw new Error("Test 6 failed: Expected " + expectedResult + ", got " + result);
        }
        console.log("Test 6 passed.");
    } catch (e) {
        console.error("Test 6 failed:", e.message);
    }
}

// Функция для выполнения калькуляции
function calculate(num1, num2, operation) {
    let result;
    switch (operation) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 === 0) {
                result = "Error: Division by zero";
            } else {
                result = num1 / num2;
            }
            break;
        default:
            result = "Error: Invalid operation";
    }
    return result;
}

// Запуск тестов
runTests();

Как это работает

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

Тест 5 проверяет, что калькулятор корректно обрабатывает деление на ноль.

Тест 6 проверяет, что калькулятор корректно обрабатывает неправильную операцию.
Результат

Если вы откроете консоль браузера и запустите этот код, вы увидите результаты выполнения тестов. Например:

Test 1 passed.
Test 2 passed.
Test 3 passed.
Test 4 passed.
Test 5 passed.
Test 6 passed.

Интеграционное тестирование

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

Покажем интеграционное тестирование на примере уже имеющейся программе калькулятора.




// Функция для выполнения интеграционных тестов
function runIntegrationTests() {
    // Тест 1: Проверка взаимодействия при сложении
    try {
        const num1 = 5;
        const num2 = 10;
        const operation = '+';
        const expectedResult = 15;

        // Имитация ввода данных в интерфейс
        document.getElementById('num1').value = num1;
        document.getElementById('num2').value = num2;
        document.getElementById('operation').value = operation;

        // Имитация нажатия кнопки "Calculate"
        document.getElementById('calculate').click();

        // Проверка результата
        const resultElement = document.getElementById('result');
        if (resultElement.textContent !== expectedResult.toString()) {
            throw new Error("Test 1 failed: Expected " + expectedResult + ", got " + resultElement.textContent);
        }
        console.log("Test 1 passed.");
    } catch (e) {
        console.error("Test 1 failed:", e.message);
    }

    // Тест 2: Проверка взаимодействия при делении на ноль
    try {
        const num1 = 10;
        const num2 = 0;
        const operation = '/';
        const expectedResult = "Error: Division by zero";

        // Имитация ввода данных в интерфейс
        document.getElementById('num1').value = num1;
        document.getElementById('num2').value = num2;
        document.getElementById('operation').value = operation;

        // Имитация нажатия кнопки "Calculate"
        document.getElementById('calculate').click();

        // Проверка результата
        const resultElement = document.getElementById('result');
        if (resultElement.textContent !== expectedResult) {
            throw new Error("Test 2 failed: Expected " + expectedResult + ", got " + resultElement.textContent);
        }
        console.log("Test 2 passed.");
    } catch (e) {
        console.error("Test 2 failed:", e.message);
    }

    // Тест 3: Проверка взаимодействия при неправильной операции
    try {
        const num1 = 10;
        const num2 = 5;
        const operation = '!';
        const expectedResult = "Error: Invalid operation";

        // Имитация ввода данных в интерфейс
        document.getElementById('num1').value = num1;
        document.getElementById('num2').value = num2;
        document.getElementById('operation').value = operation;

        // Имитация нажатия кнопки "Calculate"
        document.getElementById('calculate').click();

        // Проверка результата
        const resultElement = document.getElementById('result');
        if (resultElement.textContent !== expectedResult) {
            throw new Error("Test 3 failed: Expected " + expectedResult + ", got " + resultElement.textContent);
        }
        console.log("Test 3 passed.");
    } catch (e) {
        console.error("Test 3 failed:", e.message);
    }
}

// Запуск интеграционных тестов
runIntegrationTests();

Как это работает

Тест 1 проверяет взаимодействие при сложении двух чисел. Мы имитируем ввод данных в интерфейс, нажимаем кнопку «Calculate» и проверяем, что результат отображается корректно.

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

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

Результат
Если вы откроете консоль браузера и запустите этот код, вы увидите результаты выполнения интеграционных тестов. Например:

Test 1 passed.
Test 2 passed.
Test 3 passed.

Экспресс-тестирование

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

Шаги экспресс-тестирования:

Запуск программы: Откройте веб-страницу калькулятора в браузере.

Проверка интерфейса: Убедитесь, что все элементы интерфейса (текстовые поля, кнопки, выпадающий список) отображаются корректно.

Тестирование основных операций:

Введите два числа (например, 5 и 10) и выберите операцию сложения (+). Нажмите кнопку «Calculate» и проверьте, что результат (15) отображается корректно.

Повторите шаг для вычитания (-), умножения (*) и деления (/).

Проверка обработки ошибок:

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

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

Проведение экспресс-тестирования

Откройте веб-страницу калькулятора.

Введите числа 5 и 10 в текстовые поля.

Выберите операцию сложения (+) и нажмите кнопку «Calculate». Убедитесь, что результат (15) отображается корректно.

Повторите шаг 3 для операций вычитания (-), умножения (*) и деления (/).

Введите нечисловые значения (например, «abc») в текстовые поля и убедитесь, что программа корректно обрабатывает такие случаи.

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