Подскажите пожалуйста новичку, как написать "Jest" тесты на сложение, вычитание, умножение, деление

Вопрос-ответ Nodejs
1

Сверстал калькулятор, а теперь не знаю, как написать тесты на выпадающий список((( Начинаю изучение “Jest”.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="calc">
        <div class="area">
            <p class="input">Введите первое число: <input class="poleVvoda" type="text" id="firstNum"></p>
            <select class="operation" name="operation" required="required" id="operation">
                <option value="">Выберите действие:</option>
                <option value="1">+</option>
                <option value="2">-</option>
                <option value="3">*</option>
                <option value="4">/</option>
            </select>
            <p class="input">Введите второе число: <input class="poleVvoda" type="text" id="secondNum"></p>
            <button class="btn" id="result">Результат</button>
            <p class="out" id="out"></p>
        </div>
    </div>
    <script src="scrypt.js"></script>
</body>

</html>

Вот к нему скрипт:

document.getElementById('result').onclick = function () {
    let firstNum = document.getElementById('firstNum').value;
    firstNum = parseInt(firstNum);
    let secondNum = document.getElementById('secondNum').value;
    secondNum = parseInt(secondNum);
    let result;
    let operation = document.getElementById('operation')
    let x = parseInt(operation.value);
    let out = document.getElementById('out');
    if (x === 1) {
        result = firstNum + secondNum;
        out.innerHTML = result;
        
    }
    else if (x === 2) {
        result = firstNum - secondNum;
        out.innerHTML = result;
        
    }

    else if (x === 3) {
        result = firstNum * secondNum;
        out.innerHTML = result;
        
    }

    else if (x === 4) {
        result = firstNum / secondNum;
        out.innerHTML = result;
        
    }
    else {
        out.innerHTML = "Выберите операцию";
    }
};

изображение_2023-08-13_181327

2

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

В твоем случае лучше всего взять такой план действий:

  1. Настроить jest по примерам. Так чтобы он запускался и запускал какой-то простейший тест (не важно что конкретно в нем).
  2. Создать модуль с функциям которые потом будут использоваться для сложения-вычитания. Возможно тебе придется заморачиваться с препроцессором типа webpack чтобы можно было использовать модули. Тело функций нужно будет взять и “переработать” из того решения что у тебя уже есть.
  3. Написать копипастой тесты для созданных функций. Лучше всего варианты тестов подскажет ИИ (который я не устану рекомендовать). Спроси его в стиле “дай список тестов которые нужно написать для проверки функции сложения”.
  4. Реализовать решение калькулятора, используя созданные функции.

И еще абстрактных идей. Для того чтобы кусок кода был тестируем нужно чтобы он зависил только от входных параметров (иными словами не зависел от глобальных переменных, наличия какого-то узла на странице). Такие куски кода, вернее функции, еще называют “чистые функции”.

Возможно у тебя задача написать end2end тесты. Они устроены иначе чем юнит тестирование. Они проверять корректность работы всей системы в браузере, прощелкивая элементы и сравнивая ожидаемое поведение браузера с фактическим. Это отдельная большая тема (субъективно более сложная и менее полезная чем юнит в контексте программиста). Напишу про нее если будет от кого-то запрос-вопрос.

3

Оцени чего сказал ИИ на мой запрос какие тесты на сложение написать. Есть из чего выбрать, но не значит что нужно реализовать все описанные тесты.

  1. Тест на сложение двух положительных чисел.
  2. Тест на сложение двух отрицательных чисел.
  3. Тест на сложение положительного и отрицательного числа.
  4. Тест на сложение числа с нулем.
  5. Тест на сложение дробных чисел.
  6. Тест на сложение очень больших чисел (проверка на переполнение).
  7. Тест на сложение чисел с плавающей запятой (для проверки точности операции).
  8. Тест на сложение чисел типа int и float.
  9. Тесты на проверку реакции функции на некорректный ввод (например, символы или строки вместо чисел).
  10. Тест на проверку результата при многократном сложении одного и того же числа (числа из серии, например).
  11. Тест с использованием граничных значений чисел.
  12. Тест на сложение комплексных чисел, если функция поддерживает их.
  13. Тест на сложение двух null значений, если применимо.
  14. Тест на корректное отображение ошибок/исключений при некорректном использовании функции.
  15. Тест на корректность математических преобразований в случае использования других операций вместе со сложением (соблюдение приоритета операций).
4

Я учусь, и первый урок по “jest” - это 2-х минутное видео, как установить его, основные команды и задание. Моё задание выглядит так:

**Сверстайте форму - калькулятор. **

Поля:
** первое значение;**
** оператор ( сложение, вычитание, умножение, деление ). Может быть представлен в виде выпадающего списка;**
** второе значение;**
** кнопка рассчитать;**
** поле для результата.**
Стили произвольные
Напишите тесты на сложение, вычитание, умножение, деление.

В сети перерыл много материала, но результата 0((( уже третий день завис на этом уроке((((

5

Лучше всего связаться с автором урока и узнать чего автор имел в виду.

Судя по описанию речь про end-2-end тесты. Это где ты пишешь программу которая эмулирует поведение пользователя (находит узел, делает клик) и проверяет ожидаемое поведение (изменение значений, классов, видимости) других узлов.

У тебя есть система в которой есть базовый end2end тест типа проверки названия заголовка страницы? Если нет, то такая система должна быть твоим первым шагом.

1 лайк