Railsチュートリアル第5章メモ
5.2 Sassとアセットパイプライン
- SaasのSCSS記法を利用することで色々な機能が使える
- ネスト
.center { text-align: center; } .center h1 { margin-bottom: 10px; } /* この書き方をSassを使うことで以下のように書き換えられる 下のh1は.centerを継承している */ .center { text-align: center; h1 { margin-bottom: 10px; } h2 { color: red; }
#logo { float: left; margin-right: 10px; font-size: 1.7em; color: #fff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; } #logo:hover { color: #fff; text-emphasis-color: none; } /* これがこうなる-idの場合は&を使ってネストする- */ #logo { float: left; margin-right: 10px; font-size: 1.7em; color: #fff; text-transform: uppercase; letter-spacing: -1px; padding-top: 9px; font-weight: bold; &:hover { color: #fff; text-emphasis-color: none; } }
- 変数
- カラーコード等を定義する時に便利
$light-gray: #777; h1 { color: $light-gray; } h2 { color: $light-gray; }
5.4 リンクのテスト
- rails generate integration_test テスト名 で統合テストのテンプレートが作成できる
- assert_selectのオプションを使用してリンクのテストができる
# "?"の部分に引数のabout_pathを入れている、リンクが存在するかどうかの確認 assert_select "a[href=?]", about_path # "count: 2"でroot_pathのリンクが2つあるかどうかの確認 assert_select "a[href=?]", root_path, count: 2
- assertの使用例は"表 5.2: assert_selectのいくつかの使用例"を参照
5.4の最後の最後で統合テストが失敗。 失敗箇所は"/about"と"/contact"が見つからないとのこと。
やったこととして、 - ルーティングの確認(正常だった) - HTMLソースの確認(/aboutも/contactも見つかった) - 最初は"/about"がfailしたので、その行をコメントアウトしてテスト続行→"/contact"も失敗となる - RailsチュートリアルからコードをコピペしてもNG - header部分のテストはOK、footerに関わる2箇所がNGなのでfooterが原因…? - ということも考えたけど、時間かけて悩んでも仕方が無いこと、とりあえず見るべきところは見て、やるべきことはやったので先へ進むことに。。
うーん、謎