Files
open-wc/packages/building-utils/test-node/index-html/generate-index-html.test.js
2020-10-25 08:46:32 +01:00

134 lines
3.3 KiB
JavaScript

const { expect } = require('chai');
const { parse } = require('parse5');
const path = require('path');
const fs = require('fs');
const { createIndexHTML } = require('../../index-html');
const updateSnapshots = process.argv.includes('--update-snapshots');
const indexHTML = `
<html lang="en-GB">
<head>
<title>My app</title>
<style>
my-app {
display: block;
}
</style>
</head>
<body>
<h1>
<span>
Hello world!
</span>
</h1>
<my-app></my-app>
</body>
</html>
`;
function testSnapshot(name, config) {
const snapshotPath = path.join(__dirname, 'snapshots', 'create-index-html', `${name}.html`);
const ast = parse(indexHTML);
const result = createIndexHTML(ast, config);
if (updateSnapshots) {
fs.writeFileSync(snapshotPath, result.indexHTML, 'utf-8');
} else {
const snapshot = fs.readFileSync(snapshotPath, 'utf-8');
expect(result.indexHTML).to.equal(snapshot);
}
}
describe('generate-index-html', () => {
it('generates a index.html with module', () => {
testSnapshot('module', {
entries: { type: 'module', files: ['app.js'] },
});
});
it('generates a index.html with a script entry', () => {
testSnapshot('script', {
entries: { type: 'script', files: ['app.js', 'shared.js'] },
});
});
it('generates a index.html with a system entry', () => {
testSnapshot('system', {
entries: { type: 'system', files: ['app.js', 'shared.js'] },
});
});
it('generates a index.html with a module and legacy system', () => {
testSnapshot('module-system', {
entries: { type: 'module', files: ['app.js'] },
legacyEntries: { type: 'system', files: ['legacy/app.js'] },
});
});
it('generates a index.html with core-js polyfills', () => {
testSnapshot('polyfill-core-js', {
entries: { type: 'module', files: ['app.js'] },
polyfills: {
coreJs: true,
},
});
});
it('generates a index.html with webcomponents polyfills', () => {
testSnapshot('polyfill-wc', {
entries: { type: 'module', files: ['app.js'] },
polyfills: {
webcomponents: true,
},
});
});
it('generates a index.html with dynamic import polyfills', () => {
testSnapshot('dynamic-import', {
entries: { type: 'module', files: ['app.js'] },
polyfills: {
dynamicImport: true,
},
});
});
it('generates a index.html with multiple polyfills', () => {
testSnapshot('polyfill-multiple', {
entries: { type: 'module', files: ['app.js'] },
polyfills: {
coreJs: true,
webcomponents: true,
fetch: true,
dynamicImport: true,
customPolyfills: [
{
name: 'custom-a',
test: "'foo' in window",
path: path.resolve(__dirname, '../custom-polyfills/polyfill-a.js'),
},
{
name: 'custom-b',
nomodule: true,
path: path.resolve(__dirname, '../custom-polyfills/polyfill-b.js'),
},
],
},
});
});
it('generates a index.html with legacy and polyfills', () => {
testSnapshot('polyfill-multiple-legacy', {
entries: { type: 'module', files: ['app.js'] },
legacyEntries: { type: 'system', files: ['legacy/app.js'] },
polyfills: {
coreJs: true,
webcomponents: true,
},
});
});
});