テックキャンプ テストと非同期通信とか
🔳非同期通信(Ajax)
ブラウザが再読込されないで通信が行われる通信方法
1,JSでリクエストする
2,コントローラでJSON形式のデータを用意
3,レスポンスするためのJSON形式のデータを準備
4, JSでレスポンスを受け取り、HTMLを操作してToDoを追加
◎JSON
データ交換を行うためのデータ記述形式の一種。ハッシュと同じ
◎デフォルトアクション
HTML要素の操作(inputとかsubmit)
🔳非同期通信を実装
◎respomd_to
HTMLかJSONのレスポンスを求めてるか条件分岐
◎$.ajax
非同期通信を行うための記述。.ajaxの部分がメソッドの呼び出し。引数使うで〜
{type: 'POST', url: '/todos.json', data: { todo: { content: todo } }, dataType: 'json' }
◎type
HTTP通信の種類を記述する。通信方法は、GETとPOSTの2種類がある。
◎url
リクエストを送信する先のURLを記述する。
◎data
サーバに送信する値を記述する。
◎dataType
サーバから返されるデータの型を指定する。
◎doneとfail
非同期通信が成功or失敗した時に行う処理をかける
◎FormData
フォームのデータ送信に使用できる
◎ attrメソッド
要素が持つ指定属性の値を返す。
$(this).arrt('action')を取得して、フォームの送信先のurlが入ってる。
◎processDataオプション
デフォはtrue、dataに指定したオブジェクトをクエリ文字に変換する
◎contentTypeオプション
サーバにデータのファイル形式を伝えるヘッダ。dataがformDataならfalse
◎jbuilder:array!メソッド
jbuilderの拡張子テンプレは、jsonオブジェクト?が使える。配列で返したい時はarray!
◎emptyメソッド
指定したDOM要素の子要素のみを削除する
DOM要素自体を削除するremoveメソッドとは違うよ
🔳APIとは
必要なデータだけjsonとかのデータ形式で返すサーバーの仕組み
addDeleteUserメソッドで生成したdiv要素の中にidを基準に
inputタグの$(`#${userId}`).append(html);を突っ込む。
削除ボタンを押すと親要素が消えるので、子要素であるinputタグも死ぬ
回答者が答えやすい質問をする。
jQueryの`と'と"の意味とは?
◎名前空間(namespace)「::」
◎setInterval()関数
一定時間ごとに処理を実行する
◎ valid?メソッド
・valid?メソッドを利用すると、保存する際に
「バリデーションにより保存ができない状態であるか」を確かめる]
・バリデーションが実行された結果
エラーが無い場合trueを返し,エラーが発生した場合falseを返す
◎be_validマッチャ
expectの引数にしたインスタンスが全てのバリデーションを
クリアする場合にパスするマッチャです。
◎discribe
do~endまでのテストのまとまり。""には説明を
◎itとexample
it=exampleという動作するテストコードのまとまり。""には説明を
◎エクスペクテーション(expect)
実際に評価される式。it do ~ end の間に
◎expect(X).to eq Y
xの値がYと同じならテスト成立
◎マッチャ(テスト評価組)
・eq=テスト成功する条件
・include=含んでたら
・valid=バリデーションにより保存できない状態か
・erros=valid?とerrorsを合わせて使うと何故できないのか確認できる。すげー
・be_valid=expectの引数にしたインスタンスが全てのvalidatesをクリアする場合
🔳factory_bot(省略可)
簡単にダミーのインスタンスを作成できるGem
◎buildメソッド
引数にシンボル型で取ったクラス名のインスタンスをbotの記述のもとに作成
◎createメソッド
buildとほぼ同じ動き。でもテスト用DBに値が保存され、
1テスト終わったらごとにロルバ祭り。bindingしないと値残らない
🔳テストコードを書く時の原則
◎各exampleで期待する値は1つ
◎期待する結果をはっきり分かりやすく記述
◎起きてほしいこと、起きてほしくないこと両方をテスト
◎境界値をテスト
◎可読性を考えつつ、適度にDRY(don't repert yourself)わかり易さ重視
◎下に無駄な改行をしない
◎routes.rbで不要なrootを消す
◎分からない内容は調べる。
適当にやっちゃうところがあるから、試す前に調べる
◎deviseを利用したテーブル追加
1,rails g devise user
2,マイグレーションファイルに内容を追加
3,rails db:migrate
4,バリデーションを追加
🔳投稿フォームのビュー崩れ問題。
原因➡️display: flex;が追加されていないため
◎form_tagを使うと、new_messageクラスが自動生成される
➡️自動生成されたクラスに合わせてscssファイルでnew_messageを指定してあげればok
🔳最新のメッセージを表示するためには
messages.lastで最後のメッセージを取得できる
🔳スペルミスめっちゃ多い
➡️仕組み的な解決策を考える(頻度を下げるだけでもいい)
🔳テスト
◎プロダクションコード=本番環境で実際に作動するプログラム
◎テストコード=文字通りテスト用
🔳テストの種類
◎単体テスト=例)1つのコントローラーずつ
◎結合テスト=例)ユーザー新規登録の一連の流れの処理
🔳Capybara
ブラウザ操作を再現するgem
◎visitメソッド
引数にURLかprefixを指定するとそのページに移動できる
◎click_onメソッド
指定したHTML要素をクリックする
🔳コントローラーのテスト
◎getメソッド
引数で利用したいアクションをシンボル型(:user)で渡す
◎responcse
リクエスト後の遷移先のビュー情報を持つ
◎render_template
遷移するビューを返す
◎assigns
アクションで定義してる変数をテストするためのメソッド
expectの引数で超使う。ぱない
◎creat_list
複数のリソース(tweetの値とか)を作れる。
◎Faker
ダミーデータを作る。create_listと一緒に使うと気持ちいい
◎matchマッチャ
expectの引数と比較する。引数に配列のインスタンスを取り順番までチェックする。すご
◎let 呼ばれた時に初めて実行される遅延評価っていう特徴
◎1 failure(赤文字)
1つの失敗がある。つまりバリデーションに負けた(引っかかった)エラー有り
◎0 failure(緑文字)
1つも失敗しなかった。つまりバリデーションに勝った(引っかからなかった!)エラー0
◎パスワードの文字数制限の問題、2種類のパスの文字数を一致させないとエラー出る笑