improve preprocess tests

pull/1981/head
Richard Harris 6 years ago committed by Chris Reeves
parent d3a7ccae4f
commit dcfe85ecdb

@ -1,226 +1,25 @@
import * as fs from 'fs';
import * as assert from 'assert';
import { svelte } from '../helpers.js';
import { loadConfig, svelte } from '../helpers.js';
describe('preprocess', () => {
it('preprocesses entire component', () => {
const source = `
<h1>Hello __NAME__!</h1>
`;
describe.only('preprocess', () => {
fs.readdirSync('test/preprocess/samples').forEach(dir => {
if (dir[0] === '.') return;
const expected = `
<h1>Hello world!</h1>
`;
const config = loadConfig(`./preprocess/samples/${dir}/_config.js`);
return svelte.preprocess(source, {
markup: ({ content }) => {
return {
code: content.replace('__NAME__', 'world')
};
if (config.solo && process.env.CI) {
throw new Error('Forgot to remove `solo: true` from test');
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('preprocesses style', () => {
const source = `
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: $brand;
}
</style>
`;
const expected = `
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: purple;
}
</style>
`;
return svelte.preprocess(source, {
style: ({ content }) => {
return {
code: content.replace('$brand', 'purple')
};
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('preprocesses style asynchronously', () => {
const source = `
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: $brand;
}
</style>
`;
const expected = `
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: purple;
}
</style>
`;
return svelte.preprocess(source, {
style: ({ content }) => {
return Promise.resolve({
code: content.replace('$brand', 'purple')
});
}
}).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('preprocesses multiple matching tags', () => {
const source = `
<script>
REPLACEME
</script>
<style>
SHOULD NOT BE REPLACED
</style>
<script>
REPLACEMETOO
</script>
`;
const expected = `
<script>
replaceme
</script>
<style>
SHOULD NOT BE REPLACED
</style>
<script>
replacemetoo
</script>
`;
return svelte.preprocess(source, {
script: ({ content }) => {
return {
code: content.toLowerCase()
};
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('parses attributes', () => {
const source = `
<style type='text/scss' data-foo="bar" bool></style>
`;
const expected = `
<style type='text/scss' data-foo="bar" bool>PROCESSED</style>
`;
return svelte.preprocess(source, {
style: ({ attributes }) => {
assert.deepEqual(attributes, {
type: 'text/scss',
'data-foo': 'bar',
bool: true
});
return { code: 'PROCESSED' };
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('provides filename to processing hooks', () => {
const source = `
<h1>Hello __MARKUP_FILENAME__!</h1>
<style>.red { color: __STYLE_FILENAME__; }</style>
<script>console.log('__SCRIPT_FILENAME__');</script>
`;
const expected = `
<h1>Hello file.html!</h1>
<style>.red { color: file.html; }</style>
<script>console.log('file.html');</script>
`;
return svelte.preprocess(source, {
filename: 'file.html',
markup: ({ content, filename }) => {
return {
code: content.replace('__MARKUP_FILENAME__', filename)
};
},
style: ({ content, filename }) => {
return {
code: content.replace('__STYLE_FILENAME__', filename)
};
},
script: ({ content, filename }) => {
return {
code: content.replace('__SCRIPT_FILENAME__', filename)
};
}
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
it('ignores null/undefined returned from preprocessor', () => {
const source = `
<script>
console.log('ignore me');
</script>
`;
(config.skip ? it.skip : config.solo ? it.only : it)(dir, async () => {
const input = fs.readFileSync(`test/preprocess/samples/${dir}/input.html`, 'utf-8');
const expected = fs.readFileSync(`test/preprocess/samples/${dir}/output.html`, 'utf-8');
const expected = `
<script>
console.log('ignore me');
</script>
`;
const actual = await svelte.preprocess(input, config.preprocess);
fs.writeFileSync(`test/preprocess/samples/${dir}/_actual.html`, actual);
return svelte.preprocess(source, {
script: () => null
}).then(processed => {
assert.equal(processed.toString(), expected);
assert.equal(actual, expected);
});
});
});

@ -0,0 +1,20 @@
export default {
preprocess: {
filename: 'file.html',
markup: ({ content, filename }) => {
return {
code: content.replace('__MARKUP_FILENAME__', filename)
};
},
style: ({ content, filename }) => {
return {
code: content.replace('__STYLE_FILENAME__', filename)
};
},
script: ({ content, filename }) => {
return {
code: content.replace('__SCRIPT_FILENAME__', filename)
};
}
}
};

@ -0,0 +1,3 @@
<h1>Hello __MARKUP_FILENAME__!</h1>
<style>.red { color: __STYLE_FILENAME__; }</style>
<script>console.log('__SCRIPT_FILENAME__');</script>

@ -0,0 +1,3 @@
<h1>Hello file.html!</h1>
<style>.red { color: file.html; }</style>
<script>console.log('file.html');</script>

@ -0,0 +1,5 @@
export default {
preprocess: {
script: () => null
}
};

@ -0,0 +1,3 @@
<script>
console.log('ignore me');
</script>

@ -0,0 +1,3 @@
<script>
console.log('ignore me');
</script>

@ -0,0 +1,9 @@
export default {
preprocess: {
markup: ({ content }) => {
return {
code: content.replace('__NAME__', 'world')
};
}
}
};

@ -0,0 +1 @@
<h1>Hello __NAME__!</h1>

@ -0,0 +1,9 @@
export default {
preprocess: {
script: ({ content }) => {
return {
code: content.toLowerCase()
};
}
}
};

@ -0,0 +1,9 @@
<script>
REPLACEME
</script>
<style>
SHOULD NOT BE REPLACED
</style>
<script>
REPLACEMETOO
</script>

@ -0,0 +1,9 @@
<script>
replaceme
</script>
<style>
SHOULD NOT BE REPLACED
</style>
<script>
replacemetoo
</script>

@ -0,0 +1,9 @@
export default {
preprocess: {
script: ({ content }) => {
return {
code: content.replace('__THE_ANSWER__', '42')
};
}
}
};

@ -0,0 +1,3 @@
<script>
console.log(__THE_ANSWER__);
</script>

@ -0,0 +1,3 @@
<script>
console.log(42);
</script>

@ -0,0 +1,9 @@
export default {
preprocess: {
style: ({ content }) => {
return Promise.resolve({
code: content.replace('$brand', 'purple')
});
}
}
};

@ -0,0 +1,7 @@
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: $brand;
}
</style>

@ -0,0 +1,7 @@
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: purple;
}
</style>

@ -0,0 +1,14 @@
import * as assert from 'assert';
export default {
preprocess: {
style: ({ attributes }) => {
assert.deepEqual(attributes, {
type: 'text/scss',
'data-foo': 'bar',
bool: true
});
return { code: 'PROCESSED' };
}
}
};

@ -0,0 +1 @@
<style type='text/scss' data-foo="bar" bool></style>

@ -0,0 +1 @@
<style type='text/scss' data-foo="bar" bool>PROCESSED</style>

@ -0,0 +1,9 @@
export default {
preprocess: {
style: ({ content }) => {
return {
code: content.replace('$brand', 'purple')
};
}
}
};

@ -0,0 +1,7 @@
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: $brand;
}
</style>

@ -0,0 +1,7 @@
<div class='brand-color'>$brand</div>
<style>
.brand-color {
color: purple;
}
</style>
Loading…
Cancel
Save