mirror of https://github.com/sveltejs/svelte
chore: speed up test execution (#8598)
- shard runtime tests for better use of Vite's test parallelization - merge custom element and other browser tests to run in one test suite and use esbuild in it - on some setups only generate code output when test failspull/8619/head
gtmnayan
1 year ago
committed by
GitHub
parent
7e9af10dce
commit
3df9d8466f
@ -1,50 +0,0 @@
|
||||
export function deepEqual(a, b, message) {
|
||||
if (!is_equal(a, b)) {
|
||||
throw new Error(message || `Expected ${JSON.stringify(a)} to equal ${JSON.stringify(b)}`);
|
||||
}
|
||||
}
|
||||
|
||||
function is_equal(a, b) {
|
||||
if (a && typeof a === 'object') {
|
||||
const is_array = Array.isArray(a);
|
||||
if (Array.isArray(b) !== is_array) return false;
|
||||
|
||||
if (is_array) {
|
||||
if (a.length !== b.length) return false;
|
||||
return a.every((value, i) => is_equal(value, b[i]));
|
||||
}
|
||||
|
||||
const a_keys = Object.keys(a).sort();
|
||||
const b_keys = Object.keys(b).sort();
|
||||
if (a_keys.join(',') !== b_keys.join(',')) return false;
|
||||
|
||||
return a_keys.every((key) => is_equal(a[key], b[key]));
|
||||
}
|
||||
|
||||
return a === b;
|
||||
}
|
||||
|
||||
export function equal(a, b, message) {
|
||||
if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
|
||||
}
|
||||
|
||||
export function ok(condition, message) {
|
||||
if (!condition) throw new Error(message || `Expected ${condition} to be truthy`);
|
||||
}
|
||||
|
||||
export function htmlEqual(actual, expected, message) {
|
||||
return deepEqual(normalizeHtml(window, actual), normalizeHtml(window, expected), message);
|
||||
}
|
||||
|
||||
function normalizeHtml(window, html) {
|
||||
try {
|
||||
const node = window.document.createElement('div');
|
||||
node.innerHTML = html
|
||||
.replace(/<!--.*?-->/g, '')
|
||||
.replace(/>[\s\r\n]+</g, '><')
|
||||
.trim();
|
||||
return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
|
||||
} catch (err) {
|
||||
throw new Error(`Failed to normalize HTML:\n${html}`);
|
||||
}
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
import { chromium } from '@playwright/test';
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import { rollup } from 'rollup';
|
||||
import { try_load_config } from '../helpers.js';
|
||||
import * as svelte from '../../src/compiler/index.js';
|
||||
import { beforeAll, describe, afterAll, assert, it } from 'vitest';
|
||||
|
||||
const internal = path.resolve('src/runtime/internal/index.js');
|
||||
const index = path.resolve('src/runtime/index.js');
|
||||
|
||||
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.js') {
|
||||
return '\0virtual:assert';
|
||||
}
|
||||
},
|
||||
|
||||
load(id) {
|
||||
if (id === '\0virtual: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,173 +1,227 @@
|
||||
import { chromium } from '@playwright/test';
|
||||
import { build } from 'esbuild';
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import { rollup } from 'rollup';
|
||||
import * as svelte from 'svelte/compiler';
|
||||
import { afterAll, assert, beforeAll, describe, it } from 'vitest';
|
||||
import { pretty_print_browser_assertion, try_load_config } from '../helpers.js';
|
||||
import * as svelte from '../../src/compiler/index.js';
|
||||
import { beforeAll, describe, afterAll, assert } from 'vitest';
|
||||
|
||||
const internal = path.resolve('src/runtime/internal/index.js');
|
||||
const index = path.resolve('src/runtime/index.js');
|
||||
|
||||
const main = fs.readFileSync(`${__dirname}/driver.js`, 'utf-8');
|
||||
const browser_assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
|
||||
/** @type {import('@playwright/test').Browser} */
|
||||
let browser;
|
||||
|
||||
describe(
|
||||
'runtime (browser)',
|
||||
async (it) => {
|
||||
/** @type {import('@playwright/test').Browser} */
|
||||
let browser;
|
||||
|
||||
beforeAll(async () => {
|
||||
browser = await chromium.launch();
|
||||
console.log('[runtime-browser] Launched browser');
|
||||
});
|
||||
beforeAll(async () => {
|
||||
browser = await chromium.launch();
|
||||
console.log('[runtime-browser] Launched browser');
|
||||
}, 20000);
|
||||
|
||||
afterAll(async () => {
|
||||
if (browser) await browser.close();
|
||||
});
|
||||
afterAll(async () => {
|
||||
if (browser) await browser.close();
|
||||
});
|
||||
|
||||
const failed = new Set();
|
||||
describe.concurrent(
|
||||
'runtime (browser)',
|
||||
async () => {
|
||||
await Promise.all(
|
||||
fs.readdirSync(`${__dirname}/samples`).map(async (dir) => {
|
||||
await run_browser_test(dir);
|
||||
})
|
||||
);
|
||||
},
|
||||
// Browser tests are brittle and slow on CI
|
||||
{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
|
||||
);
|
||||
|
||||
async function runTest(dir, hydrate) {
|
||||
if (dir[0] === '.') return;
|
||||
async function run_browser_test(dir) {
|
||||
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);
|
||||
const cwd = `${__dirname}/samples/${dir}`;
|
||||
|
||||
if (hydrate && config.skip_if_hydrate) return;
|
||||
// TODO: Vitest currently doesn't register a watcher because the import is hidden
|
||||
const config = await try_load_config(`${cwd}/_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;
|
||||
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');
|
||||
}
|
||||
let failed = false;
|
||||
it_fn.each([false, true])(`${dir} hydrate: %s`, async (hydrate) => {
|
||||
if (hydrate && config.skip_if_hydrate) return;
|
||||
if (failed) {
|
||||
// this makes debugging easier, by only printing compiled output once
|
||||
assert.fail('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 '\0virtual:main';
|
||||
}
|
||||
|
||||
if (importee === 'assert.js') {
|
||||
return '\0virtual: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 === '\0virtual:assert') return browser_assert;
|
||||
|
||||
if (id === '\0virtual: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');
|
||||
const warnings = [];
|
||||
|
||||
const build_result = await build({
|
||||
entryPoints: [`${__dirname}/driver.js`],
|
||||
write: false,
|
||||
alias: {
|
||||
__MAIN_DOT_SVELTE__: path.resolve(__dirname, 'samples', dir, 'main.svelte'),
|
||||
__CONFIG__: path.resolve(__dirname, 'samples', dir, '_config.js'),
|
||||
'assert.js': path.resolve(__dirname, 'assert.js'),
|
||||
'svelte/internal': internal,
|
||||
svelte: index
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
name: 'testing-runtime-browser',
|
||||
setup(build) {
|
||||
build.onLoad({ filter: /\.svelte$/ }, ({ path }) => {
|
||||
const compiled = svelte.compile(fs.readFileSync(path, 'utf-8').replace(/\r/g, ''), {
|
||||
...config.compileOptions,
|
||||
hydratable: hydrate,
|
||||
immutable: config.immutable,
|
||||
accessors: 'accessors' in config ? config.accessors : true
|
||||
});
|
||||
|
||||
compiled.warnings.forEach((warning) => warnings.push(warning));
|
||||
|
||||
return {
|
||||
contents: compiled.js.code,
|
||||
loader: 'js'
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
define: {
|
||||
__HYDRATE__: hydrate ? 'true' : 'false'
|
||||
},
|
||||
bundle: true,
|
||||
format: 'iife',
|
||||
globalName: 'test'
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
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 = true;
|
||||
/* eslint-disable no-unsafe-finally */
|
||||
throw new Error('Received unexpected warnings');
|
||||
}
|
||||
}
|
||||
|
||||
assertWarnings();
|
||||
|
||||
try {
|
||||
const page = await browser.newPage();
|
||||
page.on('console', (type) => {
|
||||
console[type.type()](type.text());
|
||||
});
|
||||
await page.setContent('<main></main>');
|
||||
await page.evaluate(build_result.outputFiles[0].text);
|
||||
const test_result = await page.evaluate("test.default(document.querySelector('main'))");
|
||||
|
||||
if (test_result) console.log(test_result);
|
||||
await page.close();
|
||||
} catch (err) {
|
||||
failed = true;
|
||||
pretty_print_browser_assertion(err.message);
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
describe.concurrent(
|
||||
'custom-elements',
|
||||
async () => {
|
||||
await Promise.all(
|
||||
fs.readdirSync(`${__dirname}/samples`).map(async (dir) => {
|
||||
await runTest(dir, false);
|
||||
await runTest(dir, true);
|
||||
})
|
||||
fs
|
||||
.readdirSync(`${__dirname}/custom-elements-samples`)
|
||||
.map((dir) => run_custom_elements_test(dir))
|
||||
);
|
||||
},
|
||||
// Browser tests are brittle and slow on CI
|
||||
{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
|
||||
);
|
||||
|
||||
async function run_custom_elements_test(dir) {
|
||||
if (dir[0] === '.') return;
|
||||
const cwd = `${__dirname}/custom-elements-samples/${dir}`;
|
||||
|
||||
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(`${cwd}/_config.js`);
|
||||
|
||||
const expected_warnings = config.warnings || [];
|
||||
|
||||
const build_result = await build({
|
||||
entryPoints: [`${cwd}/test.js`],
|
||||
write: false,
|
||||
alias: {
|
||||
'assert.js': path.resolve(__dirname, 'assert.js'),
|
||||
'svelte/internal': internal,
|
||||
svelte: index
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
name: 'testing-runtime-browser',
|
||||
setup(build) {
|
||||
build.onLoad({ filter: /\.svelte$/ }, ({ path }) => {
|
||||
const compiled = svelte.compile(fs.readFileSync(path, 'utf-8').replace(/\r/g, ''), {
|
||||
customElement: true,
|
||||
dev: config.dev
|
||||
});
|
||||
compiled.warnings.forEach((w) => warnings.push(w));
|
||||
return {
|
||||
contents: compiled.js.code,
|
||||
loader: 'js'
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
bundle: true,
|
||||
format: 'iife',
|
||||
globalName: '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
|
||||
);
|
||||
}
|
||||
}
|
||||
assertWarnings();
|
||||
|
||||
const page = await browser.newPage();
|
||||
page.on('console', (type) => {
|
||||
console[type.type()](type.text());
|
||||
});
|
||||
await page.setContent('<main></main>');
|
||||
await page.evaluate(build_result.outputFiles[0].text);
|
||||
const test_result = await page.evaluate("test.default(document.querySelector('main'))");
|
||||
|
||||
if (test_result) console.log(test_result);
|
||||
|
||||
await page.close();
|
||||
});
|
||||
}
|
||||
|
||||
@ -0,0 +1,272 @@
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import { setImmediate } from 'node:timers/promises';
|
||||
import { compile } from 'svelte/compiler';
|
||||
import { clear_loops, flush, set_now, set_raf } from 'svelte/internal';
|
||||
import glob from 'tiny-glob/sync.js';
|
||||
import { afterAll, assert, beforeAll, describe, it } from 'vitest';
|
||||
import { create_loader, mkdirp, try_load_config } from '../helpers.js';
|
||||
import { setup_html_equal } from '../html_equal.js';
|
||||
|
||||
let unhandled_rejection = false;
|
||||
function unhandled_rejection_handler(err) {
|
||||
unhandled_rejection = err;
|
||||
}
|
||||
|
||||
const listeners = process.rawListeners('unhandledRejection');
|
||||
|
||||
const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
|
||||
removeDataSvelte: true
|
||||
});
|
||||
|
||||
beforeAll(() => {
|
||||
process.prependListener('unhandledRejection', unhandled_rejection_handler);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
process.removeListener('unhandledRejection', unhandled_rejection_handler);
|
||||
});
|
||||
|
||||
const failed = new Set();
|
||||
|
||||
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.each`
|
||||
hydrate | from_ssr_html
|
||||
${false} | ${false}
|
||||
${true} | ${false}
|
||||
${true} | ${true}
|
||||
`(`${dir} hydrate: $hydrate, from_ssr: $from_ssr_html`, async ({ hydrate, from_ssr_html }) => {
|
||||
if (hydrate && config.skip_if_hydrate) return;
|
||||
if (hydrate && from_ssr_html && config.skip_if_hydrate_from_ssr) return;
|
||||
|
||||
if (failed.has(dir)) {
|
||||
// this makes debugging easier, by only printing compiled output once
|
||||
assert.fail(`skipping ${dir}, already failed`);
|
||||
}
|
||||
|
||||
unhandled_rejection = null;
|
||||
|
||||
const cwd = path.resolve(`${__dirname}/samples/${dir}`);
|
||||
|
||||
const compileOptions = Object.assign({}, config.compileOptions || {}, {
|
||||
format: 'cjs',
|
||||
hydratable: hydrate,
|
||||
immutable: config.immutable,
|
||||
accessors: 'accessors' in config ? config.accessors : true
|
||||
});
|
||||
|
||||
const load = create_loader(compileOptions, cwd);
|
||||
|
||||
let mod;
|
||||
let SvelteComponent;
|
||||
|
||||
let unintendedError = null;
|
||||
|
||||
if (config.expect_unhandled_rejections) {
|
||||
listeners.forEach((listener) => {
|
||||
// @ts-expect-error
|
||||
process.removeListener('unhandledRejection', listener);
|
||||
});
|
||||
}
|
||||
|
||||
async function test() {
|
||||
// hack to support transition tests
|
||||
clear_loops();
|
||||
|
||||
const raf = {
|
||||
time: 0,
|
||||
callback: null,
|
||||
tick: (now) => {
|
||||
raf.time = now;
|
||||
if (raf.callback) raf.callback();
|
||||
}
|
||||
};
|
||||
set_now(() => raf.time);
|
||||
set_raf((cb) => {
|
||||
raf.callback = () => {
|
||||
raf.callback = null;
|
||||
cb(raf.time);
|
||||
flush();
|
||||
};
|
||||
});
|
||||
|
||||
mod = await load('./main.svelte');
|
||||
SvelteComponent = mod.default;
|
||||
|
||||
// Put things we need on window for testing
|
||||
// @ts-expect-error
|
||||
window.SvelteComponent = SvelteComponent;
|
||||
window.location.href = '';
|
||||
window.document.title = '';
|
||||
window.document.head.innerHTML = '';
|
||||
window.document.body.innerHTML = '<main></main>';
|
||||
|
||||
const target = window.document.querySelector('main');
|
||||
let snapshot = undefined;
|
||||
|
||||
if (hydrate && from_ssr_html) {
|
||||
const load_ssr = create_loader({ ...compileOptions, generate: 'ssr' }, cwd);
|
||||
|
||||
// ssr into target
|
||||
if (config.before_test) config.before_test();
|
||||
const SsrSvelteComponent = (await load_ssr('./main.svelte')).default;
|
||||
const { html } = SsrSvelteComponent.render(config.props);
|
||||
target.innerHTML = html;
|
||||
|
||||
if (config.snapshot) {
|
||||
snapshot = config.snapshot(target);
|
||||
}
|
||||
|
||||
if (config.after_test) config.after_test();
|
||||
} else {
|
||||
target.innerHTML = '';
|
||||
}
|
||||
|
||||
if (config.before_test) config.before_test();
|
||||
|
||||
const warnings = [];
|
||||
const warn = console.warn;
|
||||
console.warn = (warning) => {
|
||||
warnings.push(warning);
|
||||
};
|
||||
|
||||
const options = Object.assign(
|
||||
{},
|
||||
{
|
||||
target,
|
||||
hydrate,
|
||||
props: config.props,
|
||||
intro: config.intro
|
||||
},
|
||||
config.options || {}
|
||||
);
|
||||
|
||||
const component = new SvelteComponent(options);
|
||||
|
||||
console.warn = warn;
|
||||
|
||||
if (config.error) {
|
||||
unintendedError = true;
|
||||
assert.fail('Expected a runtime error');
|
||||
}
|
||||
|
||||
if (config.warnings) {
|
||||
assert.deepEqual(warnings, config.warnings);
|
||||
} else if (warnings.length) {
|
||||
unintendedError = true;
|
||||
assert.fail('Received unexpected warnings');
|
||||
}
|
||||
|
||||
if (config.html) {
|
||||
assert_html_equal_with_options(target.innerHTML, config.html, {
|
||||
withoutNormalizeHtml: config.withoutNormalizeHtml
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
if (config.test) {
|
||||
await config.test({
|
||||
assert: {
|
||||
...assert,
|
||||
htmlEqual: assert_html_equal,
|
||||
htmlEqualWithOptions: assert_html_equal_with_options
|
||||
},
|
||||
component,
|
||||
mod,
|
||||
target,
|
||||
snapshot,
|
||||
window,
|
||||
raf,
|
||||
compileOptions,
|
||||
load
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
component.$destroy();
|
||||
assert_html_equal(target.innerHTML, '');
|
||||
|
||||
// TODO: This seems useless, unhandledRejection is only triggered on the next task
|
||||
// by which time the test has already finished and the next test resets it to null above
|
||||
if (unhandled_rejection) {
|
||||
throw unhandled_rejection; // eslint-disable-line no-unsafe-finally
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await test()
|
||||
.catch((err) => {
|
||||
if (config.error && !unintendedError) {
|
||||
if (typeof config.error === 'function') {
|
||||
config.error(assert, err);
|
||||
} else {
|
||||
assert.equal(err.message, config.error);
|
||||
}
|
||||
} else {
|
||||
for (const file of glob('**/*.svelte', { cwd })) {
|
||||
if (file[0] === '_') continue;
|
||||
|
||||
const dir = `${cwd}/_output/${hydrate ? 'hydratable' : 'normal'}`;
|
||||
const out = `${dir}/${file.replace(/\.svelte$/, '.js')}`;
|
||||
|
||||
mkdirp(dir);
|
||||
|
||||
const { js } = compile(fs.readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r/g, ''), {
|
||||
...compileOptions,
|
||||
filename: file
|
||||
});
|
||||
fs.writeFileSync(out, js.code);
|
||||
}
|
||||
|
||||
throw err;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
failed.add(dir);
|
||||
// print a clickable link to open the directory
|
||||
err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
|
||||
|
||||
throw err;
|
||||
})
|
||||
.finally(async () => {
|
||||
flush();
|
||||
|
||||
if (config.after_test) config.after_test();
|
||||
|
||||
// Free up the microtask queue
|
||||
// 1. Vitest's test runner which uses setInterval can log progress
|
||||
// 2. Any expected unhandled rejections are ran before we reattach the listeners
|
||||
await setImmediate();
|
||||
|
||||
if (config.expect_unhandled_rejections) {
|
||||
listeners.forEach((listener) => {
|
||||
// @ts-expect-error
|
||||
process.on('unhandledRejection', listener);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// There are a lot of tests in this suite, which take up a lot of time.
|
||||
// Split them into groups so that they can run in parallel and finish faster.
|
||||
export function run_shard(id, total_shards) {
|
||||
assert.isAtMost(id, total_shards);
|
||||
|
||||
const samples = fs.readdirSync(`${__dirname}/samples`);
|
||||
const shard_size = Math.ceil(samples.length / total_shards);
|
||||
|
||||
const start = (id - 1) * shard_size;
|
||||
const end = id * shard_size;
|
||||
const to_run = samples.slice(start, end);
|
||||
|
||||
describe(`runtime_${id}`, async () => {
|
||||
await Promise.all(to_run.map((dir) => run_test(dir)));
|
||||
});
|
||||
}
|
||||
@ -1,292 +0,0 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import glob from 'tiny-glob/sync.js';
|
||||
import { beforeAll, afterAll, describe, it, assert } from 'vitest';
|
||||
import { compile } from '../../src/compiler/index.js';
|
||||
import { clear_loops, flush, set_now, set_raf } from 'svelte/internal';
|
||||
import { show_output, try_load_config, mkdirp, create_loader } from '../helpers.js';
|
||||
import { setTimeout } from 'node:timers/promises';
|
||||
import { setup_html_equal } from '../html_equal.js';
|
||||
|
||||
let unhandled_rejection = false;
|
||||
function unhandledRejection_handler(err) {
|
||||
unhandled_rejection = err;
|
||||
}
|
||||
|
||||
const listeners = process.rawListeners('unhandledRejection');
|
||||
|
||||
const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
|
||||
removeDataSvelte: true
|
||||
});
|
||||
|
||||
describe('runtime', async () => {
|
||||
beforeAll(() => {
|
||||
process.prependListener('unhandledRejection', unhandledRejection_handler);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
process.removeListener('unhandledRejection', unhandledRejection_handler);
|
||||
});
|
||||
|
||||
const failed = new Set();
|
||||
|
||||
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.each`
|
||||
hydrate | from_ssr_html
|
||||
${false} | ${false}
|
||||
${true} | ${false}
|
||||
${true} | ${true}
|
||||
`(`${dir} hydrate: $hydrate, from_ssr: $from_ssr_html`, async ({ hydrate, from_ssr_html }) => {
|
||||
if (hydrate && config.skip_if_hydrate) return;
|
||||
if (hydrate && from_ssr_html && config.skip_if_hydrate_from_ssr) return;
|
||||
|
||||
if (failed.has(dir)) {
|
||||
// this makes debugging easier, by only printing compiled output once
|
||||
assert.fail(`skipping ${dir}, already failed`);
|
||||
}
|
||||
|
||||
unhandled_rejection = null;
|
||||
|
||||
const cwd = path.resolve(`${__dirname}/samples/${dir}`);
|
||||
|
||||
const compileOptions = Object.assign({}, config.compileOptions || {}, {
|
||||
format: 'cjs',
|
||||
hydratable: hydrate,
|
||||
immutable: config.immutable,
|
||||
accessors: 'accessors' in config ? config.accessors : true
|
||||
});
|
||||
|
||||
const load = create_loader(compileOptions, cwd);
|
||||
|
||||
let mod;
|
||||
let SvelteComponent;
|
||||
|
||||
let unintendedError = null;
|
||||
|
||||
glob('**/*.svelte', { cwd }).forEach((file) => {
|
||||
if (file[0] === '_') return;
|
||||
|
||||
const dir = `${cwd}/_output/${hydrate ? 'hydratable' : 'normal'}`;
|
||||
const out = `${dir}/${file.replace(/\.svelte$/, '.js')}`;
|
||||
|
||||
if (fs.existsSync(out)) {
|
||||
fs.unlinkSync(out);
|
||||
}
|
||||
|
||||
mkdirp(dir);
|
||||
|
||||
try {
|
||||
const { js } = compile(fs.readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r/g, ''), {
|
||||
...compileOptions,
|
||||
filename: file
|
||||
});
|
||||
|
||||
fs.writeFileSync(out, js.code);
|
||||
} catch (err) {
|
||||
// do nothing
|
||||
}
|
||||
});
|
||||
|
||||
if (config.expect_unhandled_rejections) {
|
||||
listeners.forEach((listener) => {
|
||||
process.removeListener('unhandledRejection', listener);
|
||||
});
|
||||
}
|
||||
|
||||
await Promise.resolve()
|
||||
.then(async () => {
|
||||
// hack to support transition tests
|
||||
clear_loops();
|
||||
|
||||
const raf = {
|
||||
time: 0,
|
||||
callback: null,
|
||||
tick: (now) => {
|
||||
raf.time = now;
|
||||
if (raf.callback) raf.callback();
|
||||
}
|
||||
};
|
||||
set_now(() => raf.time);
|
||||
set_raf((cb) => {
|
||||
raf.callback = () => {
|
||||
raf.callback = null;
|
||||
cb(raf.time);
|
||||
flush();
|
||||
};
|
||||
});
|
||||
|
||||
try {
|
||||
mod = await load('./main.svelte');
|
||||
SvelteComponent = mod.default;
|
||||
} catch (err) {
|
||||
show_output(cwd, compileOptions); // eslint-disable-line no-console
|
||||
throw err;
|
||||
}
|
||||
|
||||
// Put things we need on window for testing
|
||||
// @ts-ignore
|
||||
window.SvelteComponent = SvelteComponent;
|
||||
window.location.href = '';
|
||||
window.document.title = '';
|
||||
window.document.head.innerHTML = '';
|
||||
window.document.body.innerHTML = '<main></main>';
|
||||
|
||||
const target = window.document.querySelector('main');
|
||||
let snapshot = undefined;
|
||||
|
||||
if (hydrate && from_ssr_html) {
|
||||
const load_ssr = create_loader({ ...compileOptions, generate: 'ssr' }, cwd);
|
||||
|
||||
// ssr into target
|
||||
if (config.before_test) config.before_test();
|
||||
const SsrSvelteComponent = (await load_ssr('./main.svelte')).default;
|
||||
const { html } = SsrSvelteComponent.render(config.props);
|
||||
target.innerHTML = html;
|
||||
|
||||
if (config.snapshot) {
|
||||
snapshot = config.snapshot(target);
|
||||
}
|
||||
|
||||
if (config.after_test) config.after_test();
|
||||
} else {
|
||||
target.innerHTML = '';
|
||||
}
|
||||
|
||||
if (config.before_test) config.before_test();
|
||||
|
||||
const warnings = [];
|
||||
const warn = console.warn;
|
||||
console.warn = (warning) => {
|
||||
warnings.push(warning);
|
||||
};
|
||||
|
||||
const options = Object.assign(
|
||||
{},
|
||||
{
|
||||
target,
|
||||
hydrate,
|
||||
props: config.props,
|
||||
intro: config.intro
|
||||
},
|
||||
config.options || {}
|
||||
);
|
||||
|
||||
const component = new SvelteComponent(options);
|
||||
|
||||
console.warn = warn;
|
||||
|
||||
if (config.error) {
|
||||
unintendedError = true;
|
||||
assert.fail('Expected a runtime error');
|
||||
}
|
||||
|
||||
if (config.warnings) {
|
||||
assert.deepEqual(warnings, config.warnings);
|
||||
} else if (warnings.length) {
|
||||
unintendedError = true;
|
||||
assert.fail('Received unexpected warnings');
|
||||
}
|
||||
|
||||
if (config.html) {
|
||||
assert_html_equal_with_options(target.innerHTML, config.html, {
|
||||
withoutNormalizeHtml: config.withoutNormalizeHtml
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
if (config.test) {
|
||||
await config.test({
|
||||
assert: {
|
||||
...assert,
|
||||
htmlEqual: assert_html_equal,
|
||||
htmlEqualWithOptions: assert_html_equal_with_options
|
||||
},
|
||||
component,
|
||||
mod,
|
||||
target,
|
||||
snapshot,
|
||||
window,
|
||||
raf,
|
||||
compileOptions,
|
||||
load
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
component.$destroy();
|
||||
assert_html_equal(target.innerHTML, '');
|
||||
|
||||
// TODO: This seems useless, unhandledRejection is only triggered on the next task
|
||||
// by which time the test has already finished and the next test resets it to null above
|
||||
if (unhandled_rejection) {
|
||||
// eslint-disable-next-line no-unsafe-finally
|
||||
throw unhandled_rejection;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (config.error && !unintendedError) {
|
||||
if (typeof config.error === 'function') {
|
||||
config.error(assert, err);
|
||||
} else {
|
||||
assert.equal(err.message, config.error);
|
||||
}
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
failed.add(dir);
|
||||
// print a clickable link to open the directory
|
||||
err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
|
||||
|
||||
throw err;
|
||||
})
|
||||
.finally(async () => {
|
||||
flush();
|
||||
|
||||
if (config.after_test) config.after_test();
|
||||
|
||||
// Free up the microtask queue, so that
|
||||
// 1. Vitest's test runner which uses setInterval can log progress
|
||||
// 2. Any expected unhandled rejections are ran before we reattach the listeners
|
||||
await setTimeout(0);
|
||||
|
||||
if (config.expect_unhandled_rejections) {
|
||||
listeners.forEach((listener) => {
|
||||
process.on('unhandledRejection', listener);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const samples = fs.readdirSync(`${__dirname}/samples`);
|
||||
await Promise.all(samples.map((sample) => run_test(sample)));
|
||||
|
||||
const load = create_loader({ generate: 'dom', dev: true, format: 'cjs' }, __dirname);
|
||||
const { default: App } = await load('App.svelte');
|
||||
|
||||
it('fails if options.target is missing in dev mode', async () => {
|
||||
assert.throws(() => {
|
||||
new App();
|
||||
}, /'target' is a required option/);
|
||||
});
|
||||
|
||||
it('fails if options.hydrate is true but the component is non-hydratable', async () => {
|
||||
assert.throws(() => {
|
||||
new App({
|
||||
target: { childNodes: [] },
|
||||
hydrate: true
|
||||
});
|
||||
}, /options\.hydrate only works if the component was compiled with the `hydratable: true` option/);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { create_loader } from '../helpers';
|
||||
import { assert, it } from 'vitest';
|
||||
|
||||
const load = create_loader({ generate: 'dom', dev: true, format: 'cjs' }, __dirname);
|
||||
const { default: App } = await load('App.svelte');
|
||||
|
||||
it('fails if options.target is missing in dev mode', async () => {
|
||||
assert.throws(() => {
|
||||
new App();
|
||||
}, /'target' is a required option/);
|
||||
});
|
||||
|
||||
it('fails if options.hydrate is true but the component is non-hydratable', async () => {
|
||||
assert.throws(() => {
|
||||
new App({
|
||||
target: { childNodes: [] },
|
||||
hydrate: true
|
||||
});
|
||||
}, /options\.hydrate only works if the component was compiled with the `hydratable: true` option/);
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
|
||||
|
||||
// There are a lot of tests in the runtime suite, which take up a lot of time.
|
||||
// Split them into groups so that they can run in parallel and finish faster.
|
||||
// Vitest parallelizes tests on a per-file basis, so this hack creates a bunch
|
||||
// of files that run a subset of the tests.
|
||||
function create_shard_files() {
|
||||
let num_shards = +process.env.SVELTE_TEST_SUITE_SHARDS || 1;
|
||||
num_shards = Math.max(1, num_shards);
|
||||
|
||||
const runtime_shards_dir = `${__dirname}/runtime/shards`;
|
||||
rmSync(runtime_shards_dir, { recursive: true, force: true });
|
||||
mkdirSync(runtime_shards_dir);
|
||||
|
||||
for (let i = 1; i <= num_shards; i += 1) {
|
||||
writeFileSync(
|
||||
`${runtime_shards_dir}/runtime_${i}.test.js`,
|
||||
`// @vitest-environment jsdom
|
||||
import { run_shard } from '../runtime.shared.js';
|
||||
run_shard(${i}, ${num_shards});`.replaceAll('\t', '')
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function () {
|
||||
create_shard_files();
|
||||
}
|
||||
Loading…
Reference in new issue