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

@@ -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);
       });
   });
 });

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 =

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>

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">