mirror of https://github.com/sveltejs/svelte
chore: swap mocha with vitest (#8584)
Also swap out the require hook hacks with a less-hacky-but-still-somewhat-hacky loader for the Svelte files --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com> Co-authored-by: Rich Harris <richard.a.harris@gmail.com>pull/8602/head
gtmnayan
2 years ago
committed by
GitHub
parent
202d119e9a
commit
783bd9899e
@ -1,17 +0,0 @@
|
|||||||
const is_unit_test = process.env.UNIT_TEST;
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
file: is_unit_test ? [] : ['test/test.js'],
|
|
||||||
require: [
|
|
||||||
'sucrase/register'
|
|
||||||
],
|
|
||||||
"node-option": [
|
|
||||||
"experimental-modules"
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
// add coverage options when running 'npx c8 mocha'
|
|
||||||
if (process.env.NODE_V8_COVERAGE) {
|
|
||||||
module.exports.fullTrace = true;
|
|
||||||
module.exports.require.push('source-map-support/register');
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
spec: [
|
|
||||||
'src/**/__test__.ts',
|
|
||||||
],
|
|
||||||
require: [
|
|
||||||
'sucrase/register'
|
|
||||||
],
|
|
||||||
recursive: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
// add coverage options when running 'npx c8 mocha'
|
|
||||||
if (process.env.NODE_V8_COVERAGE) {
|
|
||||||
module.exports.fullTrace = true;
|
|
||||||
module.exports.require.push('source-map-support/register');
|
|
||||||
}
|
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { existsSync, fstat, readFileSync, readdirSync, writeFileSync } from 'fs';
|
||||||
|
import { resolve } from 'path';
|
||||||
|
import { parse } from 'acorn';
|
||||||
|
import { walk } from 'estree-walker';
|
||||||
|
import { inspect } from 'util';
|
||||||
|
|
||||||
|
import { p, print } from 'code-red';
|
||||||
|
|
||||||
|
const samples = resolve(`vitest/runtime/runtime/samples`);
|
||||||
|
|
||||||
|
for (const dir of readdirSync(samples)) {
|
||||||
|
const cwd = resolve(samples, dir);
|
||||||
|
const file = resolve(cwd, '_config.js');
|
||||||
|
|
||||||
|
if (!existsSync(file)) continue;
|
||||||
|
const contents = readFileSync(file, 'utf-8');
|
||||||
|
const ast = parse(contents, {
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceFile: file,
|
||||||
|
ranges: true
|
||||||
|
});
|
||||||
|
|
||||||
|
walk(ast, {
|
||||||
|
enter(node) {
|
||||||
|
if (
|
||||||
|
node.type === 'ExportDefaultDeclaration' &&
|
||||||
|
node.declaration.type === 'ObjectExpression'
|
||||||
|
) {
|
||||||
|
this.skip();
|
||||||
|
|
||||||
|
const props = node.declaration.properties.find((prop) => prop.key.name === 'props');
|
||||||
|
if (!props) return;
|
||||||
|
const { range } = props;
|
||||||
|
|
||||||
|
const [start, end] = range;
|
||||||
|
|
||||||
|
const code =
|
||||||
|
contents.slice(0, start) +
|
||||||
|
print(p`get ${props.key}() { return ${props.value}}`).code +
|
||||||
|
contents.slice(end);
|
||||||
|
|
||||||
|
writeFileSync(file, code);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,88 +0,0 @@
|
|||||||
import * as assert from 'assert';
|
|
||||||
import get_name_from_filename from './get_name_from_filename';
|
|
||||||
import {
|
|
||||||
is_contenteditable,
|
|
||||||
has_contenteditable_attr,
|
|
||||||
is_name_contenteditable,
|
|
||||||
get_contenteditable_attr,
|
|
||||||
CONTENTEDITABLE_BINDINGS
|
|
||||||
} from './contenteditable';
|
|
||||||
import Element from '../nodes/Element';
|
|
||||||
import Attribute from '../nodes/Attribute';
|
|
||||||
|
|
||||||
describe('get_name_from_filename', () => {
|
|
||||||
it('uses the basename', () => {
|
|
||||||
assert.equal(get_name_from_filename('path/to/Widget.svelte'), 'Widget');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('uses the directory name, if basename is index', () => {
|
|
||||||
assert.equal(get_name_from_filename('path/to/Widget/index.svelte'), 'Widget');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('handles Windows filenames', () => {
|
|
||||||
assert.equal(get_name_from_filename('path\\to\\Widget.svelte'), 'Widget');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('handles special characters in filenames', () => {
|
|
||||||
assert.equal(get_name_from_filename('@.svelte'), '_');
|
|
||||||
assert.equal(get_name_from_filename('&.svelte'), '_');
|
|
||||||
assert.equal(get_name_from_filename('~.svelte'), '_');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('contenteditable', () => {
|
|
||||||
describe('is_contenteditable', () => {
|
|
||||||
it('returns false if node is input', () => {
|
|
||||||
const node = { name: 'input' } as Element;
|
|
||||||
assert.equal(is_contenteditable(node), false);
|
|
||||||
});
|
|
||||||
it('returns false if node is textarea', () => {
|
|
||||||
const node = { name: 'textarea' } as Element;
|
|
||||||
assert.equal(is_contenteditable(node), false);
|
|
||||||
});
|
|
||||||
it('returns false if node is not input or textarea AND it is not contenteditable', () => {
|
|
||||||
const attr = { name: 'href' } as Attribute;
|
|
||||||
const node = { name: 'a', attributes: [attr] } as Element;
|
|
||||||
assert.equal(is_contenteditable(node), false);
|
|
||||||
});
|
|
||||||
it('returns true if node is not input or textarea AND it is contenteditable', () => {
|
|
||||||
const attr = { name: 'contenteditable' } as Attribute;
|
|
||||||
const node = { name: 'a', attributes: [attr] } as Element;
|
|
||||||
assert.equal(is_contenteditable(node), true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('has_contenteditable_attr', () => {
|
|
||||||
it('returns true if attribute is contenteditable', () => {
|
|
||||||
const attr = { name: 'contenteditable' } as Attribute;
|
|
||||||
const node = { attributes: [attr] } as Element;
|
|
||||||
assert.equal(has_contenteditable_attr(node), true);
|
|
||||||
});
|
|
||||||
it('returns false if attribute is not contenteditable', () => {
|
|
||||||
const attr = { name: 'href' } as Attribute;
|
|
||||||
const node = { attributes: [attr] } as Element;
|
|
||||||
assert.equal(has_contenteditable_attr(node), false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('is_name_contenteditable', () => {
|
|
||||||
it('returns true if name is a contenteditable type', () => {
|
|
||||||
assert.equal(is_name_contenteditable(CONTENTEDITABLE_BINDINGS[0]), true);
|
|
||||||
});
|
|
||||||
it('returns false if name is not contenteditable type', () => {
|
|
||||||
assert.equal(is_name_contenteditable('value'), false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('get_contenteditable_attr', () => {
|
|
||||||
it('returns the contenteditable Attribute if it exists', () => {
|
|
||||||
const attr = { name: 'contenteditable' } as Attribute;
|
|
||||||
const node = { name: 'div', attributes: [attr] } as Element;
|
|
||||||
assert.equal(get_contenteditable_attr(node), attr);
|
|
||||||
});
|
|
||||||
it('returns undefined if contenteditable attribute cannot be found', () => {
|
|
||||||
const node = { name: 'div', attributes: [] } as Element;
|
|
||||||
assert.equal(get_contenteditable_attr(node), undefined);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export const test = typeof process !== 'undefined' && process.env.TEST;
|
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
import { chromium } from '@playwright/test';
|
||||||
|
import * as fs from 'fs';
|
||||||
|
import * as path from 'path';
|
||||||
|
import { rollup } from 'rollup';
|
||||||
|
import { try_load_config } from '../helpers.js';
|
||||||
|
import * as svelte from '../../compiler.mjs';
|
||||||
|
import { beforeAll, describe, afterAll, assert, it } from 'vitest';
|
||||||
|
|
||||||
|
const internal = path.resolve('internal/index.mjs');
|
||||||
|
const index = path.resolve('index.mjs');
|
||||||
|
|
||||||
|
const browser_assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
|
||||||
|
|
||||||
|
describe(
|
||||||
|
'custom-elements',
|
||||||
|
() => {
|
||||||
|
/** @type {import('@playwright/test').Browser} */
|
||||||
|
let browser;
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
browser = await chromium.launch();
|
||||||
|
console.log('[custom-elements] Launched browser');
|
||||||
|
}, 20000);
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
if (browser) await browser.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
||||||
|
if (dir[0] === '.') return;
|
||||||
|
|
||||||
|
const solo = /\.solo$/.test(dir);
|
||||||
|
const skip = /\.skip$/.test(dir);
|
||||||
|
|
||||||
|
const warnings = [];
|
||||||
|
const it_fn = solo ? it.only : skip ? it.skip : it;
|
||||||
|
|
||||||
|
it_fn(dir, async () => {
|
||||||
|
// TODO: Vitest currently doesn't register a watcher because the import is hidden
|
||||||
|
const config = await try_load_config(`${__dirname}/samples/${dir}/_config.js`);
|
||||||
|
|
||||||
|
const expected_warnings = config.warnings || [];
|
||||||
|
|
||||||
|
const bundle = await rollup({
|
||||||
|
input: `${__dirname}/samples/${dir}/test.js`,
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
name: 'plugin-resolve-svelte',
|
||||||
|
resolveId(importee) {
|
||||||
|
if (importee === 'svelte/internal' || importee === './internal') {
|
||||||
|
return internal;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === 'svelte') {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === 'assert') {
|
||||||
|
return 'assert';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
load(id) {
|
||||||
|
if (id === 'assert') return browser_assert;
|
||||||
|
},
|
||||||
|
|
||||||
|
transform(code, id) {
|
||||||
|
if (id.endsWith('.svelte')) {
|
||||||
|
const compiled = svelte.compile(code.replace(/\r/g, ''), {
|
||||||
|
customElement: true,
|
||||||
|
dev: config.dev
|
||||||
|
});
|
||||||
|
|
||||||
|
compiled.warnings.forEach((w) => warnings.push(w));
|
||||||
|
|
||||||
|
return compiled.js;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const generated_bundle = await bundle.generate({ format: 'iife', name: 'test' });
|
||||||
|
|
||||||
|
function assertWarnings() {
|
||||||
|
if (expected_warnings) {
|
||||||
|
assert.deepStrictEqual(
|
||||||
|
warnings.map((w) => ({
|
||||||
|
code: w.code,
|
||||||
|
message: w.message,
|
||||||
|
pos: w.pos,
|
||||||
|
start: w.start,
|
||||||
|
end: w.end
|
||||||
|
})),
|
||||||
|
expected_warnings
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = await browser.newPage();
|
||||||
|
page.on('console', (type) => {
|
||||||
|
console[type.type()](type.text());
|
||||||
|
});
|
||||||
|
await page.setContent('<main></main>');
|
||||||
|
await page.evaluate(generated_bundle.output[0].code);
|
||||||
|
const test_result = await page.evaluate(`test(document.querySelector('main'))`);
|
||||||
|
|
||||||
|
if (test_result) console.log(test_result);
|
||||||
|
|
||||||
|
assertWarnings();
|
||||||
|
|
||||||
|
await page.close();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// Browser tests are brittle and slow on CI
|
||||||
|
{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
|
||||||
|
);
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import { chromium } from '@playwright/test';
|
|
||||||
import virtual from '@rollup/plugin-virtual';
|
|
||||||
import { deepStrictEqual } from 'assert';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
import { rollup } from 'rollup';
|
|
||||||
import { loadConfig, loadSvelte } from '../helpers';
|
|
||||||
|
|
||||||
const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
|
|
||||||
|
|
||||||
describe('custom-elements', function () {
|
|
||||||
this.timeout(20000);
|
|
||||||
|
|
||||||
let svelte;
|
|
||||||
/** @type {import('@playwright/test').Browser} */
|
|
||||||
let browser;
|
|
||||||
|
|
||||||
before(async function () {
|
|
||||||
svelte = loadSvelte();
|
|
||||||
console.log('[custom-elements] Loaded Svelte');
|
|
||||||
browser = await chromium.launch();
|
|
||||||
console.log('[custom-elements] Launched browser');
|
|
||||||
});
|
|
||||||
|
|
||||||
after(async () => {
|
|
||||||
if (browser) await browser.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
|
||||||
if (dir[0] === '.') return;
|
|
||||||
|
|
||||||
const solo = /\.solo$/.test(dir);
|
|
||||||
const skip = /\.skip$/.test(dir);
|
|
||||||
const internal = path.resolve('internal/index.mjs');
|
|
||||||
const index = path.resolve('index.mjs');
|
|
||||||
const warnings = [];
|
|
||||||
|
|
||||||
(solo ? it.only : skip ? it.skip : it)(dir, async () => {
|
|
||||||
const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
|
|
||||||
const expected_warnings = config.warnings || [];
|
|
||||||
|
|
||||||
const bundle = await rollup({
|
|
||||||
input: `${__dirname}/samples/${dir}/test.js`,
|
|
||||||
plugins: [
|
|
||||||
// @ts-ignore -- TODO: fix this
|
|
||||||
{
|
|
||||||
resolveId(importee) {
|
|
||||||
if (importee === 'svelte/internal' || importee === './internal') {
|
|
||||||
return internal;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (importee === 'svelte') {
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
transform(code, id) {
|
|
||||||
if (id.endsWith('.svelte')) {
|
|
||||||
const compiled = svelte.compile(code.replace(/\r/g, ''), {
|
|
||||||
customElement: true,
|
|
||||||
dev: config.dev
|
|
||||||
});
|
|
||||||
|
|
||||||
compiled.warnings.forEach((w) => warnings.push(w));
|
|
||||||
|
|
||||||
return compiled.js;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
virtual({
|
|
||||||
assert
|
|
||||||
})
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
const generated_bundle = await bundle.generate({ format: 'iife', name: 'test' });
|
|
||||||
|
|
||||||
function assertWarnings() {
|
|
||||||
if (expected_warnings) {
|
|
||||||
deepStrictEqual(
|
|
||||||
warnings.map((w) => ({
|
|
||||||
code: w.code,
|
|
||||||
message: w.message,
|
|
||||||
pos: w.pos,
|
|
||||||
start: w.start,
|
|
||||||
end: w.end
|
|
||||||
})),
|
|
||||||
expected_warnings
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const page = await browser.newPage();
|
|
||||||
page.on('console', (type) => {
|
|
||||||
console[type.type()](type.text());
|
|
||||||
});
|
|
||||||
await page.setContent('<main></main>');
|
|
||||||
await page.evaluate(generated_bundle.output[0].code);
|
|
||||||
const test_result = await page.evaluate(`test(document.querySelector('main'))`);
|
|
||||||
|
|
||||||
if (test_result) console.log(test_result);
|
|
||||||
assertWarnings();
|
|
||||||
page.close();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
import { assert } from 'vitest';
|
||||||
|
|
||||||
|
/** @type {HTMLDivElement} */
|
||||||
|
let _container;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} html
|
||||||
|
* @param {{
|
||||||
|
* removeDataSvelte?: boolean,
|
||||||
|
* preserveComments?: boolean,
|
||||||
|
* }} options
|
||||||
|
*/
|
||||||
|
export function normalize_html(html, options = {}) {
|
||||||
|
const container = (_container ??= document.createElement('div'));
|
||||||
|
|
||||||
|
if (!options.preserveComments) {
|
||||||
|
html = html.replace(/(<!--.*?-->)/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.removeDataSvelte) {
|
||||||
|
html = html.replace(/(data-svelte-h="[^"]+")/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
html = html.replace(/>[ \t\n\r\f]+</g, '><').trim();
|
||||||
|
|
||||||
|
container.innerHTML = html;
|
||||||
|
|
||||||
|
clean_children(container);
|
||||||
|
|
||||||
|
return container.innerHTML.replace(/<\/?noscript\/?>/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {any} node */
|
||||||
|
function clean_children(node) {
|
||||||
|
// sort attributes
|
||||||
|
const attributes = Array.from(node.attributes).sort((a, b) => (a.name < b.name ? -1 : 1));
|
||||||
|
|
||||||
|
attributes.forEach((attr) => {
|
||||||
|
node.removeAttribute(attr.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
attributes.forEach((attr) => {
|
||||||
|
node.setAttribute(attr.name, attr.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
let previous = null;
|
||||||
|
// recurse
|
||||||
|
[...node.childNodes].forEach((child) => {
|
||||||
|
if (child.nodeType === 3) {
|
||||||
|
// text
|
||||||
|
if (
|
||||||
|
node.namespaceURI === 'http://www.w3.org/2000/svg' &&
|
||||||
|
node.tagName !== 'text' &&
|
||||||
|
node.tagName !== 'tspan'
|
||||||
|
) {
|
||||||
|
node.removeChild(child);
|
||||||
|
}
|
||||||
|
|
||||||
|
child.data = child.data.replace(/[ \t\n\r\f]+/g, '\n');
|
||||||
|
|
||||||
|
if (previous && previous.nodeType === 3) {
|
||||||
|
previous.data += child.data;
|
||||||
|
previous.data = previous.data.replace(/[ \t\n\r\f]+/g, '\n');
|
||||||
|
|
||||||
|
node.removeChild(child);
|
||||||
|
child = previous;
|
||||||
|
}
|
||||||
|
} else if (child.nodeType === 8) {
|
||||||
|
// comment
|
||||||
|
// do nothing
|
||||||
|
} else {
|
||||||
|
clean_children(child);
|
||||||
|
}
|
||||||
|
|
||||||
|
previous = child;
|
||||||
|
});
|
||||||
|
|
||||||
|
// collapse whitespace
|
||||||
|
if (node.firstChild && node.firstChild.nodeType === 3) {
|
||||||
|
node.firstChild.data = node.firstChild.data.replace(/^[ \t\n\r\f]+/, '');
|
||||||
|
if (!node.firstChild.data.length) node.removeChild(node.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.lastChild && node.lastChild.nodeType === 3) {
|
||||||
|
node.lastChild.data = node.lastChild.data.replace(/[ \t\n\r\f]+$/, '');
|
||||||
|
if (!node.lastChild.data.length) node.removeChild(node.lastChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {string} actual
|
||||||
|
* @param {string} expected
|
||||||
|
* @param {{
|
||||||
|
* message?: string,
|
||||||
|
* normalize_html?: {
|
||||||
|
* removeDataSvelte?: boolean,
|
||||||
|
* preserveComments?: boolean,
|
||||||
|
* },
|
||||||
|
* without_normalize?: boolean,
|
||||||
|
* }} options
|
||||||
|
*/
|
||||||
|
export function assert_html_equal(actual, expected, options = {}) {
|
||||||
|
if (options.without_normalize) {
|
||||||
|
actual = actual.replace(/\r\n/g, '\n');
|
||||||
|
expected = expected.replace(/\r\n/g, '\n');
|
||||||
|
|
||||||
|
if (options.normalize_html.removeDataSvelte) {
|
||||||
|
actual = actual.replace(/(\sdata-svelte-h="[^"]+")/g, '');
|
||||||
|
expected = expected.replace(/(\sdata-svelte-h="[^"]+")/g, '');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
actual = normalize_html(actual, options.normalize_html);
|
||||||
|
expected = normalize_html(expected, options.normalize_html);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
assert.equal(actual, expected, options.message);
|
||||||
|
} catch (err) {
|
||||||
|
// Remove this function from the stack trace so that the error is shown in the test file
|
||||||
|
|
||||||
|
if (Error.captureStackTrace) {
|
||||||
|
Error.captureStackTrace(err, assert_html_equal);
|
||||||
|
}
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
// @vitest-environment jsdom
|
||||||
|
// TODO: https://github.com/capricorn86/happy-dom/issues/916
|
||||||
|
|
||||||
|
import * as fs from 'fs';
|
||||||
|
import * as path from 'path';
|
||||||
|
import { assert, describe, it } from 'vitest';
|
||||||
|
import { create_loader, should_update_expected, try_load_config } from '../helpers.js';
|
||||||
|
|
||||||
|
import { assert_html_equal } from '../html_equal.js';
|
||||||
|
|
||||||
|
describe('hydration', async () => {
|
||||||
|
async function run_test(dir) {
|
||||||
|
if (dir[0] === '.') return;
|
||||||
|
|
||||||
|
const config = await try_load_config(`${__dirname}/samples/${dir}/_config.js`);
|
||||||
|
const solo = config.solo || /\.solo/.test(dir);
|
||||||
|
|
||||||
|
const it_fn = config.skip ? it.skip : solo ? it.only : it;
|
||||||
|
|
||||||
|
it_fn(dir, async () => {
|
||||||
|
const cwd = path.resolve(`${__dirname}/samples/${dir}`);
|
||||||
|
|
||||||
|
let compileOptions = Object.assign({}, config.compileOptions, {
|
||||||
|
accessors: 'accessors' in config ? config.accessors : true,
|
||||||
|
format: 'cjs',
|
||||||
|
hydratable: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const { default: SvelteComponent } = await create_loader(compileOptions, cwd)('main.svelte');
|
||||||
|
|
||||||
|
const target = window.document.body;
|
||||||
|
const head = window.document.head;
|
||||||
|
|
||||||
|
target.innerHTML = fs.readFileSync(`${cwd}/_before.html`, 'utf-8');
|
||||||
|
|
||||||
|
let before_head;
|
||||||
|
try {
|
||||||
|
before_head = fs.readFileSync(`${cwd}/_before_head.html`, 'utf-8');
|
||||||
|
head.innerHTML = before_head;
|
||||||
|
} catch (err) {
|
||||||
|
// continue regardless of error
|
||||||
|
}
|
||||||
|
|
||||||
|
const snapshot = config.snapshot ? config.snapshot(target) : {};
|
||||||
|
|
||||||
|
const component = new SvelteComponent({
|
||||||
|
target,
|
||||||
|
hydrate: true,
|
||||||
|
props: config.props
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
assert_html_equal(target.innerHTML, fs.readFileSync(`${cwd}/_after.html`, 'utf-8'));
|
||||||
|
} catch (error) {
|
||||||
|
if (should_update_expected()) {
|
||||||
|
fs.writeFileSync(`${cwd}/_after.html`, target.innerHTML);
|
||||||
|
console.log(`Updated ${cwd}/_after.html.`);
|
||||||
|
} else {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (before_head) {
|
||||||
|
try {
|
||||||
|
const after_head = fs.readFileSync(`${cwd}/_after_head.html`, 'utf-8');
|
||||||
|
assert_html_equal(head.innerHTML, after_head);
|
||||||
|
} catch (error) {
|
||||||
|
if (should_update_expected()) {
|
||||||
|
fs.writeFileSync(`${cwd}/_after_head.html`, head.innerHTML);
|
||||||
|
console.log(`Updated ${cwd}/_after_head.html.`);
|
||||||
|
} else {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.snapshot) {
|
||||||
|
const snapshot_after = config.snapshot(target);
|
||||||
|
for (const s in snapshot_after) {
|
||||||
|
assert.ok(
|
||||||
|
// Error logger borks because of circular references so use this instead
|
||||||
|
snapshot_after[s] === snapshot[s],
|
||||||
|
`Expected snapshot key "${s}" to have same value/reference`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.test) {
|
||||||
|
await config.test(
|
||||||
|
{
|
||||||
|
...assert,
|
||||||
|
htmlEqual: assert_html_equal
|
||||||
|
},
|
||||||
|
target,
|
||||||
|
snapshot,
|
||||||
|
component,
|
||||||
|
window
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
component.$destroy();
|
||||||
|
assert.equal(target.innerHTML, '');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(fs.readdirSync(`${__dirname}/samples`).map((dir) => run_test(dir)));
|
||||||
|
});
|
||||||
@ -1,144 +0,0 @@
|
|||||||
import * as path from 'path';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
|
|
||||||
import {
|
|
||||||
assert,
|
|
||||||
showOutput,
|
|
||||||
loadConfig,
|
|
||||||
loadSvelte,
|
|
||||||
env,
|
|
||||||
setupHtmlEqual,
|
|
||||||
shouldUpdateExpected
|
|
||||||
} from '../helpers';
|
|
||||||
|
|
||||||
let compileOptions = null;
|
|
||||||
|
|
||||||
const sveltePath = process.cwd();
|
|
||||||
|
|
||||||
describe('hydration', () => {
|
|
||||||
before(() => {
|
|
||||||
const svelte = loadSvelte();
|
|
||||||
|
|
||||||
require.extensions['.svelte'] = function (module, filename) {
|
|
||||||
const options = Object.assign(
|
|
||||||
{
|
|
||||||
filename,
|
|
||||||
hydratable: true,
|
|
||||||
format: 'cjs',
|
|
||||||
sveltePath
|
|
||||||
},
|
|
||||||
compileOptions
|
|
||||||
);
|
|
||||||
|
|
||||||
const { js } = svelte.compile(fs.readFileSync(filename, 'utf-8'), options);
|
|
||||||
|
|
||||||
return module._compile(js.code, filename);
|
|
||||||
};
|
|
||||||
|
|
||||||
return setupHtmlEqual();
|
|
||||||
});
|
|
||||||
|
|
||||||
function runTest(dir) {
|
|
||||||
if (dir[0] === '.') return;
|
|
||||||
|
|
||||||
const config = loadConfig(`./hydration/samples/${dir}/_config.js`);
|
|
||||||
const solo = config.solo || /\.solo/.test(dir);
|
|
||||||
|
|
||||||
if (solo && process.env.CI) {
|
|
||||||
throw new Error('Forgot to remove `solo: true` from test');
|
|
||||||
}
|
|
||||||
|
|
||||||
(config.skip ? it.skip : solo ? it.only : it)(dir, () => {
|
|
||||||
const cwd = path.resolve(`${__dirname}/samples/${dir}`);
|
|
||||||
|
|
||||||
compileOptions = config.compileOptions || {};
|
|
||||||
compileOptions.accessors = 'accessors' in config ? config.accessors : true;
|
|
||||||
|
|
||||||
const window = env();
|
|
||||||
|
|
||||||
try {
|
|
||||||
global.window = window;
|
|
||||||
|
|
||||||
const SvelteComponent = require(`${cwd}/main.svelte`).default;
|
|
||||||
|
|
||||||
const target = window.document.body;
|
|
||||||
const head = window.document.head;
|
|
||||||
|
|
||||||
target.innerHTML = fs.readFileSync(`${cwd}/_before.html`, 'utf-8');
|
|
||||||
|
|
||||||
let before_head;
|
|
||||||
try {
|
|
||||||
before_head = fs.readFileSync(`${cwd}/_before_head.html`, 'utf-8');
|
|
||||||
head.innerHTML = before_head;
|
|
||||||
} catch (err) {
|
|
||||||
// continue regardless of error
|
|
||||||
}
|
|
||||||
|
|
||||||
const snapshot = config.snapshot ? config.snapshot(target) : {};
|
|
||||||
|
|
||||||
const component = new SvelteComponent({
|
|
||||||
target,
|
|
||||||
hydrate: true,
|
|
||||||
props: config.props
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
assert.htmlEqual(target.innerHTML, fs.readFileSync(`${cwd}/_after.html`, 'utf-8'));
|
|
||||||
} catch (error) {
|
|
||||||
if (shouldUpdateExpected()) {
|
|
||||||
fs.writeFileSync(`${cwd}/_after.html`, target.innerHTML);
|
|
||||||
console.log(`Updated ${cwd}/_after.html.`);
|
|
||||||
} else {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (before_head) {
|
|
||||||
try {
|
|
||||||
assert.htmlEqual(head.innerHTML, fs.readFileSync(`${cwd}/_after_head.html`, 'utf-8'));
|
|
||||||
} catch (error) {
|
|
||||||
if (shouldUpdateExpected()) {
|
|
||||||
fs.writeFileSync(`${cwd}/_after_head.html`, head.innerHTML);
|
|
||||||
console.log(`Updated ${cwd}/_after_head.html.`);
|
|
||||||
} else {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.snapshot) {
|
|
||||||
const snapshot_after = config.snapshot(target);
|
|
||||||
for (const s in snapshot_after) {
|
|
||||||
assert.equal(
|
|
||||||
snapshot_after[s],
|
|
||||||
snapshot[s],
|
|
||||||
`Expected snapshot key "${s}" to have same value/reference`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.test) {
|
|
||||||
config.test(assert, target, snapshot, component, window);
|
|
||||||
} else {
|
|
||||||
component.$destroy();
|
|
||||||
assert.equal(target.innerHTML, '');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
showOutput(cwd, {
|
|
||||||
hydratable: true
|
|
||||||
});
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.show) {
|
|
||||||
showOutput(cwd, {
|
|
||||||
hydratable: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
|
||||||
runTest(dir);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import * as assert from 'assert';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
import * as colors from 'kleur';
|
|
||||||
import { loadConfig, svelte, shouldUpdateExpected } from '../helpers';
|
|
||||||
|
|
||||||
describe('js', () => {
|
|
||||||
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
|
||||||
if (dir[0] === '.') return;
|
|
||||||
|
|
||||||
// add .solo to a sample directory name to only run that test
|
|
||||||
const solo = /\.solo/.test(dir);
|
|
||||||
|
|
||||||
if (solo && process.env.CI) {
|
|
||||||
throw new Error('Forgot to remove `solo: true` from test');
|
|
||||||
}
|
|
||||||
|
|
||||||
const resolved = path.resolve(`${__dirname}/samples`, dir);
|
|
||||||
|
|
||||||
if (!fs.existsSync(`${resolved}/input.svelte`)) {
|
|
||||||
console.log(
|
|
||||||
colors
|
|
||||||
.red()
|
|
||||||
.bold(
|
|
||||||
`Missing file ${dir}/input.svelte. If you recently switched branches you may need to delete this directory`
|
|
||||||
)
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
(solo ? it.only : it)(dir, () => {
|
|
||||||
const config = loadConfig(`${resolved}/_config.js`);
|
|
||||||
|
|
||||||
const input = fs
|
|
||||||
.readFileSync(`${resolved}/input.svelte`, 'utf-8')
|
|
||||||
.replace(/\s+$/, '')
|
|
||||||
.replace(/\r/g, '');
|
|
||||||
|
|
||||||
let actual;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const options = Object.assign(config.options || {});
|
|
||||||
|
|
||||||
actual = svelte
|
|
||||||
.compile(input, options)
|
|
||||||
.js.code.replace(
|
|
||||||
/generated by Svelte v\d+\.\d+\.\d+(-\w+\.\d+)?/,
|
|
||||||
'generated by Svelte vX.Y.Z'
|
|
||||||
);
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err.frame);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
|
|
||||||
const output = `${resolved}/_actual.js`;
|
|
||||||
fs.writeFileSync(output, actual);
|
|
||||||
|
|
||||||
const expectedPath = `${resolved}/expected.js`;
|
|
||||||
|
|
||||||
let expected = '';
|
|
||||||
try {
|
|
||||||
expected = fs.readFileSync(expectedPath, 'utf-8');
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
if (error.code === 'ENOENT') {
|
|
||||||
// missing expected.js
|
|
||||||
fs.writeFileSync(expectedPath, actual);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
assert.equal(
|
|
||||||
actual
|
|
||||||
.trim()
|
|
||||||
.replace(/^[ \t]+$/gm, '')
|
|
||||||
.replace(/\r/g, ''),
|
|
||||||
expected
|
|
||||||
.trim()
|
|
||||||
.replace(/^[ \t]+$/gm, '')
|
|
||||||
.replace(/\r/g, '')
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
if (shouldUpdateExpected()) {
|
|
||||||
fs.writeFileSync(expectedPath, actual);
|
|
||||||
console.log(`Updated ${expectedPath}.`);
|
|
||||||
} else {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
import * as fs from 'fs';
|
||||||
|
import * as path from 'path';
|
||||||
|
import { describe, it, assert } from 'vitest';
|
||||||
|
import { try_load_config, should_update_expected } from '../helpers';
|
||||||
|
import * as svelte from '../../compiler';
|
||||||
|
|
||||||
|
describe('js-output', () => {
|
||||||
|
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
||||||
|
if (dir[0] === '.') return;
|
||||||
|
|
||||||
|
// add .solo to a sample directory name to only run that test
|
||||||
|
const solo = /\.solo/.test(dir);
|
||||||
|
|
||||||
|
const resolved = path.resolve(`${__dirname}/samples`, dir);
|
||||||
|
|
||||||
|
const skip = !fs.existsSync(`${resolved}/input.svelte`);
|
||||||
|
if (skip) {
|
||||||
|
console.warn(
|
||||||
|
`Missing file ${dir}/input.svelte. If you recently switched branches you may need to delete this directory`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const it_fn = solo ? it.only : skip ? it.skip : it;
|
||||||
|
|
||||||
|
it_fn(dir, async () => {
|
||||||
|
const config = await try_load_config(`${resolved}/_config.js`);
|
||||||
|
|
||||||
|
const input = fs
|
||||||
|
.readFileSync(`${resolved}/input.svelte`, 'utf-8')
|
||||||
|
.trimEnd()
|
||||||
|
.replace(/\r/g, '');
|
||||||
|
|
||||||
|
let actual;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const options = Object.assign(config.options || {});
|
||||||
|
|
||||||
|
actual = svelte
|
||||||
|
.compile(input, options)
|
||||||
|
.js.code.replace(
|
||||||
|
/generated by Svelte v\d+\.\d+\.\d+(-\w+\.\d+)?/,
|
||||||
|
'generated by Svelte vX.Y.Z'
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err.frame);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
const output = `${resolved}/_actual.js`;
|
||||||
|
fs.writeFileSync(output, actual);
|
||||||
|
|
||||||
|
const expected_path = `${resolved}/expected.js`;
|
||||||
|
|
||||||
|
let expected = '';
|
||||||
|
try {
|
||||||
|
expected = fs.readFileSync(expected_path, 'utf-8');
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
if (error.code === 'ENOENT') {
|
||||||
|
// missing expected.js
|
||||||
|
fs.writeFileSync(expected_path, actual);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
assert.equal(normalize_output(actual), normalize_output(expected));
|
||||||
|
} catch (error) {
|
||||||
|
if (should_update_expected()) {
|
||||||
|
fs.writeFileSync(expected_path, actual);
|
||||||
|
console.log(`Updated ${expected_path}.`);
|
||||||
|
} else {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function normalize_output(str) {
|
||||||
|
return str
|
||||||
|
.trim()
|
||||||
|
.replace(/^[ \t]+$/gm, '')
|
||||||
|
.replace(/\r/g, '');
|
||||||
|
}
|
||||||
@ -1,3 +1,3 @@
|
|||||||
import { writable } from '../../../../store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
export const count = writable(0);
|
export const count = writable(0);
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { writable } from '../../../../store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
export const reactiveStoreVal = writable(0);
|
export const reactiveStoreVal = writable(0);
|
||||||
export const unreactiveExport = true;
|
export const unreactiveExport = true;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import * as assert from 'assert';
|
import { describe, it, assert } from 'vitest';
|
||||||
import { get } from '../../store';
|
import { get } from 'svelte/store';
|
||||||
import { spring, tweened } from '../../motion';
|
import { spring, tweened } from 'svelte/motion';
|
||||||
|
|
||||||
describe('motion', () => {
|
describe('motion', () => {
|
||||||
describe('spring', () => {
|
describe('spring', () => {
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import * as fs from 'fs';
|
|
||||||
import * as assert from 'assert';
|
|
||||||
import { loadConfig, svelte } from '../helpers';
|
|
||||||
|
|
||||||
describe('preprocess', () => {
|
|
||||||
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
|
||||||
if (dir[0] === '.') return;
|
|
||||||
|
|
||||||
const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
|
|
||||||
const solo = config.solo || /\.solo/.test(dir);
|
|
||||||
const skip = config.skip || /\.skip/.test(dir);
|
|
||||||
|
|
||||||
if (solo && process.env.CI) {
|
|
||||||
throw new Error('Forgot to remove `solo: true` from test');
|
|
||||||
}
|
|
||||||
|
|
||||||
(skip ? it.skip : solo ? it.only : it)(dir, async () => {
|
|
||||||
const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8');
|
|
||||||
const expected = fs.readFileSync(`${__dirname}/samples/${dir}/output.svelte`, 'utf-8');
|
|
||||||
|
|
||||||
const result = await svelte.preprocess(
|
|
||||||
input,
|
|
||||||
config.preprocess || {},
|
|
||||||
config.options || { filename: 'input.svelte' }
|
|
||||||
);
|
|
||||||
fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, result.code);
|
|
||||||
if (result.map) {
|
|
||||||
fs.writeFileSync(
|
|
||||||
`${__dirname}/samples/${dir}/_actual.html.map`,
|
|
||||||
JSON.stringify(result.map, null, 2)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
assert.equal(result.code, expected);
|
|
||||||
|
|
||||||
assert.deepEqual(result.dependencies, config.dependencies || []);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import * as fs from 'fs';
|
||||||
|
import * as svelte from '../../compiler';
|
||||||
|
import { try_load_config } from '../helpers';
|
||||||
|
import { describe, it } from 'vitest';
|
||||||
|
|
||||||
|
const samples = fs.readdirSync(`${__dirname}/samples`);
|
||||||
|
|
||||||
|
describe('preprocess', async () => {
|
||||||
|
await Promise.all(samples.map((dir) => run(dir)));
|
||||||
|
|
||||||
|
async function run(dir) {
|
||||||
|
if (dir[0] === '.') return;
|
||||||
|
|
||||||
|
const config = await try_load_config(`${__dirname}/samples/${dir}/_config.js`);
|
||||||
|
const solo = config.solo || /\.solo/.test(dir);
|
||||||
|
const skip = config.skip || /\.skip/.test(dir);
|
||||||
|
|
||||||
|
const it_fn = skip ? it.skip : solo ? it.only : it;
|
||||||
|
|
||||||
|
it_fn(dir, async ({ expect }) => {
|
||||||
|
const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8');
|
||||||
|
|
||||||
|
const result = await svelte.preprocess(
|
||||||
|
input,
|
||||||
|
config.preprocess || {},
|
||||||
|
config.options || { filename: 'input.svelte' }
|
||||||
|
);
|
||||||
|
fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, result.code);
|
||||||
|
|
||||||
|
if (result.map) {
|
||||||
|
fs.writeFileSync(
|
||||||
|
`${__dirname}/samples/${dir}/_actual.html.map`,
|
||||||
|
JSON.stringify(result.map, null, 2)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(result.code).toMatchFileSnapshot(`${__dirname}/samples/${dir}/output.svelte`);
|
||||||
|
|
||||||
|
expect(result.dependencies).toEqual(config.dependencies || []);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,173 @@
|
|||||||
|
import { chromium } from '@playwright/test';
|
||||||
|
import * as fs from 'fs';
|
||||||
|
import * as path from 'path';
|
||||||
|
import { rollup } from 'rollup';
|
||||||
|
import { pretty_print_browser_assertion, try_load_config } from '../helpers.js';
|
||||||
|
import * as svelte from '../../compiler.mjs';
|
||||||
|
import { beforeAll, describe, afterAll, assert } from 'vitest';
|
||||||
|
|
||||||
|
const internal = path.resolve('internal/index.mjs');
|
||||||
|
const index = path.resolve('index.mjs');
|
||||||
|
|
||||||
|
const main = fs.readFileSync(`${__dirname}/driver.js`, 'utf-8');
|
||||||
|
const browser_assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
|
||||||
|
|
||||||
|
describe(
|
||||||
|
'runtime (browser)',
|
||||||
|
async (it) => {
|
||||||
|
/** @type {import('@playwright/test').Browser} */
|
||||||
|
let browser;
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
browser = await chromium.launch();
|
||||||
|
console.log('[runtime-browser] Launched browser');
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
if (browser) await browser.close();
|
||||||
|
});
|
||||||
|
|
||||||
|
const failed = new Set();
|
||||||
|
|
||||||
|
async function runTest(dir, hydrate) {
|
||||||
|
if (dir[0] === '.') return;
|
||||||
|
|
||||||
|
// TODO: Vitest currently doesn't register a watcher because the import is hidden
|
||||||
|
const config = await try_load_config(`${__dirname}/samples/${dir}/_config.js`);
|
||||||
|
const solo = config.solo || /\.solo/.test(dir);
|
||||||
|
const skip = config.skip || /\.skip/.test(dir);
|
||||||
|
|
||||||
|
if (hydrate && config.skip_if_hydrate) return;
|
||||||
|
|
||||||
|
const it_fn = skip ? it.skip : solo ? it.only : it;
|
||||||
|
|
||||||
|
it_fn(`${dir} ${hydrate ? '(with hydration)' : ''}`, async () => {
|
||||||
|
if (failed.has(dir)) {
|
||||||
|
// this makes debugging easier, by only printing compiled output once
|
||||||
|
throw new Error('skipping test, already failed');
|
||||||
|
}
|
||||||
|
|
||||||
|
const warnings = [];
|
||||||
|
|
||||||
|
const bundle = await rollup({
|
||||||
|
input: 'main',
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
name: 'testing-runtime-browser',
|
||||||
|
resolveId(importee) {
|
||||||
|
if (importee === 'svelte/internal' || importee === './internal') {
|
||||||
|
return internal;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === 'svelte') {
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === 'main') {
|
||||||
|
return 'main';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === 'assert') {
|
||||||
|
return 'assert';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === '__MAIN_DOT_SVELTE__') {
|
||||||
|
return path.resolve(__dirname, 'samples', dir, 'main.svelte');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (importee === '__CONFIG__') {
|
||||||
|
return path.resolve(__dirname, 'samples', dir, '_config.js');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
load(id) {
|
||||||
|
if (id === 'assert') return browser_assert;
|
||||||
|
|
||||||
|
if (id === 'main') {
|
||||||
|
return main.replace('__HYDRATE__', hydrate ? 'true' : 'false');
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
transform(code, id) {
|
||||||
|
if (id.endsWith('.svelte')) {
|
||||||
|
const compiled = svelte.compile(code.replace(/\r/g, ''), {
|
||||||
|
...config.compileOptions,
|
||||||
|
hydratable: hydrate,
|
||||||
|
immutable: config.immutable,
|
||||||
|
accessors: 'accessors' in config ? config.accessors : true
|
||||||
|
});
|
||||||
|
|
||||||
|
const out_dir = `${__dirname}/samples/${dir}/_output/${
|
||||||
|
hydrate ? 'hydratable' : 'normal'
|
||||||
|
}`;
|
||||||
|
const out = `${out_dir}/${path.basename(id).replace(/\.svelte$/, '.js')}`;
|
||||||
|
|
||||||
|
if (fs.existsSync(out)) {
|
||||||
|
fs.unlinkSync(out);
|
||||||
|
}
|
||||||
|
if (!fs.existsSync(out_dir)) {
|
||||||
|
fs.mkdirSync(out_dir, { recursive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(out, compiled.js.code, 'utf8');
|
||||||
|
|
||||||
|
compiled.warnings.forEach((w) => warnings.push(w));
|
||||||
|
|
||||||
|
return compiled.js;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
const generated_bundle = await bundle.generate({ format: 'iife', name: 'test' });
|
||||||
|
|
||||||
|
function assertWarnings() {
|
||||||
|
if (config.warnings) {
|
||||||
|
assert.deepStrictEqual(
|
||||||
|
warnings.map((w) => ({
|
||||||
|
code: w.code,
|
||||||
|
message: w.message,
|
||||||
|
pos: w.pos,
|
||||||
|
start: w.start,
|
||||||
|
end: w.end
|
||||||
|
})),
|
||||||
|
config.warnings
|
||||||
|
);
|
||||||
|
} else if (warnings.length) {
|
||||||
|
failed.add(dir);
|
||||||
|
/* eslint-disable no-unsafe-finally */
|
||||||
|
throw new Error('Received unexpected warnings');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const page = await browser.newPage();
|
||||||
|
page.on('console', (type) => {
|
||||||
|
console[type.type()](type.text());
|
||||||
|
});
|
||||||
|
await page.setContent('<main></main>');
|
||||||
|
await page.evaluate(generated_bundle.output[0].code);
|
||||||
|
const test_result = await page.evaluate(`test(document.querySelector('main'))`);
|
||||||
|
|
||||||
|
if (test_result) console.log(test_result);
|
||||||
|
assertWarnings();
|
||||||
|
await page.close();
|
||||||
|
} catch (err) {
|
||||||
|
failed.add(dir);
|
||||||
|
pretty_print_browser_assertion(err.message);
|
||||||
|
assertWarnings();
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
fs.readdirSync(`${__dirname}/samples`).map(async (dir) => {
|
||||||
|
await runTest(dir, false);
|
||||||
|
await runTest(dir, true);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// Browser tests are brittle and slow on CI
|
||||||
|
{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
|
||||||
|
);
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
import SvelteComponent from '__MAIN_DOT_SVELTE__';
|
||||||
|
import config from '__CONFIG__';
|
||||||
|
import * as assert from 'assert';
|
||||||
|
|
||||||
|
export default async function (target) {
|
||||||
|
let unhandled_rejection = false;
|
||||||
|
function unhandled_rejection_handler(event) {
|
||||||
|
unhandled_rejection = event.reason;
|
||||||
|
}
|
||||||
|
window.addEventListener('unhandledrejection', unhandled_rejection_handler);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (config.before_test) config.before_test();
|
||||||
|
|
||||||
|
const options = Object.assign(
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
target,
|
||||||
|
hydrate: __HYDRATE__,
|
||||||
|
props: config.props,
|
||||||
|
intro: config.intro
|
||||||
|
},
|
||||||
|
config.options || {}
|
||||||
|
);
|
||||||
|
|
||||||
|
const component = new SvelteComponent(options);
|
||||||
|
|
||||||
|
const waitUntil = async (fn, ms = 500) => {
|
||||||
|
const start = new Date().getTime();
|
||||||
|
do {
|
||||||
|
if (fn()) return;
|
||||||
|
await new Promise((resolve) => window.setTimeout(resolve, 1));
|
||||||
|
} while (new Date().getTime() <= start + ms);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (config.html) {
|
||||||
|
assert.htmlEqual(target.innerHTML, config.html);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.test) {
|
||||||
|
await config.test({
|
||||||
|
assert,
|
||||||
|
component,
|
||||||
|
target,
|
||||||
|
window,
|
||||||
|
waitUntil
|
||||||
|
});
|
||||||
|
|
||||||
|
component.$destroy();
|
||||||
|
|
||||||
|
if (unhandled_rejection) {
|
||||||
|
throw unhandled_rejection;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
component.$destroy();
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
if (unhandled_rejection) {
|
||||||
|
throw unhandled_rejection;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.after_test) config.after_test();
|
||||||
|
} catch (error) {
|
||||||
|
if (config.error) {
|
||||||
|
assert.equal(err.message, config.error);
|
||||||
|
} else {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
window.removeEventListener('unhandledrejection', unhandled_rejection_handler);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,230 +0,0 @@
|
|||||||
import virtual from '@rollup/plugin-virtual';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
import { rollup } from 'rollup';
|
|
||||||
|
|
||||||
import { chromium } from '@playwright/test';
|
|
||||||
import { deepStrictEqual } from 'assert';
|
|
||||||
import { loadConfig, loadSvelte, mkdirp, prettyPrintBrowserAssertionError } from '../helpers';
|
|
||||||
|
|
||||||
const internal = path.resolve('internal/index.mjs');
|
|
||||||
const index = path.resolve('index.mjs');
|
|
||||||
|
|
||||||
const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
|
|
||||||
|
|
||||||
describe('runtime (browser)', function () {
|
|
||||||
this.timeout(20000);
|
|
||||||
|
|
||||||
let svelte;
|
|
||||||
let browser;
|
|
||||||
|
|
||||||
before(async () => {
|
|
||||||
svelte = loadSvelte(false);
|
|
||||||
console.log('[runtime-browser] Loaded Svelte');
|
|
||||||
|
|
||||||
browser = await chromium.launch();
|
|
||||||
console.log('[runtime-browser] Launched browser');
|
|
||||||
});
|
|
||||||
|
|
||||||
after(async () => {
|
|
||||||
if (browser) await browser.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
const failed = new Set();
|
|
||||||
|
|
||||||
function runTest(dir, hydrate) {
|
|
||||||
if (dir[0] === '.') return;
|
|
||||||
|
|
||||||
const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
|
|
||||||
const solo = config.solo || /\.solo/.test(dir);
|
|
||||||
const skip = config.skip || /\.skip/.test(dir);
|
|
||||||
|
|
||||||
if (hydrate && config.skip_if_hydrate) return;
|
|
||||||
|
|
||||||
if (solo && process.env.CI) {
|
|
||||||
throw new Error('Forgot to remove `solo: true` from test');
|
|
||||||
}
|
|
||||||
|
|
||||||
(skip ? it.skip : solo ? it.only : it)(
|
|
||||||
`${dir} ${hydrate ? '(with hydration)' : ''}`,
|
|
||||||
async () => {
|
|
||||||
if (failed.has(dir)) {
|
|
||||||
// this makes debugging easier, by only printing compiled output once
|
|
||||||
throw new Error('skipping test, already failed');
|
|
||||||
}
|
|
||||||
|
|
||||||
const warnings = [];
|
|
||||||
|
|
||||||
const bundle = await rollup({
|
|
||||||
input: 'main',
|
|
||||||
plugins: [
|
|
||||||
{
|
|
||||||
name: 'testing-runtime-browser',
|
|
||||||
resolveId(importee) {
|
|
||||||
if (importee === 'svelte/internal' || importee === './internal') {
|
|
||||||
return internal;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (importee === 'svelte') {
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (importee === 'main') {
|
|
||||||
return 'main';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
load(id) {
|
|
||||||
if (id === 'main') {
|
|
||||||
return `
|
|
||||||
import SvelteComponent from ${JSON.stringify(path.join(__dirname, 'samples', dir, 'main.svelte'))};
|
|
||||||
import config from ${JSON.stringify(path.join(__dirname, 'samples', dir, '_config.js'))};
|
|
||||||
import * as assert from 'assert';
|
|
||||||
|
|
||||||
export default async function (target) {
|
|
||||||
let unhandled_rejection = false;
|
|
||||||
function unhandled_rejection_handler(event) {
|
|
||||||
unhandled_rejection = event.reason;
|
|
||||||
}
|
|
||||||
window.addEventListener('unhandledrejection', unhandled_rejection_handler);
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (config.before_test) config.before_test();
|
|
||||||
|
|
||||||
const options = Object.assign({}, {
|
|
||||||
target,
|
|
||||||
hydrate: ${String(!!hydrate)},
|
|
||||||
props: config.props,
|
|
||||||
intro: config.intro
|
|
||||||
}, config.options || {});
|
|
||||||
|
|
||||||
const component = new SvelteComponent(options);
|
|
||||||
|
|
||||||
const waitUntil = async (fn, ms = 500) => {
|
|
||||||
const start = new Date().getTime();
|
|
||||||
do {
|
|
||||||
if (fn()) return;
|
|
||||||
await new Promise(resolve => window.setTimeout(resolve, 1));
|
|
||||||
} while (new Date().getTime() <= start + ms);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (config.html) {
|
|
||||||
assert.htmlEqual(target.innerHTML, config.html);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.test) {
|
|
||||||
await config.test({
|
|
||||||
assert,
|
|
||||||
component,
|
|
||||||
target,
|
|
||||||
window,
|
|
||||||
waitUntil,
|
|
||||||
});
|
|
||||||
|
|
||||||
component.$destroy();
|
|
||||||
|
|
||||||
if (unhandled_rejection) {
|
|
||||||
throw unhandled_rejection;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
component.$destroy();
|
|
||||||
assert.htmlEqual(target.innerHTML, '');
|
|
||||||
|
|
||||||
if (unhandled_rejection) {
|
|
||||||
throw unhandled_rejection;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.after_test) config.after_test();
|
|
||||||
} catch (error) {
|
|
||||||
if (config.error) {
|
|
||||||
assert.equal(err.message, config.error);
|
|
||||||
} else {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
window.removeEventListener('unhandledrejection', unhandled_rejection_handler);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
transform(code, id) {
|
|
||||||
if (id.endsWith('.svelte')) {
|
|
||||||
const compiled = svelte.compile(code.replace(/\r/g, ''), {
|
|
||||||
...config.compileOptions,
|
|
||||||
hydratable: hydrate,
|
|
||||||
immutable: config.immutable,
|
|
||||||
accessors: 'accessors' in config ? config.accessors : true
|
|
||||||
});
|
|
||||||
|
|
||||||
const out_dir = `${__dirname}/samples/${dir}/_output/${
|
|
||||||
hydrate ? 'hydratable' : 'normal'
|
|
||||||
}`;
|
|
||||||
const out = `${out_dir}/${path.basename(id).replace(/\.svelte$/, '.js')}`;
|
|
||||||
|
|
||||||
if (fs.existsSync(out)) {
|
|
||||||
fs.unlinkSync(out);
|
|
||||||
}
|
|
||||||
|
|
||||||
mkdirp(out_dir);
|
|
||||||
fs.writeFileSync(out, compiled.js.code, 'utf8');
|
|
||||||
|
|
||||||
compiled.warnings.forEach((w) => warnings.push(w));
|
|
||||||
|
|
||||||
return compiled.js;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
virtual({ assert })
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
const generated_bundle = await bundle.generate({ format: 'iife', name: 'test' });
|
|
||||||
|
|
||||||
function assertWarnings() {
|
|
||||||
if (config.warnings) {
|
|
||||||
deepStrictEqual(
|
|
||||||
warnings.map((w) => ({
|
|
||||||
code: w.code,
|
|
||||||
message: w.message,
|
|
||||||
pos: w.pos,
|
|
||||||
start: w.start,
|
|
||||||
end: w.end
|
|
||||||
})),
|
|
||||||
config.warnings
|
|
||||||
);
|
|
||||||
} else if (warnings.length) {
|
|
||||||
failed.add(dir);
|
|
||||||
/* eslint-disable no-unsafe-finally */
|
|
||||||
throw new Error('Received unexpected warnings');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const page = await browser.newPage();
|
|
||||||
page.on('console', (type) => {
|
|
||||||
console[type.type()](type.text());
|
|
||||||
});
|
|
||||||
await page.setContent('<main></main>');
|
|
||||||
await page.evaluate(generated_bundle.output[0].code);
|
|
||||||
const test_result = await page.evaluate(`test(document.querySelector('main'))`);
|
|
||||||
|
|
||||||
if (test_result) console.log(test_result);
|
|
||||||
assertWarnings();
|
|
||||||
await page.close();
|
|
||||||
} catch (err) {
|
|
||||||
failed.add(dir);
|
|
||||||
prettyPrintBrowserAssertionError(err.message);
|
|
||||||
assertWarnings();
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.readdirSync(`${__dirname}/samples`).forEach((dir) => {
|
|
||||||
runTest(dir, false);
|
|
||||||
runTest(dir, true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
export function linear(t) {
|
|
||||||
return t;
|
|
||||||
}
|
|
||||||
@ -1,44 +1,37 @@
|
|||||||
let fulfil;
|
import { create_deferred } from '../../../helpers.js';
|
||||||
|
|
||||||
let thePromise = new Promise((f) => {
|
let deferred;
|
||||||
fulfil = f;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
before_test() {
|
||||||
thePromise
|
deferred = create_deferred();
|
||||||
|
},
|
||||||
|
|
||||||
|
get props() {
|
||||||
|
return { thePromise: deferred.promise };
|
||||||
},
|
},
|
||||||
|
|
||||||
html: '',
|
html: '',
|
||||||
|
|
||||||
test({ assert, component, target }) {
|
test({ assert, component, target }) {
|
||||||
fulfil(42);
|
deferred.resolve(42);
|
||||||
|
|
||||||
return thePromise
|
return deferred.promise
|
||||||
.then(() => {
|
.then(() => {
|
||||||
assert.htmlEqual(target.innerHTML, '');
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
let reject;
|
deferred = create_deferred();
|
||||||
|
|
||||||
thePromise = new Promise((f, r) => {
|
|
||||||
reject = r;
|
|
||||||
});
|
|
||||||
|
|
||||||
component.thePromise = thePromise;
|
component.thePromise = deferred.promise;
|
||||||
|
|
||||||
assert.htmlEqual(target.innerHTML, '');
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
reject(new Error('something broke'));
|
deferred.reject(new Error('something broke'));
|
||||||
|
|
||||||
return thePromise.catch(() => {});
|
return deferred.promise.catch(() => {});
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
assert.htmlEqual(
|
assert.htmlEqual(target.innerHTML, `<p>oh no! something broke</p>`);
|
||||||
target.innerHTML,
|
|
||||||
`
|
|
||||||
<p>oh no! something broke</p>
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,56 +1,36 @@
|
|||||||
let fulfil;
|
import { create_deferred } from '../../../helpers.js';
|
||||||
|
|
||||||
let thePromise = new Promise((f) => {
|
let deferred;
|
||||||
fulfil = f;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
before_test() {
|
||||||
thePromise
|
deferred = create_deferred();
|
||||||
|
},
|
||||||
|
|
||||||
|
get props() {
|
||||||
|
return { thePromise: deferred.promise };
|
||||||
},
|
},
|
||||||
|
|
||||||
html: `
|
html: `
|
||||||
<p>loading...</p>
|
<p>loading...</p>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
test({ assert, component, target }) {
|
async test({ assert, component, target }) {
|
||||||
fulfil(42);
|
deferred.resolve(42);
|
||||||
|
|
||||||
return thePromise
|
await deferred.promise;
|
||||||
.then(() => {
|
assert.htmlEqual(target.innerHTML, `<p>the value is 42</p>`);
|
||||||
assert.htmlEqual(
|
|
||||||
target.innerHTML,
|
deferred = create_deferred();
|
||||||
`
|
component.thePromise = deferred.promise;
|
||||||
<p>the value is 42</p>
|
assert.htmlEqual(target.innerHTML, `<p>loading...</p>`);
|
||||||
`
|
|
||||||
);
|
deferred.reject(new Error('something broke'));
|
||||||
|
|
||||||
let reject;
|
try {
|
||||||
|
await deferred.promise;
|
||||||
thePromise = new Promise((f, r) => {
|
} catch {}
|
||||||
reject = r;
|
|
||||||
});
|
assert.htmlEqual(target.innerHTML, `<p>oh no! something broke</p>`);
|
||||||
|
|
||||||
component.thePromise = thePromise;
|
|
||||||
|
|
||||||
assert.htmlEqual(
|
|
||||||
target.innerHTML,
|
|
||||||
`
|
|
||||||
<p>loading...</p>
|
|
||||||
`
|
|
||||||
);
|
|
||||||
|
|
||||||
reject(new Error('something broke'));
|
|
||||||
|
|
||||||
return thePromise.catch(() => {});
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
assert.htmlEqual(
|
|
||||||
target.innerHTML,
|
|
||||||
`
|
|
||||||
<p>oh no! something broke</p>
|
|
||||||
`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue