chore: removed flaky test from article suite

Author: JohnAllenTech

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>

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 }) => {

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: [