[TFUI] custom, nested HTML matchers in RSpec

Phlip <[email protected]> Sun, 08 Mar 2009 23:59:14 -0700
Newsgroups gmane.comp.programming.test-first-user-interfaces
Message-ID <[email protected]>
--YPykgCcF1tuda9qURJrjFDsxlw0jcvG-Lk-xw4D
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit

Zach Dennis wrote:

 >> response.body.should be_xml_with do
 >>  form :action => '/users' do
 >>    fieldset do
 >>      legend "Personal Information"
 >>      label "First name"
 >>      input :type => 'text', :name => 'user[first_name]'
 >>    end
 >>  end
 >> end

 > I like this a lot.

Boom: http://gist.github.com/76136

   it 'should have a form with a fieldset' do
     render '/users/new'

     response.body.should be_html_with{
       form :action => '/users' do
         fieldset do
           legend 'Personal Information'
           label 'First name'
           input :type => 'text', :name => 'user[first_name]'
         end
       end
     }
   end

I think I never got around to writing that because I just always assumed someone 
already had. I have to watch that about myself!

Only one feature is missing: At fault time, the matcher naturally prints out a 
diagnostic containing two snips of HTML - the specification's reference, and 
your page's sample. (Both, of course, are restricted to the fault's context - 
not the whole page.) But...

The samples are not indented! The specification's reference is all run together, 
and your page's sample is (unfortunately!) exactly the way your View system 
generated it. I have a question out to Nokogiri about this...

-- 
   Phlip
   http://www.zeroplayer.com/

--YPykgCcF1tuda9qURJrjFDsxlw0jcvG-Lk-xw4D
Content-Type: text/html; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>




<body style="background-color: #ffffff;">

<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 470px; margin:0; padding:0 25px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->

    <div id="ygrp-text">
            <p>Zach Dennis wrote:<br>
<br>
&gt;&gt; response.body.<wbr>should be_xml_with do<br>
 &gt;&gt;  form :action =&gt; '/users' do<br>
 &gt;&gt;    fieldset do<br>
 &gt;&gt;      legend &quot;Personal Information&quot;<br>
 &gt;&gt;      label &quot;First name&quot;<br>
 &gt;&gt;      input :type =&gt; 'text', :name =&gt; 'user[first_<wbr>name]'<br>
 &gt;&gt;    end<br>
 &gt;&gt;  end<br>
 &gt;&gt; end<br>
<br>
&gt; I like this a lot.<br>
<br>
Boom: <a href="http://gist.github.com/76136">http://gist.<wbr>github.com/<wbr>76136</a><br>
<br>
it 'should have a form with a fieldset' do<br>
     render '/users/new'<br>
<br>
response.body.<wbr>should be_html_with{<br>
       form :action =&gt; '/users' do<br>
         fieldset do<br>
           legend 'Personal Information'<br>
           label 'First name'<br>
           input :type =&gt; 'text', :name =&gt; 'user[first_<wbr>name]'<br>
         end<br>
       end<br>
     }<br>
   end<br>
<br>
I think I never got around to writing that because I just always assumed someone <br>
already had. I have to watch that about myself!<br>
<br>
Only one feature is missing: At fault time, the matcher naturally prints out a <br>
diagnostic containing two snips of HTML - the specification'<wbr>s reference, and <br>
your page's sample. (Both, of course, are restricted to the fault's context - <br>
not the whole page.) But...<br>
<br>
The samples are not indented! The specification'<wbr>s reference is all run together, <br>
and your page's sample is (unfortunately!<wbr>) exactly the way your View system <br>
generated it. I have a question out to Nokogiri about this...<br>
<br>
-- <br>
   Phlip<br>
   <a href="http://www.zeroplayer.com/">http://www.zeroplay<wbr>er.com/</a><br>
