From fee0ba78dc26ba25fb52d2411a072d6a158a9049 Mon Sep 17 00:00:00 2001
From: Mahdi Khashan <mahdikhashan1@gmail.com>
Date: Sat, 3 Aug 2024 21:13:10 +0200
Subject: [PATCH] fix: skip `should not show initially, then show on an error,
 then hide on fix` in overlay.test.js

---
 test/e2e/overlay.test.js | 139 ++++++++++++++++++++-------------------
 1 file changed, 73 insertions(+), 66 deletions(-)

diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index 0c6f80a971..37b5e105ca 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -229,88 +229,95 @@ test.describe("overlay", { tag: ["@flaky", "@fails"] }, () => {
     }
   });
 
-  test("should not show initially, then show on an error, then hide on fix", async ({
-    page,
-  }) => {
-    const compiler = webpack(config);
-    const devServerOptions = {
-      port,
-    };
-    const server = new Server(devServerOptions, compiler);
+  test.skip(
+    "should not show initially, then show on an error, then hide on fix",
+    {
+      annotation: {
+        type: "@fails",
+        description: "on ubuntu and windows",
+      },
+    },
+    async ({ page }) => {
+      const compiler = webpack(config);
+      const devServerOptions = {
+        port,
+      };
+      const server = new Server(devServerOptions, compiler);
 
-    await server.start();
+      await server.start();
 
-    const pathToFile = path.resolve(
-      __dirname,
-      "../fixtures/overlay-config/foo.js",
-    );
-    const originalCode = fs.readFileSync(pathToFile);
+      const pathToFile = path.resolve(
+        __dirname,
+        "../fixtures/overlay-config/foo.js",
+      );
+      const originalCode = fs.readFileSync(pathToFile);
 
-    try {
-      await page.goto(`http://localhost:${port}/`, {
-        waitUntil: "networkidle0",
-      });
+      try {
+        await page.goto(`http://localhost:${port}/`, {
+          waitUntil: "networkidle0",
+        });
 
-      let pageHtml = await page.evaluate(() => document.body.outerHTML);
-      let overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+        let pageHtml = await page.evaluate(() => document.body.outerHTML);
+        let overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
-      expect(
-        await prettier.format(pageHtml, {
-          parser: "html",
-          plugins: [prettierHTML, prettierCSS],
-        }),
-      ).toMatchSnapshotWithArray("page html initial");
+        expect(
+          await prettier.format(pageHtml, {
+            parser: "html",
+            plugins: [prettierHTML, prettierCSS],
+          }),
+        ).toMatchSnapshotWithArray("page html initial");
 
-      fs.writeFileSync(pathToFile, "`;");
+        fs.writeFileSync(pathToFile, "`;");
 
-      await page.waitForSelector("#webpack-dev-server-client-overlay");
+        await page.waitForSelector("#webpack-dev-server-client-overlay");
 
-      overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+        overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
-      pageHtml = await page.evaluate(() => document.body.outerHTML);
+        pageHtml = await page.evaluate(() => document.body.outerHTML);
 
-      const overlayFrame = await overlayHandle.contentFrame();
+        const overlayFrame = await overlayHandle.contentFrame();
 
-      const overlayHtml = await overlayFrame.evaluate(
-        () => document.body.outerHTML,
-      );
+        const overlayHtml = await overlayFrame.evaluate(
+          () => document.body.outerHTML,
+        );
 
-      expect(
-        await prettier.format(pageHtml, {
-          parser: "html",
-          plugins: [prettierHTML, prettierCSS],
-        }),
-      ).toMatchSnapshotWithArray("page html with error");
-      expect(
-        await prettier.format(overlayHtml, {
-          parser: "html",
-          plugins: [prettierHTML, prettierCSS],
-        }),
-      ).toMatchSnapshotWithArray("overlay html");
+        expect(
+          await prettier.format(pageHtml, {
+            parser: "html",
+            plugins: [prettierHTML, prettierCSS],
+          }),
+        ).toMatchSnapshotWithArray("page html with error");
+        expect(
+          await prettier.format(overlayHtml, {
+            parser: "html",
+            plugins: [prettierHTML, prettierCSS],
+          }),
+        ).toMatchSnapshotWithArray("overlay html");
 
-      fs.writeFileSync(pathToFile, originalCode);
+        fs.writeFileSync(pathToFile, originalCode);
 
-      await page.waitForSelector("#webpack-dev-server-client-overlay", {
-        hidden: true,
-      });
+        await page.waitForSelector("#webpack-dev-server-client-overlay", {
+          hidden: true,
+        });
 
-      pageHtml = await page.evaluate(() => document.body.outerHTML);
-      overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+        pageHtml = await page.evaluate(() => document.body.outerHTML);
+        overlayHandle = await page.$("#webpack-dev-server-client-overlay");
 
-      expect(
-        await prettier.format(pageHtml, {
-          parser: "html",
-          plugins: [prettierHTML, prettierCSS],
-        }),
-      ).toMatchSnapshotWithArray("page html after fix");
-    } catch (error) {
-      fs.writeFileSync(pathToFile, originalCode);
-      throw error;
-    } finally {
-      await server.stop();
-      fs.writeFileSync(pathToFile, originalCode);
-    }
-  });
+        expect(
+          await prettier.format(pageHtml, {
+            parser: "html",
+            plugins: [prettierHTML, prettierCSS],
+          }),
+        ).toMatchSnapshotWithArray("page html after fix");
+      } catch (error) {
+        fs.writeFileSync(pathToFile, originalCode);
+        throw error;
+      } finally {
+        await server.stop();
+        fs.writeFileSync(pathToFile, originalCode);
+      }
+    },
+  );
 
   // TODO: Fix this test, it fails on re-run
   test.skip("should not show initially, then show on an error, then show other error, then hide on fix", async ({