mnutt · November 2, 2009 03:24
diff --git a/gistfile1.htm b/gistfile1.htm
 <html>
  <head>
    <title>RSpec</title>
  
    <style>
      body {
        background-color: #333;
        color: #FFF;
        font-family: "Lucida Grande", "Helvetica", sans-serif;
      }

      #progress {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 2.5em;
      }

      #spec_pool {
        margin-top: 50px;
        width: 30%;
        float: left;
      }

      #cases {
        margin-top: 50px;
        width: 70%;
        float: left;
      }

      #spec_pool img {
        width: 12px;
        height: 12px;
      }

      #cases .fail, #cases .pass {
        margin-bottom: 1em;
      }

      #cases .scenario {
        margin:0;
        padding: 2px 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
      }

      #cases .fail .scenario {
        background-color: #A20;
      }

      #cases .pass .scenario {
        background-color: #0A2;
      }

      #cases .info {
        padding: 5px;
        background-color: #444;
        font-size: 0.8em;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
      }

      #cases .info .description {
        margin-top: 3px;
      }

      /* From RSpec: Ruby code, style similar to vibrant ink */
      .ruby {
        font-size: 12px;
        font-family: monospace;
        color: white;
        background-color: black;
        padding: 0.1em 0 0.2em 0;
        overflow: hidden;
      }

      .ruby .keyword { color: #FF6600; }
      .ruby .constant { color: #339999; }
      .ruby .attribute { color: white; }
      .ruby .global { color: white; }
      .ruby .module { color: white; }
      .ruby .class { color: white; }
      .ruby .string { color: #66FF00; }
      .ruby .ident { color: white; }
      .ruby .method { color: #FFCC00; }
      .ruby .number { color: white; }
      .ruby .char { color: white; }
      .ruby .comment { color: #9933CC; }
      .ruby .symbol { color: white; }
      .ruby .regex { color: #44B4CC; }
      .ruby .punct { color: white; }
      .ruby .escape { color: white; }
      .ruby .interp { color: white; }
      .ruby .expr { color: white; }

      .ruby .offending { 
        background-color: gray; 
        width: 100%;
        padding-right: 4000px;
      }
      .ruby .linenum {
        width: 75px;
        padding: 0.1em 1em 0.2em 0;
        color: #000000;
        background-color: #EEE;
      }

    </style>

    <script src="javascripts/jquery.js"></script>
    <script src="javascripts/json2.js"></script>

    <script>
      function handle(json) {
        data = JSON.parse(json);

        if(data.status) {
          handleSpec(data)
        } else if(data.progress) {
          handleProgress(data);
        } else {
          console.log("Bad data!");
        }
      }

      function handleSpec(data) {
        if(data.status == "passed") {
          handlePassingSpec(data);
        } else if(data.status == "failed") {
          handleFailingSpec(data);
        } else if(data.status == "pending") {
          handlePendingSpec(data);
        }
      }

      function handlePassingSpec(data) {
        var img = $("<img src='images/circle_green.png'>");
        $('#spec_pool').append(img);

        var passInfo = $("<div class='info'></div>");
        passInfo.append("<div class='description'>"+data.description+"</div>");

        var sanitized = data.group.replace(/[^A-Za-z0-9]/g, '');
        if($('#'+sanitized).length > 0) {
           $('#'+sanitized).append(passInfo);
        } else {
          var pass = $("<div id='"+sanitized+"' class='pass'></div>");
          pass.append("<div class='scenario'>"+data.group+"</div>");      
          pass.append(passInfo);
  
          $('#cases').append(pass);
        }
        img.data('ref', sanitized);

        img.click(function() {
          $('#cases > div').hide();
          $('#'+$(this).data('ref')).show().parent().show();
        });
      }

      function handlePendingSpec(data) {
        var img = $("<img src='images/circle_orange.png'>");
        $('#spec_pool').append(img);
      }
      
      function handleFailingSpec(data) {
        var img = $("<img src='images/circle_red.png'>");
        $('#spec_pool').append(img);

        var sanitized = data.group.replace(/[^A-Za-z0-9]/g, '');

        var fail = $("<div id='"+sanitized+"' class='fail'></div>");
        fail.append("<div class='scenario'>"+data.group+"</div>");

        var failInfo = $("<div class='info'></div>");
        failInfo.append("<div class='description'>"+data.description+"</div>");
        failInfo.append("<pre class='message'><code>"+data.message+"</code></pre>");
        failInfo.append("<div class='backtrace'>"+data.backtrace+"</div>");
        failInfo.append("<pre class='ruby'><code>"+data.snippet+"</code></pre>");
        fail.append(failInfo);
      
        $('#cases').prepend(fail);
        img.data('ref', sanitized);

        img.click(function() {
          $('#cases > div').hide();
          $('#'+$(this).data('ref')).parent().show();
        });
      }
      
      function handleProgress(data) {
        $('#progress').text(data.progress + "%");
      }

    </script>

  </head>

  <body>
    <div id="progress">0%</div>
    <div id="spec_pool"></div>
    <div id="cases">
      <div class="fail" style="display:none;">
 	<div class="scenario">
 	  NegativeNamedScopes making a something with something
 	</div>
 	
 	<div class="info">
 	  <p class="description">should not overwrite an example</p>
 	  
 	  <p class="message">expected: "foobar"<br>got: "foo"</p>
 	  <pre class="ruby"><code><span class="linenum">50</span>    <span class="ident">it</span> <span class="punct">"</span><span class="string">should be successful</span><span class="punct">"</span> <span class="keyword">do</span>
 <span class="linenum">51</span>      <span class="ident">do_get</span><span class="punct">(</span><span class="attribute">@podcast</span><span class="punct">.</span><span class="ident">clean_url</span><span class="punct">)</span>
 <span class="offending"><span class="linenum">52</span>      <span class="ident">response</span><span class="punct">.</span><span class="ident">should</span> <span class="ident">be_success</span></span>
 <span class="linenum">53</span>    <span class="keyword">end</span></code>
 	  </pre>
 	</div>
      </div>
    </div>

  </body>

 </html>
	<html>
	<head>
	<title>RSpec</title>

	<style>
	body {
	background-color: #333;
	color: #FFF;
	font-family: "Lucida Grande", "Helvetica", sans-serif;
	}

	#progress {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 2.5em;
	}

	#spec_pool {
	margin-top: 50px;
	width: 30%;
	float: left;
	}

	#cases {
	margin-top: 50px;
	width: 70%;
	float: left;
	}

	#spec_pool img {
	width: 12px;
	height: 12px;
	}

	#cases .fail, #cases .pass {
	margin-bottom: 1em;
	}

	#cases .scenario {
	margin:0;
	padding: 2px 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	}

	#cases .fail .scenario {
	background-color: #A20;
	}

	#cases .pass .scenario {
	background-color: #0A2;
	}

	#cases .info {
	padding: 5px;
	background-color: #444;
	font-size: 0.8em;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	}

	#cases .info .description {
	margin-top: 3px;
	}

	/* From RSpec: Ruby code, style similar to vibrant ink */
	.ruby {
	font-size: 12px;
	font-family: monospace;
	color: white;
	background-color: black;
	padding: 0.1em 0 0.2em 0;
	overflow: hidden;
	}

	.ruby .keyword { color: #FF6600; }
	.ruby .constant { color: #339999; }
	.ruby .attribute { color: white; }
	.ruby .global { color: white; }
	.ruby .module { color: white; }
	.ruby .class { color: white; }
	.ruby .string { color: #66FF00; }
	.ruby .ident { color: white; }
	.ruby .method { color: #FFCC00; }
	.ruby .number { color: white; }
	.ruby .char { color: white; }
	.ruby .comment { color: #9933CC; }
	.ruby .symbol { color: white; }
	.ruby .regex { color: #44B4CC; }
	.ruby .punct { color: white; }
	.ruby .escape { color: white; }
	.ruby .interp { color: white; }
	.ruby .expr { color: white; }

	.ruby .offending {
	background-color: gray;
	width: 100%;
	padding-right: 4000px;
	}
	.ruby .linenum {
	width: 75px;
	padding: 0.1em 1em 0.2em 0;
	color: #000000;
	background-color: #EEE;
	}

	</style>

	<script src="javascripts/jquery.js"></script>
	<script src="javascripts/json2.js"></script>

	<script>
	function handle(json) {
	data = JSON.parse(json);

	if(data.status) {
	handleSpec(data)
	} else if(data.progress) {
	handleProgress(data);
	} else {
	console.log("Bad data!");
	}
	}

	function handleSpec(data) {
	if(data.status == "passed") {
	handlePassingSpec(data);
	} else if(data.status == "failed") {
	handleFailingSpec(data);
	} else if(data.status == "pending") {
	handlePendingSpec(data);
	}
	}

	function handlePassingSpec(data) {
	var img = $("<img src='images/circle_green.png'>");
	$('#spec_pool').append(img);

	var passInfo = $("<div class='info'></div>");
	passInfo.append("<div class='description'>"+data.description+"</div>");

	var sanitized = data.group.replace(/[^A-Za-z0-9]/g, '');
	if($('#'+sanitized).length > 0) {
	$('#'+sanitized).append(passInfo);
	} else {
	var pass = $("<div id='"+sanitized+"' class='pass'></div>");
	pass.append("<div class='scenario'>"+data.group+"</div>");
	pass.append(passInfo);

	$('#cases').append(pass);
	}
	img.data('ref', sanitized);

	img.click(function() {
	$('#cases > div').hide();
	$('#'+$(this).data('ref')).show().parent().show();
	});
	}

	function handlePendingSpec(data) {
	var img = $("<img src='images/circle_orange.png'>");
	$('#spec_pool').append(img);
	}

	function handleFailingSpec(data) {
	var img = $("<img src='images/circle_red.png'>");
	$('#spec_pool').append(img);

	var sanitized = data.group.replace(/[^A-Za-z0-9]/g, '');

	var fail = $("<div id='"+sanitized+"' class='fail'></div>");
	fail.append("<div class='scenario'>"+data.group+"</div>");

	var failInfo = $("<div class='info'></div>");
	failInfo.append("<div class='description'>"+data.description+"</div>");
	failInfo.append("<pre class='message'><code>"+data.message+"</code></pre>");
	failInfo.append("<div class='backtrace'>"+data.backtrace+"</div>");
	failInfo.append("<pre class='ruby'><code>"+data.snippet+"</code></pre>");
	fail.append(failInfo);

	$('#cases').prepend(fail);
	img.data('ref', sanitized);

	img.click(function() {
	$('#cases > div').hide();
	$('#'+$(this).data('ref')).parent().show();
	});
	}

	function handleProgress(data) {
	$('#progress').text(data.progress + "%");
	}

	</script>

	</head>

	<body>
	<div id="progress">0%</div>
	<div id="spec_pool"></div>
	<div id="cases">
	<div class="fail" style="display:none;">
	<div class="scenario">
	NegativeNamedScopes making a something with something
	</div>

	<div class="info">
	<p class="description">should not overwrite an example</p>

	<p class="message">expected: "foobar"<br>got: "foo"</p>
	<pre class="ruby"><code><span class="linenum">50</span> <span class="ident">it</span> <span class="punct">"</span><span class="string">should be successful</span><span class="punct">"</span> <span class="keyword">do</span>
	<span class="linenum">51</span> <span class="ident">do_get</span><span class="punct">(</span><span class="attribute">@podcast</span><span class="punct">.</span><span class="ident">clean_url</span><span class="punct">)</span>
	<span class="offending"><span class="linenum">52</span> <span class="ident">response</span><span class="punct">.</span><span class="ident">should</span> <span class="ident">be_success</span></span>
	<span class="linenum">53</span> <span class="keyword">end</span></code>
	</pre>
	</div>
	</div>
	</div>

	</body>

	</html>
No results found