</p>
 

    </div>  

    <!--~-|**|PrettyHtmlStart|**|-~-->
    <div width="1" style="color: white; clear: both;">__._,_.___</div>

             
    <!-- Start the section with Message In topic -->
    <div id="ygrp-actbar" style="clear: both; margini-bottom: 25px; white-space:nowrap; color: #666; text-align: right;">
              <span class="left" style="float: left; white-space:nowrap;">
          <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/message/1036;_ylc=X3oDMTM0bjc4cG0yBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwMzYEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMjM2NTgxOTc5BHRwY0lkAzEwMzY-">
            Messages in this topic          </a> (<span class="bld" style="font-weight:bold;">1</span>)
        </span>
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJwdXN2bDBkBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwMzYEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMjM2NTgxOTc5?act=reply&messageNum=1036">
          <span class="bld" style="font-weight:bold;">
            Reply          </span> (via web post)
        </a>  | 
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJlNzkzZmZlBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTIzNjU4MTk3OQ--" class="bld" style="font-weight:bold;">
          Start a new topic        </a>
          </div> 
    <!-------     Start Nav Bar  ------>
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-vitnav" style="padding-top: 10px; font-family: Verdana; font-size: 77%; margin: 0;">
                <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/messages;_ylc=X3oDMTJlcGMwYXJ2BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTIzNjU4MTk3OQ--">Messages</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/files;_ylc=X3oDMTJmM2RpcmFrBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2ZpbGVzBHN0aW1lAzEyMzY1ODE5Nzk-">Files</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/photos;_ylc=X3oDMTJlbWFsNWgxBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3Bob3QEc3RpbWUDMTIzNjU4MTk3OQ--">Photos</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/links;_ylc=X3oDMTJmYjBxYml0BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2xpbmtzBHN0aW1lAzEyMzY1ODE5Nzk-">Links</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/database;_ylc=X3oDMTJjOTBiZ2g3BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2RiBHN0aW1lAzEyMzY1ODE5Nzk-">Database</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/polls;_ylc=X3oDMTJmMGpiajZvBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3BvbGxzBHN0aW1lAzEyMzY1ODE5Nzk-">Polls</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/members;_ylc=X3oDMTJldWpsYWIwBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21icnMEc3RpbWUDMTIzNjU4MTk3OQ--">Members</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/calendar;_ylc=X3oDMTJkY21kZnFtBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2NhbARzdGltZQMxMjM2NTgxOTc5">Calendar</a>  
    </div>  
    <!-- |**|end egp html banner|**| -->

                        <div id="ygrp-grft" style="font-family: Verdana; font-size: 77%; padding: 15px 0;">
          

        </div>
      
                  <div id="ygrp-mkp">
      <div id="hd">MARKETPLACE</div>
      <div id="ads">
                  <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
            <hr noshade="noshade" size="1"><a href="http://us.ard.yahoo.com/SIG=14k24dlom/M=493064.12016295.13271503.10835568/D=groups/S=1705007207:MKP1/Y=YAHOO/EXP=1236589179/L=/B=gLnKC0PDhFg-/J=1236581979906850/K=jsdG4Dfy1IhT5jqgDLJ0iw/A=5530388/R=0/SIG=11nuutlas/*http://explore.yahoo.com/groups/kraftmealsmadesimple/">From kitchen basics to easy recipes - join the Group from Kraft Foods
</a>          </div>
                              </div>
    </div>
      
    <!-- yahoo logo -->
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-ft" style="font-family: verdana; font-size: 77%; border-top: 1px solid #666; padding: 5px 0;">
      <a href="http://groups.yahoo.com/;_ylc=X3oDMTJkbnNtc251BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMjM2NTgxOTc5">
      <img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/join;_ylc=X3oDMTJmbnJsOXYxBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzEyMzY1ODE5Nzk-">Change settings via the Web</a> (Yahoo! ID required) <br>
      Change settings via email: <a href="mailto:TestFirstUserInterfaces-digest-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:TestFirstUserInterfaces-traditional-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>

      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJkamJoZG80BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMjM2NTgxOTc5">
        Visit Your Group 
      </a> |
      <a href="http://docs.yahoo.com/info/terms/">
        Yahoo! Groups Terms of Use      </a> |
      <a href="mailto:TestFirstUserInterfaces-unsubscribe-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=">
        Unsubscribe      </a> 
    </div>     <!-- |**|end egp html banner|**| -->
  </div> <!-- ygrp-msg -->

  
  <!-- Sponsor -->
  <!-- |**|begin egp html banner|**| -->
  <div id="ygrp-sponsor" style="width:160px; float:right; clear:none; margin:0 0 25px 0; background: white;">
    <!-- Network content -->
    
