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

more direct tests

Browse Source
pull/969/head
Rich Harris 7 years ago
parent b2b3588cdd
commit 6fd069922b
5 changed files with 150 additions and 177 deletions
Show Stats Download Patch File Download Diff File

2
src/index.ts
Unescape View File

@ -67,7 +67,7 @@ async function replaceTagContents(source, type: 'script' | 'style', preprocessor
if (processed && processed.code) { if (processed && processed.code) {
return ( return (
source.slice(0, match.index) + source.slice(0, match.index) +
`<${type}>\n${processed.code}</${type}>` + `<${type}>${processed.code}</${type}>` +
source.slice(match.index + match[0].length) source.slice(match.index + match[0].length)
); );
} }

299
test/preprocess/index.js
Unescape View File

@ -1,164 +1,147 @@
import assert from 'assert'; import assert from 'assert';
import * as fs from 'fs'; import {svelte} from '../helpers.js';
import {parse} from 'acorn';
import {addLineNumbers, env, normalizeHtml, svelte} from '../helpers.js';
function tryRequire(file) {
try {
const mod = require(file);
return mod.default || mod;
} catch (err) {
if (err.code !== 'MODULE_NOT_FOUND') throw err;
return null;
}
}
function normalizeWarning(warning) {
warning.frame = warning.frame.replace(/^\n/, '').
replace(/^\t+/gm, '').
replace(/\s+$/gm, '');
delete warning.filename;
delete warning.toString;
return warning;
}
function checkCodeIsValid(code) {
try {
parse(code);
} catch (err) {
console.error(addLineNumbers(code));
throw new Error(err.message);
}
}
describe.only('preprocess', () => { describe.only('preprocess', () => {
fs.readdirSync('test/preprocess/samples').forEach(dir => { it('preprocesses entire component', () => {
if (dir[0] === '.') return; const source = `
<h1>Hello __NAME__!</h1>
// add .solo to a sample directory name to only run that test `;
const solo = /\.solo/.test(dir);
const skip = /\.skip/.test(dir); const expected = `
<h1>Hello world!</h1>
if (solo && process.env.CI) { `;
throw new Error('Forgot to remove `solo: true` from test');
} return svelte.preprocess(source, {
markup: ({ content }) => {
(solo ? it.only : skip ? it.skip : it)(dir, () => { return {
const config = tryRequire(`./samples/${dir}/_config.js`) || {}; code: content.replace('__NAME__', 'world')
const input = fs.existsSync(`test/preprocess/samples/${dir}/input.pug`) ? };
read(`test/preprocess/samples/${dir}/input.pug`) : }
read(`test/preprocess/samples/${dir}/input.html`); }).then(processed => {
assert.equal(processed.toString(), expected);
return svelte.preprocess(input, config) });
.then(processed => processed.toString()) });
.then(processed => {
const expectedWarnings = (config.warnings || []).map( it('preprocesses style', () => {
normalizeWarning); const source = `
const domWarnings = []; <div class='brand-color'>$brand</div>
const ssrWarnings = [];
<style>
const dom = svelte.compile( .brand-color {
processed, color: $brand;
Object.assign(config, { }
format: 'iife', </style>
name: 'SvelteComponent', `;
onwarn: warning => {
domWarnings.push(warning); const expected = `
}, <div class='brand-color'>$brand</div>
})
); <style>
.brand-color {
const ssr = svelte.compile( color: purple;
processed, }
Object.assign(config, { </style>
format: 'iife', `;
generate: 'ssr',
name: 'SvelteComponent', return svelte.preprocess(source, {
onwarn: warning => { style: ({ content }) => {
ssrWarnings.push(warning); return {
}, code: content.replace('$brand', 'purple')
}) };
); }
}).then(processed => {
// check the code is valid assert.equal(processed.toString(), expected);
checkCodeIsValid(dom.code); });
checkCodeIsValid(ssr.code); });
assert.equal(dom.css, ssr.css); it('preprocesses style asynchronously', () => {
const source = `
assert.deepEqual( <div class='brand-color'>$brand</div>
domWarnings.map(normalizeWarning),
ssrWarnings.map(normalizeWarning) <style>
); .brand-color {
assert.deepEqual(domWarnings.map(normalizeWarning), expectedWarnings); color: $brand;
}
const expected = { </style>
html: read(`test/preprocess/samples/${dir}/expected.html`), `;
css: read(`test/preprocess/samples/${dir}/expected.css`),
}; const expected = `
<div class='brand-color'>$brand</div>
if (expected.css !== null) {
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.css`, <style>
dom.css); .brand-color {
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'), color: purple;
expected.css); }
} </style>
`;
// verify that the right elements have scoping selectors
if (expected.html !== null) { return svelte.preprocess(source, {
const window = env(); style: ({ content }) => {
return Promise.resolve({
// dom code: content.replace('$brand', 'purple')
try {
const Component = eval(
`(function () { ${dom.code}; return SvelteComponent; }())`
);
const target = window.document.querySelector('main');
new Component({target, data: config.data});
const html = target.innerHTML;
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.html`,
html);
assert.equal(
normalizeHtml(window,
html.replace(/svelte-\d+/g, 'svelte-xyz')),
normalizeHtml(window, expected.html)
);
} catch (err) {
console.log(dom.code);
throw err;
}
// ssr
try {
const component = eval(
`(function () { ${ssr.code}; return SvelteComponent; }())`
);
assert.equal(
normalizeHtml(
window,
component.render(config.data).
replace(/svelte-\d+/g, 'svelte-xyz')
),
normalizeHtml(window, expected.html)
);
} catch (err) {
console.log(ssr.code);
throw err;
}
}
}); });
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('preprocesses script', () => {
const source = `
<script>
console.log(__THE_ANSWER__);
</script>
`;
const expected = `
<script>
console.log(42);
</script>
`;
return svelte.preprocess(source, {
script: ({ content }) => {
return {
code: content.replace('__THE_ANSWER__', '42')
};
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('parses attributes', () => {
const source = `
<style type='text/scss' bool></style>
`;
return svelte.preprocess(source, {
style: ({ attributes }) => {
assert.deepEqual(attributes, {
type: 'text/scss',
bool: true
});
}
});
});
it('ignores null/undefined returned from preprocessor', () => {
const source = `
<script>
console.log('ignore me');
</script>
`;
const expected = `
<script>
console.log('ignore me');
</script>
`;
return svelte.preprocess(source, {
script: () => null
}).then(processed => {
assert.equal(processed.toString(), expected);
}); });
}); });
}); });
function read(file) {
try {
return fs.readFileSync(file, 'utf-8');
} catch (err) {
return null;
}
}

