test: add e2e tests for headers option

test/e2e/__snapshots__/headers.test.js.snap.webpack4

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headers option as a function should handle GET request with headers as a function: console messages 1`] = `Array []`;
+
+exports[`headers option as a function should handle GET request with headers as a function: page errors 1`] = `Array []`;
+
+exports[`headers option as a function should handle GET request with headers as a function: response headers x-bar 1`] = `
+"key1=value1
+key2=value2"
+`;
+
+exports[`headers option as a function should handle GET request with headers as a function: response status 1`] = `200`;
+
+exports[`headers option as a string should handle GET request with headers: console messages 1`] = `Array []`;
+
+exports[`headers option as a string should handle GET request with headers: page errors 1`] = `Array []`;
+
+exports[`headers option as a string should handle GET request with headers: response headers x-foo 1`] = `"dev-server headers"`;
+
+exports[`headers option as a string should handle GET request with headers: response status 1`] = `200`;
+
+exports[`headers option as an array should handle GET request with headers as an array: console messages 1`] = `Array []`;
+
+exports[`headers option as an array should handle GET request with headers as an array: page errors 1`] = `Array []`;
+
+exports[`headers option as an array should handle GET request with headers as an array: response headers x-bar 1`] = `
+"key1=value1
+key2=value2"
+`;
+
+exports[`headers option as an array should handle GET request with headers as an array: response status 1`] = `200`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: console messages 1`] = `Array []`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: page errors 1`] = `Array []`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: response headers x-foo 1`] = `"dev-middleware-headers"`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: response status 1`] = `200`;

test/e2e/__snapshots__/headers.test.js.snap.webpack5

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`headers option as a function should handle GET request with headers as a function: console messages 1`] = `Array []`;
+
+exports[`headers option as a function should handle GET request with headers as a function: page errors 1`] = `Array []`;
+
+exports[`headers option as a function should handle GET request with headers as a function: response headers x-bar 1`] = `
+"key1=value1
+key2=value2"
+`;
+
+exports[`headers option as a function should handle GET request with headers as a function: response status 1`] = `200`;
+
+exports[`headers option as a string should handle GET request with headers: console messages 1`] = `Array []`;
+
+exports[`headers option as a string should handle GET request with headers: page errors 1`] = `Array []`;
+
+exports[`headers option as a string should handle GET request with headers: response headers x-foo 1`] = `"dev-server headers"`;
+
+exports[`headers option as a string should handle GET request with headers: response status 1`] = `200`;
+
+exports[`headers option as an array should handle GET request with headers as an array: console messages 1`] = `Array []`;
+
+exports[`headers option as an array should handle GET request with headers as an array: page errors 1`] = `Array []`;
+
+exports[`headers option as an array should handle GET request with headers as an array: response headers x-bar 1`] = `
+"key1=value1
+key2=value2"
+`;
+
+exports[`headers option as an array should handle GET request with headers as an array: response status 1`] = `200`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: console messages 1`] = `Array []`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: page errors 1`] = `Array []`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: response headers x-foo 1`] = `"dev-middleware-headers"`;
+
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: response status 1`] = `200`;

test/e2e/headers.test.js

@@ -0,0 +1,250 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/simple-config/webpack.config");
+const runBrowser = require("../helpers/run-browser");
+const port = require("../ports-map")["headers-option"];
+
+describe("headers option", () => {
+  describe("as a string", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          headers: { "X-Foo": "dev-server headers" },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should handle GET request with headers", 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.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.headers()["x-foo"]).toMatchSnapshot(
+        "response headers x-foo"
+      );
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("as an array", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          headers: { "X-Bar": ["key1=value1", "key2=value2"] },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should handle GET request with headers as an array", 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.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.headers()["x-bar"]).toMatchSnapshot(
+        "response headers x-bar"
+      );
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("as a function", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          headers: () => {
+            return { "X-Bar": ["key1=value1", "key2=value2"] };
+          },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should handle GET request with headers as a function", 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.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.headers()["x-bar"]).toMatchSnapshot(
+        "response headers x-bar"
+      );
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("dev middleware headers take precedence for dev middleware output files", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          headers: { "X-Foo": "dev-server-headers" },
+          devMiddleware: {
+            headers: { "X-Foo": "dev-middleware-headers" },
+          },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should handle GET request with headers as a function", 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.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.headers()["x-foo"]).toMatchSnapshot(
+        "response headers x-foo"
+      );
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+});