chore: refactor e2e tests to playwright

.gitignore

@@ -21,3 +21,7 @@ test/fixtures/watch-files-config/public/assets/non-exist.txt
 test/fixtures/reload-config/main.css
 test/fixtures/reload-config-2/main.css
 !/test/fixtures/static-config/public/node_modules
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -41,6 +41,7 @@
     "test:coverage": "npm run test:only -- --coverage",
     "test:watch": "npm run test:coverage --watch",
     "test": "npm run test:coverage",
+    "test:playwright": "npx playwright test",
     "pretest": "npm run lint",
     "prepare": "husky && npm run build",
     "release": "standard-version"
@@ -87,6 +88,7 @@
     "@babel/runtime": "^7.22.5",
     "@commitlint/cli": "^18.5.0",
     "@commitlint/config-conventional": "^18.5.0",
+    "@playwright/test": "^1.42.0",
     "@types/compression": "^1.7.2",
     "@types/default-gateway": "^3.0.1",
     "@types/node": "^20.11.16",

playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**q
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./test/e2e-playwright",
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: 0,
+  /* Opt out of parallel tests on CI. */
+  workers: undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-and-respect-the-ignoreWarnings-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-assets-false-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-colors-green-32m-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-errors-only-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-false-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-undefined-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-using-warningsFilter-test-value-for-the-stats-option-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactor.test.js-snapshots/stats-should-work-when-stats-is-not-specified-1-chromium-darwin.txt

@@ -0,0 +1 @@
+["[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.","[HMR] Waiting for update signal from WDS...","Hey."]

test/e2e-playwright/stats-refactored.test.js

@@ -0,0 +1,143 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/client-config/webpack.config");
+const HTMLGeneratorPlugin = require("../helpers/html-generator-plugin");
+const port = require("../ports-map").stats;
+const { test } = require("@playwright/test");
+const { describe } = require("@playwright/test");
+const { expect } = require("@playwright/test");
+
+describe("stats", () => {
+  const cases = [
+    {
+      title: 'should work when "stats" is not specified',
+      webpackOptions: {},
+    },
+    {
+      title: 'should work using "{}" value for the "stats" option',
+      webpackOptions: {
+        stats: {},
+      },
+    },
+    {
+      title: 'should work using "undefined" value for the "stats" option',
+      webpackOptions: {
+        // eslint-disable-next-line no-undefined
+        stats: undefined,
+      },
+    },
+    {
+      title: 'should work using "false" value for the "stats" option',
+      webpackOptions: {
+        stats: false,
+      },
+    },
+    {
+      title: 'should work using "errors-only" value for the "stats" option',
+      webpackOptions: {
+        stats: "errors-only",
+      },
+    },
+    {
+      title:
+        'should work using "{ assets: false }" value for the "stats" option',
+      webpackOptions: {
+        stats: {
+          assets: false,
+        },
+      },
+    },
+    {
+      title:
+        'should work using "{ colors: { green: "\u001b[32m" }}" value for the "stats" option',
+      webpackOptions: {
+        stats: {
+          colors: {
+            green: "\u001b[32m",
+          },
+        },
+      },
+    },
+    {
+      title:
+        'should work using "{ warningsFilter: \'test\' }" value for the "stats" option',
+      webpackOptions: {
+        plugins: [
+          {
+            apply(compiler) {
+              compiler.hooks.thisCompilation.tap(
+                "warnings-webpack-plugin",
+                (compilation) => {
+                  compilation.warnings.push(
+                    new Error("Warning from compilation"),
+                  );
+                },
+              );
+            },
+          },
+          new HTMLGeneratorPlugin(),
+        ],
+        stats: { warningsFilter: /Warning from compilation/ },
+      },
+    },
+  ];
+
+  if (webpack.version.startsWith("5")) {
+    cases.push({
+      title: 'should work and respect the "ignoreWarnings" option',
+      webpackOptions: {
+        plugins: [
+          {
+            apply(compiler) {
+              compiler.hooks.thisCompilation.tap(
+                "warnings-webpack-plugin",
+                (compilation) => {
+                  compilation.warnings.push(
+                    new Error("Warning from compilation"),
+                  );
+                },
+              );
+            },
+          },
+          new HTMLGeneratorPlugin(),
+        ],
+        ignoreWarnings: [/Warning from compilation/],
+      },
+    });
+  }
+
+  cases.forEach((testCase) => {
+    test(testCase.title, async ({ page }) => {
+      const compiler = webpack({ ...config, ...testCase.webpackOptions });
+      const devServerOptions = {
+        port,
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      try {
+        const consoleMessages = [];
+
+        page.on("console", (message) => {
+          consoleMessages.push(message);
+        });
+
+        await page.goto(`http://localhost:${port}/`, {
+          waitUntil: "networkidle0",
+        });
+
+        expect(
+          JSON.stringify(consoleMessages.map((message) => message.text())),
+        ).toMatchSnapshot();
+      } catch (error) {
+        throw error;
+      } finally {
+        await server.stop();
+      }
+    })
+  })
+
+});