こんな人におすすめ
- プログラミング初心者でポートフォリオの作り方が分からない
- Rails Tutorialをやってみたが理解することが難しい
前回：#10.5 RSpecでTutorialのテストを書き直す
次回：#12 ActionMailer, アクティベーション編
こんなことが分かる
- プロフィール編集画面の例
- Bootstrap4のCardの使用例
- FactoryBotで複数ユーザを生成する方法
- before_actionによる強制リダイレクトする方法
- 直前のリンクを記憶しリダイレクトする方法
一緒に勉強していきまっしょ
今回の流れ
- プロフィール編集のフォームをつくる
- プロフィール編集失敗/成功時を考える
- ユーザだけがプロフィール編集できるようにする
- ログイン後は編集ページにリダイレクトさせる
本ポートフォリオはTutorial10章のユーザ一覧機能、フォームのパーシャルは作成しません。
代わりに編集ページに記録した時間をリセットするボタンを付与します。
（ポートフォリオ#1を参照）
プロフィール編集のフォームをつくる
Tutorial 10.1.1 編集フォームを参考にフォーム画面をつくる。
Tutorialと異なるのは、記録時間をリセットするボタンを設けること。
それに伴ってセクションが2つ欲しい。
そこで新たなBootstrap4のコンポーネント、Cardを使用する。
app/views/users/edit.html.erb
<% provide(:title, 'プロフィール編集') %>
<div class="container edit-container">
<div class="edit-title">
<%= image_tag 'profile.png', class: 'edit-img' %>
<h1 class="form-title form-title-edit">プロフィール編集</h1>
</div>
<%= form_with(model: @user, url: user_path(@user), local: true) do |form| %>
<div class="card-deck">
<div class="col-md-6">
<section class="card">
<h2 class="card-header form-title">アカウント情報変更</h2>
<div class="card-body">
<%= render 'shared/error_messages' %>
<div class="form-group">
<%= form.text_field :name, class: 'form-control', placeholder: "名前" %>
</div>
<div class="form-group">
<%= form.email_field :email, class: 'form-control', placeholder: "メールアドレス" %>
</div>
<div class="form-group">
<%= form.password_field :password, class: 'form-control', placeholder: "パスワード" %>
</div>
<div class="form-group">
<%= form.password_field :password_confirmation, class: 'form-control', placeholder: "パスワード（再入力）" %>
</div>
<div class="form-group">
<%= form.submit "変更", class: 'btn btn-info btn-lg form-submit' %>
</div>
</div>
</section>
</div>
<div class="col-md-6">
<section class="card">
<h2 class="card-header form-title">記録時間リセット</h2>
<div class="card-body">
<div class="form-group form-group-reset_time">
<%= form.check_box :reset_time, class: 'form-check-input' %>
<%= form.label :reset_time, '記録時間をリセットする', class: 'form-check-label' %>
</div>
<div class="form-group">
<%= form.submit "変更", class: 'btn btn-info btn-lg form-submit' %>
</div>
</div>
</section>
</div>
</div>
<% end %>
</div>
ビューができたのでここへのリンク先も修正しよう。
（変更はヘッダーのほんの一部なので大幅省略）
app/views/layouts/_header.html.erb
<!-- 中略 -->
<% if logged_in? %>
<li class="nav-item nav-item-extend"><%= link_to "記録画面へ", user_path(current_user), class: "btn btn-info btn-md btn-extend" %></li>
<li class="nav-item nav-item-extend"><%= link_to "プロフィール", edit_user_path(current_user), class: "btn btn-secondary btn-md btn-extend" %></li>
<li class="nav-item nav-item-extend"><%= link_to "ログアウト", logout_path, method: :delete, class: "btn btn-danger btn-md btn-extend btn-logout-extend" %></li>
<!-- 中略 -->
（scssは省略）
プロフィール編集失敗時を考えよう
編集失敗したらエラーを出して同じ画面に戻るようにする。
じゃあまずはテスト、その後コントローラを整えよう。
失敗時のテストを書く
テストを行う前に準備を済ませる。
これは後述する、ログインユーザのみが編集できるテストの準備も加味している。
具体的にはログインしたユーザを用意する。
そこで少し戻るけど、Tutorial 9.3.1 [Remember me] ボックスをテストするを参考に、テスト用ログインメソッドlog_in_asを用意する。
spec/support/application_helper.rb
module ApplicationHelpers
def is_logged_in?
!session[:user_id].nil?
end
def log_in_as(user, remember_me = 0)
get login_path
post login_path, params: {
session: {
email: user.email,
password: user.password,
remember_me: remember_me
}
}
follow_redirect!
end
end
おっけ。じゃあテストといこう。
bash
$ rails g rspec:request users_edit
spec/requests/users_edits_spec.rb
require 'rails_helper'
RSpec.describe "UsersEdits", type: :request do
let(:user) { create(:user) }
def patch_invalid_information
patch user_path(user), params: {
user: {
name: "",
email: "foo@invalid",
password: "foo",
password_confirmation: "bar"
}
}
end
describe "GET /users/:id/edit" do
context "invalid" do
it "is invalid edit informaiton" do
log_in_as(user)
expect(is_logged_in?).to be_truthy
get edit_user_path(user)
expect(request.fullpath).to eq '/users/1/edit'
patch_invalid_information
expect(flash[:danger]).to be_truthy
expect(request.fullpath).to eq '/users/1'
end
end
end
end
失敗時のコントローラを整える
テストが書けたらコントローラの振る舞いを書こう。
成功時の処理は後にする。
app/controllers/users_controller.rb
class UsersController < ApplicationController
# 中略
def update
@user = User.find(params[:id])
if @user.update_attributes(user_params)
# 成功した時の処理（後述）
else
flash.now[:danger] = 'プロフィールの編集に失敗しました'
render 'edit'
end
end
private
def user_params
params.require(:user).permit(:name, :email, :password, :password_confirmation)
end
end
これで失敗時の動作は終了。
備考：エラーを捕えるテストの課題
少々課題が残った。
本当はUserモデルが持つエラーを捕えるためにこういうテストを行いたいが、
requests/users_edits_spec.rb
require 'rails_helper'
RSpec.describe "UsersEdits", type: :request do
# 中略
describe "GET /users/:id/edit" do
context "invalid" do
it "is invalid edit informaiton" do
log_in_as(user)
expect(is_logged_in?).to be_truthy
get edit_user_path(user)
expect(request.fullpath).to eq '/users/1/edit'
patch_invalid_information
expect(user.errors.any?).to be_truthy
expect(request.fullpath).to eq '/users/1'
end
end
end
end
bash
Failures:
1) UsersEdits GET /users/:id/edit invalid is invalid edit informaiton
Failure/Error: expect(user.errors.any?).to be_truthy
expected: truthy value
got: false
失敗する。
他にexpect(user.errors.full_messages)や評価前のuser.save!なども試したが、そもそも値が入っていなかった。
今回はuserコントローラにflash[:danger]の値を与えた場合のフラッシュを捕えるテストに成功したので、一応ここでのテストは締めくくる（要勉強）。
プロフィール編集失敗時を考えよう
さっきと同じようにテスト、コントローラの順で書く。
Tutorial 10.1.4 TDDで編集を成功させるとは異なり、リダイレクト先は再びプロフィール編集画面にする。
加えてパスワードを入力しないと変更不可にするので、バリデーションはいじらない。
ただこのままだと利用者が、
「新しいパスワード入力できるの？今までのパスワード入力したらいいの？」
となってしまうので、この問題は別の回で紹介する。
とりあえずテストとコントローラをつくる。
成功時のテストを書く
spec/requests/users_edits_spec.rb
# 中略
context "valid" do
it "is valid edit information" do
log_in_as(user)
get edit_user_path(user)
patch_valid_information
expect(flash[:success]).to be_truthy
follow_redirect!
expect(request.fullpath).to eq '/users/1/edit'
end
end
# 中略
成功時のコントローラを整える
app/controllers/users_controller.rb
# 中略
def update
@user = User.find(params[:id])
if @user.update_attributes(user_params)
flash[:success] = 'プロフィールの更新に成功しました'
redirect_to @user
else
flash.now[:danger] = 'プロフィールの編集に失敗しました'
redirect_to edit_user_path(@user)
end
end
# 中略
成功時↓
失敗時↓
ちなみにflashとflash.nowの使い分けはこう。
- リダイレクトあり → flash
- リダイレクトなし → flash.now
参考にさせていただきました↓
[WIP/初学者]flashとflash.nowの使い分け
ログインユーザだけがプロフィール編集できるようにする
非ログイン時にログインを促す
Tutorial 10.2 認可からプロフィール編集前にログインを要求することができる。
Tutorialでは/user/:idのページに誰でもアクセスできるが、ポートフォリオではここもログインを要求したい。
テスト→コントローラの順で（以下略
ログインを促すテスト
テストを追加、編集する。
bash
$ rails g rspec:request users
spec/requests/users_spec.rb
require 'rails_helper'
RSpec.describe "Users", type: :request do
let(:user) { create(:user) }
describe "GET /users/:id" do
it "does not go to users/1 because of having not log in" do
get user_path(user)
follow_redirect!
expect(request.fullpath).to eq '/login'
end
end
end
spec/requests/users_edits_spec.rb
# 中略
describe "GET /users/:id/edit" do
context "invalid" do
it "is invalid because of having not log in" do
get edit_user_path(user)
follow_redirect!
expect(request.fullpath).to eq '/login'
end
# 中略
end
end
ログインを促すコントローラ
あとはTutorialを参考につくればよい。
app/controllers/users_controller.rb
class UsersController < ApplicationController
before_action :logged_in_user, only: [:show, :edit, :update]
# 中略
private
# 中略
def logged_in_user
unless logged_in?
flash[:warning] = 'ログインしてください'
redirect_to login_url
end
end
end
別ユーザでのログインでは編集できないようにする
ログインしているからといって別ユーザでは意味がない。
ホーム画面にリダイレクトすることにしよう。
別ユーザをホーム画面にリダイレクトするテスト
テスト環境には複数のユーザが必要だ。
なのでFactoryBotで新たなユーザを生成する。
spec/factories/users.rb
FactoryBot.define do
factory :user do
name { "Michael Example" }
email { "michael@example.com" }
password { "password" }
password_confirmation { "password" }
end
factory :other_user, class: User do
name { "Sterling Archer" }
email { "duchess@example.gov" }
password { "foobar" }
password_confirmation { "foobar" }
end
end
これに注目。
factory :other_user, class: User do
本来FactoryBotのデータはクラスを明示的に示す必要がある。
だから複数のユーザを作成する際はクラス名を明記する。
参考にさせていただきました↓
FactoryBotでテストデータ作成する方法
それではテストを書く。
spec/requests/users_edits_spec.rb
require 'rails_helper'
RSpec.describe "UsersEdits", type: :request do
let(:user) { create(:user) }
let(:other_user) { create(:other_user) }
# 中略
describe "GET /users/:id/edit" do
context "invalid" do
it "is invalid because of having not log in" do
# 中略
end
it "is invalid because of having log in as wrong user" do
log_in_as(other_user)
get edit_user_path(user)
follow_redirect!
expect(request.fullpath).to eq '/'
end
# 中略
it "is invalid edit informaiton" do
# 中略
end
it "does not redirect update because of having log in as wrong user" do
log_in_as(other_user)
get edit_user_path(user)
patch_valid_information
follow_redirect!
expect(request.fullpath).to eq '/'
end
# 中略
別ユーザをホーム画面にリダイレクトするコントローラ
書くことはさっきとほぼ一緒。
ところでこういう記述をしようと思うけれど、
@user == current_user
この箇所はリファクタリングしておく。
app/helpers/sessions_helper.rb
module SessionsHelper
# 中略
def current_user?(user)
user == current_user
end
よってこれを加味すると以下のコントローラが出来上がる。
app/controllers/users_controller.rb
class UsersController < ApplicationController
before_action :logged_in_user, only: [:show, :edit, :update]
before_action :correct_user, only: [:show, :edit, :update]
# 中略
private
# 中略
def correct_user
@user = User.find(params[:id])
redirect_to(root_url) unless current_user?(@user)
end
end
ログイン後は編集ページにリダイレクトしてあげる
編集画面でログインを勧められたのに、ログイン後に別の画面だとユーザが悲しい。
というわけで元いた画面にリダイレクトしよう。
編集ページにリダイレクトするテスト
spec/requests/users_edits_spec.rb
# 中略
context "valid" do
# 中略
it "goes to previous link because they had logged in as right user" do
get edit_user_path(user)
follow_redirect!
expect(request.fullpath).to eq '/login'
log_in_as(user)
expect(request.fullpath).to eq '/users/1/edit'
end
end
# 中略
編集ページにリダイレクトする動作
では実際の動作を記述する。
手順はこう。
- 直前のリンクを記憶する
- ログイン後、記憶したリンクがあるならそこにリダイレクトする
そのためにsessionsヘルパーに2つのメソッドを用意しよう。
app/helpers/sessions_helper.rb
module SessionsHelper
# 中略
def store_location
session[:forwarding_url] = request.original_url if request.get?
end
def redirect_back_or(default)
redirect_to(session[:forwarding_url] || default)
session.delete(:forwarding_url)
end
end
- store_location → 直前のリンクを記憶する
- redirect_back_or → 記憶したリンクか任意のリンクにリダイレクトする
これで準備はできた。
あとはコントローラを編集しよう。
app/controllers/users_controller.rb
class UsersController < ApplicationController
# 中略
def logged_in_user
unless logged_in?
store_location
flash[:warning] = 'ログインしてください'
redirect_to login_url
end
end
app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
# 中略
def create
user = User.find_by(email: params[:session][:email].downcase)
if user && user.authenticate(params[:session][:password])
log_in user
params[:session][:remember_me] == '1' ? remember(user) : forget(user)
redirect_back_or user
else
flash.now[:danger] = 'メールアドレスかパスワードが正しくありません'
render 'new'
end
end
# 中略
よおし。
繰り返しになるが、本ポートフォリオはユーザ一覧画面が存在しない。
よってTutorial 10.3 すべてのユーザーを表示する以後のTutorial10章は使用しない。
したがって今回はここまで。
前回：#10.5 RSpecでTutorialのテストを書き直す
次回：#12 ActionMailer, アクティベーション編