Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NiallJoeMaher merged 9 commits into from
Oct 22, 2024
Merged

Feat/e2e testing for article sorting #1159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a2a66e6
show like count on article preview
John-Paul-Larkin Oct 20, 2024
dfba6d8
test article sort order by newest, oldest and top
John-Paul-Larkin Oct 20, 2024
629bf79
rebase
John-Paul-Larkin Oct 20, 2024
d029c8d
fix merge issues
John-Paul-Larkin Oct 20, 2024
036d732
split sort into three seperate tests
John-Paul-Larkin Oct 20, 2024
a17ad5b
add assertion issortedtop
John-Paul-Larkin Oct 20, 2024
3e81c53
Merge branch 'develop' into feat/e2e-testing-for-article-sorting
NiallJoeMaher Oct 21, 2024
d7a1c07
move tests to unauthenticated section
John-Paul-Larkin Oct 21, 2024
232c1d8
Merge branch 'develop' into feat/e2e-testing-for-article-sorting
NiallJoeMaher Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/(app)/articles/_client.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
date={published}
readTime={readTimeMins}
bookmarkedInitialState={currentUserBookmarkedPost}
likes={likes}
/>
);
},
Expand Down
12 changes: 12 additions & 0 deletions components/ArticlePreview/ArticlePreview.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
BookmarkIcon,
EllipsisHorizontalIcon,
HeartIcon,
} from "@heroicons/react/20/solid";
import {
Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
menuOptions?: Array<ButtonOptions | LinkOptions>;
showBookmark?: boolean;
bookmarkedInitialState?: boolean;
likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
menuOptions,
showBookmark = true,
bookmarkedInitialState = false,
likes,
}) => {
const { data: session } = useSession();
const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
<>
<span aria-hidden="true">&middot;</span>
<span>{readTime} min read</span>
{likes && (

@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense

@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?

@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?

I added it to the card in this PR.
if you take a look at the PR description you will see how it looks.
Heart icon with the like count. If there are no likes it wont show.

I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.
The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.

<>
<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>
Expand Down
54 changes: 54 additions & 0 deletions e2e/articles.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Feat/e2e testing for article sorting#1159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

NiallJoeMaher
merged 9 commits into

from

Oct 22, 2024
 Merged


Feat/e2e testing for article sorting
#1159
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
a2a66e6

show like count on article preview


John-Paul-Larkin Oct 20, 2024
dfba6d8

test article sort order by newest, oldest and top


John-Paul-Larkin Oct 20, 2024
629bf79

rebase


John-Paul-Larkin Oct 20, 2024
d029c8d

fix merge issues


John-Paul-Larkin Oct 20, 2024
036d732

split sort into three seperate tests


John-Paul-Larkin Oct 20, 2024
a17ad5b

add assertion issortedtop


John-Paul-Larkin Oct 20, 2024
3e81c53

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 21, 2024
d7a1c07

move tests to unauthenticated section


John-Paul-Larkin Oct 21, 2024
232c1d8

Merge branch 'develop' into feat/e2e-testing-for-article-sorting


NiallJoeMaher Oct 22, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
app/(app)/articles/_client.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand All@@ -140,6 +141,7 @@ const ArticlesPage = () => {
 date={published}
 readTime={readTimeMins}
 bookmarkedInitialState={currentUserBookmarkedPost}
 likes={likes}
 />
 );
 },
Expand Down

12 changes: 12 additions & 0 deletions
components/ArticlePreview/ArticlePreview.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import { Temporal } from "@js-temporal/polyfill";
import {
 BookmarkIcon,
 EllipsisHorizontalIcon,
 HeartIcon,
} from "@heroicons/react/20/solid";
import {
 Menu,
Expand DownExpand Up@@ -39,6 +40,7 @@ type Props = {
 menuOptions?: Array<ButtonOptions | LinkOptions>;
 showBookmark?: boolean;
 bookmarkedInitialState?: boolean;
 likes: number;
};

const ArticlePreview: NextPage<Props> = ({
Expand All@@ -54,6 +56,7 @@ const ArticlePreview: NextPage<Props> = ({
 menuOptions,
 showBookmark = true,
 bookmarkedInitialState = false,
 likes,
}) => {
 const { data: session } = useSession();
 const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
Expand DownExpand Up@@ -125,6 +128,15 @@ const ArticlePreview: NextPage<Props> = ({
 <>
 <span aria-hidden="true">&middot;</span>
 <span>{readTime} min read</span>
 {likes && (
@JohnAllenTechJohnAllenTechOct 20, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting because you need a way to know how many likes an article has without clicking into it. That makes sense
@NiallJoeMaherNiallJoeMaherOct 22, 2024

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
@John-Paul-LarkinJohn-Paul-LarkinOct 22, 2024•

edited

Loading

Copy link


Copy Markdown

MemberAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NiallJoeMaher
Why do we need to know the amount of likes before it's loaded? 🤔 I don't think it's shown on the card?
I added it to the card in this PR.

if you take a look at the PR description you will see how it looks.

Heart icon with the like count. If there are no likes it wont show.
I figured you wouldnt like this 🤣 so I added it as a data attribute and can edit to remove it from the card.

The like count has to be included somewhere in the html, so playwright can grab it. For the sort by top test.
 <>
 <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>
Expand Down

54 changes: 54 additions & 0 deletions
e2e/articles.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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", () => {
Expand Down