Python: макет, стилевое оформление сайта и тестирование

Python: макет, стилевое оформление сайта и тестирование.

В этой статье мы рассмотрим некоторые основы оформления, включая интеграцию платформы HTML/CSS под названием Bootstrap. Мы изучим, как статические файлы работают в Django и что нам нужно делать для их тестирования.

Что функционально тестируется в макете и стилевом оформлении

Бесспорно, наш сайт сейчас выглядит непривлекательно.

Если вы запустите свой сервер разработки командой manage. py runserver, то можете столкнуться с ошибкой базы данных «table Lists_item has no column named list_id» (в таблице iists_item отсутствует столбец с именем list_id). Нужно обновить локальную базу данных, чтобы отразились изменения, которые мы внесли в models.py. Примените команду manage. py migrate. Если она будет доставать вас ошибкой integrityErrors, просто удалите! файл базы данных и попробуйте еще раз.

Поэтому давайте внесем свою лепту в его полировку. Вот пара вещей, которые мы, возможно, захотим сделать:

— Хорошее большое поле ввода для добавления новых и существующих списков.

— Большое, привлекающее внимание поле по центру для вставки списка.

Каким образом применить методологию TDD в этих случаях? Большинство людей скажет, что не следует тестировать эстетику, и они будут правы. Это несколько смахивает на тестирование константы в том смысле, что тесты обычно не добавляют никаких значений.

Но мы можем протестировать реализацию нашей эстетики — как раз чтобы убедиться, что все работает. Например, для стилевого оформления мы будем применять каскадные таблицы стилей (CSS), они загружаются как статические файлы. Статические файлы бывает сложновато конфигурировать (особенно, как мы увидим позже, когда вы «перезжаете» со своего ПК на размещающий сайт). Поэтому нам нужно что-то вроде простой «проверки на токсичность» (smoke test), подтверждающей, что CSS загрузился. Нам не требуется тестировать шрифты и цвета и каждый пиксель, но мы можем сделать быструю проверку, что на каждой странице основное поле ввода выровнено именно так, как мы хотим, и это даст нам уверенность, что остальная часть стилевого оформления страницы, вероятно, тоже загрузилась. К слову, в наше время недостаточно просто создать сайт, дабы привлечь целевую аудиторию, и без релевантных ссылок не обойтись. Сервис Backlink Maker поможет решить задачу получения релевантных ссылок.

Начнем с нового метода тестирования в функциональном тесте:

Здесь есть несколько новых нюансов. Мы начинаем с установки размера окна в фиксированное значение. Затем отыскиваем элемент input, смотрим на его размер и расположение и выполняем небольшие математические вычисления, чтобы проверить, расположен ли он посередине страницы. assertAlmostEqual помогает нам справиться с погрешностями округления и случайными странностями из-за полос прокрутки и т. п., позволяя нам указать, что мы хотели бы, чтобы результаты наших арифметических вычислений работали с точностью до +/-10 пикселов. Если мы выполним функциональные тесты, то получим:

Это ожидаемая неполадка. Однако этот вид ФТ легко понять неправильно, поэтому давайте применим черновое решение «с обманом», чтобы проверить, что ФТ тоже проходит, когда поле ввода центрировано. Мы удалим этот программный код, как только применим его для проверки ФТ:

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

Это дает нам еще одну неполадку теста:

Давайте зафиксируем только ФТ:

Теперь, похоже, мы имеем все основания для поиска надлежащего решения, которое отвечает нашей потребности в более хорошем стилевом оформлении сайта. Мы можем отступить от неуклюжего решения с <p style=»text-align: center»>:

$ git reset — hard

Команда Git $ git reset —hard — это, что называется, «взле­тай и уничтожай территорию с орбиты», поэтому будьте с ней осторожны — она сдует все ваши незафиксированные изме­нения. В отличие от почти всего остального, что можно делать при помощи Git, после этой команды нет никакого способа отыграть назад.