Skip to content

Commit 6fd0699

Browse files
Rich-HarrisRich-Harris
committed
more direct tests
1 parent b2b3588 commit 6fd0699

File tree

5 files changed

+150
-177
lines changed

5 files changed

+150
-177
lines changed

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ async function replaceTagContents(source, type: 'script' | 'style', preprocessor
6767
if (processed && processed.code) {
6868
return (
6969
source.slice(0, match.index) +
70-
`<${type}>\n${processed.code}</${type}>` +
70+
`<${type}>${processed.code}</${type}>` +
7171
source.slice(match.index + match[0].length)
7272
);
7373
}

‎test/preprocess/index.js

Lines changed: 141 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,147 @@
11
import assert from 'assert';
2-
import * as fs from 'fs';
3-
import {parse} from 'acorn';
4-
import {addLineNumbers, env, normalizeHtml, svelte} from '../helpers.js';
5-
6-
function tryRequire(file) {
7-
try {
8-
const mod = require(file);
9-
return mod.default || mod;
10-
} catch (err) {
11-
if (err.code !== 'MODULE_NOT_FOUND') throw err;
12-
return null;
13-
}
14-
}
15-
16-
function normalizeWarning(warning) {
17-
warning.frame = warning.frame.replace(/^\n/, '').
18-
replace(/^\t+/gm, '').
19-
replace(/\s+$/gm, '');
20-
delete warning.filename;
21-
delete warning.toString;
22-
return warning;
23-
}
24-
25-
function checkCodeIsValid(code) {
26-
try {
27-
parse(code);
28-
} catch (err) {
29-
console.error(addLineNumbers(code));
30-
throw new Error(err.message);
31-
}
32-
}
2+
import {svelte} from '../helpers.js';
333

344
describe.only('preprocess', () => {
35-
fs.readdirSync('test/preprocess/samples').forEach(dir => {
36-
if (dir[0] === '.') return;
37-
38-
// add .solo to a sample directory name to only run that test
39-
const solo = /\.solo/.test(dir);
40-
const skip = /\.skip/.test(dir);
41-
42-
if (solo && process.env.CI) {
43-
throw new Error('Forgot to remove `solo: true` from test');
44-
}
45-
46-
(solo ? it.only : skip ? it.skip : it)(dir, () => {
47-
const config = tryRequire(`./samples/${dir}/_config.js`) || {};
48-
const input = fs.existsSync(`test/preprocess/samples/${dir}/input.pug`) ?
49-
read(`test/preprocess/samples/${dir}/input.pug`) :
50-
read(`test/preprocess/samples/${dir}/input.html`);
51-
52-
return svelte.preprocess(input, config)
53-
.then(processed => processed.toString())
54-
.then(processed => {
55-
const expectedWarnings = (config.warnings || []).map(
56-
normalizeWarning);
57-
const domWarnings = [];
58-
const ssrWarnings = [];
59-
60-
const dom = svelte.compile(
61-
processed,
62-
Object.assign(config, {
63-
format: 'iife',
64-
name: 'SvelteComponent',
65-
onwarn: warning => {
66-
domWarnings.push(warning);
67-
},
68-
})
69-
);
70-
71-
const ssr = svelte.compile(
72-
processed,
73-
Object.assign(config, {
74-
format: 'iife',
75-
generate: 'ssr',
76-
name: 'SvelteComponent',
77-
onwarn: warning => {
78-
ssrWarnings.push(warning);
79-
},
80-
})
81-
);
82-
83-
// check the code is valid
84-
checkCodeIsValid(dom.code);
85-
checkCodeIsValid(ssr.code);
86-
87-
assert.equal(dom.css, ssr.css);
88-
89-
assert.deepEqual(
90-
domWarnings.map(normalizeWarning),
91-
ssrWarnings.map(normalizeWarning)
92-
);
93-
assert.deepEqual(domWarnings.map(normalizeWarning), expectedWarnings);
94-
95-
const expected = {
96-
html: read(`test/preprocess/samples/${dir}/expected.html`),
97-
css: read(`test/preprocess/samples/${dir}/expected.css`),
98-
};
99-
100-
if (expected.css !== null) {
101-
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.css`,
102-
dom.css);
103-
assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz'),
104-
expected.css);
105-
}
106-
107-
// verify that the right elements have scoping selectors
108-
if (expected.html !== null) {
109-
const window = env();
110-
111-
// dom
112-
try {
113-
const Component = eval(
114-
`(function () { ${dom.code}; return SvelteComponent; }())`
115-
);
116-
const target = window.document.querySelector('main');
117-
118-
new Component({target, data: config.data});
119-
const html = target.innerHTML;
120-
121-
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.html`,
122-
html);
123-
124-
assert.equal(
125-
normalizeHtml(window,
126-
html.replace(/svelte-\d+/g, 'svelte-xyz')),
127-
normalizeHtml(window, expected.html)
128-
);
129-
} catch (err) {
130-
console.log(dom.code);
131-
throw err;
132-
}
133-
134-
// ssr
135-
try {
136-
const component = eval(
137-
`(function () { ${ssr.code}; return SvelteComponent; }())`
138-
);
139-
140-
assert.equal(
141-
normalizeHtml(
142-
window,
143-
component.render(config.data).
144-
replace(/svelte-\d+/g, 'svelte-xyz')
145-
),
146-
normalizeHtml(window, expected.html)
147-
);
148-
} catch (err) {
149-
console.log(ssr.code);
150-
throw err;
151-
}
152-
}
5+
it('preprocesses entire component', () => {
6+
const source = `
7+
<h1>Hello __NAME__!</h1>
8+
`;
9+
10+
const expected = `
11+
<h1>Hello world!</h1>
12+
`;
13+
14+
return svelte.preprocess(source, {
15+
markup: ({ content }) => {
16+
return {
17+
code: content.replace('__NAME__', 'world')
18+
};
19+
}
20+
}).then(processed => {
21+
assert.equal(processed.toString(), expected);
22+
});
23+
});
24+
25+
it('preprocesses style', () => {
26+
const source = `
27+
<div class='brand-color'>$brand</div>
28+
29+
<style>
30+
.brand-color {
31+
color: $brand;
32+
}
33+
</style>
34+
`;
35+
36+
const expected = `
37+
<div class='brand-color'>$brand</div>
38+
39+
<style>
40+
.brand-color {
41+
color: purple;
42+
}
43+
</style>
44+
`;
45+
46+
return svelte.preprocess(source, {
47+
style: ({ content }) => {
48+
return {
49+
code: content.replace('$brand', 'purple')
50+
};
51+
}
52+
}).then(processed => {
53+
assert.equal(processed.toString(), expected);
54+
});
55+
});
56+
57+
it('preprocesses style asynchronously', () => {
58+
const source = `
59+
<div class='brand-color'>$brand</div>
60+
61+
<style>
62+
.brand-color {
63+
color: $brand;
64+
}
65+
</style>
66+
`;
67+
68+
const expected = `
69+
<div class='brand-color'>$brand</div>
70+
71+
<style>
72+
.brand-color {
73+
color: purple;
74+
}
75+
</style>
76+
`;
77+
78+
return svelte.preprocess(source, {
79+
style: ({ content }) => {
80+
return Promise.resolve({
81+
code: content.replace('$brand', 'purple')
15382
});
83+
}
84+
}).then(processed => {
85+
assert.equal(processed.toString(), expected);
86+
});
87+
});
88+
89+
it('preprocesses script', () => {
90+
const source = `
91+
<script>
92+
console.log(__THE_ANSWER__);
93+
</script>
94+
`;
95+
96+
const expected = `
97+
<script>
98+
console.log(42);
99+
</script>
100+
`;
101+
102+
return svelte.preprocess(source, {
103+
script: ({ content }) => {
104+
return {
105+
code: content.replace('__THE_ANSWER__', '42')
106+
};
107+
}
108+
}).then(processed => {
109+
assert.equal(processed.toString(), expected);
110+
});
111+
});
112+
113+
it('parses attributes', () => {
114+
const source = `
115+
<style type='text/scss' bool></style>
116+
`;
117+
118+
return svelte.preprocess(source, {
119+
style: ({ attributes }) => {
120+
assert.deepEqual(attributes, {
121+
type: 'text/scss',
122+
bool: true
123+
});
124+
}
125+
});
126+
});
127+
128+
it('ignores null/undefined returned from preprocessor', () => {
129+
const source = `
130+
<script>
131+
console.log('ignore me');
132+
</script>
133+
`;
134+
135+
const expected = `
136+
<script>
137+
console.log('ignore me');
138+
</script>
139+
`;
140+
141+
return svelte.preprocess(source, {
142+
script: () => null
143+
}).then(processed => {
144+
assert.equal(processed.toString(), expected);
154145
});
155146
});
156-
});
157-
158-
function read(file) {
159-
try {
160-
return fs.readFileSync(file, 'utf-8');
161-
} catch (err) {
162-
return null;
163-
}
164-
}
147+
});

‎test/preprocess/samples/use-coffeescript-preprocessor/_config.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,11 @@ export default {
44
cascade: false,
55
script: ({content, attributes}) => {
66
if (attributes.type !== 'text/coffeescript') {
7-
return {code: content};
7+
return null;
88
}
99

10-
return new Promise((fulfil, reject) => {
11-
try {
12-
const code = CoffeeScript.compile(content, {});
13-
fulfil({code});
14-
} catch (error) {
15-
reject(error);
16-
}
17-
});
10+
return {
11+
code: CoffeeScript.compile(content, {})
12+
};
1813
},
1914
};

‎test/preprocess/samples/use-pug-preprocessor/_config.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,8 @@ import * as pug from 'pug';
33
export default {
44
cascade: false,
55
markup: ({content}) => {
6-
return new Promise((fulfil, reject) => {
7-
try {
8-
const code = pug.render(content);
9-
fulfil({code});
10-
} catch (error) {
11-
reject(error);
12-
}
13-
});
6+
return {
7+
code: pug.render(content)
8+
};
149
},
1510
};

‎test/preprocess/samples/use-scss-preprocessor/_config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default {
44
cascade: false,
55
style: ({ content, attributes }) => {
66
if (attributes.type !== 'text/scss') {
7-
return {code: content};
7+
return null;
88
}
99

1010
if (attributes['aria-hidden'] !== true) {

0 commit comments

Comments
 (0)