| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <!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>
|
