Feat/e2e testing for article sorting

app/(app)/articles/_client.tsx

@@ -124,6 +124,7 @@ const ArticlesPage = () => {
                           readTimeMins,
                           id,
                           currentUserBookmarkedPost,
+                          likes,
                         }) => {
                           // TODO: Bump posts that were recently updated to the top and show that they were updated recently
                           if (!published) return null;
@@ -140,6 +141,7 @@ const ArticlesPage = () => {
                               date={published}
                               readTime={readTimeMins}
                               bookmarkedInitialState={currentUserBookmarkedPost}
+                              likes={likes}
                             />
                           );
                         },

components/ArticlePreview/ArticlePreview.tsx

@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
 import {
   BookmarkIcon,
   EllipsisHorizontalIcon,
+  HeartIcon,
 } from "@heroicons/react/20/solid";
 import {
   Menu,
@@ -39,6 +40,7 @@ type Props = {
   menuOptions?: Array<ButtonOptions | LinkOptions>;
   showBookmark?: boolean;
   bookmarkedInitialState?: boolean;
+  likes: number;
 };
 
 const ArticlePreview: NextPage<Props> = ({
@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
   menuOptions,
   showBookmark = true,
   bookmarkedInitialState = false,
+  likes,
 }) => {
   const { data: session } = useSession();
   const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
                 <>
                   <span aria-hidden="true">&middot;</span>
                   <span>{readTime} min read</span>
+                  {likes && (
+                    <>
+                      <span aria-hidden="true">&middot;</span>
+                      <span data-likes={likes}>{likes}</span>
+                      <HeartIcon
+                        className={`relative top-[1px] h-3.5 w-3.5 fill-red-400`}
+                      />
+                    </>
+                  )}
                 </>
               )}
               <div className="flex items-center justify-start"></div>

e2e/articles.spec.ts

@@ -76,6 +76,60 @@ test.describe("Unauthenticated Articles Page", () => {
       page.getByText("Sign in or sign up to leave a comment"),
     ).toBeVisible();
   });
+
+  test("Should sort articles by Newest", async ({ page }) => {
+    await page.goto("http://localhost:3000/articles");
+    await page.waitForSelector("article");
+
+    const articles = await page.$$eval("article", (articles) => {
+      return articles.map((article) => ({
+        date: article.querySelector("time")?.dateTime,
+      }));
+    });
+    const isSortedNewest = articles.every((article, index, arr) => {
+      if (index === arr.length - 1) return true;
+      if (!article.date || !arr[index + 1].date) return false;
+      return new Date(article.date) >= new Date(arr[index + 1].date!);
+    });
+    expect(isSortedNewest).toBeTruthy();
+  });
+
+  test("Should sort articles by Oldest", async ({ page }) => {
+    await page.goto("http://localhost:3000/articles?filter=oldest");
+    await page.waitForSelector("article");
+    const articles = await page.$$eval("article", (articles) => {
+      return articles.map((article) => ({
+        date: article.querySelector("time")?.dateTime,
+      }));
+    });
+    const isSortedOldest = articles.every((article, index, arr) => {
+      if (index === arr.length - 1) return true;
+      if (!article.date || !arr[index + 1].date) return false;
+      return new Date(article.date) <= new Date(arr[index + 1].date!);
+    });
+    expect(isSortedOldest).toBeTruthy();
+  });
+
+  test("Should sort articles by Top - likes", async ({ page }) => {
+    await page.goto("http://localhost:3000/articles?filter=top");
+    await page.waitForSelector("article");
+
+    const articles = await page.$$eval("article", (articles) => {
+      return articles.map((article) => ({
+        likes: parseInt(
+          article.querySelector("[data-likes]")?.getAttribute("data-likes") ||
+            "0",
+          10,
+        ),
+      }));
+    });
+
+    const isSortedTop = articles.every((article, index, arr) => {
+      if (index === arr.length - 1) return true;
+      return article.likes >= arr[index + 1].likes;
+    });
+    expect(isSortedTop).toBeTruthy();
+  });
 });
 
 test.describe("Authenticated Articles Page", () => {