jackの勉強日記

勉強したことをアウトプットするための日記です。

テストコードでの気づき

オリジナルアプリのテストコードを書いている際に、忘れていたことと新しく学んだことの2つを残します。

1. テストコード内での画像について

ActiveStrageを用いて、画像を投稿する際のテストコードの書き方を忘れていました。

まずは復習です。

今回はFactoryBotを使用するので、spec/factories/posts.rbに必要な情報を記述します。

この時、自分はアソシエーションを忘れがちなので、そこも注意。

記述が終わったら、spec/modoels/post_spec.rbにテストコードを書いていきます。

この時before do ~ endの中に@post = FactoryBot.build(:post)でテスト用の

@postを作成します。

問題はこの後。

同じくbefore do ~ endの中に

@post.image = fixture_file_upload("app/assets/images/test.jpg")

とすることで、imagesディレクトリに配置されているtest.jpgを@postの画像として

使用することができます。

 

以上がテストコード内での画像についてでした。

2. 〜文字以下のテストをかけるときの気づき

今まで書いてきたテストコードは、多くても10文字以下だったので、

例えば、

@post.name="test1234567"

と書けば名前が11文字dウェは登録されないことが確認できました。

しかし、今回の投稿のテキストは200文字まで許容しています。

なので、201文字の時はデータを保存できないことを確認したいです

その時、@post.textに201文字書き込まないといけないのか??と思いました。

正直、めんどくさい。。。

そこで調べてみると、ありました解決策が。

それがこれです。

@post.text = "a" *201

これで@post.textにはaが201文字入りました。

なんて簡単なんだ。

自分の中で、ここで演算子を使う発想が全くなかったので目から鱗でした。

調べてみて良かったです。

初めてのBootstrap

オリジナルアプリを作成するにあたって、Bpptstrapを使ってみることにしました。

Bootstrapは簡単にレスポンシブなデザインのWebページを作成することができるため、非常に人気なようです。

 

 現在、アルファ版のBootstrap5が出ているようですが、今回のオリジナルアプリにはbootstrap4を導入しています。

実際にBootstrapを使用してみます。

コードの書き方はこのサイトがとても参考になりました。

 

ヘッダーのテンプレート部分にBootstrapを用いました。

f:id:jack9145:20201222102630p:plain

 

率直にとても使いやすいという印象を受けました。

ナビゲーションバー以外にも、link_toタグにclass属性で"btn btn-primay"とするだけで

f:id:jack9145:20201222103240p:plain

↑これが

 

f:id:jack9145:20201222103610p:plain

↑こうなりました。

CSSをいじることなく、すぐにボタンが完成しました。

classのprimaryの部分を変更することで色を変更することもできるようです。

とても簡単ですね。

これからBootstrapを利用して、よりリッチなサイトを目指していきます!