Тестируем и исправляем калькулятор на JavaScript

Эта статья — продолжение истории про калькулятор на JavaScript. В предыдущих частях мы:

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

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

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

Базовое тестирование

Первое, что мы делаем, — проверяем, а как вообще ведут себя кнопки математических действий и делают ли они то, что нужно. Возьмём два числа — 12 и 5 — и сравним результаты всех действий с тем, что даёт калькулятор:

Отрицательные числа тоже отображаются и считаются правильно.

Тестируем большие числа

У компьютеров есть нюанс: любые переменные имеют ограничения по размеру числа. Например, если на переменную выделено 16 бит, то максимальное число, которое можно в нее положить, — 65 536. Число на единицу больше уже потребует 17 бит, а мы столько не выделяли.

Мы хоть и разработчики этого калькулятора, но мы не помним, какое число имели в виду, когда заводили переменную. Может быть, это решение за нас принял JavaScript. Поэтому нужно проверить, не сломается ли наш калькулятор от больших чисел.

Пробуем: 123 456 789 × 2 = 246 913 578 — верно

А вот необычный эксперимент:

12 345 678 901 234 567 × 1 = 12 345 678 901 234 568

Ух ты! Мы умножили большое число на единицу, а в ответе появилась ошибка. Это значит, что настолько длинные числа за раз наш калькулятор уже обработать не в состоянии.

❌ Неправильно обрабатываются 17-значные числа и те, которые больше них.

А если мы попробуем получить 17-значное число в ответе, интересно, оно тоже будет с ошибкой?

Да, в ответе тоже неверное число — 8 × 4 = 32, поэтому в конце должно стоять 2, а не 0. Пишем баг:

❌ Если в ответе получается 17-значное число или более — ответ точно неверный.

При этом деление на 16-значное число работает верно:

Тестирование математических трюков

Теперь попробуем разделить на ноль:

Скрипт хитро выкрутился и записал результатом деления бесконечность. Но лучше выводить сообщение, что на ноль делить нельзя.

❌ Нет сообщения при делении на ноль.

Отказоустойчивость

А что если оставить поле ввода пустым и попробовать что-то посчитать? Давайте посмотрим:

Скрипт преобразовал пустую строку в ноль и получил ответ, но это неправильно — при отсутствии одного из чисел калькулятор должен сообщить об этом, а не продолжать считать.

❌ Нет сообщения, если одно из чисел не введено.

Пойдём дальше и введём слово вместо числа:

Скрипт честно пытается перевести строку в число, у него это не получается, поэтому он выдаёт неопределённое значение.

❌ Нет проверки на то, ввели число или строку.

И напоследок проверим что будет, если мы что-то введём, но не выберем ни одно действие:

Тоже плохо. Надо будет обработать такую ситуацию.

❌ Нет проверки, когда не выбрали ничего из математических действий.

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

Что делаем

После тестирования у нас получился такой список ошибок:

❌ Неправильно обрабатываются 17-значные числа и те, которые больше них.

❌ Если в ответе получается 17-значное число или более — ответ точно неверный.

❌ Нет сообщения при делении на ноль.

❌ Нет сообщения, если одно из чисел не введено.

❌ Нет проверки на то, ввели число или строку.

❌ Нет проверки, когда не выбрали ничего из математических действий.

Исправим эти ошибки. Так как все вычисления начинаются при вызове функции func(), то и править всё будем тоже внутри неё.

Проверяем, что ввели число, а не слова или другие символы

Проверяем, что нет пустых значений

JavaScript когда переводит строку в число, то пустую строку он считает как 0. Нам такой вариант не подходит, поэтому сравним её с пустой сторокой. Если она пустая — выдаём сообщение и ничего не считаем.

Ещё надо дополнительно добавить проверку на пробелы — JavaScript строку из пробелов тоже переводит как ноль, а нам это не нужно:

Обрабатываем деление на ноль

Простая проверка — добавляем сравнение второго числа с нулём:

Обрабатываем длинные числа

Даже если мы ограничим каждое поле ввода числами по 16 знаков вместо 17, то при перемножении они дадут нам в ответе 32 знака — а это тоже превышает наш предел точности. Чтобы гарантированно получить в ответе число не больше 16 разрядов перед запятой, нам нужно, чтобы оба числа были не больше 99 999 999 — в нём 8 разрядов, а при перемножении мы получим максимум 16, как раз то, что нужно.

Чтобы это сделать, добавим проверку на размер числа:

Если не выбрано математическое действие

С этим всё просто — добавляем в case действие по умолчанию, которое выполнится, если никакие из вариантов не подойдут:

В итоге

✅ Калькулятор не работает с числами больше 16 знаков до запятой и предупреждает об этом пользователя

? Найдите и исправьте ошибки в коде на Python: отладка с IDLE

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

