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が原因…？ - ということも考えたけど、時間かけて悩んでも仕方が無いこと、とりあえず見るべきところは見て、やるべきことはやったので先へ進むことに。。

うーん、謎