msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

chore: better HTML normalization test helper (#16056)

Browse Source 
* chore: better HTML normalization test helper

* simplify

* simplify/robustify

* tweak

* Apply suggestions from code review

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
pull/16075/head
Rich Harris 3 months ago committed by GitHub
parent 335779dcf5
commit 2342c8719a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 118 additions and 100 deletions
Show Stats Download Patch File Download Diff File

138
packages/svelte/tests/html_equal.js
Unescape View File

@ -1,8 +1,20 @@
import { assert } from 'vitest'; import { assert } from 'vitest';
/** @param {Element} node */ /**
function clean_children(node) { * @param {Element} node
* @param {{ preserveComments: boolean }} opts
*/
function clean_children(node, opts) {
let previous = null; let previous = null;
let has_element_children = false;
let template =
node.nodeName === 'TEMPLATE' ? /** @type {HTMLTemplateElement} */ (node) : undefined;
if (template) {
const div = document.createElement('div');
div.append(template.content);
node = div;
}
// sort attributes // sort attributes
const attributes = Array.from(node.attributes).sort((a, b) => { const attributes = Array.from(node.attributes).sort((a, b) => {
@ -14,6 +26,11 @@ function clean_children(node) {
}); });
attributes.forEach((attr) => { attributes.forEach((attr) => {
// Strip out the special onload/onerror hydration events from the test output
if ((attr.name === 'onload' || attr.name === 'onerror') && attr.value === 'this.__e=event') {
return;
}
node.setAttribute(attr.name, attr.value); node.setAttribute(attr.name, attr.value);
}); });
@ -27,24 +44,43 @@ function clean_children(node) {
node.tagName !== 'tspan' node.tagName !== 'tspan'
) { ) {
node.removeChild(child); node.removeChild(child);
continue;
} }
text.data = text.data.replace(/[ \t\n\r\f]+/g, '\n'); text.data = text.data.replace(/[^\S]+/g, ' ');
if (previous && previous.nodeType === 3) { if (previous && previous.nodeType === 3) {
const prev = /** @type {Text} */ (previous); const prev = /** @type {Text} */ (previous);
prev.data += text.data; prev.data += text.data;
prev.data = prev.data.replace(/[ \t\n\r\f]+/g, '\n');
node.removeChild(text); node.removeChild(text);
text = prev; text = prev;
text.data = text.data.replace(/[^\S]+/g, ' ');
continue;
}
} }
} else if (child.nodeType === 8) {
if (child.nodeType === 8 && !opts.preserveComments) {
// comment // comment
// do nothing child.remove();
} else { continue;
clean_children(/** @type {Element} */ (child)); }
// add newlines for better readability and potentially recurse into children
if (child.nodeType === 1 || child.nodeType === 8) {
if (previous?.nodeType === 3) {
const prev = /** @type {Text} */ (previous);
prev.data = prev.data.replace(/^[^\S]+$/, '\n');
} else if (previous?.nodeType === 1 || previous?.nodeType === 8) {
node.insertBefore(document.createTextNode('\n'), child);
}
if (child.nodeType === 1) {
has_element_children = true;
clean_children(/** @type {Element} */ (child), opts);
}
} }
previous = child; previous = child;
@ -53,37 +89,36 @@ function clean_children(node) {
// collapse whitespace // collapse whitespace
if (node.firstChild && node.firstChild.nodeType === 3) { if (node.firstChild && node.firstChild.nodeType === 3) {
const text = /** @type {Text} */ (node.firstChild); const text = /** @type {Text} */ (node.firstChild);
text.data = text.data.replace(/^[ \t\n\r\f]+/, ''); text.data = text.data.trimStart();
if (!text.data.length) node.removeChild(text);
} }
if (node.lastChild && node.lastChild.nodeType === 3) { if (node.lastChild && node.lastChild.nodeType === 3) {
const text = /** @type {Text} */ (node.lastChild); const text = /** @type {Text} */ (node.lastChild);
text.data = text.data.replace(/[ \t\n\r\f]+$/, ''); text.data = text.data.trimEnd();
if (!text.data.length) node.removeChild(text); }
// indent code for better readability
if (has_element_children && node.parentNode) {
node.innerHTML = `\n\ ${node.innerHTML.replace(/\n/g, '\n ')}\n`;
}
if (template) {
template.innerHTML = node.innerHTML;
} }
} }
/** /**
* @param {Window} window * @param {Window} window
* @param {string} html * @param {string} html
* @param {{ removeDataSvelte?: boolean, preserveComments?: boolean }} param2 * @param {{ preserveComments?: boolean }} opts
*/ */
export function normalize_html( export function normalize_html(window, html, { preserveComments = false } = {}) {
window,
html,
{ removeDataSvelte = false, preserveComments = false }
) {
try { try {
const node = window.document.createElement('div'); const node = window.document.createElement('div');
node.innerHTML = html
.replace(/(<!(--)?.*?\2>)/g, preserveComments ? '$1' : '') node.innerHTML = html.trim();
.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1') clean_children(node, { preserveComments });
.replace(/>[ \t\n\r\f]+</g, '><')
// Strip out the special onload/onerror hydration events from the test output
.replace(/\s?onerror="this.__e=event"|\s?onload="this.__e=event"/g, '')
.trim();
clean_children(node);
return node.innerHTML; return node.innerHTML;
} catch (err) { } catch (err) {
throw new Error(`Failed to normalize HTML:\n${html}\nCause: ${err}`); throw new Error(`Failed to normalize HTML:\n${html}\nCause: ${err}`);
@ -99,53 +134,47 @@ export function normalize_new_line(html) {
} }
/** /**
* @param {{ removeDataSvelte?: boolean }} options
*/
export function setup_html_equal(options = {}) {
/**
* @param {string} actual * @param {string} actual
* @param {string} expected * @param {string} expected
* @param {string} [message] * @param {string} [message]
*/ */
const assert_html_equal = (actual, expected, message) => { export const assert_html_equal = (actual, expected, message) => {
try { try {
assert.deepEqual( assert.deepEqual(normalize_html(window, actual), normalize_html(window, expected), message);
normalize_html(window, actual, options),
normalize_html(window, expected, options),
message
);
} catch (e) { } catch (e) {
if (Error.captureStackTrace) if (Error.captureStackTrace)
Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal); Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
throw e; throw e;
} }
}; };
/** /**
* *
* @param {string} actual * @param {string} actual
* @param {string} expected * @param {string} expected
* @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2 * @param {{ preserveComments?: boolean, withoutNormalizeHtml?: boolean }} param2
* @param {string} [message] * @param {string} [message]
*/ */
const assert_html_equal_with_options = ( export const assert_html_equal_with_options = (
actual, actual,
expected, expected,
{ preserveComments, withoutNormalizeHtml }, { preserveComments, withoutNormalizeHtml },
message message
) => { ) => {
try { try {
assert.deepEqual( assert.deepEqual(
withoutNormalizeHtml withoutNormalizeHtml
? normalize_new_line(actual.trim()) ? normalize_new_line(actual.trim()).replace(
.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1') /(<!(--)?.*?\2>)/g,
.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '') preserveComments !== false ? '$1' : ''
: normalize_html(window, actual.trim(), { ...options, preserveComments }), )
: normalize_html(window, actual.trim(), { preserveComments }),
withoutNormalizeHtml withoutNormalizeHtml
? normalize_new_line(expected.trim()) ? normalize_new_line(expected.trim()).replace(
.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1') /(<!(--)?.*?\2>)/g,
.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '') preserveComments !== false ? '$1' : ''
: normalize_html(window, expected.trim(), { ...options, preserveComments }), )
: normalize_html(window, expected.trim(), { preserveComments }),
message message
); );
} catch (e) { } catch (e) {
@ -153,13 +182,4 @@ export function setup_html_equal(options = {}) {
Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options); Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal_with_options);
throw e; throw e;
} }
}; };
return {
assert_html_equal,
assert_html_equal_with_options
};
}
// Common case without options
export const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal();

