はじめに
RSpecでモデルテストを書いている時にActiveStorageでモデルに関連づけた画像のバリデーションのところでつまづいたのでメモ。
RSpecとFactoryBotを使用する。（ここではインストールの部分は省略）
やること
音楽レビューアプリのRecordモデルに付けた画像(:jacket)が空の時はエラーを表示する。
モデル
RecordモデルはGenreモデルに紐づいている。
Genreモデルは、（一部省略）
app/models/genre.rb
class Genre < ApplicationRecord
has_many :records
end
Recordモデルは、（一部省略）
app/models/record.rb
class Record < ApplicationRecord
belongs_to :genre
has_one_attached :jacket #一つの画像
validate :jacket_presence #画像のバリデーション
def jacket_presence
unless jacket.attached?
errors.add(:jacket, 'must be attached')
end
end
end
has_one_attached :jacketで一つの画像を持つとし、
jacket_presenceメソッドで画像が付いていない時はエラーメッセージを追加する。
テスト用画像の用意
まずpublicディレクトリにjacketsファイルを追加し、
そこに一つ画像を追加する。
ここではjustin.jpgファイルをpublic/jacketsに追加。
FactoryBotを編集
まずはGenreを編集する。
spec/factories/genre.rb
FactoryBot.define do
factory :genre do
name { "Pop" }
end
end
次はRecordを編集する。
spec/factories/record.rb
FactoryBot.define do
factory :record do
name { "Justice" }
release_year { 2021 }
artist { "Justin Bieber" }
#genreとのアソシエーションは、
#genre_id { 1 } でなく、以下のように書く
genre
#recordモデル作成後:jacketを関連づける。
after(:build) do |record|
record.jacket.attach(io: File.open('public/jackets/justin.jpg'), filename: 'justin.jpg')
end
end
end
これでテスト用のモデル作成の準備が完了。
テストファイルの編集
Recordのモデルテストを編集する。
spec/models/record_spec.rb
require 'rails_helper'
RSpec.describe Record, type: :model do
describe 'create new record'do
before do #テスト用のRecordを作成
genre = FactoryBot.create(:genre)
@record = FactoryBot.create(:record)
end
#全ての項目があれば有効。
context 'with a name, release_year, artist, genre, and jacket' do
it "is valid" do
record = @record
expect(record).to be_valid
end
end
#:jacketなしの場合はエラー
context 'without a jacket' do
it "is invalid" do
@record.jacket = nil #:jacketを空にする。
record = @record
record.valid?
#エラーメッセージが追加される。
expect(record.errors[:jacket]).to include("must be attached")
end
end
end
end
RecordはGenreに紐づいているため先にgenreを作成している。
これでテストできた。
ActionCableについて
ActionCableとは、通常のRailsアプリケーションと同様の記述で、即時更新機能を実装できるフレームワークです。例えば、メッセージやコメントを即時表示させたい場合に使用します
実装について
まずは以下のコマンドをターミナルで打ち込んでください
rails g channel message
このようになれば成功です。
Running via Spring preloader in process 11084
invoke test_unit
create test/channels/message_channel_test.rb
create app/channels/message_channel.rb
identical app/javascript/channels/index.js
identical app/javascript/channels/consumer.js
create app/javascript/channels/message_channel.js
今回の実装では以下の2つのファイルについて理解する必要があります。
message_channel.rb
クライアントとサーバーを結びつけるためのファイルです。
message_channel.jsの役割
サーバーから送られてきたデータをクライアントの画面に描画するためのファイルです
では、さっそくコードを書いていきます。
まずは、サーバーとクライアントを結び付けます。
app/channels/message_channel.rb
class MessageChannel < ApplicationCable::Channel
def subscribed
stream_from "message_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
このとき出てくるstream_fromは、ActionCableで用意されているメソッドでサーバとクライアントを関連づけます。この関連づけられたことで作られるデータの経路をboradcast(ブロードキャスト)と言います。
次にコントローラの編集をしましょう
app/controller/messages_controller.rb
class MessagesController < ApplicationController
def new
@messages = Message.all
@message = Message.new
end
def create
@message = Message.new(text: params[:message][:text])
if @message.save
ActionCable.server.broadcast 'message_channel', content: @message
end
end
end
下から四行目に着目してください。
broadcastを通して、'message_channel'に向けて@messageを送信するという意味です。content:@messageの指定ミスに注意してください。
さて、いよいよjsファイルを編集します。
app/javascript/channels/message_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const html = `<p>${data.content.text}</p>`;
const messages = document.getElementById('messages');
const newMessage = document.getElementById('message_text');
messages.insertAdjacentHTML('afterbegin', html);
newMessage.value='';
}
});
ここで出てくるdataは送られてくる情報を受け取っています。
data.contentで,createアクションで指定したインスタンス（@message）を取り出しています。
あとは、通常のJavascriptと同様です。なお、newMessage.value="";としているのはメッセージ入力・送信後は入力フォームに文字を残しておきたく泣いためです。
あとはビューファイルを作って終わりです。お疲れ様でした！
new.html.erb
<%= form_with model: @message do |f| %>
<%= f.text_field :text %>
<%= f.submit '送信' %>
<% end %>
<div id='messages'>
<% @messages.reverse_each do |message| %>
<p><%= message.text %></p>
<% end %>
</div>
終わりに
ActionCableの他にAjaxなどの似たような技術もあるので、そこについてはまた今度執筆します！！！
ActionCableについて
ActionCableとは、通常のRailsアプリケーションと同様の記述で、即時更新機能を実装できるフレームワークです。例えば、メッセージやコメントを即時表示させたい場合に使用します
実装について
まずは以下のコマンドをターミナルで打ち込んでください
rails g channel message
このようになれば成功です。
Running via Spring preloader in process 11084
invoke test_unit
create test/channels/message_channel_test.rb
create app/channels/message_channel.rb
identical app/javascript/channels/index.js
identical app/javascript/channels/consumer.js
create app/javascript/channels/message_channel.js
今回の実装では以下の2つのファイルについて理解する必要があります。
message_channel.rb
クライアントとサーバーを結びつけるためのファイルです。
message_channel.jsの役割
サーバーから送られてきたデータをクライアントの画面に描画するためのファイルです
では、さっそくコードを書いていきます。
まずは、サーバーとクライアントを結び付けます。
app/channels/message_channel.rb
class MessageChannel < ApplicationCable::Channel
def subscribed
stream_from "message_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
このとき出てくるstream_fromは、ActionCableで用意されているメソッドでサーバとクライアントを関連づけます。この関連づけられたことで作られるデータの経路をboradcast(ブロードキャスト)と言います。
次にコントローラの編集をしましょう
app/controller/messages_controller.rb
class MessagesController < ApplicationController
def new
@messages = Message.all
@message = Message.new
end
def create
@message = Message.new(text: params[:message][:text])
if @message.save
ActionCable.server.broadcast 'message_channel', content: @message
end
end
end
下から四行目に着目してください。
broadcastを通して、'message_channel'に向けて@messageを送信するという意味です。content:@messageの指定ミスに注意してください。
さて、いよいよjsファイルを編集します。
app/javascript/channels/message_channel.js
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const html = `<p>${data.content.text}</p>`;
const messages = document.getElementById('messages');
const newMessage = document.getElementById('message_text');
messages.insertAdjacentHTML('afterbegin', html);
newMessage.value='';
}
});
ここで出てくるdataは送られてくる情報を受け取っています。
data.contentで,createアクションで指定したインスタンス（@message）を取り出しています。
あとは、通常のJavascriptと同様です。なお、newMessage.value="";としているのはメッセージ入力・送信後は入力フォームに文字を残しておきたく泣いためです。
あとはビューファイルを作って終わりです。お疲れ様でした！
new.html.erb
<%= form_with model: @message do |f| %>
<%= f.text_field :text %>
<%= f.submit '送信' %>
<% end %>
<div id='messages'>
<% @messages.reverse_each do |message| %>
<p><%= message.text %></p>
<% end %>
</div>
終わりに
ActionCableの他にAjaxなどの似たような技術もあるので、そこについてはまた今度執筆します！！！
