TDDのテストを、チュートリアルを参考に、整理してみよう！

koya-kudaka commented 4 years ago

目的自動化テストを作成し、機能が正しく動作するのかをテストする習慣を身につける。チュートリアルを通して、テストをどう論理的に実行すべきなのか、どのような順序で、どのタイミングでテストすればいいのか、どんなメソッドが必要なのかが曖昧なので、そこを理解するために。

手法テスト駆動開発（TDD）

行うテスト コントローラーテスト

必要コマンド $ rails test

何をテストするか？ 今回は、演習の問題を使ってみる。 contactページの表示をする。

koya-kudaka commented 4 years ago

railsのありがたい点！！ rails g controller　を実行した時点で、テストファイルが用意されている！

koya-kudaka commented 4 years ago

TDDのサイクル red(失敗) ・ green（成功）・ REFACTOR（リファクタリング）

koya-kudaka commented 4 years ago

失敗するコードを書いて、成功に。

test>controllers>static_pages_controller_test.rb

アセーションメソッドを使い、テストコードを書く

test "should get contact" do
    get static_pages_contact_url
    assert_response :success
end

↓

$ rails testを実行

判定：RED メッセージ：contactへのURLがないよ！

↓

ルーティングを書く

↓

$ rails testを実行

判定：RED メッセージ：static_pages_controllerにcontactアクションがないよ！

↓

アクションを書く

↓

$ rails testを実行

判定：RED メッセージ：viewsにcontactページがないぞ！

↓

contactページを作成

↓

Green!!!

koya-kudaka commented 4 years ago

ここまでは、静的ページでREDとGREENしか行ってなかった。

koya-kudaka commented 4 years ago

2, 動的コンテンツにするためにRED・GREEN・REFACTORを全て使ったテスト！

目的全てのページのタグのタイトルは、ほとんど共通していて、一部分が違うだけなので、yieldを使って共通のテンプレート（app>views>layouts>application.html.erb）を用意する。</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/koya-kudaka"><img src="https://avatars.githubusercontent.com/u/69892740?v=4" />koya-kudaka</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <pre><code>def setup @base_title = "Ruby on Rails Tutorial Sample App" end </code></pre> <p>setupという特別なメソッドを使って上の文をテストファイルに追加。</p> <p>↓</p> <p><code>assert_select "title", "Contact | #{@base_title}"</code></p> <p>テストをする上のコードも追加。</p> <p>↓</p> <p>rails test実行判定：RED</p> <p>理由：contact.html.erbのタイトルには、 "Contact | #{@base_title}"の部分と一致する部分がないから。</p> <p>↓</p> <p>contact.html.erbの<head> タグに以下を追加</p> <p><code><title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title></code></p> <p>contact.html.erbの一行目に以下を追加</p> <p><code><% provide(:title, "Contact") %></code></p> <p>↓</p> <p>GREEN！</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/koya-kudaka"><img src="https://avatars.githubusercontent.com/u/69892740?v=4" />koya-kudaka</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>一応これで成功ではあるけど、REFACTORがない。</p> <p>最後に、コードがより良質なコードに改善するために、REFACTORを行う！</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/koya-kudaka"><img src="https://avatars.githubusercontent.com/u/69892740?v=4" />koya-kudaka</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>以下のコードをstatic_pages>contact.html.erbからlayout>application.html.erbの<head>タグへ移動する。</p> <p><code><title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title></code></p> <p>これで完成！</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/koya-kudaka"><img src="https://avatars.githubusercontent.com/u/69892740?v=4" />koya-kudaka</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>これやる意味あったかな？？？ある程度、整理できたからいっか。。。。</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

koya-kudaka / sample_app

TDDのテストを、チュートリアルを参考に、整理してみよう！ #1