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 [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
   const howManySavedToShow = 3;
@@ -124,6 +127,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

@@ -220,4 +220,52 @@ test.describe("Authenticated Articles Page", () => {
 
     await expect(page.getByText(commentContent)).toBeVisible();
   });
+
+  test.describe("Article sort order on article page", () => {
+    const sortOptions = ["newest", "oldest", "top"];
+
+    for (const sortOption of sortOptions) {
+      test(`Should sort articles by ${sortOption}`, async ({ page }) => {
+        const baseUrl = "http://localhost:3000/articles";
+        const url =
+          sortOption === "newest" ? baseUrl : `${baseUrl}?filter=${sortOption}`;
+
+        await page.goto(url);
+        await page.waitForSelector("article");
+
+        const articles = await page.$$eval("article", (articles) => {
+          return articles.map((article) => ({
+            date: article.querySelector("time")?.dateTime,
+            likes: parseInt(
+              article
+                .querySelector("[data-likes]")
+                ?.getAttribute("data-likes") || "0",
+            ),
+          }));
+        });
+
+        if (sortOption === "newest") {
+          const isSortedNewest = articles.every((article, index, arr) => {
+            if (index === arr.length - 1) return true;
+            if (!article.date) return false;
+            return new Date(article.date) >= new Date(arr[index + 1].date!);
+          });
+          expect(isSortedNewest).toBeTruthy();
+        } else if (sortOption === "oldest") {
+          const isSortedOldest = articles.every((article, index, arr) => {
+            if (index === arr.length - 1) return true;
+            if (!article.date) return false;
+            return new Date(article.date) <= new Date(arr[index + 1].date!);
+          });
+          expect(isSortedOldest).toBeTruthy();
+        } else if (sortOption === "top") {
+          const isSortedTop = articles.every((article, index, arr) => {
+            if (index === arr.length - 1) return true;
+            return article.likes >= arr[index + 1].likes;
+          });
+          expect(isSortedTop).toBeTruthy();
+        }
+      });
+    }
+  });
 });