UI操作の自動テストをする(E2Eテスト)

$ git clone https://github.com/yheihei/base_diary.git
$ cd base_diary

# テストコードがすでに書いてあるブランチを見たい場合はこちら
$ git fetch && git checkout feature/#6

...
...
class Star(models.Model):
  '''いいねモデル'''
  class Meta:
    constraints = [
      models.UniqueConstraint(
        fields=["post", "user"],
        name="post_user_unique",
      ),
    ]
  post = models.ForeignKey(Post, on_delete=CASCADE)
  user = models.ForeignKey(User, on_delete=CASCADE)
  created_at = models.DateTimeField(auto_now_add=True)
  updated_at = models.DateTimeField(auto_now=True)

from django.contrib import admin
from .models import User, Post, Category, Star  # 追加

# Register your models here.
admin.site.register(User)
admin.site.register(Post)
admin.site.register(Category)
admin.site.register(Star)  # 追加

$ python manage.py makemigrations
$ python manage.py migrate

$ pip install djangorestframework

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'diary',
    'rest_framework',  # 追加
]

from rest_framework import viewsets, serializers

from diary.models import Star

...
...

class StarSerializer(serializers.ModelSerializer):
  class Meta:
    model = Star
    fields = ('id', 'post', 'user', 'created_at', 'updated_at',)


class StarViewSet(viewsets.ModelViewSet):
  queryset = Star.objects.all()
  serializer_class = StarSerializer

from django.urls import path
from django.conf.urls import url, include
from . import views
from rest_framework import routers
from rest_framework.authtoken import views as auth_views

app_name = "diary"

router = routers.DefaultRouter()
router.register(r'stars', views.StarViewSet)

urlpatterns = [
  path("", views.index, name="index"),
  url(r'^api/', include(router.urls)),
]

...
...
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

.star--disabled {
  pointer-events: none;
}
.star--enabled {
  pointer-events: initial;
}

class starButton {
  constructor(csrftoken, postId, userId, starId=0) {
    this.csrftoken = csrftoken;
    this.postId = postId;
    this.userId = userId;
    this.starId = starId;
    this.element = document.querySelector(`.star.star--post-id-${postId}`);

    /**
     * 初期化
     */
    this.init = () => {
      if (this.starId) {
        // いいね済の場合
        this.element.textContent = 'いいね済';
        this.element.removeEventListener('click', this.addStar)
        this.element.addEventListener('click', this.removeStar)
      } else {
        // まだいいね!していない
        this.element.textContent = 'いいねする';
        this.element.removeEventListener('click', this.removeStar)
        this.element.addEventListener('click', this.addStar)
      }
    }

    /**
     * 通信中にいいね!ボタン押下不可にする
     */
    this.disabled = () => {
      this.element.classList.remove('star--enabled');
      this.element.classList.add('star--disabled');
    }

    /**
     * いいね!ボタン押下可能にする
     */
    this.enabled = () => {
      this.element.classList.remove('star--disabled');
      this.element.classList.add('star--enabled');
    }

    /**
     * 非同期通信でいいね!する
     */
    this.addStar = async () => {
      this.disabled();

      let response = await fetch('/api/stars/', {
        method: 'POST',
        headers: {
          'X-CSRFToken': this.csrftoken,
          'Content-Type': 'application/json'
        },
        body:JSON.stringify({
            post: this.postId,
            user: this.userId
        })
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      if (response.status !== 201) {
        throw new Error(response.status);
      }
      const data = await response.json();
      this.starId = data['id']
      this.init();

      this.enabled();
    }

    /**
     * 非同期通信でいいね!を取り消す
     */
    this.removeStar = async () => {
      this.disabled();

      let response = await fetch(`/api/stars/${this.starId}`, {
        method: 'DELETE',
        headers: {
          'X-CSRFToken': this.csrftoken,
          'Content-Type': 'application/json'
        }
      })
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      if (response.status !== 204) {
        throw new Error(response.status);
      }
      this.starId = 0;
      this.init();

      this.enabled();
    }
  }
}

<!-- いいねする場合の実装 -->

<!-- JavaScriptとCSSを読み込む -->
<script src="/static/js/app.js"></script>
<link rel="stylesheet" href="/static/css/style.css" %}">

...

<!-- いいねするボタンを用意 -->
<a href="#" class="star star--post-id-投稿のID">いいねする</a>
<!-- JavaScript側で定義したstarButtonクラスのインスタンスを作り、initメソッドを呼ぶ -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new starButton(CSRFトークン, 投稿のID, ユーザーのID).init();
  });
</script>

<!-- いいねを解除する場合の実装 -->

<!-- JavaScriptとCSSを読み込む -->
<script src="/static/js/app.js"></script>
<link rel="stylesheet" href="/static/css/style.css" %}">

...

<!-- いいね済ボタンを用意 -->
<a href="#" class="star star--post-id-投稿のID">いいね済</a>
<!-- JavaScript側で定義したstarButtonクラスのインスタンスを作り、解除したいいいねのIDを指定する -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    new starButton(CSRFトークン, 投稿のID, ユーザーのID, 解除したいいいねのID).init();
  });