IDLE (Integrated Development and Learning Environment) – кроссплатформенная интегрированная среда разработки и обучения для Python, созданная Гвидо ван Россумом.

Используйте окно управления отладкой

Основным интерфейсом отладки в IDLE является специальное окно управления (Debug Control window). Открыть его можно, выбрав в меню интерактивного окна пункт Debug→Debugger.

Примечание: если отладка отсутствует в строке меню, убедитесь, что интерактивное окно находится в фокусе.

Всякий раз, когда окно отладки открыто, интерактивное окно отображает [DEBUG ON].

Обзор окна управления отладкой

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

Сохраните все, откройте окно отладки и нажмите клавишу F5 – выполнение не завершилось.

Окно отладки будет выглядеть следующим образом:

Обратите внимание, что панель в верхней части окна содержит сообщение:

Расшифруем: код for i in range(1, 4): еще не запущен, а ‘__main__’.module() сообщает, что в данный момент мы находимся в основном разделе программы, а не в определении функции.

Ниже панели стека находится панель Locals, в которой перечислены непонятные вещи: __annotations__, __builtins__, __doc__ и т. д. – это внутренние системные переменные, которые пока можно игнорировать. По мере выполнения программы переменные, объявленные в коде и отображаемые в этом окне, помогут в отслеживании их значений.

В левом верхнем углу окна расположены пять кнопок: Go, Step, Over, Out и Quit – они управляют перемещением отладчика по коду.

В следующих разделах вы узнаете, что делает каждая из этих кнопок.

Кнопка Step

Нажмите Step и окно отладки будет выглядеть следующим образом:

Обратите внимание на два отличия. Во-первых, сообщение на панели стека изменилось:

На этом этапе выполняется line 1 и отладчик останавливается перед выполнением line 2.

Здесь важно, что можно отслеживать растущие значения i и j по мере прохождения цикла for. Это полезная фича поиска источника ошибок в коде. Знание значения каждой переменной в каждой строке кода может помочь точно определить проблемную зону.

Точки останова и кнопка Go

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

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

Чтобы установить точку останова, щелкните правой кнопкой мыши (Ctrl для Mac) по строке кода, на которой хотите сделать паузу, и выберите пункт Set Breakpoint – IDLE выделит линию желтым. Чтобы удалить ее, выберите Clear Breakpoint.

Установите точку останова в строке с оператором print(). Окно редактора должно выглядеть так:

Сохраните и запустите. Как и раньше, панель стека указывает, что отладчик запущен и ожидает выполнения line 1. Нажмите кнопку Go и посмотрите, что произойдет:

Теперь на панели стека информация о выполнении line 3:

На панели Locals мы видим, что переменные i и j имеют значения 1 и 2 соответственно. Нажмем кнопку Go и попросим отладчик запускать код до точки останова или до конца программы. Снова нажмите Go – окно отладки теперь выглядит так:

На панели стека отображается то же сообщение, что и раньше – отладчик ожидает выполнения line 3. Однако значения переменных i и j теперь равны 2 и 4. Интерактивное окно также отображает выходные данные после первого запуска строки с помощью функции print() через цикл.

Нажмите кнопку в третий раз. Теперь i и j равны 3 и 6. Если нажать Go еще раз, программа завершит работу.

Over и Out

Кнопка Over работает, как сочетание Step и Go – она перешагивает через функцию или цикл. Другими словами, если вы собираетесь попасть в функцию с помощью отладчика, можно и не запускать код этой функции – кнопка Over приведет непосредственно к результату ее выполнения.

Аналогично если вы уже находитесь внутри функции или цикла – кнопка Out выполняет оставшийся код внутри тела функции или цикла, а затем останавливается.

В следующем разделе мы изучим некоторые ошибки и узнаем, как их исправить с помощью IDLE.

Борьба с багами

Взглянем на « глючную » программу.

Вот неработающий код:

Введите этот код в редактор, сохраните и нажмите F5. Ожидаемый результат – _h_e_l_l_o_, но вместо этого выведется o_.

Если вы нашли, в чем проблема, не исправляйте ее. Наша цель – научиться использовать для этого IDLE.

Рассмотрим 4 этапа поиска бага:

Шаг 1: Предположение

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

Обратите внимание, что программа разделена на два раздела: определение функции add_underscores() и основной блок, определяющий переменную со значением «hello» и выводящий результат.

Посмотрим на основной раздел:

Очевидно, что здесь все хорошо и проблема должна быть в определении функции:

Первая строка создает переменную new_word со значением «_». Промах, проблема находится где-то в теле цикла for.

Шаг 2: точка останова

Определив, где может быть ошибка, установите точку останова в начале цикла for, чтобы проследить за происходящим внутри кода:

Запустим. Выполнение останавливается на строке с определением функции.

Нажмите кнопку Go, чтобы выполнить код до точки останова:

