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.
svelte/test/preprocess/index.js

220 lines
4.1 KiB

import * as assert from 'assert';
import { svelte } from '../helpers.js';
describe('preprocess', () => {
it('preprocesses entire component', () => {
const source = `
<h1>Hello __NAME__!</h1>
`;
const expected = `
<h1>Hello world!</h1>
`;
return svelte.preprocess(source, {
markup: ({ content }) => {
return {
code: content.replace('__NAME__', 'world')
};
}
}).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);
});
});
6 years ago
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>
`;
return svelte.preprocess(source, {
style: ({ attributes }) => {
assert.deepEqual(attributes, {
type: 'text/scss',
'data-foo': 'bar',
bool: true
});
}
});
});
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>
`;
const expected = `
<script>
console.log('ignore me');
</script>
`;
return svelte.preprocess(source, {
script: () => null
}).then(processed => {
assert.equal(processed.toString(), expected);
});
});
});