</script>

from django.db.models import Prefetch
from diary.models import Star
...
...
def index(request):
  posts = Post.objects.all()
  if request.user.is_authenticated:
    posts = posts.prefetch_related(
      Prefetch(
        'star_set',
        queryset=Star.objects.filter(user=request.user),
        to_attr='stars'
      )
    )
  return render(request, 'index.html', {
    'posts': list(posts),
  })

for post in posts:
  if len(post.stars) > 0
    print('postに紐つくstarがある。つまりユーザーはこのpostにいいねしている')
    # starの中身を取りたい時は例えばこう
    print(post.stars[0].id)
  else:
    print('いいねしてない')

<html>
  <head>
    <title>とあるエンジニアの日記帳</title>
    {% load static %}
    <script src="{% static 'js/app.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
  </head>
  <body>
    <h1>とあるエンジニアの日記帳</h1>
    {% csrf_token %}
    {% for post in posts %}
      <div>
        <h2>{{ post.title }}</h2>
        <div>投稿 : {{ post.user }}</div>
        <div>{{ post.body |safe }}</div>
        <div>{{ post.updated_at }}</div>
        <div>カテゴリー : 
        {% for category in post.categories.all %}
          <span>{{ category }},</span>
        {% endfor %}
        </div>
        {% if user.is_authenticated %}
          <a href="#" class="star star--post-id-{{ post.id }}">
            {% if post.stars|length > 0 %}
              いいね済
            {% else %}
              いいねする
            {% endif %}
          </a>
          <script>
            document.addEventListener('DOMContentLoaded', function() {
              const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
              {% if post.stars|length > 0 %}
                new starButton(csrftoken, {{ post.id }}, {{ user.id }}, {{ post.stars.0.id }}).init();
              {% else %}
                new starButton(csrftoken, {{ post.id }}, {{ user.id }}).init();
              {% endif %}
            });
          </script>
        {% endif %}
      </div>
    {% empty %}
      <p>No Diaries.</p>
    {% endfor %}
  </body>
</html>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    {% if post.stars|length > 0 %}
      new starButton(csrftoken, {{ post.id }}, {{ user.id }}, {{ post.stars.0.id }}).init();
    {% else %}
      new starButton(csrftoken, {{ post.id }}, {{ user.id }}).init();
    {% endif %}
  });
</script>

new starButton(csrftoken, {{ post.id }}, {{ user.id }}, {{ post.stars.0.id }}).init();

new starButton(csrftoken, {{ post.id }}, {{ user.id }}).init();

$ pip install selenium webdriver-manager

[
  {
    "model": "diary.user",
    "pk": 1,
    "fields": {
      "password": "pbkdf2_sha256$180000$v5YxxVKCObi7$SrCWUES4Qedh+fsHJIx2az1cMgS6wC4O7JapYTbj1/4=",
      "last_login": "2021-06-07T13:09:31.834Z",
      "is_superuser": true,
      "username": "yhei",
      "first_name": "",
      "last_name": "",
      "email": "yheihei0126@gmail.com",
      "is_staff": true,
      "is_active": true,
      "date_joined": "2021-06-07T13:05:56.903Z",
      "groups": [],
      "user_permissions": []
    }
  },
  {
    "model": "diary.post",
    "pk": 1,
    "fields": {
      "user": 1,
      "title": "タイトル1",
      "body": "<p>一つ目の日記本文",
      "created_at": "2021-06-07T13:11:23.615Z",
      "updated_at": "2021-06-07T13:11:23.615Z",
      "categories": [
        1
      ]
    }
  },
  {
    "model": "diary.post",
    "pk": 2,
    "fields": {
      "user": 1,
      "title": "2つめの記事",
      "body": "<p>二つ目の日記本文",
      "created_at": "2021-06-07T13:12:19.457Z",
      "updated_at": "2021-06-07T13:13:12.822Z",
      "categories": [
        1
      ]
    }
  },
  {
    "model": "diary.category",
    "pk": 1,
    "fields": {
      "name": "日記カテゴリ",
      "slug": "diary",
      "created_at": "2021-06-07T13:11:40.564Z",
      "updated_at": "2021-06-07T13:11:40.564Z"
    }
  }
]

# 1. seleniumを使うためのモジュールをimport
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager

# 2. selenium用のクラスStaticLiveServerTestCaseを継承してテストクラスを作る
from django.contrib.staticfiles.testing import StaticLiveServerTestCase
class UiTest(StaticLiveServerTestCase):
  fixtures = ['diary/fixtures/test/test_index_view.json']

  @classmethod
  def setUpClass(cls):
    super().setUpClass()
    options = Options()
    # 3. setUpClass内でブラウザを起動
    # options.add_argument('--no-sandbox')  # UIのないOSの場合首開けすること
    # options.add_argument('--headless')    # UIのないOSの場合首開けすること
    cls.selenium = webdriver.Chrome(ChromeDriverManager().install(), options=options)

  @classmethod
  def tearDownClass(cls):
    # 4. tearDownClass内でブラウザを終了させる
    cls.selenium.quit()
    super().tearDownClass()
  
  def test_1(self):
    pass

