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);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { writable } from '../../../../store';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const reactiveStoreVal = writable(0);
|
||||
export const unreactiveExport = true;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as assert from 'assert';
|
||||
import { get } from '../../store';
|
||||
import { spring, tweened } from '../../motion';
|
||||
import { describe, it, assert } from 'vitest';
|
||||
import { get } from 'svelte/store';
|
||||
import { spring, tweened } from 'svelte/motion';
|
||||
|
||||
describe('motion', () => {
|
||||
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) => {
|
||||
fulfil = f;
|
||||
});
|
||||
let deferred;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
thePromise
|
||||
before_test() {
|
||||
deferred = create_deferred();
|
||||
},
|
||||
|
||||
get props() {
|
||||
return { thePromise: deferred.promise };
|
||||
},
|
||||
|
||||
html: '',
|
||||
|
||||
test({ assert, component, target }) {
|
||||
fulfil(42);
|
||||
deferred.resolve(42);
|
||||
|
||||
return thePromise
|
||||
return deferred.promise
|
||||
.then(() => {
|
||||
assert.htmlEqual(target.innerHTML, '');
|
||||
|
||||
let reject;
|
||||
|
||||
thePromise = new Promise((f, r) => {
|
||||
reject = r;
|
||||
});
|
||||
deferred = create_deferred();
|
||||
|
||||
component.thePromise = thePromise;
|
||||
component.thePromise = deferred.promise;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '');
|
||||
|
||||
reject(new Error('something broke'));
|
||||
deferred.reject(new Error('something broke'));
|
||||
|
||||
return thePromise.catch(() => {});
|
||||
return deferred.promise.catch(() => {});
|
||||
})
|
||||
.then(() => {
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>oh no! something broke</p>
|
||||
`
|
||||
);
|
||||
assert.htmlEqual(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) => {
|
||||
fulfil = f;
|
||||
});
|
||||
let deferred;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
thePromise
|
||||
before_test() {
|
||||
deferred = create_deferred();
|
||||
},
|
||||
|
||||
get props() {
|
||||
return { thePromise: deferred.promise };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>loading...</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
fulfil(42);
|
||||
async test({ assert, component, target }) {
|
||||
deferred.resolve(42);
|
||||
|
||||
return thePromise
|
||||
.then(() => {
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>the value is 42</p>
|
||||
`
|
||||
);
|
||||
await deferred.promise;
|
||||
assert.htmlEqual(target.innerHTML, `<p>the value is 42</p>`);
|
||||
|
||||
let reject;
|
||||
deferred = create_deferred();
|
||||
component.thePromise = deferred.promise;
|
||||
assert.htmlEqual(target.innerHTML, `<p>loading...</p>`);
|
||||
|
||||
thePromise = new Promise((f, r) => {
|
||||
reject = r;
|
||||
});
|
||||
deferred.reject(new Error('something broke'));
|
||||
|
||||
component.thePromise = thePromise;
|
||||
try {
|
||||
await deferred.promise;
|
||||
} catch {}
|
||||
|
||||
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>
|
||||
`
|
||||
);
|
||||
});
|
||||
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