如何在 rspec 中测试 css 属性？

Question

我正在使用 Rails 的 tabnav 插件，我想使用 rpsec 来确保它正确突出显示。

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

然而上面的代码似乎不起作用。我正在使用 webrat 和 rspec 顺便说一句。有什么帮助吗？谢谢。

Answer 1

这里要测试的唯一真正的事情是是否应用特定的类名（如果突出显示来自类名）。如果是这样，您可以执行 have_tag("li.highlighted", :text => "Account Settings")。

否则，您可能不应该自动测试 CSS 选择器本身是否正确应用。这纯粹是演示性的细节，并不是测试套件真正要测试的内容。我怀疑 Webrat 不会费心为您检查和应用您的样式表，因此测试该细节是不可行的，更不用说您可以仅用一个页面加载来检查它是否正常工作 - 毕竟，您是可以说，在设计时测试样式表。

反正。您的问题并没有真正说明您真正想要测试的内容，但无论如何您不应该测试演示文稿。测试 HTML 文档的结构固然很好，但确认客户端程序如何解释该文档是设计师的职责，而不是程序员的职责。 （如果你身兼数职，那就这样吧，但不要混合你的食物。）

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

您可以编写更多测试，特别是对于“不突出显示错误操作”的情况，但我认为这已经足够好了。

Answer 3

如果您使用 Sass，则可以使用 Sass 解析器来解析它：

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

它返回一个解析树，您可以通过深入研究它来进行测试。例如：

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')