From a2a66e6cbd63b4701bb3cbe1f8248e09e4d44688 Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 17:28:17 +0100 Subject: [PATCH 1/7] show like count on article preview --- app/(app)/articles/_client.tsx | 2 ++ components/ArticlePreview/ArticlePreview.tsx | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx index de1bc5da..6ad05d83 100644 --- a/app/(app)/articles/_client.tsx +++ b/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} /> ); }, diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx index f8ea7010..35ca13bb 100644 --- a/components/ArticlePreview/ArticlePreview.tsx +++ b/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; showBookmark?: boolean; bookmarkedInitialState?: boolean; + likes: number; }; const ArticlePreview: NextPage = ({ @@ -54,6 +56,7 @@ const ArticlePreview: NextPage = ({ menuOptions, showBookmark = true, bookmarkedInitialState = false, + likes, }) => { const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState); const howManySavedToShow = 3; @@ -124,6 +127,15 @@ const ArticlePreview: NextPage = ({ <> {readTime} min read + {likes && ( + <> + + {likes} + + + )} )}
From dfba6d88200b99248fa358820f3bb9640978cc46 Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 17:34:07 +0100 Subject: [PATCH 2/7] test article sort order by newest, oldest and top --- e2e/articles.spec.ts | 48 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index c47fd357..f5daabd9 100644 --- a/e2e/articles.spec.ts +++ b/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(); + } + }); + } + }); }); From 629bf79988ea96bb72f02cda44ca986d88d525bd Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 18:03:13 +0100 Subject: [PATCH 3/7] rebase --- e2e/articles.spec.ts | 188 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 188 insertions(+) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index f5daabd9..107e5129 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -220,6 +220,194 @@ test.describe("Authenticated Articles Page", () => { await expect(page.getByText(commentContent)).toBeVisible(); }); +}); +import { test, expect } from "playwright/test"; + +test.describe("Unauthenticated Articles Page", () => { + test.beforeEach(async ({ page }) => { + await page.context().clearCookies(); + }); + + test("Should show popular tags", async ({ page, isMobile }) => { + await page.goto("http://localhost:3000/articles"); + await expect( + page.getByRole("heading", { name: "Popular topics" }), + ).toBeVisible({ visible: !isMobile }); + + await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( + { visible: !isMobile }, + ); + }); + + test("Should not show bookmark article icon", async ({ page }) => { + await page.goto("http://localhost:3000/articles"); + + await expect( + page.getByRole("heading", { name: "Recent bookmarks" }), + ).toBeHidden(); + + await expect( + page.locator("article").first().getByLabel("Bookmark this post"), + ).toBeHidden(); + }); + test("Should load more articles when scrolling to the end of the page", async ({ + page, + isMobile, + }) => { + await page.goto("http://localhost:3000/articles"); + // Waits for articles to be loaded + await page.waitForSelector("article"); + + const initialArticleCount = await page.$$eval( + "article", + (articles) => articles.length, + ); + + 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); + } + + await expect(page.getByText("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(); + }); +}); + +test.describe("Authenticated Articles Page", () => { + test("Should show recent bookmarks", async ({ page, isMobile }) => { + await page.goto("http://localhost:3000/articles"); + await expect( + page.getByRole("heading", { name: "Popular topics" }), + ).toBeVisible({ visible: !isMobile }); + + await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( + { visible: !isMobile }, + ); + + await expect( + page.getByRole("heading", { name: "Recent bookmarks" }), + ).toBeVisible({ visible: !isMobile }); + }); + + test("Should show bookmark article icon", async ({ page, isMobile }) => { + await page.goto("http://localhost:3000/articles"); + await expect( + page.getByRole("heading", { name: "Popular topics" }), + ).toBeVisible({ visible: !isMobile }); + + await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( + { visible: !isMobile }, + ); + + await expect( + page.getByRole("heading", { name: "Recent bookmarks" }), + ).toBeVisible({ visible: !isMobile }); + + await expect( + page.locator("article").first().getByLabel("Bookmark this post"), + ).toBeVisible(); + }); + + test("Should load more articles when scrolling to the end of the page", async ({ + page, + isMobile, + }) => { + await page.goto("http://localhost:3000/articles"); + // Waits for articles to be loaded + await page.waitForSelector("article"); + + // 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) { + 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.getByRole("link", { name: "Home" })).toBeVisible(); + await expect( + page.getByLabel("Footer").getByRole("link", { name: "Events" }), + ).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 }) => { + const articleContent = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed."; + const articleTitle = "Lorem Ipsum"; + await page.goto("http://localhost:3000"); + // Waits for articles to be loaded + await page.waitForSelector("article"); + + // Mobile and Desktop have different ways to start writing an article + if (isMobile) { + await expect( + page.getByRole("button", { name: "Open main menu" }), + ).toBeVisible(); + page.getByRole("button", { name: "Open main menu" }).tap(); + await expect(page.getByRole("link", { name: "New Post" })).toBeVisible(); + await page.getByRole("link", { name: "New Post" }).tap(); + } else { + await expect(page.getByRole("link", { name: "New Post" })).toBeVisible(); + await page.getByRole("link", { name: "New Post" }).click(); + } + await page.waitForURL("http:/localhost:3000/create"); + + await page.getByPlaceholder("Article title").fill(articleTitle); + + await page + .getByPlaceholder("Enter your content here 💖") + .fill(articleContent); + + await expect(page.getByRole("button", { name: "Next" })).toBeVisible(); + await page.getByRole("button", { name: "Next" }).click(); + await expect( + page.getByRole("button", { name: "Publish now" }), + ).toBeVisible(); + await page.getByRole("button", { name: "Publish now" }).click(); + await page.waitForURL( + /^http:\/\/localhost:3000\/articles\/lorem-ipsum-.*$/, + ); + + await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible(); + await expect( + page.getByRole("heading", { name: "Lorem Ipsum" }), + ).toBeVisible(); + await expect( + page.getByRole("heading", { name: "Written by E2E Test User" }), + ).toBeVisible(); + await expect( + page.getByRole("heading", { name: "Discussion (0)" }), + ).toBeVisible(); + await expect(page.getByLabel("like-trigger")).toBeVisible(); + await expect(page.getByLabel("bookmark-trigger")).toBeVisible(); + }); test.describe("Article sort order on article page", () => { const sortOptions = ["newest", "oldest", "top"]; From d029c8dc64c203740faaa9aad7dfcb088fccf3df Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 18:05:57 +0100 Subject: [PATCH 4/7] fix merge issues --- e2e/articles.spec.ts | 188 ------------------------------------------- 1 file changed, 188 deletions(-) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index 107e5129..f5daabd9 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -220,194 +220,6 @@ test.describe("Authenticated Articles Page", () => { await expect(page.getByText(commentContent)).toBeVisible(); }); -}); -import { test, expect } from "playwright/test"; - -test.describe("Unauthenticated Articles Page", () => { - test.beforeEach(async ({ page }) => { - await page.context().clearCookies(); - }); - - test("Should show popular tags", async ({ page, isMobile }) => { - await page.goto("http://localhost:3000/articles"); - await expect( - page.getByRole("heading", { name: "Popular topics" }), - ).toBeVisible({ visible: !isMobile }); - - await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( - { visible: !isMobile }, - ); - }); - - test("Should not show bookmark article icon", async ({ page }) => { - await page.goto("http://localhost:3000/articles"); - - await expect( - page.getByRole("heading", { name: "Recent bookmarks" }), - ).toBeHidden(); - - await expect( - page.locator("article").first().getByLabel("Bookmark this post"), - ).toBeHidden(); - }); - test("Should load more articles when scrolling to the end of the page", async ({ - page, - isMobile, - }) => { - await page.goto("http://localhost:3000/articles"); - // Waits for articles to be loaded - await page.waitForSelector("article"); - - const initialArticleCount = await page.$$eval( - "article", - (articles) => articles.length, - ); - - 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); - } - - await expect(page.getByText("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(); - }); -}); - -test.describe("Authenticated Articles Page", () => { - test("Should show recent bookmarks", async ({ page, isMobile }) => { - await page.goto("http://localhost:3000/articles"); - await expect( - page.getByRole("heading", { name: "Popular topics" }), - ).toBeVisible({ visible: !isMobile }); - - await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( - { visible: !isMobile }, - ); - - await expect( - page.getByRole("heading", { name: "Recent bookmarks" }), - ).toBeVisible({ visible: !isMobile }); - }); - - test("Should show bookmark article icon", async ({ page, isMobile }) => { - await page.goto("http://localhost:3000/articles"); - await expect( - page.getByRole("heading", { name: "Popular topics" }), - ).toBeVisible({ visible: !isMobile }); - - await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible( - { visible: !isMobile }, - ); - - await expect( - page.getByRole("heading", { name: "Recent bookmarks" }), - ).toBeVisible({ visible: !isMobile }); - - await expect( - page.locator("article").first().getByLabel("Bookmark this post"), - ).toBeVisible(); - }); - - test("Should load more articles when scrolling to the end of the page", async ({ - page, - isMobile, - }) => { - await page.goto("http://localhost:3000/articles"); - // Waits for articles to be loaded - await page.waitForSelector("article"); - - // 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) { - 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.getByRole("link", { name: "Home" })).toBeVisible(); - await expect( - page.getByLabel("Footer").getByRole("link", { name: "Events" }), - ).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 }) => { - const articleContent = - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae ipsum id metus vestibulum rutrum eget a diam. Integer eget vulputate risus, ac convallis nulla. Mauris sed augue nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam congue posuere tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac augue non libero ullamcorper ornare. Ut commodo ligula vitae malesuada maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sagittis justo non justo placerat, a dapibus sapien volutpat. Nullam ullamcorper sodales justo sed."; - const articleTitle = "Lorem Ipsum"; - await page.goto("http://localhost:3000"); - // Waits for articles to be loaded - await page.waitForSelector("article"); - - // Mobile and Desktop have different ways to start writing an article - if (isMobile) { - await expect( - page.getByRole("button", { name: "Open main menu" }), - ).toBeVisible(); - page.getByRole("button", { name: "Open main menu" }).tap(); - await expect(page.getByRole("link", { name: "New Post" })).toBeVisible(); - await page.getByRole("link", { name: "New Post" }).tap(); - } else { - await expect(page.getByRole("link", { name: "New Post" })).toBeVisible(); - await page.getByRole("link", { name: "New Post" }).click(); - } - await page.waitForURL("http:/localhost:3000/create"); - - await page.getByPlaceholder("Article title").fill(articleTitle); - - await page - .getByPlaceholder("Enter your content here 💖") - .fill(articleContent); - - await expect(page.getByRole("button", { name: "Next" })).toBeVisible(); - await page.getByRole("button", { name: "Next" }).click(); - await expect( - page.getByRole("button", { name: "Publish now" }), - ).toBeVisible(); - await page.getByRole("button", { name: "Publish now" }).click(); - await page.waitForURL( - /^http:\/\/localhost:3000\/articles\/lorem-ipsum-.*$/, - ); - - await expect(page.getByText("Lorem ipsum dolor sit amet,")).toBeVisible(); - await expect( - page.getByRole("heading", { name: "Lorem Ipsum" }), - ).toBeVisible(); - await expect( - page.getByRole("heading", { name: "Written by E2E Test User" }), - ).toBeVisible(); - await expect( - page.getByRole("heading", { name: "Discussion (0)" }), - ).toBeVisible(); - await expect(page.getByLabel("like-trigger")).toBeVisible(); - await expect(page.getByLabel("bookmark-trigger")).toBeVisible(); - }); test.describe("Article sort order on article page", () => { const sortOptions = ["newest", "oldest", "top"]; From 036d7324469199968960e16d6cbb4bf0104d9c04 Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 20:12:24 +0100 Subject: [PATCH 5/7] split sort into three seperate tests --- e2e/articles.spec.ts | 97 +++++++++++++++++++++++--------------------- 1 file changed, 51 insertions(+), 46 deletions(-) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index f5daabd9..13766a47 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -221,51 +221,56 @@ 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(); - } - }); - } + 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; + }); }); }); From a17ad5be81e3100c16038b717c3a9eb5728a76dc Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Sun, 20 Oct 2024 20:37:42 +0100 Subject: [PATCH 6/7] add assertion issortedtop --- e2e/articles.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index 13766a47..3705734c 100644 --- a/e2e/articles.spec.ts +++ b/e2e/articles.spec.ts @@ -249,7 +249,7 @@ test.describe("Authenticated Articles Page", () => { 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!); + return new Date(article.date) <= new Date(arr[index + 1].date!); }); expect(isSortedOldest).toBeTruthy(); }); @@ -272,5 +272,6 @@ test.describe("Authenticated Articles Page", () => { if (index === arr.length - 1) return true; return article.likes >= arr[index + 1].likes; }); + expect(isSortedTop).toBeTruthy(); }); }); From d7a1c07a9af09c082daeb83ab33d1e5b3021962a Mon Sep 17 00:00:00 2001 From: John Paul Larkin <107807466+John-Paul-Larkin@users.noreply.github.com> Date: Mon, 21 Oct 2024 21:31:03 +0100 Subject: [PATCH 7/7] move tests to unauthenticated section --- e2e/articles.spec.ts | 108 +++++++++++++++++++++---------------------- 1 file changed, 54 insertions(+), 54 deletions(-) diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts index 70636f19..539299f5 100644 --- a/e2e/articles.spec.ts +++ b/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", () => { @@ -220,58 +274,4 @@ test.describe("Authenticated Articles Page", () => { await expect(page.getByText(commentContent)).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(); - }); });