Added snapshot plugin tests

package.json

@@ -60,6 +60,7 @@
 		"http-server": "^0.12.3",
 		"jsdom": "^16.7.0",
 		"mocha": "^9.2.2",
+		"mocha-chai-jest-snapshot": "^1.1.4",
 		"node-fetch": "^3.1.1",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.4.1",

tests/helper/prism-dom-util.js

@@ -1,4 +1,4 @@
-const { assert } = require('chai');
+const { UseSnapshot, assertEqual } = require('./snapshot');
 const PrismLoader = require('./prism-loader');
 
 /**
@@ -15,17 +15,55 @@ module.exports = {
 
 		const util = {
 			assert: {
-				highlight({ language = 'none', code, expected }) {
-					assert.strictEqual(Prism.highlight(code, Prism.languages[language], language), expected);
+				/**
+				 * @param {{
+				 *   language?: string,
+				 *   code: string,
+				 *   expected?: string | typeof UseSnapshot
+				 * }} param0
+				 */
+				highlight({ language = 'none', code, expected = UseSnapshot }) {
+					assertEqual(Prism.highlight(code, Prism.languages[language], language), expected);
 				},
-				highlightElement({ language = 'none', code, expected }) {
+				/**
+				 * @param {{
+				 *   language?: string,
+				 *   code: string,
+				 *   expected?: string | typeof UseSnapshot
+				 * }} param0
+				 */
+				highlightElement({ language = 'none', code, expected = UseSnapshot }) {
 					const element = document.createElement('CODE');
 					element.classList.add('language-' + language);
 					element.textContent = code;
 
 					Prism.highlightElement(element);
 
-					assert.strictEqual(element.innerHTML, expected);
+					assertEqual(element.innerHTML, expected);
+				},
+				/**
+				 * @param {{
+				 *   language?: string,
+				 *   attributes?: Record<string, string>,
+				 *   code: string,
+				 *   expected?: string | typeof UseSnapshot
+				 * }} param0
+				 */
+				highlightPreElement({ language = 'none', attributes = {}, code, expected = UseSnapshot }) {
+					const preElement = document.createElement('PRE');
+					for (const key in attributes) {
+						const value = attributes[key];
+						preElement.setAttribute(key, value);
+					}
+					preElement.classList.add('language-' + language);
+
+					const codeElement = document.createElement('CODE');
+					codeElement.textContent = code;
+					preElement.appendChild(codeElement);
+
+					Prism.highlightElement(codeElement);
+
+					assertEqual(preElement.outerHTML, expected);
 				}
 			},
 		};

tests/helper/snapshot.js

@@ -0,0 +1,22 @@
+const chai = require('chai');
+const { jestSnapshotPlugin } = require('mocha-chai-jest-snapshot');
+
+
+chai.use(jestSnapshotPlugin());
+
+const UseSnapshot = Symbol();
+
+/**
+ * @param {T} actual
+ * @param {T | typeof UseSnapshot} expected
+ * @template T
+ */
+function assertEqual(actual, expected) {
+	if (expected == UseSnapshot) {
+		chai.expect(actual).toMatchSnapshot();
+	} else {
+		chai.assert.strictEqual(actual, expected);
+	}
+}
+
+module.exports = { UseSnapshot, assertEqual };

tests/plugins/highlight-keywords/__snapshots__/basic-functionality.js.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Highlight Keywords should highlight keywords 1`] = `
+"<span class=\\"token keyword keyword-import\\">import</span> <span class=\\"token operator\\">*</span> <span class=\\"token keyword keyword-from\\">from</span> <span class=\\"token string\\">''</span><span class=\\"token punctuation\\">;</span>
+<span class=\\"token keyword keyword-const\\">const</span> foo<span class=\\"token punctuation\\">;</span>"
+`;

tests/plugins/highlight-keywords/basic-functionality.js

@@ -12,8 +12,7 @@ describe('Highlight Keywords', function () {
 	it('should highlight keywords', function () {
 		util.assert.highlightElement({
 			language: 'javascript',
-			code: `import * from ''; const foo;`,
-			expected: `<span class="token keyword keyword-import">import</span> <span class="token operator">*</span> <span class="token keyword keyword-from">from</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword keyword-const">const</span> foo<span class="token punctuation">;</span>`
+			code: `import * from '';\nconst foo;`
 		});
 	});
 

