ialbert
/
www-lib-markdown


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Markdown Unit Tests</title>
		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
		<style type="text/css">
			:root {
				font-family: sans-serif;
			}
			.testclass {
				border: 1px solid black;
				padding: 0.5em 1em;
				margin-bottom: 1em;
				max-width: 50em;
			}
			.testclassname {
				font-weight: bold;
				font-size: 1.25rem;
				padding-bottom: 0.25em;
			}
			.testcase {
				padding: 0.2em 0;
				margin-left: 2em;
			}
			.testcase {
				border-top: 1px solid #888;
			}
			.testcasename {
				font-size: 115%;
				font-weight: bold;
			}
			.testcasestatus {
				font-weight: bold;
			}
			.result-untested {
				color: #888;
			}
			.result-testing {
				color: black;
			}
			.result-passed {
				color: #090;
			}
			.result-failed {
				color: #a00;
			}
			.result-errored {
				color: #a80;
			}
		</style>
		<script src="js/markdown.js"></script>
		<!-- Testing infrastructure -->
		<script>
			/**
			 * @param {String} text
			 * @returns {String}
			 */
			function escapeHTML(text) {
				return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>\n');
			}

			class ResultType {
				static untested = new ResultType('untested');
				static testing = new ResultType('testing');
				static passed = new ResultType('passed');
				static failed = new ResultType('failed');
				static errored = new ResultType('errored');

				#name;

				constructor(name) {
					this.#name = name;
				}

				toString() {
					return `${this.constructor.name}.${this.#name}`;
				}
			}

			class FailureError extends Error {
				constructor(message=null) {
					super(message);
				}
			}

			class BaseTest {
				setUp() {}
				tearDown() {}
				/** @var {TestCaseRunner|null} */
				currentRunner = null;
				fail(failMessage=null) {
					throw new FailureError(failMessage || 'failed');
				}
				assertTrue(test, failMessage=null) {
					if (!test) this.fail(failMessage || `expected true, got ${test}`);
				}
				assertFalse(test, failMessage=null) {
					if (test) this.fail(failMessage || `expected false, got ${test}`);
				}
				assertEqual(a, b, failMessage=null) {
					if (a == b) return;
					const aVal = `${a}`;
					const bVal = `${b}`;
					if (aVal.length > 20 || bVal.length > 20) {
						this.fail(failMessage || `equality failed:\n${aVal}\n!=\n${bVal}`);
					} else {
						this.fail(failMessage || `equality failed: ${aVal} != ${bVal}`);
					}
				}
				expectError(e=true) {
					if (this.currentRunner) this.currentRunner.expectedError = e;
				}
				/**
				 * @param {number} maxTime maximum time in seconds
				 * @param {function} timedCode code to run and time
				 */
				profile(maxTime, timedCode) {
					const startTime = performance.now();
					const result = timedCode();
					const endTime = performance.now();
					const seconds = (endTime - startTime) / 1000.0;
					if (seconds > maxTime) {
						this.fail(`Expected <= ${maxTime}s execution time, actual ${seconds}s.`);
					}
					return result;
				}
			}

			/**
			 * Manages the running and results of a single test method on a test
			 * class.
			 */
			class TestCaseRunner {
				/** @var {number} */
				static #nextUniqueId = 1;
				/** @var {number} */
				uniqueId = 0;
				/** @var {BaseTest} */
				#objectUnderTest;
				/** @var {method} */
				#method;
				/** @var {ResultType} */
				result = ResultType.untested;
				/** @var {String|null} */
				message = null;
				expectedError = null;
				/** @var {String} */
				get className() { return this.#objectUnderTest.constructor.name; }
				/** @var {String} */
				get methodName() { return this.#method.name; }
				/**
				 * @param {BaseTest} objectUnderTest
				 * @param {method} method
				 */
				constructor(objectUnderTest, method) {
					this.#objectUnderTest = objectUnderTest;
					this.#method = method;
					this.uniqueId = TestCaseRunner.#nextUniqueId++;
				}
				run() {
					try {
						this.expectedError = null;
						this.#objectUnderTest.currentRunner = this;
						this.#objectUnderTest.setUp();
						this.#method.bind(this.#objectUnderTest)();
						this.result = ResultType.passed;
						this.message = null;
					} catch (e) {
						if (e instanceof FailureError) {
							this.result = ResultType.failed;
							this.message = e.message;
						} else if (this.#isExpectedError(e)) {
							this.result = ResultType.passed;
							this.message = null;
						} else {
							this.result = ResultType.errored;
							this.message = e.message;
							if (e.stack !== undefined) {
								this.message += "\n" + e.stack;
							}
						}
					} finally {
						this.expectedError = null;
						try {
							this.#objectUnderTest.tearDown();
							this.#objectUnderTest.currentRunner = null;
						} catch (e0) {
							console.error(`Failed to run ${this.className}.tearDown() - ${e0.message}`);
							this.result = ResultType.errored;
							this.message = e0.message;
						}
					}
				}
				get #cssId() { return `testcase${this.uniqueId}`; }
				#isExpectedError(e) {
					if (this.expectedError === null) return false;
					if (this.expectedError === true) return true;
					// TODO: Have a way to specify details about what kind of error is expected. Maybe a prototype instance and/or a testing lambda.
					return false;
				}
				toHTML() {
					var html = `<div class="testcase" id="${this.#cssId}">`;
					html += `<div class="testcasename"><span class="testcasemethod">${this.methodName}</span></div>`;
					switch (this.result) {
						case ResultType.untested:
							html += '<div class="testcasestatus result-untested">Waiting to test</div>';
							break;
						case ResultType.testing:
							html += '<div class="testcasestatus result-tesitng">Testing...</div>';
							break;
						case ResultType.passed:
							html += '<div class="testcasestatus result-passed">Passed</div>';
							break;
						case ResultType.failed:
							html += '<div class="testcasestatus result-failed">Failed</div>';
							html += `<div class="testcasemessage">${escapeHTML(this.message)}</div>`;
							break;
						case ResultType.errored:
							html += '<div class="testcasestatus result-errored">Errored</div>';
							html += `<div class="testcasemessage">${escapeHTML(this.message)}</div>`;
							break;
					}
					html += `</div>`;
					return html;
				}
				/**
				 * Updates the HTML node in-place with the current status, or
				 * adds it if it does not exist yet.
				 */
				updateHTML() {
					let existing = document.getElementById(this.#cssId);
					if (existing) {
						existing.outerHTML = this.toHTML();
					} else {
						document.getElementById('results').innerHTML += this.toHTML();
					}
				}

				/**
				 * @param {object} objectUnderTest
				 * @returns {TestCaseRunner[]}
				 */
				static findTestCases(objectUnderTest) {
					if (!(objectUnderTest instanceof BaseTest)) return [];
					var members = [];
					var obj = objectUnderTest;
					do {
						members.push(...Object.getOwnPropertyNames(obj));
					} while (obj = Object.getPrototypeOf(obj));
					return members.sort().filter((e, i, arr) => {
						if (e != arr[i + 1] && typeof objectUnderTest[e] == 'function' && e.startsWith('test')) return true;
					}).map((name) => {
						return new TestCaseRunner(objectUnderTest, objectUnderTest[name]);
					});
				}
			}

			class TestClassRunner {
				static #nextUniqueId = 1;

				#uniqueId = 0;
				#theClass;
				#instance;
				#testCases;

				get testCases() { return this.#testCases; }

				constructor(theClass) {
					this.#theClass = theClass;
					this.#instance = new theClass();
					this.#testCases = TestCaseRunner.findTestCases(this.#instance);
					this.#uniqueId = TestClassRunner.#nextUniqueId++;
				}
				get #cssId() { return `testclass${this.#uniqueId}`; }
				toHTML() {
					var html = '';
					html += `<div class="testclass" id="${this.#cssId}">`;
					html += `<div class="testclassname">${this.#theClass.name}</div>`;
					for (const testCase of this.#testCases) {
						html += testCase.toHTML();
					}
					html += '</div>';
					return html;
				}
				updateHTML() {
					var existing = document.getElementById(this.#cssId);
					if (!existing) {
						document.getElementById('results').innerHTML += this.toHTML();
					}
				}

				static runAll(testClasses) {
					var tests = [];  // tuples of TestClassRunner and TestCaseRunner
					for (const testClass of testClasses) {
						const classRunner = new TestClassRunner(testClass);
						classRunner.updateHTML();
						tests.push(...classRunner.testCases.map(function(test) { return [ classRunner, test ] }));
					}
					var testInterval = setInterval(function() {
						if (tests.length == 0) {
							clearInterval(testInterval);
							testInterval = null;
							return;
						}
						var classRunner;
						var testCase;
						[ classRunner, testCase ] = tests[0];
						if (testCase.result == ResultType.untested) {
							testCase.result = ResultType.testing;
							testCase.updateHTML();
							classRunner.updateHTML();
						} else if (testCase.result == ResultType.testing) {
							tests.splice(0, 1);
							testCase.run();
							testCase.updateHTML();
							classRunner.updateHTML();
						}
					}, 1);
				}
			}
		</script>
		<!-- Tests -->
		<script>
			function onLoad() {
				let testClasses = [
					TokenTests,
					InlineTests,
					BlockTests,
				];
				TestClassRunner.runAll(testClasses);
			}
			document.addEventListener('DOMContentLoaded', onLoad);

			function normalizeWhitespace(str) {
				return str.replace(/\s+/g, ' ').replace(/(?:^\s+|\s+$)/g, '');
			}

			class TokenTests extends BaseTest {
				test_findFirstTokens() {
					const tokens = [
						new MDToken('Lorem', MDTokenType.Text),
						new MDToken(' ', MDTokenType.Whitespace),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken('ipsum', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken(' ', MDTokenType.Whitespace),
						new MDToken('dolor', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken('sit', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
					];
					const pattern = [
						MDTokenType.Underscore,
					];
					const result = MDToken.findFirstTokens(tokens, pattern);
					const expected = {
						tokens: [ tokens[2] ],
						index: 2,
					};
					this.assertEqual(JSON.stringify(result), JSON.stringify(expected));
				}

				test_findPairedTokens() {
					const tokens = [
						new MDToken('Lorem', MDTokenType.Text),
						new MDToken(' ', MDTokenType.Whitespace),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken('ipsum', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken(' ', MDTokenType.Whitespace),
						new MDToken('dolor', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
						new MDToken('sit', MDTokenType.Text),
						new MDToken('_', MDTokenType.Underscore),
					];
					const pattern = [
						MDTokenType.Underscore,
					];
					const result = MDToken.findPairedTokens(tokens, pattern, pattern);
					const expected = {
						startTokens: [ tokens[2] ],
						contentTokens: [ tokens[3] ],
						endTokens: [ tokens[4] ],
						startIndex: 2,
						contentIndex: 3,
						endIndex: 4,
						totalLength: 3,
					}
					this.assertEqual(JSON.stringify(result), JSON.stringify(expected));
				}
			}

			class InlineTests extends BaseTest {
				/** @type {Markdown} */
				parser;
				md(markdown) {
					return normalizeWhitespace(this.parser.toHTML(markdown));
				}
			
				setUp() {
					this.parser = Markdown.completeParser;
				}

				test_simpleSingleParagraph() {
					let markdown = 'Lorem ipsum';
					let expected = '<p>Lorem ipsum</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strong() {
					let markdown = 'Lorem **ipsum** dolor **sit**';
					let expected = '<p>Lorem <strong>ipsum</strong> dolor <strong>sit</strong></p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_emphasis() {
					let markdown = 'Lorem _ipsum_ dolor _sit_';
					let expected = '<p>Lorem <em>ipsum</em> dolor <em>sit</em></p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_cleanNesting1() {
					let markdown = 'Lorem **ipsum *dolor* sit** amet';
					let expected = '<p>Lorem <strong>ipsum <em>dolor</em> sit</strong> amet</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_cleanNesting2() {
					let markdown = 'Lorem *ipsum **dolor** sit* amet';
					let expected = '<p>Lorem <em>ipsum <strong>dolor</strong> sit</em> amet</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_tightNesting() {
					let markdown = 'Lorem ***ipsum*** dolor';
					let expected1 = '<p>Lorem <strong><em>ipsum</em></strong> dolor</p>';
					let expected2 = '<p>Lorem <em><strong>ipsum</strong></em> dolor</p>';
					let actual = this.md(markdown);
					this.assertTrue(actual == expected1 || actual == expected2);
				}

				test_strongEmphasis_lopsidedNesting1() {
					let markdown = 'Lorem ***ipsum* dolor** sit';
					let expected = '<p>Lorem <strong><em>ipsum</em> dolor</strong> sit</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_lopsidedNesting2() {
					let markdown = 'Lorem ***ipsum** dolor* sit';
					let expected = '<p>Lorem <em><strong>ipsum</strong> dolor</em> sit</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_lopsidedNesting3() {
					let markdown = 'Lorem **ipsum *dolor*** sit';
					let expected = '<p>Lorem <strong>ipsum <em>dolor</em></strong> sit</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strongEmphasis_lopsidedNesting4() {
					let markdown = 'Lorem *ipsum **dolor*** sit';
					let expected = '<p>Lorem <em>ipsum <strong>dolor</strong></em> sit</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_inlineCode() {
					let markdown = 'Lorem `ipsum` dolor';
					let expected = '<p>Lorem <code>ipsum</code> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_inlineCode_withInnerBacktick() {
					let markdown = 'Lorem ``ip`su`m`` dolor';
					let expected = '<p>Lorem <code>ip`su`m</code> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strikethrough_single() {
					let markdown = 'Lorem ~ipsum~ dolor';
					let expected = '<p>Lorem <strike>ipsum</strike> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_strikethrough_double() {
					let markdown = 'Lorem ~~ipsum~~ dolor';
					let expected = '<p>Lorem <strike>ipsum</strike> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_fullyQualified() {
					let markdown = 'Lorem [ipsum](https://example.com/path/page.html) dolor';
					let expected = '<p>Lorem <a href="https://example.com/path/page.html">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_relative() {
					let markdown = 'Lorem [ipsum](page.html) dolor';
					let expected = '<p>Lorem <a href="page.html">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_title() {
					let markdown = 'Lorem [ipsum](page.html "link title") dolor';
					let expected = '<p>Lorem <a href="page.html" title="link title">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_literal() {
					let markdown = 'Lorem <https://example.com> dolor';
					let expected = '<p>Lorem <a href="https://example.com">https://example.com</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_ref() {
					let markdown = "Lorem [ipsum][ref] dolor\n\n[ref]: https://example.com";
					let expected = '<p>Lorem <a href="https://example.com">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_email() {
					let markdown = 'Lorem [ipsum](user@example.com) dolor';
					let expected = '<p>Lorem <a href="mailto:&#117;&#115;&#101;&#114;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_email_withTitle() {
					let markdown = 'Lorem [ipsum](user@example.com "title") dolor';
					let expected = '<p>Lorem <a href="mailto:&#117;&#115;&#101;&#114;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;" title="title">ipsum</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_link_literalEmail() {
					let markdown = 'Lorem <user@example.com> dolor';
					let expected = '<p>Lorem <a href="mailto:&#117;&#115;&#101;&#114;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">&#117;&#115;&#101;&#114;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;</a> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_image() {
					let markdown = 'Lorem ![alt text](image.jpg) dolor';
					let expected = '<p>Lorem <img src="image.jpg" alt="alt text"> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_image_noAlt() {
					let markdown = 'Lorem ![](image.jpg) dolor';
					let expected = '<p>Lorem <img src="image.jpg"> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_image_withTitle() {
					let markdown = 'Lorem ![alt text](image.jpg "image title") dolor';
					let expected = '<p>Lorem <img src="image.jpg" alt="alt text" title="image title"> dolor</p>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}
			}

			class BlockTests extends BaseTest {
				/** @type {Markdown} */
				parser;
				md(markdown) {
					return normalizeWhitespace(this.parser.toHTML(markdown));
				}
			
				setUp() {
					this.parser = Markdown.completeParser;
				}

				test_paragraphs() {
					let markdown = "Lorem ipsum\n\nDolor sit amet";
					let expected = "<p>Lorem ipsum</p> <p>Dolor sit amet</p>";
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_paragraph_lineGrouping() {
					let markdown = "Lorem ipsum\ndolor sit amet";
					let expected = "<p>Lorem ipsum dolor sit amet</p>";
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_unorderedList() {
					let markdown = "* Lorem\n* Ipsum\n* Dolor";
					let expected = '<ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_orderedList() {
					let markdown = "1. Lorem\n1. Ipsum\n5. Dolor";
					let expected = '<ol start="1"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_orderedList_numbering() {
					let markdown = "4. Lorem\n1. Ipsum\n9. Dolor";
					let expected = '<ol start="4"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}

				test_blockquote() {
					let markdown = '> Lorem ipsum dolor';
					let expected = '<blockquote> <p>Lorem ipsum dolor</p> </blockquote>';
					let actual = this.md(markdown);
					this.assertEqual(actual, expected);
				}
			}
		</script>
	</head>
	<body>
		<div id="results"></div>
	</body>
</html>