В основном статические страницы

Немного динамические страницы

Теперь, когда мы создали действия и представления для нескольких статических страниц, мы сделаем их чуть-чуть динамическими, добавив содержимое, которое будет меняться на каждой странице: мы получим заголовок (тайтл) каждой страницы, изменяющийся, отражая ее содержание. Является ли это действительно динамическим контентом — спорно, но это в любом случае закладывает необходимую основу для однозначно динамического содержимого в Главе 7.

Если вы пропустили TDD материал в Разделе 3.2, убедитесь что к этому моменту вы создали About страницу используя код из Листинга 3.15, Листинга 3.16 и Листинга 3.17.

Тестирование изменения заголовка

Наш план заключается в добавлении к страницам Home, Help, и About заголовка (тайтла) меняющегося на каждой странице. Это повлечет за собой использование <title> тега в представления наших страниц. Большинство браузеров отображают содержимое title тега в верхней части окна браузера (Google Chrome является странным исключением из этого правила), к тому же он важен для поисковой оптимизации. Мы начнем с написания тестов для заголовков, затем добавим сами заголовки, а затем используем layout файл для рефакторинга получившихся страниц и устранения повторяющегося кода.

Вы, возможно, заметили, что команда rails new уже создала layout файл. Мы вскоре узнаем о его назначении, но пока вам следует переименовать его прежде чем мы продолжим:

$ mv app/views/layouts/application.html.erb foobar   # временное изменение

(mv это Unix команда; на Windows вам возможно придется переименовать файл используя файловый браузер или команду rename.) Обычно этого не нужно делать в реальном приложении, но нам проще будет понять его назначение если мы предварительно выведем его из строя.

К концу этого раздела, все три наши статические страницы будут иметь заголовок (тайтл) вида "Ruby on Rails Tutorial Sample App | Home", где последняя часть заголовка будет меняться в зависимости от страницы ( таблица 3.1). Мы достроим тесты из Листинга 3.14, добавив тесты заголовка (тайтла) в соответствии с моделью в Листинге 3.18.

it "should have the right title" do
  visit '/static_pages/home'
  expect(page).to have_title("Ruby on Rails Tutorial Sample App | Home")
end

Здесь используется метод have_title, который проверяет наличие HTML заголовка с данным контентом. Другими словами, код

expect(page).to have_title("Ruby on Rails Tutorial Sample App | Home")

проверяет что внутри тега title содержится

"Ruby on Rails Tutorial Sample App | Home"

Важно отметить что контент не должен быть абсолютно идентичным; достаточно совпадения лишь некоторой части текста, т.е.

expect(page).to have_title("Home")

сработает также как и полный текст заголовка.

Добавление новых тестов для каждой из трех статических страниц, следуя модели из Листинга 3.18, приводит нас к новому StaticPages тесту (Листинг 3.19). Обратите внимание на то что здесь имеется значительное повторение от которого мы избавимся в Разделе 5.3.4.

require 'spec_helper'

describe "Static pages" do

  describe "Home page" do

    it "should have the content 'Sample App'" do
      visit '/static_pages/home'
      expect(page).to have_content('Sample App')
    end

    it "should have the title 'Home'" do
      visit '/static_pages/home'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Home")
    end
  end

  describe "Help page" do

    it "should have the content 'Help'" do
      visit '/static_pages/help'
      expect(page).to have_content('Help')
    end

    it "should have the title 'Help'" do
      visit '/static_pages/help'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | Help")
    end
  end

  describe "About page" do

    it "should have the content 'About Us'" do
      visit '/static_pages/about'
      expect(page).to have_content('About Us')
    end

    it "should have the title 'About Us'" do
      visit '/static_pages/about'
      expect(page).to have_title("Ruby on Rails Tutorial Sample App | должен вернуть нас к Зеленому")
    end
  end
end

Поместив тесты из Листинга 3.19 куда следует, нужно запустить

$ bundle exec rspec spec/requests/static_pages_spec.rb

чтобы проверить что наш код в Красном (провальные тесты).

Прохождение тестов заголовка

Теперь мы заставим тесты заголовков пройти, и в то же время добавим полную структуру HTML чтобы сделать валидные веб-страницы. Разметка современной веб страницы соответствует форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Greeting</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Эта структура включает тип документа, или doctype - декларацию в самом верху страницы которая говорит браузерам какую версию HTML мы используем (в данном случае, HTML5);^{8HTML меняется со времненем; явно указав doctype мы увеличили вероятность того что браузеры будут правильно отображать наши страницы в будущем. Экстремально простой doctype <!DOCTYPE html> характерен для самого последнего HTML стандарта - HTML5.} head раздел, в данном случае с "Greeting" внутри тега title; и раздел body, в данном случае с "Hello, world!" внутри тега p (параграф). (Отступы необязательны — HTML нечувствителен к пробелам и игнорирует и табы и пробелы — но они делают структуру документа более смотрибельной.)

Применение этой базовой структуры к странице Home приводит к Листингу 3.20.

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Home</title>
  </head>
  <body>
    <h1>Sample App</h1>
    <p>
      This is the home page for the
      <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
      sample application.
    </p>
  </body>
</html>

Листинг 3.20 использует заголовки протестированные в Листинге 3.19:

<title>Ruby on Rails Tutorial Sample App | Home</title>

Как результат, тесты для Home страницы теперь должны пройти. Мы все еще в Красном из-за провальных About и Help тестов, и мы можем попасть в Зеленый с кодом из Листинга 3.21 и Листинга 3.22.

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | Help</title>
  </head>
  <body>
    <h1>Help</h1>
    <p>
      Get help on the Ruby on Rails Tutorial at the
      <a href="http://railstutorial.org/help">Rails Tutorial help page</a>.
      To get help on this sample app, see the
      <a href="http://railstutorial.org/book">Rails Tutorial book</a>.
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Ruby on Rails Tutorial Sample App | About Us</title>
  </head>
  <body>
    <h1>About Us</h1>
    <p>
      The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
      is a project to make a book and screencasts to teach web development
      with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
      is the sample application for the tutorial.
    </p>
  </body>
</html>