Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test case for serve and reemitting #1812

Merged
merged 5 commits into from Jun 21, 2023
Merged

test case for serve and reemitting #1812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
755874e
test: emit assets in watch and serve
alexander-akait Jun 21, 2023
353f499
test: emit assets in watch and serve
alexander-akait Jun 21, 2023
5f2314e
test: added the plugin testcase
alexander-akait Jun 21, 2023
3c89d40
style: fix
alexander-akait Jun 21, 2023
dfe4260
test: fix
alexander-akait Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 13 additions & 0 deletions spec/fixtures/html-template-with-image.html
View file
Open in desktop
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<body>
<p>Some unique text</p>
<div>
<img src="./logo.png" alt="Logo">
</div>
</body>
</html>
137 changes: 137 additions & 0 deletions spec/hot.spec.js
View file
Open in desktop
Expand Up @@ -20,6 +20,7 @@ const DEFAULT_LOADER = require.resolve('../lib/loader.js') + '?force';
const DEFAULT_TEMPLATE = DEFAULT_LOADER + '!' + require.resolve('../default_index.ejs');

jest.setTimeout(30000);

process.on('unhandledRejection', r => console.log(r));

describe('HtmlWebpackPluginHMR', () => {
Expand Down Expand Up @@ -85,4 +86,140 @@ describe('HtmlWebpackPluginHMR', () => {
})
.then(() => compiler.stopWatching());
});

it('should re-emit favicon and assets from a loader if watch is active', () => {
const template = path.join(__dirname, './fixtures/html-template-with-image.html');
const config = {
mode: 'development',
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
assetModuleFilename: '[name][ext]',
path: OUTPUT_DIR
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
favicon: path.join(__dirname, './fixtures/favicon.ico'),
template
})
]
};

const templateContent = fs.readFileSync(template, 'utf-8');
const compiler = new WebpackRecompilationSimulator(webpack(config));
const jsFileTempPath = compiler.addTestFile(path.join(__dirname, 'fixtures/index.js'));
const expected = ['logo.png', 'main.js', 'favicon.ico', 'index.html'];

return compiler.startWatching()
// Change the template file and compile again
.then((stats) => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(jsFileTempPath, 'module.exports = function calc(a, b){ return a - b };');

return compiler.waitForWatchRunComplete();
})
.then(stats => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(template, templateContent.replace(/Some unique text/, 'Some other unique text'));

return compiler.waitForWatchRunComplete();
})
.then((stats) => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(template, templateContent);
})
.then(() => compiler.stopWatching());
});

it('should re-emit favicon and assets from a loader if watch is active and clean enabled', () => {
const expected = ['logo.png', 'main.js', 'favicon.ico', 'index.html'];

class MyPlugin {
apply (compiler) {
compiler.hooks.thisCompilation.tap({ name: this.constructor.name }, (compilation) => {
return compilation.hooks.processAssets.tap(
{ name: this.constructor.name, stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ANALYSE },
(assets) => {
expect(expected.every(val => Object.keys(assets).includes(val))).toBe(true);
}
);
});
}
}

const template = path.join(__dirname, './fixtures/html-template-with-image.html');
const config = {
mode: 'development',
entry: path.join(__dirname, 'fixtures/index.js'),
output: {
clean: true,
assetModuleFilename: '[name][ext]',
path: OUTPUT_DIR
},
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
favicon: path.join(__dirname, './fixtures/favicon.ico'),
template
}),
new MyPlugin()
]
};

const templateContent = fs.readFileSync(template, 'utf-8');
const compiler = new WebpackRecompilationSimulator(webpack(config));
const jsFileTempPath = compiler.addTestFile(path.join(__dirname, 'fixtures/index.js'));

return compiler.startWatching()
// Change the template file and compile again
.then((stats) => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(jsFileTempPath, 'module.exports = function calc(a, b){ return a - b };');

return compiler.waitForWatchRunComplete();
})
.then(stats => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(template, templateContent.replace(/Some unique text/, 'Some other unique text'));

return compiler.waitForWatchRunComplete();
})
.then((stats) => {
expect(expected.every(val => Object.keys(stats.compilation.assets).includes(val))).toBe(true);
expect(stats.compilation.errors).toEqual([]);
expect(stats.compilation.warnings).toEqual([]);

fs.writeFileSync(template, templateContent);
})
.then(() => compiler.stopWatching());
});
});