How to check css property in rspec?

Question

I am using the tabnav plugin for Rails and I want to use rpsec to make sure that it stands out correctly.

describe 'account navigation links' do
  it 'should have account settings link' do
   get '/account/settings'
   response.should have_tag("li", :text => "Account Settings")
end

 it 'should be highlighted' do
   get '/account/settings'
   response.should have_tag("li", :color => "Account Settings")
 end
end

However, the above code does not work. I am using webrat with rspec btw. Any help? Thank.

Answer 1

describe 'highlighting' do
  it 'should highlight account/settings' do
    get '/account/settings'
    response.should have_tag("a.active[href=?]", account_settings_path, /Account Settings/i)
  end

  it 'should highlight account/profile' do
    get '/account/profile'
    response.should have_tag("a.active[href=?]", account_profile_path, /Profile Information/i)
  end

  it 'should highlight account/picture' do
    get '/account/picture'
    response.should have_tag("a.active[href=?]", account_picture_path, /Profile Picture/i)
  end

  it 'should highlight account/notifications' do
    get '/account/notifications'
    response.should have_tag("a.active[href=?]", account_notifications_path, /Notifications/i)
  end

  it 'should not highlight Profile' do
    get '/account/profile'
    response.should_not have_tag("a.active[href=?]", account_settings_path, /Account Settings/i)
  end

  it 'should not highlight Notifications' do
    get '/account/profile'
    response.should_not have_tag("a.active[href=?]", account_notifications_path, /Notifications/i)
  end

  it 'should not highlight Picture' do
    get '/account/profile'
    response.should_not have_tag("a.active[href=?]", account_picture_path, /Profile Picture/i)
  end
end

You can write more tests, especially for the "do not highlight the wrong action" scenarios, but I think this is good enough.

Answer 2

The only thing to check here is whether a particular class name is applied if the selection comes from the class name. If so, you can do it have_tag("li.highlighted", :text => "Account Settings").

, , CSS. , . , Webrat , , , , , . , , .

. , , . HTML- , , , - , . ( , , .)

Answer 3

If you use Sass, you can parse it with the Sass parser:

root = Sass::SCSS::Parser.new('.error { color: red; }', 'example.scss').parse

It returns a parsing tree that you can check by plunging into it. For instance:

prop = root.children.select {|child| child.rule.flatten.include?('.error')}.first
prop_strings = prop.children.map {|p| [p.name.flatten.first, p.value].join(':')}
prop_strings.should include?('color:red')