Написание тестов для форм и шаблонов

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

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

Шаблон главной страницы

В приведенном выше коде мы создаем новый файл с именем home.html в папке наших шаблонов проекта . У нас был index.html файл, загружающий домашнюю страницу. Однако согласно тестам, которые мы написали в прошлом уроке, файл изменился. Теперь нам нужно либо переименовать файл, либо создать новый.

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

Добавим в него следующий код:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>E-library Application</title>
  </head>
  <body>
      <div class="container">
        <h1>E-library Application &#128218;</h1>
        <hr>
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                      978-1-60309-025-4
                    </div>
                    <div class="card-body">
                      <h5 class="card-title">Django for Beginners (2018)</h5>
                      <p class="card-text">
                          <em>By:</em> John Doe
                          <br>
                          <br>
                          <strong>Availability:</strong> True
                        </p>

                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header">
                        978-1-60309-025-3
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Django for Beginners (2018)</h5>
                        <p class="card-text">
                            <em>By:</em> John Doe
                            <br>
                            <br>
                            <strong>Availability:</strong> False
                          </p>
  
                      </div>
                  </div>
            </div>
            <div class="col-md-6">
              

                <form method="post">
                    {% csrf_token %}
                   
                    {{ add_book_form.as_p }}
                    
                      <br>
                      <div class="text-center">
                        <input type="submit" class="btn btn-warning" style="width: 100%" value="Add Book">
                      </div>
                   </form>
            </div>
        </div>
      </div>
    

  </body>
</html>

Во-первых, после создания стандартного документа HTML с необходимыми тегами мы добавляем заголовок с использованием тега <h1> с именем E-library Application. Теперь другой тестовый метод должен успешно работать, поскольку мы даем ему соответствующий заголовок.

В завершение мы добавили созданную ранее форму: этот код присутствовал в файле index.html. Тем не менее, мы перенесли его сюда, в home.html файл и добавили CSS-библиотеку Bootstrap 5 в качестве стиля по умолчанию, а также добавили несколько демонстрационных книг.

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

from django.shortcuts import render
from .forms import AddBookForm


def home(request):
    add_book_form = AddBookForm()
    return render(request, 'home.html', {
        "add_book_form": add_book_form,
    })

Запускаем тесты

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

python manage.py test elibrary_app.tests.CatalogTemplateTests.test_homepage_template

python manage.py test elibrary_app.tests.CatalogTemplateTests.test_homepage_contains_correct_html

python manage.py test elibrary_app.tests.CatalogTemplateTests.test_homepage_does_not_contain_incorrect_html

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

```
python manage.py test
```

Теперь тесты успешно проходят.