tests/plugins/line-highlight/__snapshots__/basic-functionality.js.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line Highlight multiple ranges 1`] = `
+"<pre data-line=\\"1, 3-5, 8\\" class=\\"language-none\\" tabindex=\\"0\\"><code class=\\"language-none\\">// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) =&gt; a - b;
+<div aria-hidden=\\"true\\" data-range=\\"1\\" class=\\" line-highlight\\" data-start=\\"1\\" style=\\"width: 0px;\\"> 
+</div><div aria-hidden=\\"true\\" data-range=\\"3-5\\" class=\\" line-highlight\\" data-start=\\"3\\" data-end=\\"5\\" style=\\"width: 0px;\\"> 
+
+
+</div><div aria-hidden=\\"true\\" data-range=\\"8\\" class=\\" line-highlight\\" data-start=\\"8\\" style=\\"width: 0px;\\"> 
+</div></code></pre>"
+`;
+
+exports[`Line Highlight out of bounds ranges 1`] = `
+"<pre data-line=\\"400\\" class=\\"language-none\\" tabindex=\\"0\\"><code class=\\"language-none\\">// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) =&gt; a - b;
+</code></pre>"
+`;
+
+exports[`Line Highlight out of bounds ranges 2`] = `
+"<pre data-line=\\"4-400\\" class=\\"language-none\\" tabindex=\\"0\\"><code class=\\"language-none\\">// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) =&gt; a - b;
+<div aria-hidden=\\"true\\" data-range=\\"4-400\\" class=\\" line-highlight\\" data-start=\\"4\\" data-end=\\"9\\" style=\\"width: 0px;\\"> 
+
+
+
+
+
+</div></code></pre>"
+`;
+
+exports[`Line Highlight single line 1`] = `
+"<pre data-line=\\"2\\" class=\\"language-none\\" tabindex=\\"0\\"><code class=\\"language-none\\">// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) =&gt; a - b;
+<div aria-hidden=\\"true\\" data-range=\\"2\\" class=\\" line-highlight\\" data-start=\\"2\\" style=\\"width: 0px;\\"> 
+</div></code></pre>"
+`;
+
+exports[`Line Highlight single range 1`] = `
+"<pre data-line=\\"3-5\\" class=\\"language-none\\" tabindex=\\"0\\"><code class=\\"language-none\\">// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) =&gt; a - b;
+<div aria-hidden=\\"true\\" data-range=\\"3-5\\" class=\\" line-highlight\\" data-start=\\"3\\" data-end=\\"5\\" style=\\"width: 0px;\\"> 
+
+
+</div></code></pre>"
+`;

tests/plugins/line-highlight/basic-functionality.js

@@ -0,0 +1,73 @@
+const { createUtil, createScopedPrismDom } = require('../../helper/prism-dom-util');
+
+// just a few lines of JS code, so we have something to highlight
+const exampleCode = String.raw`// foo
+
+var foo = 0;
+var bar = 1;
+var baz = foo + bar;
+function add(a, b) {
+	return a + b;
+}
+const sub = (a, b) => a - b;
+`;
+
+describe('Line Highlight', function () {
+	const { window } = createScopedPrismDom(this, {
+		languages: 'javascript',
+		plugins: 'line-highlight'
+	});
+	const util = createUtil(window);
+
+
+	it('single line', function () {
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '2' },
+		});
+	});
+
+	it('single range', function () {
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '3-5' },
+		});
+	});
+
+	it('multiple ranges', function () {
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '1, 3-5, 8' },
+		});
+	});
+
+	// Fixed by https://github.com/PrismJS/prism/pull/3518
+	/*it('offset', function () {
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '42', 'data-line-offset': '40' },
+		});
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '41, 43-45, 48', 'data-line-offset': '40' },
+		});
+	});*/
+
+	it('out of bounds ranges', function () {
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '400' },
+		});
+		util.assert.highlightPreElement({
+			language: 'none',
+			code: exampleCode,
+			attributes: { 'data-line': '4-400' },
+		});
+	});
+});