13
test/preprocess/samples/use-coffeescript-preprocessor/_config.js
Unescape View File

@ -4,16 +4,11 @@ export default {
cascade: false, cascade: false,
script: ({content, attributes}) => { script: ({content, attributes}) => {
if (attributes.type !== 'text/coffeescript') { if (attributes.type !== 'text/coffeescript') {
return {code: content}; return null;
} }
return new Promise((fulfil, reject) => { return {
try { code: CoffeeScript.compile(content, {})
const code = CoffeeScript.compile(content, {}); };
fulfil({code});
} catch (error) {
reject(error);
}
});
}, },
}; };

11
test/preprocess/samples/use-pug-preprocessor/_config.js
Unescape View File

@ -3,13 +3,8 @@ import * as pug from 'pug';
export default { export default {
cascade: false, cascade: false,
markup: ({content}) => { markup: ({content}) => {
return new Promise((fulfil, reject) => { return {
try { code: pug.render(content)
const code = pug.render(content); };
fulfil({code});
} catch (error) {
reject(error);
}
});
}, },
}; };

2
test/preprocess/samples/use-scss-preprocessor/_config.js
Unescape View File

@ -4,7 +4,7 @@ export default {
cascade: false, cascade: false,
style: ({ content, attributes }) => { style: ({ content, attributes }) => {
if (attributes.type !== 'text/scss') { if (attributes.type !== 'text/scss') {
return {code: content}; return null;
} }
if (attributes['aria-hidden'] !== true) { if (attributes['aria-hidden'] !== true) {

Write Preview
Loading…
Cancel
Save