4
packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js
Unescape View File

@ -25,7 +25,7 @@ export default test({
<p>selected: one</p> <p>selected: one</p>
<select> <select>
<option${variant === 'hydrate' ? ' selected' : ''}>one</option$> <option${variant === 'hydrate' ? ' selected' : ''}>one</option>
<option>two</option> <option>two</option>
<option>three</option> <option>three</option>
</select> </select>
@ -54,7 +54,7 @@ export default test({
<p>selected: two</p> <p>selected: two</p>
<select> <select>
<option${variant === 'hydrate' ? ' selected' : ''}>one</option$> <option${variant === 'hydrate' ? ' selected' : ''}>one</option>
<option>two</option> <option>two</option>
<option>three</option> <option>three</option>
</select> </select>

4
packages/svelte/tests/runtime-legacy/samples/input-list/_config.js
Unescape View File

@ -4,7 +4,9 @@ export default test({
html: ` html: `
<input list='suggestions'> <input list='suggestions'>
<datalist id='suggestions'> <datalist id='suggestions'>
<option value='foo'/><option value='bar'/><option value='baz'/> <option value='foo'></option>
<option value='bar'></option>
<option value='baz'></option>
</datalist> </datalist>
` `
}); });

2
packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js
Unescape View File

@ -9,7 +9,7 @@ export default test({
<math> <math>
<mrow></mrow> <mrow></mrow>
</svg> </math>
<div class="hi">hi</div> <div class="hi">hi</div>
`, `,

4
packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js
Unescape View File

@ -7,7 +7,7 @@ export default test({
target.innerHTML, target.innerHTML,
` `
<select> <select>
<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$> <option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
<option value="b">B</option> <option value="b">B</option>
</select> </select>
selected: a selected: a
@ -23,7 +23,7 @@ export default test({
target.innerHTML, target.innerHTML,
` `
<select> <select>
<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$> <option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
<option value="b">B</option> <option value="b">B</option>
</select> </select>
selected: b selected: b

6
packages/svelte/tests/runtime-legacy/shared.ts
Unescape View File

@ -7,7 +7,7 @@ import { flushSync, hydrate, mount, unmount } from 'svelte';
import { render } from 'svelte/server'; import { render } from 'svelte/server';
import { afterAll, assert, beforeAll } from 'vitest'; import { afterAll, assert, beforeAll } from 'vitest';
import { compile_directory, fragments } from '../helpers.js'; import { compile_directory, fragments } from '../helpers.js';
import { setup_html_equal } from '../html_equal.js'; import { assert_html_equal, assert_html_equal_with_options } from '../html_equal.js';
import { raf } from '../animation-helpers.js'; import { raf } from '../animation-helpers.js';
import type { CompileOptions } from '#compiler'; import type { CompileOptions } from '#compiler';
import { suite_with_variants, type BaseTest } from '../suite.js'; import { suite_with_variants, type BaseTest } from '../suite.js';
@ -86,10 +86,6 @@ function unhandled_rejection_handler(err: Error) {
const listeners = process.rawListeners('unhandledRejection'); const listeners = process.rawListeners('unhandledRejection');
const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
removeDataSvelte: true
});
beforeAll(() => { beforeAll(() => {
// @ts-expect-error TODO huh? // @ts-expect-error TODO huh?
process.prependListener('unhandledRejection', unhandled_rejection_handler); process.prependListener('unhandledRejection', unhandled_rejection_handler);

Write Preview
Loading…
Cancel
Save