diff --git a/test/e2e/lazy-compilation.test.js b/test/e2e/lazy-compilation.test.js index ca7855b273..84f88766b0 100644 --- a/test/e2e/lazy-compilation.test.js +++ b/test/e2e/lazy-compilation.test.js @@ -2,19 +2,18 @@ const webpack = require("webpack"); const Server = require("../../lib/Server"); -const config = require("../fixtures/client-config/webpack.config"); +const lazyCompilationSingleEntryConfig = require("../fixtures/lazy-compilation-single-entry/webpack.config"); +const lazyCompilationMultipleEntriesConfig = require("../fixtures/lazy-compilation-multiple-entries/webpack.config"); const runBrowser = require("../helpers/run-browser"); const port = require("../ports-map")["lazy-compilation"]; +// const isWebpack5 = require("../helpers/isWebpack5"); + +// const itOnlyWebpack5 = isWebpack5 ? it : it.skip; describe("lazy compilation", () => { // TODO jest freeze due webpack do not close `eventsource`, we should uncomment this after fix it on webpack side - it.skip(`should work`, async () => { - const compiler = webpack({ - ...config, - experiments: { - lazyCompilation: true, - }, - }); + it.skip(`should work with single entry`, async () => { + const compiler = webpack(lazyCompilationSingleEntryConfig); const server = new Server({ port }, compiler); await server.start(); @@ -32,7 +31,7 @@ describe("lazy compilation", () => { pageErrors.push(error); }); - await page.goto(`http://127.0.0.1:${port}/main`, { + await page.goto(`http://127.0.0.1:${port}/test.html`, { waitUntil: "domcontentloaded", }); await new Promise((resolve) => { @@ -51,4 +50,58 @@ describe("lazy compilation", () => { await browser.close(); await server.stop(); }); + + it.skip(`should work with multiple entries`, async () => { + const compiler = webpack(lazyCompilationMultipleEntriesConfig); + const server = new Server({ port }, compiler); + + await server.start(); + + const { page, browser } = await runBrowser(); + + const pageErrors = []; + const consoleMessages = []; + + page + .on("console", (message) => { + consoleMessages.push(message.text()); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + await page.goto(`http://127.0.0.1:${port}/test-one.html`, { + waitUntil: "domcontentloaded", + }); + await new Promise((resolve) => { + const interval = setInterval(() => { + console.log(consoleMessages); + if (consoleMessages.includes("One.")) { + clearInterval(interval); + + resolve(); + } + }, 100); + }); + + await page.goto(`http://127.0.0.1:${port}/test-two.html`, { + waitUntil: "domcontentloaded", + }); + await new Promise((resolve) => { + const interval = setInterval(() => { + console.log(consoleMessages); + if (consoleMessages.includes("Two.")) { + clearInterval(interval); + + resolve(); + } + }, 100); + }); + + expect(consoleMessages).toMatchSnapshot("console messages"); + expect(pageErrors).toMatchSnapshot("page errors"); + + await browser.close(); + await server.stop(); + }); }); diff --git a/test/fixtures/lazy-compilation-multiple-entries/one.js b/test/fixtures/lazy-compilation-multiple-entries/one.js new file mode 100644 index 0000000000..3141da7ce0 --- /dev/null +++ b/test/fixtures/lazy-compilation-multiple-entries/one.js @@ -0,0 +1,3 @@ +"use strict"; + +console.log("One."); diff --git a/test/fixtures/lazy-compilation-multiple-entries/two.js b/test/fixtures/lazy-compilation-multiple-entries/two.js new file mode 100644 index 0000000000..0f719c9099 --- /dev/null +++ b/test/fixtures/lazy-compilation-multiple-entries/two.js @@ -0,0 +1,3 @@ +"use strict"; + +console.log("Two."); diff --git a/test/fixtures/lazy-compilation-multiple-entries/webpack.config.js b/test/fixtures/lazy-compilation-multiple-entries/webpack.config.js new file mode 100644 index 0000000000..39193884e0 --- /dev/null +++ b/test/fixtures/lazy-compilation-multiple-entries/webpack.config.js @@ -0,0 +1,85 @@ +"use strict"; + +const webpack = require("webpack"); + +const isWebpack5 = webpack.version.startsWith("5"); + +const oneHTMLContent = ` + + + + + test + + + + +`; +const twoHTMLContent = ` + + + + + test + + + + +`; + +module.exports = { + devtool: false, + mode: "development", + context: __dirname, + stats: "none", + entry: { + one: "./one.js", + two: "./two.js", + }, + output: { + path: "/", + }, + experiments: { + lazyCompilation: true, + }, + infrastructureLogging: isWebpack5 + ? { + level: "info", + stream: { + write: () => {}, + }, + } + : { + level: "info", + }, + plugins: [ + { + apply(compiler) { + const pluginName = "html-generator-plugin-test"; + const oneFilename = "test-one.html"; + const twoFilename = "test-two.html"; + + compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { + const { RawSource } = compiler.webpack.sources; + + compilation.hooks.processAssets.tap( + { + name: pluginName, + stage: + compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, + }, + () => { + const oneSource = new RawSource(oneHTMLContent); + + compilation.emitAsset(oneFilename, oneSource); + + const twoSource = new RawSource(twoHTMLContent); + + compilation.emitAsset(twoFilename, twoSource); + } + ); + }); + }, + }, + ], +}; diff --git a/test/fixtures/lazy-compilation-single-entry/entry.js b/test/fixtures/lazy-compilation-single-entry/entry.js new file mode 100644 index 0000000000..3c915dbcb8 --- /dev/null +++ b/test/fixtures/lazy-compilation-single-entry/entry.js @@ -0,0 +1,3 @@ +"use strict"; + +console.log("Hey."); diff --git a/test/fixtures/lazy-compilation-single-entry/webpack.config.js b/test/fixtures/lazy-compilation-single-entry/webpack.config.js new file mode 100644 index 0000000000..9345d140d5 --- /dev/null +++ b/test/fixtures/lazy-compilation-single-entry/webpack.config.js @@ -0,0 +1,66 @@ +"use strict"; + +const webpack = require("webpack"); + +const isWebpack5 = webpack.version.startsWith("5"); + +const HTMLContent = ` + + + + + test + + + + +`; + +module.exports = { + devtool: false, + mode: "development", + context: __dirname, + stats: "none", + entry: "./entry.js", + output: { + path: "/", + }, + experiments: { + lazyCompilation: true, + }, + infrastructureLogging: isWebpack5 + ? { + level: "info", + stream: { + write: () => {}, + }, + } + : { + level: "info", + }, + plugins: [ + { + apply(compiler) { + const pluginName = "html-generator-plugin-test"; + const filename = "test.html"; + + compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { + const { RawSource } = compiler.webpack.sources; + + compilation.hooks.processAssets.tap( + { + name: pluginName, + stage: + compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, + }, + () => { + const source = new RawSource(HTMLContent); + + compilation.emitAsset(filename, source); + } + ); + }); + }, + }, + ], +};