$ python manage.py test

  def setUp(self) -> None:
    # ログイン
    self.selenium.get(self.live_server_url + '/admin/login/')
    username_input = self.selenium.find_element_by_name('username')
    username_input.send_keys('yhei')
    password_input = self.selenium.find_element_by_name('password')
    password_input.send_keys('password')
    self.selenium.find_element_by_css_selector('[type=submit]').click()

self.selenium.get(self.live_server_url + '/admin/login/')

username_input = self.selenium.find_element_by_name('username')

username_input.send_keys('yhei')

password_input = self.selenium.find_element_by_name('password')
password_input.send_keys('password')

self.selenium.find_element_by_css_selector('[type=submit]').click()

...
from diary.models import Star
from django.urls import reverse_lazy
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
...
...
  def test_1(self):
    self.selenium.get('%s%s' % (self.live_server_url, str(reverse_lazy('diary:index'))))
    star_button_element = self.selenium.find_element_by_class_name('star--post-id-1')
    star_button_element.click()

  def test_1(self):
    '''
    いいねするボタンを押したら、ボタンの名称が「いいね済」に変わること、いいねがDBに保存されること
    '''
    self.selenium.get('%s%s' % (self.live_server_url, str(reverse_lazy('diary:index'))))
    star_button_element = self.selenium.find_element_by_class_name('star--post-id-1')
    star_button_element.click()

    self.assertEqual('いいね済', star_button_element.text)
    self.assertEqual(
      True,
      Star.objects.filter(post__id=1, user__id=1).exists()
    )

======================================================================
FAIL: test_1 (diary.tests.UiTest)
いいねするボタンを押したら、ボタンの名称が「いいね済」に変わること、いいねがDBに保存されること
----------------------------------------------------------------------
Traceback (most recent call last):
  File "/Users/yhei/github/base_diary/diary/tests.py", line 49, in test_1
    self.assertEqual('いいね済', star_button_element.text)
AssertionError: 'いいね済' != 'いいねする'
- いいね済
+ いいねする

  def test_1(self):
    '''
    いいねするボタンを押したら、ボタンの名称が「いいね済」に変わること、いいねがDBに保存されること
    '''
    self.selenium.get('%s%s' % (self.live_server_url, str(reverse_lazy('diary:index'))))
    star_button_element = self.selenium.find_element_by_class_name('star--post-id-1')
    star_button_element.click()

    # ★★★ 「APIの通信が完了する」=「ボタンにstar--enabledのクラスがつく」まで待つ
    WebDriverWait(self.selenium, 2).until(
      EC.presence_of_element_located((By.CSS_SELECTOR, '.star--post-id-1.star--enabled'))
    )

    self.assertEqual('いいね済', star_button_element.text)
    self.assertEqual(
      True,
      Star.objects.filter(post__id=1, user__id=1).exists()
    )

EC.presence_of_element_located((By.CSS_SELECTOR, '.star--post-id-1.star--enabled'))

$ python manage.py test
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
.
----------------------------------------------------------------------
Ran 1 test in 38.385s

OK
Destroying test database for alias 'default'...

import time
...
# 3秒待機
time.sleep(3)

# 1. seleniumを使うためのモジュールをimport
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager

# 2. selenium用のクラスStaticLiveServerTestCaseを継承してテストクラスを作る
from django.contrib.staticfiles.testing import StaticLiveServerTestCase
class UiTest(StaticLiveServerTestCase):
  fixtures = ['diary/fixtures/test/test_index_view.json']

  @classmethod
  def setUpClass(cls):
    super().setUpClass()
    options = Options()
    # options.add_argument('--no-sandbox')  # UIのないOSの場合首開けすること
    # options.add_argument('--headless')    # UIのないOSの場合首開けすること
    cls.selenium = webdriver.Chrome(ChromeDriverManager().install(), options=options)

  @classmethod
  def tearDownClass(cls):
    # 4. tearDownClass内でブラウザを終了させる
    cls.selenium.quit()
    super().tearDownClass()
  
  def test_1(self):
    pass

  def setUp(self) -> None:
    # ログイン
    self.selenium.get(self.live_server_url + '/admin/login/')
    username_input = self.selenium.find_element_by_name('username')
    username_input.send_keys('yhei')
    password_input = self.selenium.find_element_by_name('password')
    password_input.send_keys('password')
    self.selenium.find_element_by_css_selector('[type=submit]').click()

    # ★★★ APIの通信が完了する=ボタンにstar--enabledのクラスがつくまで待つ
    WebDriverWait(self.selenium, 2).until(
      EC.presence_of_element_located((By.CSS_SELECTOR, '.star--post-id-1.star--enabled'))
    )