40歳の未経験者がプログラミングスクールを受講して二十一日目

 

2020年8月9日 学習に入るまでが長い

おはようございます。今日(8月9日、日曜日、テックキャンプはお休みですが、自習です)も朝6時30分の早朝ランニングから始まり、筋トレ、掃除、洗濯、株価チェック、ブログやインスタ、Twitterの更新をしていたら、朝11時、そろそろカリキュラムを進めたいところ

今日の学習したこと

テストコード

モデル・・・インスタンスを生成し、それがモデルに規定したどおりの挙動になるか(たとえば、バリデーションが正しく働くか)を確かめる

 

コントローラー・・・あるアクションにリクエストを送ったとき、想定通りのレスポンスが生成されるかどうかを確かめる

Request Spec・・・RSpecが提供している、コントローラーのテストコードを書くために特化した手法

get・・・get ○○_pathのように、どこのパスにリクエストを送りたいかを記述する。

 

response・・・このレスポンスで取得できる情報に、想定する内容が含まれているかを確認するこ

HTTPステータスコード・・・HTTP通信において、どのような処理の結果となったのかを示すものです。


status・・・response.statusと実行することによって、そのレスポンスのステータスコードを出力できる

 

body・・・response.bodyと記述すると、ブラウザに表示されるHTMLの情報を抜き出すことができる

 

System Spec(システムスペック)は結合テストコードを記述するための仕組みのこと

Capybara(カピバラ)はSystem Specを記述するために必要なGemです。

visit

visit 〇〇_pathのように記述すると、〇〇のページへ遷移することを表現できます。RequestSpecで学んだgetと似ていますが、getはあくまでリクエストを送るだけのことを意味し、visitはそのページへ実際に遷移することを意味します。

page・・・visitで訪れた先のページの見える分だけの情報が格納されています。後述するとおり、「ログアウト」などのカーソルを合わせてはじめて見ることができる文字列はpageの中に含まれません。

have_content・・・

expect(page).to have_content('X')と記述すると、visitで訪れたpageの中に、Xという文字列があるかどうかを判断するマッチャです。

 

fill_in

fill_in 'フォームの名前', with: '入力する文字列'のように記述することで、フォームへの入力を行うことができます。それでは、フォームの名前はどのように知ることができるのでしょうか。その時に使用するものが、検証ツールです。

検証ツール

ブラウザに標準で備わっている、HTMLの要素や、適用されているCSSのコードを確認することができる機能です。ブラウザで右クリックし、「検証」をクリックすると表示できます。

 

find().click・・・find("クリックしたい要素").clickと記述することで、実際にクリックができます。

change

expect{ "何かしらの動作" }.to change { モデル名.count }.by(1)と記述することによって、モデルのレコードの数がいくつ変動するのかを確認できます。changeマッチャでモデルのカウントをする場合のみ、expect()ではなくexpect{}となります。

 

current_path・・・在いるページのパスを示します。expect(current_path).to eq root_pathと記述すれば、今いるページがroot_pathであることを確認できます。

 

hover

find("ブラウザ上の要素").hoverとすることで、特定の要素にカーソルをあわせたときの動作を再現できます。

 

have_no_content

have_contentの逆で、文字列が存在しないことを確かめるマッチャです。

 

have_selector

指定したセレクタが存在するかどうかを判断するマッチャです。上記の例であればhave_selector ".content_post[style='background-image: url(#{@tweet_image});']"という形で記述できます。

have_link

expect("要素").to have_link 'ボタンの文字列', href: "リンク先のパス"と記述することで、要素の中に当てはまるリンクがあることを確認できます。have_linkはa要素に対して用います。

have_no_link

have_linkの逆で、当てはまるリンクがないことを確認します。expect("要素").to have_no_link 'ボタンの文字列', href: "リンク先のパス"と記述することで、要素の中に当てはまるリンクがないことを確認できます。

 

find_link().click

a要素で表示されているリンクをクリックするために用います。find_link("リンクの文字列", href: "URL").clickといった形で使います。find().clickと似ていますが、find_link().clickはa要素のみに対して用いることができます。

 

サポートモジュール

RSpecに用意されている、メソッド等をまとめる機能です。

 

ChatAppの実装

ChatAppを開発するフロー

以下の順で実装を行います。

1. 要件定義

次章でChatAppの企画のフローを確認します。アプリケーションを企画する擬似的な経験を積んでいただきます。

2. DB設計

3章でChatAppのDB設計を行います。その際に中間テーブルという新しい知識を学びます。この知識を用いてChatAppのDB設計をします。

3. アプリケーションの雛形の作成

4章でrails newコマンドでChatAppの雛形を作成します。その際にGitHubでアプリケーションの状態が管理できるように設定します。

4. フロント画面の実装

5章で、チャット画面のみフロントの実装を1から行います。作成手順は基礎カリキュラムと同様に、大枠を作成してから詳細の実装をします。

5. サーバーサイドの実装

6章〜9章では、本章で確認した機能を実装します。
ユーザー管理機能 → チャットルーム管理機能 → メッセージ投稿機能の順に実装します。

6. サーバーサイドのRspecテスト

実装したサーバーサイドのテストをRspecを用いて行います。

 

 今日のまとめ

今日も朝から夜まで途中集中力がなくなり、現実逃避の時間にけど、予定のノロマはなんとか達成、そろそろ集中モード?もっと、気合入れていかないとと焦りながら、日々格闘中