test cases and misc refactoring

ProjectEvergreen · Oct 4, 2024 · 59367c6 · 59367c6
1 parent 210b857
commit 59367c6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/components/blog-posts-list/blog-posts-list.js b/src/components/blog-posts-list/blog-posts-list.js
@@ -17,9 +17,12 @@ export default class BlogPostsList extends HTMLElement {
             const { title, route } = post;
             const { coverImage, abstract = "", published } = post.data;
             const date = new Date(published);
-            const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth();
-            const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
-            const time = `${date.getFullYear()}.${month}.${day}`;
+            const month =
+              date.getMonth() + 1 < 10 ? `0${date.getUTCMonth() + 1}` : date.getUTCMonth() + 1;
+            const day = date.getDate() < 10 ? `0${date.getUTCDate()}` : date.getUTCDate();
+            const year = date.getFullYear();
+            const displayTime = `${year}.${month}.${day}`;
+            const dateTime = `${year}-${month}-${day}`;
             const coverBackground = coverImage ? coverImage : "/assets/greenwood-logo-leaf.svg";
             const coverBackgroundPadding =
               coverImage && coverImage !== "/assets/greenwood-logo-g.svg" ? "4px" : "14px";
@@ -38,7 +41,9 @@ export default class BlogPostsList extends HTMLElement {
 
                   <div class="${styles.postsListItemContentContainer}">
                     <h2 class="${styles.postsListItemContentTitle}">${title}</h2>
-                    <span class="${styles.postsListItemContentPublished}">Published: ${time}</span>
+                    <span class="${styles.postsListItemContentPublished}">Published: 
+                      <time datetime="${dateTime}">${displayTime}</time>
+                    </span>
                     <p class="${styles.postsListItemContentAbstract}">${abstract}</p>
                   </div>
 

diff --git a/src/components/blog-posts-list/blog-posts-list.module.css b/src/components/blog-posts-list/blog-posts-list.module.css
@@ -57,6 +57,10 @@
   margin: 0 0 var(--size-3) 0;
   padding: 0 0 var(--size-2) 0;
   border-bottom: 1px solid var(--color-black);
+
+  & time {
+    font-size: inherit;
+  }
 }
 
 .postsListItemContentAbstract {

diff --git a/src/components/blog-posts-list/blog-posts-list.spec.js b/src/components/blog-posts-list/blog-posts-list.spec.js
@@ -78,6 +78,18 @@ describe("Components/Blog Posts List", () => {
       });
     });
 
+    it("should have the expected published time", () => {
+      const published = list.querySelectorAll("[datetime]");
+
+      expect(published.length).to.equal(expectedBlogPosts.length);
+
+      published.forEach((time, i) => {
+        expect(time.textContent).to.equal(
+          expectedBlogPosts[i].data.published.split("T")[0].replace(/-/g, "."),
+        );
+      });
+    });
+
     it("should have the expected abstract with the right content", () => {
       const paragraphs = list.querySelectorAll("p");