From d193bfb1b4b415c6dd875e492e664676689908aa Mon Sep 17 00:00:00 2001
From: Riceball <42161586+riceball-tw@users.noreply.github.com>
Date: Sat, 15 Jun 2024 13:46:45 +0800
Subject: [PATCH] test: basic post e2e (#77)

* feat: Add data attribute for post e2e

* feat: Add basic post e2e

* fix: Type Error

* fix: Syntax error
---
 cypress/e2e/post/post.cy.ts        | 29 ++++++++++++++++++++++-------
 src/components/app/Utteranc.astro  |  2 +-
 src/components/post/TagsList.astro |  4 ++--
 src/pages/post/[...slug].astro     |  1 +
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/post/post.cy.ts b/cypress/e2e/post/post.cy.ts
index 3e32ce6c..9ecd921b 100644
--- a/cypress/e2e/post/post.cy.ts
+++ b/cypress/e2e/post/post.cy.ts
@@ -1,16 +1,31 @@
 describe('Post is effective', () => {
-  it('Page is effective', () => {
-    cy.visit('/post/demo-post', { failOnStatusCode: false });
+  beforeEach(() => {
+    cy.visit('/post/demo-post');
+  });
 
-    // Post Header
+  it('Header should visible and working', () => {
     cy.dataCy('post-icon-container').find('svg').should('exist');
     cy.dataCy('post-title').should('have.prop', 'tagName', 'H1').should('not.be.empty');
     cy.dataCy('post-subtitle').should('not.be.empty');
     cy.dataCy('category').should('not.be.empty');
-    cy.dataCy('tags')
-      .find('[data-cy=tag]')
-      .each(($tag) => {
-        cy.wrap($tag).should('not.be.empty');
+    cy.dataCy('tag-link').each(($link) => {
+      cy.wrap($link).should('not.be.empty');
+      cy.request('GET', $link.attr('href')).its('status').should('eq', 200);
+    });
+  });
+
+  it('Comment should load', () => {
+    cy.dataCy('post-comment').scrollIntoView();
+    cy.dataCy('post-comment').should('not.be.empty');
+  });
+
+  it('Heading links should visible and working', () => {
+    cy.dataCy('post-content')
+      .find(
+        'h2 .rehype-auto-link, h3 .rehype-auto-link, h4 .rehype-auto-link, h5 .rehype-auto-link, h6 .rehype-auto-link',
+      )
+      .each(($link) => {
+        cy.request('GET', $link.attr('href')).its('status').should('eq', 200);
       });
   });
 });
diff --git a/src/components/app/Utteranc.astro b/src/components/app/Utteranc.astro
index 53b5ede2..6e8d1bb5 100644
--- a/src/components/app/Utteranc.astro
+++ b/src/components/app/Utteranc.astro
@@ -1,4 +1,4 @@
-<div data-pagefind-ignore class="comments">
+<div data-cy="post-comment" data-pagefind-ignore class="comments">
   <script is:inline>
     function isDark() {
       const isSystemPerferDark =
diff --git a/src/components/post/TagsList.astro b/src/components/post/TagsList.astro
index bb4c803e..9667c9d0 100644
--- a/src/components/post/TagsList.astro
+++ b/src/components/post/TagsList.astro
@@ -10,11 +10,11 @@ const { tags, tagHrefs } = Astro.props;
   {
     tagHrefs ? tagHrefs.map((href, index) => (
       <li data-cy="tag">
-        <a data-astro-prefetch class="p-1.5 inline-block capitalize opacity-60 hover:opacity-100" {href}>
+        <a data-cy="tag-link" data-astro-prefetch class="p-1.5 inline-block capitalize opacity-60 hover:opacity-100" {href}>
           <span>#</span> <span data-pagefind-filter="tag">{tags[index]}</span>
         </a>
       </li>
-    )) : tags.map((tag) => (
+  )) : tags.map((tag) => (
       <li data-cy="tag">
         <span class="p-1.5 inline-block capitalize opacity-60 hover:opacity-100">
           <span>#</span> <span data-pagefind-filter="tag">{tag}</span>
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index 0542cf70..ab01bd96 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -62,6 +62,7 @@ const rehypeAutoLinkStyle = '[&>h2:hover>.rehype-auto-link]:opacity-100 [&>h3:ho
     <article
       data-pagefind-body
       data-article
+      data-cy="post-content"
       class=`article-grid [grid-template-columns:1fr_min(65ch,_100%)_1fr] lg:px-auto prose mb-16 block w-full max-w-none px-8 dark:prose-invert md:prose-xl lg:grid ${rehypeAutoLinkStyle}`
     >
       <header class="not-prose mb-16 col-start-2">