mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.1 KiB
159 lines
4.1 KiB
7 years ago
|
import * as fs from 'fs';
|
||
4 years ago
|
import { assert, env, svelte, setupHtmlEqual, shouldUpdateExpected } from '../helpers';
|
||
7 years ago
|
|
||
6 years ago
|
function try_require(file) {
|
||
7 years ago
|
try {
|
||
7 years ago
|
const mod = require(file);
|
||
|
return mod.default || mod;
|
||
7 years ago
|
} catch (err) {
|
||
7 years ago
|
if (err.code !== 'MODULE_NOT_FOUND') throw err;
|
||
7 years ago
|
return null;
|
||
|
}
|
||
|
}
|
||
8 years ago
|
|
||
6 years ago
|
function normalize_warning(warning) {
|
||
7 years ago
|
warning.frame = warning.frame
|
||
|
.replace(/^\n/, '')
|
||
|
.replace(/^\t+/gm, '')
|
||
|
.replace(/\s+$/gm, '');
|
||
7 years ago
|
delete warning.filename;
|
||
|
delete warning.toString;
|
||
|
return warning;
|
||
|
}
|
||
|
|
||
6 years ago
|
function create(code) {
|
||
|
const fn = new Function('module', 'exports', 'require', code);
|
||
|
|
||
|
const module = { exports: {} };
|
||
|
fn(module, module.exports, id => {
|
||
|
if (id === 'svelte') return require('../../index.js');
|
||
|
if (id.startsWith('svelte/')) return require(id.replace('svelte', '../../'));
|
||
|
|
||
|
return require(id);
|
||
|
});
|
||
|
|
||
|
return module.exports.default;
|
||
7 years ago
|
}
|
||
|
|
||
7 years ago
|
describe('css', () => {
|
||
5 years ago
|
before(() => {
|
||
|
setupHtmlEqual();
|
||
|
});
|
||
|
|
||
5 years ago
|
fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
|
||
7 years ago
|
if (dir[0] === '.') return;
|
||
8 years ago
|
|
||
7 years ago
|
// add .solo to a sample directory name to only run that test
|
||
7 years ago
|
const solo = /\.solo/.test(dir);
|
||
7 years ago
|
const skip = /\.skip/.test(dir);
|
||
8 years ago
|
|
||
7 years ago
|
if (solo && process.env.CI) {
|
||
7 years ago
|
throw new Error('Forgot to remove `solo: true` from test');
|
||
8 years ago
|
}
|
||
|
|
||
7 years ago
|
(solo ? it.only : skip ? it.skip : it)(dir, () => {
|
||
6 years ago
|
const config = try_require(`./samples/${dir}/_config.js`) || {};
|
||
7 years ago
|
const input = fs
|
||
5 years ago
|
.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8')
|
||
4 years ago
|
.replace(/\s+$/, '')
|
||
|
.replace(/\r/g, '');
|
||
8 years ago
|
|
||
6 years ago
|
const expected_warnings = (config.warnings || []).map(normalize_warning);
|
||
7 years ago
|
|
||
7 years ago
|
const dom = svelte.compile(
|
||
|
input,
|
||
6 years ago
|
Object.assign(config.compileOptions || {}, { format: 'cjs' })
|
||
7 years ago
|
);
|
||
|
|
||
|
const ssr = svelte.compile(
|
||
|
input,
|
||
6 years ago
|
Object.assign(config.compileOptions || {}, { format: 'cjs', generate: 'ssr' })
|
||
7 years ago
|
);
|
||
7 years ago
|
|
||
6 years ago
|
assert.equal(dom.css.code, ssr.css.code);
|
||
7 years ago
|
|
||
6 years ago
|
const dom_warnings = dom.warnings.map(normalize_warning);
|
||
|
const ssr_warnings = ssr.warnings.map(normalize_warning);
|
||
6 years ago
|
|
||
|
assert.deepEqual(dom_warnings, ssr_warnings);
|
||
|
assert.deepEqual(dom_warnings.map(normalize_warning), expected_warnings);
|
||
7 years ago
|
|
||
5 years ago
|
fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.css`, dom.css.code);
|
||
7 years ago
|
const expected = {
|
||
5 years ago
|
html: read(`${__dirname}/samples/${dir}/expected.html`),
|
||
|
css: read(`${__dirname}/samples/${dir}/expected.css`)
|
||
7 years ago
|
};
|
||
8 years ago
|
|
||
5 years ago
|
const actual_css = dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
|
||
|
try {
|
||
|
assert.equal(actual_css, expected.css);
|
||
|
} catch (error) {
|
||
|
if (shouldUpdateExpected()) {
|
||
|
fs.writeFileSync(`${__dirname}/samples/${dir}/expected.css`, actual_css);
|
||
|
console.log(`Updated ${dir}/expected.css.`);
|
||
|
} else {
|
||
|
throw error;
|
||
|
}
|
||
|
}
|
||
7 years ago
|
|
||
5 years ago
|
let ClientComponent;
|
||
|
let ServerComponent;
|
||
|
|
||
6 years ago
|
// we do this here, rather than in the expected.html !== null
|
||
|
// block, to verify that valid code was generated
|
||
5 years ago
|
try {
|
||
|
ClientComponent = create(dom.js.code);
|
||
|
} catch (err) {
|
||
|
console.log(dom.js.code);
|
||
|
throw err;
|
||
|
}
|
||
|
|
||
|
try {
|
||
|
ServerComponent = create(ssr.js.code);
|
||
|
} catch (err) {
|
||
|
console.log(dom.js.code);
|
||
|
throw err;
|
||
|
}
|
||
6 years ago
|
|
||
7 years ago
|
// verify that the right elements have scoping selectors
|
||
|
if (expected.html !== null) {
|
||
7 years ago
|
const window = env();
|
||
7 years ago
|
|
||
7 years ago
|
// dom
|
||
7 years ago
|
try {
|
||
|
const target = window.document.querySelector('main');
|
||
|
|
||
6 years ago
|
new ClientComponent({ target, props: config.props });
|
||
7 years ago
|
const html = target.innerHTML;
|
||
|
|
||
5 years ago
|
fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, html);
|
||
7 years ago
|
|
||
5 years ago
|
const actual_html = html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
|
||
|
assert.htmlEqual(actual_html, expected.html);
|
||
7 years ago
|
|
||
|
window.document.head.innerHTML = ''; // remove added styles
|
||
7 years ago
|
} catch (err) {
|
||
6 years ago
|
console.log(dom.js.code);
|
||
7 years ago
|
throw err;
|
||
|
}
|
||
7 years ago
|
|
||
7 years ago
|
// ssr
|
||
7 years ago
|
try {
|
||
5 years ago
|
const actual_ssr = ServerComponent.render(config.props).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
|
||
|
assert.htmlEqual(actual_ssr, expected.html);
|
||
7 years ago
|
} catch (err) {
|
||
6 years ago
|
console.log(ssr.js.code);
|
||
7 years ago
|
throw err;
|
||
|
}
|
||
7 years ago
|
}
|
||
8 years ago
|
});
|
||
|
});
|
||
|
});
|
||
7 years ago
|
|
||
|
function read(file) {
|
||
|
try {
|
||
|
return fs.readFileSync(file, 'utf-8');
|
||
7 years ago
|
} catch (err) {
|
||
7 years ago
|
return null;
|
||
|
}
|
||
7 years ago
|
}
|