Skip to content

Commit

Permalink
fix: set Date to be consistent for snapshots in Announcements bar (#772)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdams
gdams authored Feb 7, 2025
1 parent 2f031f1 commit 7982074
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 102 deletions.
36 changes: 22 additions & 14 deletions src/components/Announcements/TabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,31 @@ const TabContent = ({ posts }) => {
return (
<article>
{posts.map((post, index) => (
<>
<Link to={post.node.fields.postPath} key={index}>
<div className="text-[#c4bfce">
<p className="texxt-[12px] leading-[133.333%] text-lightgrey mb-0">
{Math.floor((new Date().getTime() - new Date(post.node.frontmatter.date).getTime()) / (1000 * 60 * 60 * 24 * 7))} weeks ago
</p>
<div key={index}>
<Link to={post.node.fields.postPath}>
<div className="text-[#c4bfce">
<p className="text-[12px] leading-[133.333%] text-lightgrey mb-0">
{(() => {
const daysAgo = Math.floor((new Date().getTime() - new Date(post.node.frontmatter.date).getTime()) / (1000 * 60 * 60 * 24));
if (daysAgo < 7) {
return daysAgo === 1 ? `1 day ago` : `${daysAgo} weeks ago`;
} else {
const weeksAgo = Math.floor(daysAgo / 7);
return weeksAgo === 1 ? `1 week ago` : `${weeksAgo} weeks ago`;
}
})()}
</p>

<h3 className="text-[20px] leading-[140%] text-white">
{post.node.frontmatter.title}
</h3>
<p className="tab-button-text text-sm text-lightgrey pt-2">
{post.node.frontmatter.description}
</p>
</div>
<h3 className="text-[20px] leading-[140%] text-white">
{post.node.frontmatter.title}
</h3>
<p className="tab-button-text text-sm text-lightgrey pt-2">
{post.node.frontmatter.description}
</p>
</div>
</Link>
<span className="h-[1px] w-full bg-[#3E3355] inline-block my-4"></span>
</>
</div>
))}
</article>
)
Expand Down
35 changes: 35 additions & 0 deletions src/components/Announcements/__tests__/Annnouncements.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,41 @@ import { render } from "@testing-library/react"
import { describe, expect, it, vi } from "vitest"
import Announcements from ".."

const mockData = ({id, days}) => ({
node: {
id,
frontmatter: {
title: `Test Announcement ${id}`,
date: Date.now() - 1000 * 60 * 60 * 24 * days,
description: `Description for announcement ${id}`,
tags: ["release-notes"],
},
fields: {
postPath: `/test-announcement-${id}`,
},
},
})

vi.mock("gatsby", async () => {
const actualGatsby = await vi.importActual("gatsby")
return {
...actualGatsby,
// This no-op function prevents the error by simply returning the query string.
graphql: (strings: TemplateStringsArray, ..._args: any[]) => strings[0],
// Provide your test data for useStaticQuery.
useStaticQuery: () => ({
allMdx: {
edges: [
mockData({id: 1, days: 1}), // 1 day ago
mockData({id: 2, days: 3}), // 3 days ago
mockData({id: 3, days: 7}), // 1 week ago
mockData({id: 4, days: 60}), // 8 weeks ago
],
},
}),
}
})

describe("Announcements component", () => {
it("Announcements renders correctly", () => {
const handleCloseMock = vi.fn()
Expand Down
179 changes: 105 additions & 74 deletions src/components/Announcements/__tests__/__snapshots__/Annnouncements.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,87 +76,118 @@ exports[`Announcements component > Announcements renders correctly 1`] = `
class="overflow-auto h-[88%] scroll-sidebar"
>
<article>
<a
href="/enundefined"
>
<div
class="text-[#c4bfce"
<div>
<a
href="/en/test-announcement-1"
>
<p
class="texxt-[12px] leading-[133.333%] text-lightgrey mb-0"
>
213
weeks ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
<div
class="text-[#c4bfce"
>
Mock Title 1
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
>
Mock Description 1
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
<a
href="/enundefined"
>
<div
class="text-[#c4bfce"
<p
class="text-[12px] leading-[133.333%] text-lightgrey mb-0"
>
1 day ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
>
Test Announcement 1
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
>
Description for announcement 1
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
</div>
<div>
<a
href="/en/test-announcement-2"
>
<p
class="texxt-[12px] leading-[133.333%] text-lightgrey mb-0"
>
213
weeks ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
>
Mock Title 2
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
<div
class="text-[#c4bfce"
>
Mock Description 2
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
<a
href="/enundefined"
>
<div
class="text-[#c4bfce"
<p
class="text-[12px] leading-[133.333%] text-lightgrey mb-0"
>
3 weeks ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
>
Test Announcement 2
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
>
Description for announcement 2
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
</div>
<div>
<a
href="/en/test-announcement-3"
>
<p
class="texxt-[12px] leading-[133.333%] text-lightgrey mb-0"
>
213
weeks ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
<div
class="text-[#c4bfce"
>
Mock Title 3
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
<p
class="text-[12px] leading-[133.333%] text-lightgrey mb-0"
>
1 week ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
>
Test Announcement 3
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
>
Description for announcement 3
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
</div>
<div>
<a
href="/en/test-announcement-4"
>
<div
class="text-[#c4bfce"
>
Mock Description 3
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
<p
class="text-[12px] leading-[133.333%] text-lightgrey mb-0"
>
8 weeks ago
</p>
<h3
class="text-[20px] leading-[140%] text-white"
>
Test Announcement 4
</h3>
<p
class="tab-button-text text-sm text-lightgrey pt-2"
>
Description for announcement 4
</p>
</div>
</a>
<span
class="h-[1px] w-full bg-[#3E3355] inline-block my-4"
/>
</div>
</article>
</div>
</div>
Expand Down
28 changes: 14 additions & 14 deletions src/components/Announcements/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,25 @@ const Announcements = ({ handleClose }) => {
const data = useStaticQuery(graphql`
query {
allMdx(sort: {frontmatter: {date: DESC}}) {
edges {
node {
id
frontmatter {
title
date
description
tags
}
fields {
postPath
edges {
node {
id
frontmatter {
title
date
description
tags
}
fields {
postPath
}
}
}
}
}
}
`)

const latest_posts = data.allMdx.edges.slice(0, 3)
const latest_posts = data.allMdx.edges.slice(0, 4)
const latest_releases = data.allMdx.edges.filter(
({ node }) => node.frontmatter.tags.includes("release-notes")
)
Expand Down Expand Up @@ -65,7 +65,7 @@ const Announcements = ({ handleClose }) => {
<div className="mt-6 grow overflow-hidden h-full pb-28">
<div className="overflow-auto h-[88%] scroll-sidebar">
{active === "Updates" && <TabContent posts={latest_posts} />}
{active === "Events" && <TabContent posts={latest_posts} />}
{/* {active === "Events" && <TabContent posts={latest_posts} />} */}
{active === "Releases" && <TabContent posts={latest_releases} />}
</div>
</div>
Expand Down

0 comments on commit 7982074

Please sign in to comment.