From 91c46271db4f2615864c878d101dcb84fca7a987 Mon Sep 17 00:00:00 2001
From: John <46611809+JohnAllenTech@users.noreply.github.com>
Date: Sat, 19 Oct 2024 13:02:24 -0600
Subject: [PATCH] chore: removed flaky test from article suite (#1156)

---
 components/ArticlePreview/ArticleLoading.tsx |  5 ++-
 e2e/articles.spec.ts                         | 37 ++++++++++++--------
 playwright.config.ts                         |  3 ++
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/ArticlePreview/ArticleLoading.tsx b/components/ArticlePreview/ArticleLoading.tsx
index bacf7273..f09bf828 100644
--- a/components/ArticlePreview/ArticleLoading.tsx
+++ b/components/ArticlePreview/ArticleLoading.tsx
@@ -1,5 +1,8 @@
 const ArticleLoading = () => (
-  <div className="my-4 w-full border-l-4 border-l-pink-600 bg-white p-4 shadow dark:bg-neutral-900">
+  <div
+    className="my-4 w-full border-l-4 border-l-pink-600 bg-white p-4 shadow dark:bg-neutral-900"
+    data-testid="article-loading-indicator"
+  >
     <div className="animate-pulse">
       <div className="flex space-x-4">
         <div className="h-10 w-10 rounded-full bg-neutral-300 dark:bg-neutral-800"></div>
diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 4b1a9929..48361487 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -102,27 +102,36 @@ test.describe("Authenticated Articles Page", () => {
     // Waits for articles to be loaded
     await page.waitForSelector("article");
 
-    const initialArticleCount = await page.$$eval(
-      "article",
-      (articles) => articles.length,
-    );
+    // This delays the requests by 100ms.
+    // This is needed as the load more article request was resolving too fast
+    await page.route("**/*", async (route) => {
+      await new Promise((f) => setTimeout(f, 100));
+      await route.continue();
+    });
 
     if (!isMobile) {
-      await page.getByText("Code Of Conduct").scrollIntoViewIfNeeded();
-      await page.waitForTimeout(5000);
-      const finalArticleCount = await page.$$eval(
-        "article",
-        (articles) => articles.length,
-      );
-      expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
+      const articleLocator = page.locator("article");
+      const initialArticleCount = await articleLocator.count();
+
+      await page
+        .getByRole("link", { name: "Code Of Conduct" })
+        .scrollIntoViewIfNeeded();
+
+      // We expect to see the loading indicator become visible why loading and then hidden when more articles are loaded
+      await expect(page.getByTestId("article-loading-indicator")).toBeVisible();
+      await expect(page.getByTestId("article-loading-indicator")).toBeHidden();
+
+      expect(await articleLocator.count()).toBeGreaterThan(initialArticleCount);
     }
 
-    await expect(page.getByText("Home")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
     await expect(
       page.getByLabel("Footer").getByRole("link", { name: "Events" }),
     ).toBeVisible();
-    await expect(page.getByText("Sponsorship")).toBeVisible();
-    await expect(page.getByText("Code Of Conduct")).toBeVisible();
+    await expect(page.getByRole("link", { name: "Sponsorship" })).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Code Of Conduct" }),
+    ).toBeVisible();
   });
 
   test("Should write and publish an article", async ({ page, isMobile }) => {
diff --git a/playwright.config.ts b/playwright.config.ts
index ef8e0e87..6cbc7811 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -29,6 +29,9 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
   },
+  expect: {
+    timeout: 10000,
+  },
 
   /* Configure projects for major browsers */
   projects: [