【応用49％】TECHCAMP名古屋19日目

どうも、ジュンです

いつもご視聴、コメント、高評価、ありがとうございます

TECHCAMP名古屋 73期 副業フリーランスコース19日目で学んだことについてお話します
Ruby on Railsで6個、Capybaraで5個、Ajaxで14個のことについて学んだので、それぞれ説明します

★Ruby on Railsで学んだこと★
1.フィーチャスペック
RSpecを使って統合テストを行うためのスペックです
複雑なテストを行うことができます

2.フィーチャスペックを利用するためのGem
Capybara

3.Capybara
ブラウザの操作を再現するのに必要なgemです

4.フィーチャスペックと単体テストの違い
1.itの代わりにscenarioを利用します
2.beforeの代わりにbackgroundを利用します
3.describeの代わりにfeatureを利用します
4.letの代わりにgivenを利用します
5.複数のexpectを同一テスト内に記述します

なお、scenario、background、feature、givenは、
it、before、describe、letのエイリアスメソッドであるため、
現場のコーディング規約に従って記述します

5.エイリアスメソッド
元々定義されているメソッドの動作を変更せずに名称のみを変更したものです

6.Capybaraの導入手順

1.Gemfileのdevelopment,testにgem 'Capybara'を追加します
2.spec/rails_helper.rbの先頭のほうにrequire 'capybara/rspec'を追記します
3.テストしたい部分にform_forやform_withがある場合は、idを付与します
4.specディレクトリの下にfeaturesディレクトリを作成します
5.その下にtweet_spec.rbを追加します
6.tweet_spec.rbの1行目にrequire 'rails_helper'を追加します
7.tweet_spec.rbに統合テストの雛形を記述します
8.その雛形の中にテストコードを記述し、bundle exec rspecでテストできれば成功です

詳しくは概要欄にGitHubのURLを載せています
https://github.com/EL93019205/pictweet/pull/4

★Capybaraで学んだこと★
1.visitメソッド
Capybaraのヘルパーメソッドのうちの一つです
引数にURL、もしくはプレフィックスを指定することで、そのページに移動することができるメソッドです

2.click_onメソッド
Capybaraのヘルパーメソッドのうちの一つです
指定したHTML要素をクリックします
引数はHTML要素のvalue属性です

3.have_no_contentマッチャー
引数に指定したバリューを持つHTML要素がそのページに存在しないことを確かめます

4.fill_in
値が入力される動きを作成します

5.find
引数に指定した要素と一致したものを探します

★Ajaxで学んだこと★
1.非同期通信
リクエスト後にレスポンスが帰ってきた際に、ブラウザが再読み込みされることなく通信が行われる通信方法です

2.Ajax
非同期通信のことです
Asynchorous JavaScript XMLの略です
レスポンスのデータにJSONという形式が使われることが多いです

3.JSON
Java Script Object Notationの略です
データ交換を行うためのデータ記述形式の一つです
Rubyのハッシュと同様、キーとバリューの組み合わせでデータを表現する形式です

4.デフォルトアクション
HTMLの要素を操作した際に定められている挙動です
非同期通信では、デフォルトアクションを無効にして、JSONデータをレスポンスします

5.非同期通信のためのファイル拡張子
index.json.jbuilder

6.respond_to
リクエストがHTMLのレスポンスを求めているのか、
それともJSONのレスポンスを求めているのか
を条件に条件分岐します

7.$.ajax
jQueryで非同期通信を行うための記述です

8.type
HTTP通信の種類を記述します

9.url
リクエストを送信する先のURLを記述します

10.data
サーバに送信する値を記述します

11.dataType
サーバから返されるデータの型を指定します

12.done
非同期通信が成功したときに実行されます

13.fail
非同期通信が失敗したときに実行されます

14.jQueryでダイアログを表示する方法
alert("表示文字列");

今回の動画は以上です
今日もまたひとつ賢くなりました

この動画がいいなと思った方はチャンネル登録、高評価、
twitterのフォロー、よろしくお願いします

それではまた次の動画でお会いしましょう
ご視聴いただき、ありがとうございました