<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Typography.js : QUnit Tests</title>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-git1.js"></script>
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="../typogr.min.js"></script>
<script>
$(document).ready(function(){
var tp = typogr;
test('amp', function(){
equal(tp.amp('One & two' ), 'One <span class="amp">&</span> two');
equal(tp.amp('One & two'), 'One <span class="amp">&</span> two');
equal(tp.amp('One & two'), 'One <span class="amp">&</span> two');
equal(tp.amp('One & two'),
'One <span class="amp">&</span> two');
// It won't mess up & that are already wrapped, in entities or URLs
equal(tp.amp('One <span class="amp">&</span> two'),
'One <span class="amp">&</span> two');
equal(tp.amp('“this” & <a href="/?that&test">that</a>'),
'“this” <span class="amp">&</span> <a href="/?that&test">that</a>');
// It should ignore standalone amps that are in attributes
equal(tp.amp('<link href="xyz.html" title="One & Two">xyz</link>'),
'<link href="xyz.html" title="One & Two">xyz</link>');
});
test('ord', function(){
equal(tp.ord('1st'), '1<span class="ord">st</span>');
equal(tp.ord('2nd'), '2<span class="ord">nd</span>');
equal(tp.ord('3rd'), '3<span class="ord">rd</span>');
equal(tp.ord('10th'), '10<span class="ord">th</span>');
equal(tp.ord('37th'), '37<span class="ord">th</span>');
equal(tp.ord('1000th'), '1000<span class="ord">th</span>');
// Make sure it does not happen within attributes
equal(tp.ord('<span data-test="1st">1st</span>'), '<span data-test="1st">1<span class="ord">st</span></span>');
});
test('quotes', function(){
equal(tp.initQuotes('"With primes"'), '<span class="dquo">"</span>With primes"');
equal(tp.initQuotes("'With single primes'"), '<span class="quo">\'</span>With single primes\'');
equal(tp.initQuotes('<a href="#">"With primes and a link"</a>'),
'<a href="#"><span class="dquo">"</span>With primes and a link"</a>');
equal(tp.initQuotes('“With smartypanted quotes”'),
'<span class="dquo">“</span>With smartypanted quotes”');
equal(tp.initQuotes('<h1> <strong>‘With</strong> single primes ...</h1>'),
'<h1> <strong><span class="quo">‘</span>With</strong> single primes ...</h1>');
equal(tp.initQuotes('<h2> “Jayhawks” & KU fans ... </h2>'),
'<h2> <span class="dquo">“</span>Jayhawks” & KU fans ... </h2>');
});
test('widont', function(){
equal(tp.widont('A very simple test'), 'A very simple<span class="widont"> </span>test');
// Single word items shouldn't be changed
equal(tp.widont('Test'), 'Test');
equal(tp.widont(' Test'), ' Test');
equal(tp.widont('<ul><li>Test</p></li><ul>'), '<ul><li>Test</p></li><ul>');
equal(tp.widont('<ul><li> Test</p></li><ul>'), '<ul><li> Test</p></li><ul>');
equal(tp.widont('<p>In a couple of paragraphs</p><p>paragraph two</p>'),
'<p>In a couple of<span class="widont"> </span>paragraphs</p><p>paragraph<span class="widont"> </span>two</p>');
equal(tp.widont('<h1><a href="#">In a link inside a heading</i> </a></h1>'),
'<h1><a href="#">In a link inside a<span class="widont"> </span>heading</i> </a></h1>');
equal(tp.widont('<h1><a href="#">In a link</a> followed by other text</h1>'),
'<h1><a href="#">In a link</a> followed by other<span class="widont"> </span>text</h1>');
// Empty HTMLs shouldn't error
equal(tp.widont('<h1><a href="#"></a></h1>'), '<h1><a href="#"></a></h1>');
equal(tp.widont('<div>Divs get no love!</div>'), '<div>Divs get no love!</div>');
equal(tp.widont('<pre>Neither do PREs</pre>'), '<pre>Neither do PREs</pre>');
equal(tp.widont('<div><p>But divs with paragraphs do!</p></div>'),
'<div><p>But divs with paragraphs<span class="widont"> </span>do!</p></div>');
// It should ignore inline tags
equal(tp.widont('<p>Testing with a tag at <strong>the end</strong>.</p>'),
'<p>Testing with a tag at <strong>the<span class="widont"> </span>end</strong>.</p>');
equal(tp.widont('<p>Testing with <strong>multiple inline</strong> tags at <a href="#"><strong><em>the end</em></strong></a>.</p>'),
'<p>Testing with <strong>multiple inline</strong> tags at <a href="#"><strong><em>the<span class="widont"> </span>end</em></strong></a>.</p>');
// It should also take commas into consideration
equal(tp.widont('<p>Start of the paragraph ... before they get deleted-I mean, published.</p>'),
'<p>Start of the paragraph ... before they get deleted-I mean,<span class="widont"> </span>published.</p>');
});
test('caps', function(){
equal(tp.caps('A message from KU'),
'A message from <span class="caps">KU</span>');
// Uses the smartypants tokenizer to not screw with HTML or with tags it shouldn't.
equal(tp.caps('<PRE>CAPS</pre> more CAPS'),
'<PRE>CAPS</pre> more <span class="caps">CAPS</span>');
equal(tp.caps('A message from 2KU2 with digits'),
'A message from <span class="caps">2KU2</span> with digits');
equal(tp.caps('Dotted caps followed by spaces should never include them in the wrap D.O.T. like so.'),
'Dotted caps followed by spaces should never include them in the wrap <span class="caps">D.O.T.</span> like so.');
// All caps with with apostrophes in them shouldn't break. Only handles dump apostrophes though.
equal(tp.caps("JIMMY'S"),
'<span class="caps">JIMMY\'S</span>');
equal(tp.caps("<i>D.O.T.</i>HE34T<b>RFID</b>"),
'<i><span class="caps">D.O.T.</span></i><span class="caps">HE34T</span><b><span class="caps">RFID</span></b>');
});
test('tokenize', function(){
deepEqual( tp.tokenize('<h1>test header</h1>'+
'<p>some <b>other</b> text</p> '+
'and appendix ...'),
[ { type: 'tag', txt: '<h1>' },
{ type: 'text', txt: 'test header' },
{ type: 'tag', txt: '</h1>' },
{ type: 'tag', txt: '<p>' },
{ type: 'text', txt: 'some ' },
{ type: 'tag', txt: '<b>' },
{ type: 'text', txt: 'other' },
{ type: 'tag', txt: '</b>' },
{ type: 'text', txt: ' text' },
{ type: 'tag', txt: '</p>' },
{ type: 'text', txt: ' and appendix ...' } ]
);
});
test('smartEscapes', function(){
equal( tp.smartEscapes( '\\" : \\\' : \\- : \\. : \\\\ : \\`'),
'" : ' : - : . : \ : `');
});
test('smartDashes', function(){
equal( tp.smartDashes( '-- : --- : -- : ---'),
'– : — : – : —');
equal( tp.smartDashes( '<!--:-->:<!-- valid html comment -->'),
'<!--:-->:<!-- valid html comment -->:');
});
test('smartEscapes', function(){
equal( tp.smartEllipses( '. ... : . . . .'),
'. … : … .');
});
test('smartBackticks', function(){
equal( tp.smartBackticks( "``Isn't this fun?''"),
"“Isn't this fun?”");
});
test('smartQuotes', function(){
equal( tp.smartQuotes( '"Isn\'t this fun?"'),
'“Isn’t this fun?”');
});
test('smartypants', function(){
equal( tp.smartypants( 'The "Green" man'),
'The “Green” man');
equal( tp.smartypants( '"<a href="http://example.com">switched off</a>".'),
'“<a href="http://example.com">switched off</a>”.');
equal( tp.smartypants('<a href="">markdown</a>\'s popularity is growing'),
'<a href="">markdown</a>’s popularity is growing');
});
test('typogrify', function(){
equal( tp.typogrify(
'<h2>"Jayhawks" & KU fans act extremely obnoxiously</h2>'),
'<h2><span class="dquo">“</span>Jayhawks” <span class="amp">&</span> <span class=\"caps\">KU</span> fans act extremely<span class="widont"> </span>obnoxiously</h2>');
equal( tp('<h2>"Jayhawks" & KU fans act extremely obnoxiously</h2>').typogrify(),
'<h2><span class="dquo">“</span>Jayhawks” <span class="amp">&</span> <span class=\"caps\">KU</span> fans act extremely<span class="widont"> </span>obnoxiously</h2>');
equal( tp('<h2>"Jayhawks" & KU fans act extremely obnoxiously</h2>').chain().typogrify().value(),
'<h2><span class="dquo">“</span>Jayhawks” <span class="amp">&</span> <span class=\"caps\">KU</span> fans act extremely<span class="widont"> </span>obnoxiously</h2>');
});
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>