rspec에서 CSS 속성을 테스트하는 방법은 무엇입니까?

Question

레일즈 용 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 btw와 함께 webrat을 사용하고 있습니다. 어떤 도움이 필요합니까? 감사.

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 

당신은 시나리오 "잘못된 행동에 강조하지 않는다"특히에 대한 더 많은 테스트를 작성할 수 있지만 내 생각 이 정도면 충분합니다. 당신이 말대꾸를 사용하는 경우

Answer 2

강조 표시가 클래스 이름에서 오는 경우 특정 클래스 이름이 적용되는지 여부 만 테스트 할 수 있습니다. 그렇다면 have_tag("li.highlighted", :text => "Account Settings")을 할 수 있습니다.

그렇지 않으면 CSS 선택기 자체가 올바르게 적용되었는지 여부를 테스트하지 않아야합니다. 이것은 순전히 표현적인 세부 사항이며, 실제로 테스트 스위트가 테스트하도록 설계된 것이 아닙니다. 나는 Webrat이 당신을 위해 당신의 스타일 시트를 검토하고 적용하는 것을 꺼려하지 않는다고 생각합니다. 그래서 그 세부 사항을 테스트하는 것은 실현 가능하지 않습니다. 그것이 작동하는지 여부에 관계없이 한 페이지로드만으로 점검 할 수 있습니다. 틀림없이 스타일 시트 을 디자인 할 때으로 테스트하십시오.

어쨌든. 당신의 질문은 당신이 정말로 시험하고 싶은 것을 분명히하지는 않지만 어쨌든 프레젠테이션을 시험해서는 안됩니다. HTML 문서의 구조를 테스트하는 것은 좋지만 클라이언트 프로그램이 문서를 해석하는 방법을 확인하는 것은 프로그래머가 아닌 디자이너의 역할입니다. (둘 다 모자를 착용하는 경우, 그래서 그것을 할 수 있지만 음식을 혼합하지 않습니다.)

Answer 3

당신은 말대꾸 파서로 구문 분석 할 수 있습니다

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