フォームのバリデーション検証を自動化しよう

学習の目標
はじめに
バリデーションの追加
エラーメッセージの表示機能の実装
動作確認
バリデーションのテストの実装
- テストケースの詳細解説
テストの実行
まとめ

学習の目標

本章では、以下の内容を学習します。

Railsにおけるバリデーション機能の基本的な実装方法とエラーハンドリングの仕組みについて実践的に理解する
システムスペックを使用したバリデーションテストの書き方と、ユーザー操作の流れに沿ったテストシナリオの作成方法を習得する
describeブロックを使用したテストの構造化や、複数のシナリオを効率的にテストする手法について学ぶ
フォーム機能の品質を確保するための体系的なテスト手法と、実際のユーザー操作を想定したエラーケースの網羅的なテスト方法について理解を深める

はじめに

前回はTodoの新規作成フォームの基本的なテストを実装しました。しかし、実際のWebアプリケーションでは、ユーザーが正しくない入力を行う場合も多くあります。

本章では、入力内容のチェック（バリデーション）と、エラーが発生したときの画面表示をテストする方法について学習します。バリデーション機能は、データの整合性を保つために欠かせない機能であり、その動作を確実にテストすることで、アプリケーションの品質を向上させることができます。

バリデーションの追加

まずはTodoモデルにバリデーションを追加します。これにより、不正な入力値を事前にチェックし、適切なエラーメッセージを表示できるようになります。

app/models/todo.rbを開いて、以下のコードを追加します。

class Todo < ApplicationRecord
  validates :title, presence: true
  validates :description, presence: true, length: { minimum: 10 }
end

このコードでは、以下の2つのルールを設定しています。まず、タイトルは必須（空欄は許可しない）というルールを設定しています。また、説明も必須で、かつ10文字以上の入力が必要というルールも追加しています。

エラーメッセージの表示機能の実装

次に、バリデーションエラーが発生したときにメッセージを表示できるようにします。ユーザーが間違った入力を行った際に、何が問題なのかを明確に伝えることが重要です。

app/views/todos/new.html.erbを開いて、フォームの上部にエラーメッセージ表示部分を追加します。

<h1>新規Todo作成</h1>

<% if @todo.errors.any? %>
  <div class="error-messages">
    <h2><%= @todo.errors.count %>件のエラーがあります</h2>
    <ul>
      <% @todo.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

<%= form_with(model: @todo, local: true) do |f| %>
  <div>
    <%= f.label :title, 'タイトル' %>
    <%= f.text_field :title %>
  </div>
  <br>
  <div>
    <%= f.label :description, '説明' %>
    <%= f.text_area :description %>
  </div>
  <div>
    <%= f.submit '作成' %>
  </div>
<% end %>

<%= link_to '一覧に戻る', todos_path %>

この追加により、バリデーションエラーが発生した際に、具体的なエラーメッセージがユーザーに表示されるようになります。

動作確認

では、bundle exec rails sでサーバーを起動して、実際にエラーが表示されるか確認してみましょう。

bundle exec rails s

ブラウザでhttp://localhost:3000/todosにアクセスし、以下の操作を行ってみましょう。

まず、「新規作成」リンクをクリックします。次に、タイトルと説明を空欄のまま「作成」ボタンをクリックしてみましょう。

すると、以下のようなエラーメッセージが表示されるはずです。

Title can't be blank
Description can't be blank
Description is too short (minimum is 10 character)

次に、以下の内容で試してみましょう。

タイトル：てすと
説明：短い

今度は「Description is too short (minimum is 10 characters)」というエラーメッセージが表示されるはずです。動作確認ができたら、Ctrl+Cでサーバーを停止します。

バリデーションのテストの実装

では、確認できた動作をテストコードに落とし込んでいきましょう。実際のユーザー操作を想定したテストシナリオを作成することで、バリデーション機能が期待通りに動作することを確認できます。

spec/system/todos_spec.rbに新しいテストを追加します。

require 'rails_helper'

RSpec.describe 'Todo管理', type: :system do
  # ...既存のコードは省略

  # バリデーションのテストを追加
  describe 'バリデーション' do
    it 'タイトルと説明が未入力の場合、エラーメッセージが表示される' do
      visit new_todo_path

      click_button '作成'

      expect(page).to have_content('Title can\'t be blank')
      expect(page).to have_content('Description can\'t be blank')
    end

    it '説明が10文字未満の場合、エラーメッセージが表示される' do
      visit new_todo_path

      fill_in 'タイトル', with: 'テストTodo'
      fill_in '説明', with: '短すぎ'

      click_button '作成'

      expect(page).to have_content('too short')
    end

    it 'エラー後、正しい入力で登録できる' do
      visit new_todo_path

      # まず、エラーになる操作を実行
      click_button '作成'
      expect(page).to have_content('Title can\'t be blank')

      # 次に、正しい値を入力
      fill_in 'タイトル', with: 'RSpecを学ぶ'
      fill_in '説明', with: 'システムスペックについて理解を深める'
      click_button '作成'

      # 一覧画面に遷移して、新しいTodoが表示されることを確認
      expect(current_path).to eq todos_path
      expect(page).to have_content('RSpecを学ぶ')
      expect(page).to have_content('システムスペックについて理解を深める')
    end
  end
end

テストケースの詳細解説

3つのテストを追加しました。それぞれ説明していきましょう。

1つ目のテスト：必須項目の検証

1つ目は、何も入力せずに作成ボタンを押した場合のテストです。 TitleとDescription、両方のエラーメッセージが表示されることを確認しています。これにより、必須項目のバリデーションが正しく機能していることを検証できます。

2つ目のテスト：文字数制限の検証

2つ目は、Descriptionが10文字未満の場合のテストです。 Titleは入力していても、Descriptionが短すぎる場合はエラーになることを確認しています。このテストにより、長さに関するバリデーションが正しく動作することを保証できます。

3つ目のテスト：エラー復旧の検証

3つ目は、エラーが発生した後でも、正しい値を入力すれば登録できることを確認するテストです。最初にエラーを発生させた後、正しい値を入力して作成できることを確認しています。これは実際のユーザー操作で起こりうるシナリオを想定した重要なテストです。

テストの実行

では、テストを実行してみましょう。

$ bundle exec rspec spec/system/todos_spec.rb

Todo管理
  Todo一覧を表示する
  新規Todoを作成できる
  バリデーション
    titleとdescriptionが未入力の場合、エラーメッセージが表示される
    descriptionが10文字未満の場合、エラーメッセージが表示される
    エラー後、正しい入力で登録できる

Finished in 0.12487 seconds (files took 0.89012 seconds to load)
5 examples, 0 failures

テストが全て成功しました！これにより、バリデーション機能が期待通りに動作していることが確認できます。

まとめ

本章では、バリデーションの実装とそのテストについて学習しました。

特に以下の点をテストできるようになりました。まず、入力値のチェック（バリデーション）が正しく機能することを確認できるようになりました。また、エラーメッセージが適切に表示されることも検証できます。そして、エラーが発生しても、その後に正しい値を入力すれば登録できることも確認できます。

バリデーションテストを作成することで、ユーザーが不正な入力を行った場合でも、アプリケーションが適切に対応できることを保証できます。これにより、より堅牢で使いやすいWebアプリケーションを開発することができるでしょう。

次回は、編集機能のテストについて学習します。