<!-- Start Recommendations -->
<div id="ygrp-reco">
     </div>
<!-- End Recommendations -->

	    <!-- Start vitality -->
	    <div id="ygrp-vital" style="background-color: #e0ecee; margin-bottom: 20px; padding: 2px 0 8px 8px;">
	      		<div id="vithd" style="font-size: 77%; font-family: Verdana; font-weight: bold; color: #333; text-transform: uppercase;">Recent Activity</div>
		<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
		        <li style="clear: both; list-style-type: none; border: 1px solid #e0ecee;">
      <div class="ct" style="float: right; font-weight: bold; color: #ff7900; float: right; width: 2em; text-align:right; padding-right: .5em;"><span style="display:none">&nbsp;</span>1</div>
      <div class="cat" style="font-weight: bold;"><a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/members;_ylc=X3oDMTJmdW0zNzN2BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzEyMzY1ODE5Nzk-">New Members</a></div>
    </li>
  
		    
		    
		    
		    
		    
		</ul>
	      	      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJlbWZubmgyBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTIzNjU4MTk3OQ--">
		Visit Your Group	      </a>
	    </div> 
	    	    	      
	    <!-- Network content -->
	    	      <div style="background-color:#EEEEEE; margin-bottom:20px; padding:10px 8px;">    <div id="nc">
              <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Weight Loss Group</div> 
<p><a href="http://us.ard.yahoo.com/SIG=14icfr5am/M=493064.12016300.12445692.11323196/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1236589179/L=/B=gbnKC0PDhFg-/J=1236581979906850/K=jsdG4Dfy1IhT5jqgDLJ0iw/A=5170419/R=0/SIG=11b5gu1oe/*http://new.groups.yahoo.com/specialKgroup">on Yahoo! Groups</a></p> 
<p>Get support and</p> 
<p>make friends online.</p>                  </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Find helpful tips</div> 
<p><a href="http://us.ard.yahoo.com/SIG=14hjs9raf/M=493064.12016258.12582637.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1236589179/L=/B=grnKC0PDhFg-/J=1236581979906850/K=jsdG4Dfy1IhT5jqgDLJ0iw/A=5191954/R=0/SIG=112mhte3e/*http://www.ygroupsblog.com/blog/">for Moderators</a></p> 
<p>on the Yahoo!</p> 
<p>Groups team blog.</p>                  </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">10 Day Club</div> 
<p><a href="http://us.ard.yahoo.com/SIG=14hqd2q6q/M=493064.12016283.12445687.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1236589179/L=/B=g7nKC0PDhFg-/J=1236581979906850/K=jsdG4Dfy1IhT5jqgDLJ0iw/A=5202316/R=0/SIG=11aijbghb/*http://new.groups.yahoo.com/allbrangroup">on Yahoo! Groups</a></p> 
<p>Share the benefits</p> 
<p>of a high fiber diet.</p>                  </div>
          </div>
</div>
	    
	  </div> 	  <!-- |**|end egp html banner|**| -->
	  <div style="clear:both; color: #FFF; font-size:1px;">.</div>
	</div> 		  <img src="http://geo.yahoo.com/serv?s=97359714/grpId=8744704/grpspId=1705007207/msgId=1036/stime=1236581979/nc1=5170419/nc2=5191954/nc3=5202316" width="1" height="1"> <br>
	
	<div style="color: white; clear: both;">__,_._,___</div>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</body>
	<!--~-|**|PrettyHtmlStart|**|-~-->
	<head>
<style type="text/css">
<!--
#ygrp-mkp{
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 14px 0px;
  padding: 0px 14px;
}
#ygrp-mkp hr{
  border: 1px solid #d8d8d8;
}
#ygrp-mkp #hd{
  color: #628c2a;
  font-size: 85%;
  font-weight: bold;
  line-height: 122%;
  margin: 10px 0px;
}
#ygrp-mkp #ads{
  margin-bottom: 10px;
}
#ygrp-mkp .ad{
  padding: 0 0;
}
#ygrp-mkp .ad a{
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
	<head>
