diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 index 6757581aa2..80239b28d4 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 @@ -40,19 +40,19 @@ exports[`magicHtml option disabled filename bundle.js should not handle HEAD req exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` " @@ -60,25 +60,25 @@ exports[`magicHtml option disabled filename bundle.other.js should not handle GE Error -
Cannot GET /bundle.other
+
Cannot GET /bundle
" `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` " @@ -86,7 +86,7 @@ exports[`magicHtml option disabled filename bundle.other.js should not handle GE Error -
Cannot GET /bundle
+
Cannot GET /bundle.other
" @@ -185,3 +185,30 @@ exports[`magicHtml option enabled filename bundle.other.js should not handle GET " `; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index d05a82de4d..0008864eeb 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -186,6 +186,33 @@ exports[`magicHtml option enabled filename bundle.other.js should not handle GET " `; +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; + exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", @@ -346,6 +373,57 @@ exports[`magicHtml option enabled with experiments.outputModule: true and .js ex " `; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): page errors 1`] = ` +Array [ + [Error: SyntaxError: Cannot use 'import.meta' outside a module], +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; + exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", diff --git a/test/e2e/magic-html.test.js b/test/e2e/magic-html.test.js index 05b8629d44..4b28d12b58 100644 --- a/test/e2e/magic-html.test.js +++ b/test/e2e/magic-html.test.js @@ -3,6 +3,7 @@ const webpack = require("webpack"); const Server = require("../../lib/Server"); const config = require("../fixtures/client-config/webpack.config"); +const multiCompilerConfig = require("../fixtures/multi-compiler-config/webpack.config"); const runBrowser = require("../helpers/run-browser"); const isWebpack5 = require("../helpers/isWebpack5"); const port = require("../ports-map")["magic-html-option"]; @@ -223,6 +224,86 @@ describe("magicHtml option", () => { expect(pageErrors).toMatchSnapshot("page errors"); }); }); + + describe("multi compiler mode", () => { + beforeEach(async () => { + compiler = webpack(multiCompilerConfig); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/main)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/main)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); }); webpack5Test("enabled with experiments.outputModule: true", () => { @@ -317,6 +398,103 @@ describe("magicHtml option", () => { }); }); + webpack5Test( + "enabled with experiments.outputModule: true in multi compiler mode", + () => { + let compiler; + let server; + let page; + let browser; + let pageErrors; + let consoleMessages; + + beforeEach(async () => { + compiler = webpack([ + { + ...multiCompilerConfig[0], + experiments: { + outputModule: true, + }, + }, + ]); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/main)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/main)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + } + ); + webpack5Test( "enabled with experiments.outputModule: true and .js extension", () => { @@ -538,6 +716,98 @@ describe("magicHtml option", () => { expect(pageErrors).toMatchSnapshot("page errors"); }); }); + + describe("multi compiler mode", () => { + beforeEach(async () => { + compiler = webpack([ + { + ...multiCompilerConfig[0], + output: { + path: "/", + filename: "bundle.js", + }, + experiments: { + outputModule: true, + }, + }, + config, + ]); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); } );