How to test css property in rspec?

Question

I'm using tabnav plugin for Rails and I want to use rpsec to make sure it highlights properly.

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 doesn't seem to work. I'm using webrat with rspec btw. Any help? Thanks.

Answer 1

The only real thing to be testing here is whether or not a particular class name is applied, if highlighting comes from a class name. If so, you could do have_tag("li.highlighted", :text => "Account Settings").

Otherwise, you probably should not be automating your testing for whether or not the CSS selectors themselves are applied correctly. This is a purely presentational detail, and it isn't really what a test suite is designed to test. I suspect that Webrat doesn't bother to go through and apply your stylesheet for you, so testing that detail isn't feasible, not to mention that you could check with just one page load whether or not it's working - after all, you are arguably testing your stylesheet as you design it.

Anyway. Your question doesn't really make clear what you're really trying to test for, but you shouldn't be testing presentation, anyway. Testing the structure of the HTML document is good, but confirming how the client program interprets the document is the role of a designer, not a programmer. (If you wear both hats, so be it, but don't go mixing your foods.)

Answer 2

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 could write more test, especially for "doesn't highlight on wrong action" scenarios, but I think this is good enough.