Код останавливается перед циклом for в функции add_underscores(). Обратите внимание, что на панели Locals отображаются две локальные переменные – word со значением «hello», и new_word со значением «_»,

Нажмите кнопку Step, чтобы войти в цикл for. Окно отладки изменится, и новая переменная i со значением 0 отобразится на панели Locals:

Переменная i – это счетчик для цикла for, который можно использовать, чтобы отслеживать активную на данный момент итерацию.

Нажмите кнопку Step еще раз и посмотрите на панель Locals – переменная new_word приняла значение «h_»:

Это неправильно т. к. сначала в new_word было значение «_», на второй итерации цикла for в ней должно быть «_h_». Если нажать Step еще несколько раз, то увидим, что в new_word попадает значение e_, затем l_ и так далее.

Шаг 3: Определение ошибки и исправление

Как мы уже выяснили – на каждой итерации цикла new_word перезаписывается следующим символом в строке «hello» и подчеркиванием. Поскольку внутри цикла есть только одна строка кода, проблема должна быть именно там:

Код указывает Python получить следующий символ word, прикрепить подчеркивание и назначить новую строку переменной new_word. Это именно то неверное поведение, которое мы наблюдали.

Чтобы все починить, нужно объединить word[i] + » _» с существующим значением new_word. Нажмите кнопку Quit в окне отладки, но не закрывайте его. Откройте окно редактора и измените строку внутри цикла for на следующую:

Примечание: Если бы вы закрыли отладчик, не нажав кнопку Quit, при повторном открытии окна отладки могла появиться ошибка:

You can only toggle the debugger when idle

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

Шаг 4: повторение шагов 1-3, пока ошибка не исчезнет

Сохраните изменения в программе и запустите ее снова. В окне отладки нажмите кнопку Go, чтобы выполнить код до точки останова. Понажимайте Step несколько раз и смотрите, что происходит с переменной new_word на каждой итерации – все работает, как положено. Иногда необходимо повторять этот процесс несколько раз, прежде чем исправится ошибка.

Альтернативные способы поиска ошибок

Использование отладчика может быть сложным и трудоемким, но это самый надежный способ найти ошибки в коде. Однако отладчики не всегда есть в наличии. В подобных ситуациях можно использовать print debugging для поиска ошибок в коде. PD задействует функцию print() для отображения в консоли текста, указывающего место выполнения программы и состояние переменных.

Например, вместо отладки предыдущего примера можно добавить следующую строку в конец цикла for:

Измененный код будет выглядеть следующим образом:

Вывод должен выглядеть так:

PD работает, но имеет несколько недостатков по сравнению с отладкой дебаггером. Вы должны запускать всю программу каждый раз, когда хотите проверить значения переменных, а также помнить про удаление вызовов функций print().

Один из способов улучшить наш цикл – перебирать символы в word:

Заключение

Теперь вы знаете все об отладке с помощью DLE. Вы можете использовать этот принцип с различными дебагерами.

Отладка в IDLE — найдите и исправьте ошибки Python‑кода

Ошибки совершают все — даже опытные профессиональные разработчики! Интерактивный интерпретатор Python, IDLE, довольно хорошо выявляет такие ошибки, как синтаксические ошибки и ошибки времени выполнения, но есть третий тип ошибок, с которыми вы, возможно, уже сталкивались. Логические ошибки возникают, когда действующая в остальном программа не выполняет то, что было задумано. Логические ошибки вызывают непредвиденное поведение, называемое ошибками. Удаление ошибок называется отладкой.

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

Используйте окно управления отладкой

Основным интерфейсом отладчика IDLE является окно Debug Control, или для краткости окно Debug. Вы можете открыть окно «Debug», выбрав «Debug» → «Debugger» в главном меню интерактивного окна. Идите вперед и откройте окно отладки.

Примечание. Если в строке меню отсутствует меню «Debug», убедитесь, что интерактивное окно находится в фокусе, щелкнув его.

Каждый раз, когда открыто окно отладки, интерактивное окно отображает [DEBUG ON] рядом с приглашением, указывающим, что отладчик открыт. Теперь откройте новое окно редактора и расположите три окна на экране так, чтобы вы могли видеть их все одновременно.

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

Окно управления отладкой: обзор

Чтобы увидеть, как работает отладчик, вы можете начать с написания простой программы без каких-либо ошибок. Введите в окно редактора следующее:

Окно отладки будет выглядеть так:

Обратите внимание, что панель стека в верхней части окна содержит следующее сообщение:

Это говорит о том, что строка 1 (которая содержит код for i in range(1, 4): ) вот-вот будет запущена, но еще не началась. Часть сообщения ‘__main__’. () относится к тому факту, что вы в данный момент находитесь в основном разделе программы, а не находитесь, например, в определении функции до того, как будет достигнут основной блок кода.

Кнопка Step

