如何在 rspec 中测试 css 属性？答案

【问题标题】：How to test css property in rspec?如何在 rspec 中测试 css 属性？
【发布时间】：2010-05-15 01:30:56
【问题描述】：

我正在为 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

但是上面的代码似乎不起作用。我正在使用带有 rspec 的 webrat。有什么帮助吗？谢谢。

【问题讨论】：

标签： ruby-on-rails rspec webrat

【解决方案1】：

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

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

无论如何。您的问题并没有真正说明您真正要测试的内容，但无论如何您不应该测试演示文稿。测试 HTML 文档的结构是好的，但确认客户端程序如何解释文档是设计师的角色，而不是程序员。（如果你同时戴帽子，就这样吧，但不要混合你的食物。）

【讨论】：

我想测试它的原因是因为它是一个 Rails 插件 (tabnav)，而不是纯粹的设计。如果你在pastie.org/961207 看看这个馅饼，我想你会明白我为什么要测试它。为了回答您的问题，我想测试它是否在正确的页面上突出显示。 tabnav 的工作方式是，如果我在某个控制器和操作上，它会突出显示/更改特定链接的颜色。谢谢。
我怀疑 tabnav 应用了 CSS 类。拉起 HTML 文档，查找类是什么，并测试它:) 这种情况属于这个答案的第一段，HTML 结构，而不是最后两段。
...实际上，现在我考虑到这一点，您是否应该测试 tabnav 的基本功能？如果它已经过彻底测试，请相信它。
你说得对，它正在将“活动”类应用于锚标签，我只是在看 li 标签。谢谢。我只是想确保我没有犯任何愚蠢的错别字。

【解决方案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

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

【讨论】：

【解决方案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')

【讨论】：