<style type="text/css">
<!--
#ygrp-sponsor #ygrp-lc{
  font-family: Arial;
}
#ygrp-sponsor #ygrp-lc #hd{
  margin: 10px 0px;
  font-weight: bold;
  font-size: 78%;
  line-height: 122%;
}
#ygrp-sponsor #ygrp-lc .ad{
  margin-bottom: 10px;
  padding: 0 0;
}
-->
</style>
</head>
	<head>
	<style type="text/css">
	<!--
	#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
	#ygrp-mlmsg table {font-size:inherit;font:100%;}
	#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
	#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
	#ygrp-mlmsg * {line-height:1.22em;}
	#ygrp-text{
	    font-family: Georgia;	
	}
	#ygrp-text p{
	    margin: 0 0 1em 0;
	}

	dd.last p a {
          font-family: Verdana;
          font-weight: bold;
	}

	#ygrp-vitnav{
		padding-top: 10px;
		font-family: Verdana;
		font-size: 77%;
		margin: 0;
	}
	#ygrp-vitnav a{
		padding: 0 1px;
	}
	#ygrp-mlmsg #logo{
	  padding-bottom: 10px;
	}

	#ygrp-reco {
	margin-bottom: 20px;
	padding: 0px;
	}
	#ygrp-reco #reco-head {
		font-weight: bold;
		color: #ff7900;
	}

	#reco-category{
        	font-size: 77%;
	}
	#reco-desc{
        	font-size: 77%;
	}

	#ygrp-vital a{
		text-decoration: none;
	}

	#ygrp-vital a:hover{
	  text-decoration: underline;
	}

	#ygrp-sponsor #ov ul{
		padding: 0 0 0 8px;
		margin: 0;
	}
	#ygrp-sponsor #ov li{
		list-style-type: square;
		padding: 6px 0;
		font-size: 77%;
	}
	#ygrp-sponsor #ov li a{
		text-decoration: none;
		font-size: 130%;
	}
	#ygrp-sponsor #nc{
	  background-color: #eee;
	  margin-bottom: 20px;
	  padding: 0 8px;
	}
	#ygrp-sponsor .ad{
		padding: 8px 0;
	}
	#ygrp-sponsor .ad #hd1{
		font-family: Arial;
		font-weight: bold;
		color: #628c2a;
		font-size: 100%;
		line-height: 122%;
	}
	#ygrp-sponsor .ad a{
		text-decoration: none;
	}
	#ygrp-sponsor .ad a:hover{
		text-decoration: underline;
	}
	#ygrp-sponsor .ad p{
		margin: 0;
	}
	o{font-size: 0; }
	.MsoNormal{
	   margin: 0 0 0 0;
	}
	#ygrp-text tt{
	  font-size: 120%;
	}
	blockquote{margin: 0 0 0 4px;}
	.replbq{margin:4}

dd.last p span {
  margin-right: 10px;
  font-family: Verdana;
  font-weight: bold;
}

dd.last p span.yshortcuts {
  margin-right: 0;
}

div.photo-title a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
    text-decoration: none;
}

div.file-title a,
div.file-title a:active,
div.file-title a:hover,
div.file-title a:visited {
    text-decoration: none;
}

#ygrp-msg p {
    clear: both;
    padding: 15px 0 3px 0;
    overflow: hidden;
}

#ygrp-msg p span {
    color: #1E66AE;
    font-weight: bold;
}

div#ygrp-mlmsg #ygrp-msg p a span.yshortcuts {
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
}

#ygrp-msg p a {
    font-family: Verdana;
    font-size: 10px;
}

#ygrp-mlmsg a {
    color: #1E66AE;
}

div.attach-table div div a {
    text-decoration: none;
}

div.attach-table {
    width: 400px;
}

	-->
	</style>
	</head>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</html><!--End group email -->


--YPykgCcF1tuda9qURJrjFDsxlw0jcvG-Lk-xw4D--