Идите вперед и нажмите Step в верхнем левом углу окна отладки. Окно отладки немного изменится и будет выглядеть так:

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

На этом этапе выполняется строка 1 вашего кода, а отладчик остановился непосредственно перед выполнением строки 2.

Точки останова и кнопка перехода

Часто вы можете знать, что ошибка должна быть в определенном разделе вашего кода, но вы можете не знать, где именно. Вместо того, чтобы нажимать кнопку Step целый день, вы можете установить точку останова, которая сообщает отладчику о необходимости непрерывно запускать весь код, пока он не достигнет точки останова.

Точка останова એ сообщают отладчику, когда следует приостановить выполнение кода, чтобы вы могли взглянуть на текущее состояние программы. На самом деле они ничего не ломают.

Чтобы установить точку останова, на строке кода в окне редактора, на которой вы хотите сделать паузу, щелкните правой кнопкой мыши и выберите «Set Breakpoint». IDLE выделяет линию желтым цветом, чтобы указать, что ваша точка останова установлена. Чтобы удалить точку останова, щелкните правой кнопкой мыши строку с точкой останова и выберите «Clear Breakpoint».

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

Сохраните и запустите файл. Как и раньше, панель стека в окне отладки указывает, что отладчик запущен и ожидает выполнения строки 1. Щелкните Go и посмотрите, что происходит в окне отладки:

На панели стека теперь отображается следующее сообщение, указывающее, что он ожидает выполнения строки 3:

Снова и снова

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

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

Далее вы увидите код с ошибками и узнаете, как исправить это с помощью IDLE.

Устранение некоторых ошибок

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

Вот код с ошибками:

Если вы уже понимаете, в чем проблема с кодом, не исправляйте ее. Наша цель — узнать, как использовать отладчик IDLE для определения проблемы.

Если вы не понимаете, в чем проблема, не волнуйтесь! К концу этого раздела вы найдете его и сможете идентифицировать похожие проблемы в другом коде, с которым вы столкнетесь.

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

Хотя в этом разделе рассматривается относительно простая ошибка, метод, используемый для проверки кода и поиска ошибки, одинаков для более сложных проблем.

Отладка — это решение проблемы, и по мере того, как вы набираетесь опыта, вы будете разрабатывать свои собственные подходы. В этом разделе вы узнаете простой четырехшаговый метод, который поможет вам начать работу:

Делай 1. Угадайте, где находится ошибка

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

Посмотрите на основной раздел кода:

Как вы думаете, здесь может быть проблема? Не похоже, правда? Все в этих двух строчках кода выглядит хорошо. Итак, проблема должна быть в определении функции:

Делай 2. Установите точку останова и проверьте код

Теперь, когда вы определили, где должна быть ошибка, установите точку останова в начале цикла for, чтобы вы могли точно отслеживать, что происходит внутри кода, с помощью окна отладки:

Откройте окно отладки и запустите файл. Выполнение по-прежнему приостанавливается на самой первой строке, которую он видит, то есть в определении функции.

Делай 3. Определите ошибку и попытайтесь ее исправить

Вывод, который вы можете сделать на этом этапе, заключается в том, что на каждой итерации цикла for new_word перезаписывается следующим символом в строке «hello» и завершающим символом подчеркивания. Поскольку внутри цикла for всего одна строка кода, вы знаете, что проблема должна быть в следующем коде:

Делай 4. Повторяйте шаги с 1 по 3, пока ошибка не исчезнет

Ваша первая попытка исправить ошибку сработала, поэтому вам больше не нужно повторять шаги 1–3. Так будет не всегда. Иногда, прежде чем исправлять ошибку, вам придется повторить этот процесс несколько раз.

Альтернативные способы поиска ошибок

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

Например, вместо отладки предыдущей программы с помощью окна отладки вы можете добавить следующую строку в конец цикла for в add_underscores() :

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

Когда вы запускаете файл, интерактивное окно отображает следующий вывод:

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

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

Пример цикла в этом разделе может быть хорошим примером для иллюстрации процесса отладки, но это не лучший пример кода Pythonic. Использование индекса i свидетельствует о том, что может быть лучший способ написать цикл. Один из способов улучшить этот цикл — напрямую перебирать символы в слове. Вот один из способов сделать это:

Заключение: отладка Python с помощью IDLE

Вот так то! Теперь вы знаете все об отладке с помощью окна Debug IDLE. Вы можете использовать базовые принципы, которые вы использовали здесь, с рядом различных инструментов отладки. Теперь у вас есть все необходимое, чтобы начать отладку кода Python.

В этом уроке вы узнали:

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

Единственный способ овладеть отладкой — это много практиковаться с ней! Один из способов попрактиковаться — открыть окно Debug Control и использовать его для пошагового выполнения кода, работая над упражнениями и задачами, которые вы найдете в наших Практикумах.