From ecb80e29f8848c459bc01385ca5424dd9073aced Mon Sep 17 00:00:00 2001 From: Xavier FACQ Date: Fri, 6 Sep 2024 09:11:09 +0200 Subject: [PATCH] =?UTF-8?q?3006=20Add=20a=20news=20block=20with=20the=20da?= =?UTF-8?q?y=20of=20the=20event=20/=20News=20support=20a=20List=E2=80=A6?= =?UTF-8?q?=20(#3055)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 3006 Add a news block with the day of the event / News support a List of programmed events * fix comment * Add code coverage * Fix predefined adoptiumNewsList --- .../__snapshots__/adoptiumNews.test.tsx.snap | 56 ++++++++++ .../__tests__/adoptiumNews.test.tsx | 24 +++++ src/components/AdoptiumNews/index.tsx | 102 +++++++++++------- 3 files changed, 143 insertions(+), 39 deletions(-) create mode 100644 src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap diff --git a/src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap b/src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap new file mode 100644 index 000000000..632b264f0 --- /dev/null +++ b/src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap @@ -0,0 +1,56 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`AdoptiumNews component > renders correctly with provided news 1`] = ` +
+
+
+

+ Mocked News 1 +

+
+

+ September 10, 2024 +

+

+ Text +

+
+
+
+
+
+

+ Mocked News 2 +

+
+

+ September 10, 2024 +

+

+ Text +

+
+
+
+
+`; diff --git a/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx b/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx index 0be3f629e..ada29a28a 100644 --- a/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx +++ b/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx @@ -3,10 +3,34 @@ import { render } from '@testing-library/react'; import { describe, expect, it } from 'vitest' import AdoptiumNews from '..'; +const mockedItems = [ + { + title: "Mocked News 1", + body: "Be a part of the Adoptium", + date: new Date('2024-09-10'), + startDisplayAt: new Date('2024-01-01'), + stopDisplayAfter: new Date('2050-12-31'), + }, + { + title: "Mocked News 2", + body: "I love Adoptium.
Go here", + callToActionLink: 'https://adoptium.net/', + date: new Date('2024-09-10'), + startDisplayAt: new Date('2024-01-01'), + stopDisplayAfter: new Date('2050-12-31'), + } +] + describe('AdoptiumNews component', () => { it('renders correctly', () => { const { container } = render(); // expect container to either be null or contain a div with the class of alert expect(container).toBeNull || expect(container.querySelector('div.text-pink')).toBeTruthy(); }); + + it('renders correctly with provided news', () => { + const { container } = render(); + + expect(container).toMatchSnapshot(); + }); }); diff --git a/src/components/AdoptiumNews/index.tsx b/src/components/AdoptiumNews/index.tsx index c01c27a2f..33bac2363 100644 --- a/src/components/AdoptiumNews/index.tsx +++ b/src/components/AdoptiumNews/index.tsx @@ -4,15 +4,25 @@ import LinkText from '../LinkText' // NOTES: // - You can add a tag to create a link in the body -// - Dates must be with the format: "YYYY-MM-dd" -const adoptiumNews = { - title: "Adoptium Summit 2024", - body: "Be a part of the first-ever Adoptium Summit on September, 10.
Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.
Register here", - callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', - date: new Date('2024-09-10'), - startDisplayAt: new Date('2024-08-01'), - stopDisplayAfter: new Date('2024-09-09'), -} +// - Dates must be with the format: "YYYY-MM-DD" +const predefinedAdoptiumNewsList = [ + { + title: "Adoptium Summit 2024", + body: "Be a part of the first-ever Adoptium Summit on September, 10.
Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.
Register here", + callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', + date: new Date('2024-09-10'), + startDisplayAt: new Date('2024-08-01'), + stopDisplayAfter: new Date('2024-09-10'), + }, + { + title: "Adoptium Summit 2024", + body: "Join us Today for the first-ever Adoptium Summit.
An opportunity to connect with other Adoptium community members.
Register here", + callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', + date: new Date('2024-09-10'), + startDisplayAt: new Date('2024-09-10'), + stopDisplayAfter: new Date('2024-09-11'), + } +] const eventDateOptions = { year: 'numeric', @@ -21,42 +31,56 @@ const eventDateOptions = { timeZone: "UTC" } -const AdoptiumNews = () => { +interface Props { + adoptiumNewsList?: AdoptiumNewsItem[]; + } + +function compareNewsByStartDisplayAt(a: AdoptiumNewsItem, b: AdoptiumNewsItem) { + return a.startDisplayAt.getTime() - b.startDisplayAt.getTime(); +} - const { language } = useI18next(); +const AdoptiumNews = ({ adoptiumNewsList }: Props) => { - var eventDateUTC:Date|null = null; - if(adoptiumNews.date) { - eventDateUTC = new Date(Date.UTC( - adoptiumNews.date.getUTCFullYear(), - adoptiumNews.date.getUTCMonth(), - adoptiumNews.date.getUTCDate(), - adoptiumNews.date.getUTCHours(), - adoptiumNews.date.getUTCMinutes(), - adoptiumNews.date.getUTCSeconds())); - - } + const adoptiumNewsListToDisplay = adoptiumNewsList ? adoptiumNewsList : predefinedAdoptiumNewsList; + + const { language } = useI18next(); const now = Date.now(); - if(!adoptiumNews || now < adoptiumNews.startDisplayAt.getTime() || now > adoptiumNews.stopDisplayAfter.getTime()) return; return ( -
-
-

{adoptiumNews.title}

-
- {eventDateUTC &&

{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}

} -

- - }} - /> -

-
-
-
+ adoptiumNewsListToDisplay + .filter(adoptiumNews => adoptiumNews.startDisplayAt.getTime() <= now && adoptiumNews.stopDisplayAfter.getTime() > now) + .sort(compareNewsByStartDisplayAt) + .map((adoptiumNews, index) => { + var eventDateUTC:Date|null = null; + if(adoptiumNews.date) { + eventDateUTC = new Date(Date.UTC( + adoptiumNews.date.getUTCFullYear(), + adoptiumNews.date.getUTCMonth(), + adoptiumNews.date.getUTCDate(), + adoptiumNews.date.getUTCHours(), + adoptiumNews.date.getUTCMinutes(), + adoptiumNews.date.getUTCSeconds())); + } + + return ( +
+
+

{adoptiumNews.title}

+
+ {eventDateUTC &&

{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}

} +

+ + }} + /> +

+
+
+
) + }) ); };