feat: adding unit tests for newsroom component

components/newsroom/FeaturedBlogPost.js

@@ -26,17 +26,17 @@ export default function FeaturedBlogPost({ post, className = ''}) {
     <div className={`rounded-lg ${className}`}>
       <article className='h-full rounded-lg'>
           <Link href={post.slug} passHref>
-            <a className={`h-full flex flex-col md:flex-row md:max-w-164 border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`}>
-              <img className="w-full md:w-56 object-cover" src={post.cover} alt="" />  
+            <a className={`h-full flex flex-col md:flex-row md:max-w-164 border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`} data-testid="FeaturedBlogPostItem-Link">
+              <img className="w-full md:w-56 object-cover" src={post.cover} alt="" data-testid="FeaturedBlogPostItem-Img"/>  
               <div className="flex-1 bg-white p-6 flex flex-col justify-between text-left border-none">
                 <div className="flex-1">
                   <Paragraph typeStyle="body-sm" textColor="text-indigo-500">
-                    <span className={`inline-flex items-center px-3 py-0.5 rounded-full ${typeColors[0]} ${typeColors[1]}`}>
+                    <span className={`inline-flex items-center px-3 py-0.5 rounded-full ${typeColors[0]} ${typeColors[1]}`} data-testid="FeaturedBlogPost-type">
                       {post.type}
                     </span>
                   </Paragraph>
                   <Link href={post.slug}>
-                    <a className="block">
+                    <a className="block" data-testid="FeaturedBlog-title">
                       <Heading level="h3" typeStyle="heading-sm-semibold" className="mt-2">
                         {post.title}
                       </Heading>
@@ -47,23 +47,23 @@ export default function FeaturedBlogPost({ post, className = ''}) {
                   </Link>
                 </div>
                 <div className="mt-6 flex items-center">
-                  <div className="relative flex-shrink-0">
+                  <div className="relative flex-shrink-0" data-testid="FeaturedBlog-Authorimg">
                     <AuthorAvatars authors={post.authors} />
                   </div>
                   <div className="ml-3">
                     <Heading level="h3" typeStyle="heading-xs-semibold" textColor="text-gray-900">
-                      <span className="hover:underline">
+                      <span className="hover:underline" data-testid="FeaturedBlogPost-AuthorName">
                         {post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link} onClick={e => { e.stopPropagation() }} target="_blank" rel="noreferrer">{author.name}</a> : author.name).reduce((prev, curr) => [prev, ' & ', curr])}
                       </span>
                     </Heading>
                     <Paragraph typeStyle="body-sm" className="flex">
-                      <time dateTime={post.date}>
+                      <time dateTime={post.date} data-testid="FeaturedBlogPost-date">
                         {moment(post.date).format('MMMM D, YYYY')}
                       </time>
                       <span className="mx-1">
                         &middot;
                       </span>
-                      <span>
+                      <span  data-testid="FeaturedBlogPost-RT">
                         {post.readingTime} min read
                       </span>
                     </Paragraph>

components/newsroom/Newsroom.js

@@ -10,7 +10,7 @@ import TextLink from '../typography/TextLink'
 export default function Newsroom() {
   return (
     <> 
-      <div className="text-center mt-12">
+      <div className="text-center mt-12" data-testid="Newsroom-main">
         <Heading
           level="h2"
           typeStyle="heading-lg"
@@ -25,22 +25,22 @@ export default function Newsroom() {
         </Paragraph>
       </div>
 
-      <div className="lg:flex flex-row my-20 -mr-2">
+      <div className="lg:flex flex-row my-20 -mr-2" data-testid="Newsroom-sub-div">
         <div className="text-center lg:text-left lg:w-1/4 pt-4">
           <Heading level="h4" typeStyle="heading-md-semibold">
             From the blog
           </Heading>
           <Paragraph typeStyle="body-md" className="mt-5">
             Check out these articles written by community members
           </Paragraph>
-          <div className="my-5">
+          <div className="my-5" data-testid="Newsroom-Blog-Link">
             <TextLink href="/blog" className="mt-5">
               Read all blog posts
               <ArrowRight className="inline w-6" />
             </TextLink>
           </div>
         </div>
-        <div className='lg:w-3/4'>
+        <div className='lg:w-3/4' data-testid="Newsroom-Blog">
           <NewsroomBlogPosts />
         </div>
       </div>
@@ -55,7 +55,7 @@ export default function Newsroom() {
           <Paragraph typeStyle="body-md" className="mt-5">
             Read about what people are <br /> saying about AsyncAPI
           </Paragraph>
-          <div className="my-5">
+          <div className="my-5" data-testid="Newsroom-Twitter-Link">
             <TextLink href="https://twitter.com/AsyncAPISpec" className="mt-4" target="_blank">
               Follow us on Twitter
               <ArrowRight className="inline w-6" />
@@ -72,7 +72,7 @@ export default function Newsroom() {
             </div>
           </div>
           <div className='w-full md:w-1/2 px-2 md:pr-0 md:pl-4'>
-            <div className="rounded-xl shadow-md mt-8 w-full mx-auto md:mt-0">
+            <div className="rounded-xl shadow-md mt-8 w-full mx-auto md:mt-0" data-testid="Newsroom-Twitter">
               <TwitterTimelineEmbed
                 sourceType="profile"
                 screenName="AsyncAPISpec"
@@ -93,7 +93,7 @@ export default function Newsroom() {
           <Paragraph typeStyle="body-md" className="mt-5">
             Watch our latest videos and live streams on the AsyncAPI YouTube channel
           </Paragraph>
-          <div className="my-5">
+          <div className="my-5" data-testid="Newsroom-Youtube">
             <TextLink href="https://www.youtube.com/c/AsyncAPI" className="mt-4" target="_blank">
               Visit our YouTube channel
               <ArrowRight className="inline w-6" />

components/newsroom/NewsroomArticle.js

@@ -5,27 +5,28 @@ import articlesData from '../../config/articles.json';
 export default function NewsroomArticle() {
   return (
     <ul className="flex flex-col gap-2 w-full px-2 pb-4">
-      {articlesData.map((article, index) => (
-        <li key={index}>
+      { articlesData.map((article, index) => (
+        <li key={ index }>
           <a
             className="bg-white block p-6 rounded-md mb-2 shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg lg:w-full text-left"
-            href={article.url}
+            href={ article.url }
             target="_blank"
             rel="noopener noreferrer"
+            data-testid={ `NewsroomArticle-${ index }` }
           >
             <div>
-              <Paragraph typeStyle="body-sm" textColor="text-gray-600">{article.publishDate}</Paragraph>
+              <Paragraph typeStyle="body-sm" textColor="text-gray-600">{ article.publishDate }</Paragraph>
               <Heading
                 level="h4"
                 typeStyle="heading-xs-semibold"
                 className="mt-3"
               >
-                {article.title}
+                { article.title }
               </Heading>
             </div>
           </a>
         </li>
-      ))}
+      )) }
     </ul>
   );
 }

components/newsroom/NewsroomBlogPosts.js

@@ -27,7 +27,7 @@ export default function NewsroomBlogPosts() {
   const buttonClass = 'shadow-md rounded border mx-2 mb-2 focus:outline-none';
 
   return (
-    <div className="flex-col overflow-auto">
+    <div className="flex-col overflow-auto" data-testid="NewsroomBlog-main-div">
       <Swiper
         modules={[Navigation, A11y]}
         spaceBetween={8}
@@ -53,10 +53,10 @@ export default function NewsroomBlogPosts() {
       </Swiper>
 
       <div className="flex flex-row ml-2 justify-content-center md:justify-content-start">
-        <button ref={prevElRef} className={`${buttonClass} py-3 px-6 ml-0 ${current === 0 ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}>
+        <button ref={prevElRef} className={`${buttonClass} py-3 px-6 ml-0 ${current === 0 ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`} data-testid="Blog-Prev-button">
           <ArrowLeft className='w-4' />
         </button>
-        <button ref={nextElRef} className={`${buttonClass} py-1 px-4 ${checkLastSnapIndex(current) ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}>
+        <button ref={nextElRef} className={`${buttonClass} py-1 px-4 ${checkLastSnapIndex(current) ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}  data-testid="Blog-Next-button">
           <ArrowRight className='w-8' />
         </button>
       </div>

components/newsroom/NewsroomSection.js

@@ -18,21 +18,21 @@ export default function NewsroomSection() {
     .slice(0, 1);
   return (
     <div className="mt-12 lg:flex justify-between">
-      <section className="mt-10 lg:mt-4 relative w-fit mx-auto lg:w-1/2">
+      <section className="mt-10 lg:mt-4 relative w-fit mx-auto lg:w-1/2" data-testid="NewsroomSection-Featured">
         <div className='absolute z-10 -mt-6'>
             <Button className="text-center block md:inline-block border-secondary-500 border text-secondary-500 shadow-md p-2" text="FEATURED BLOG POST" bgClassName="bg-secondary-100" />
         </div>
         <FeaturedBlogPost post={posts[0]} />
       </section>
-      <section className="lg:text-left lg:max-w-xl lg:w-1/2 lg:ml-12 mt-5 lg:my-auto">
+      <section className="lg:text-left lg:max-w-xl lg:w-1/2 lg:ml-12 mt-5 lg:my-auto" data-testid="NewsroomSection-main">
         <Heading typeStyle="heading-md-semibold" level="h3">
           Latest news and blogs
         </Heading>
         <Paragraph typeStyle="body-lg" className="mt-5">
           Welcome to our Newsroom section. Here, you'll get latest information about our blogs, articles, announcements and Youtube live-streams. Let's get upto date with the recent activities in the organization.
         </Paragraph>
-        <div className='mt-7'>
-        <Button text='Visit the Newsroom' href='/community/newsroom' />
+        <div className='mt-7' >
+        <Button text='Visit the Newsroom' href='/community/newsroom' data-testid="NewsroomSection-Link"/>
         </div>
       </section>
     </div>

components/newsroom/NewsroomYoutube.js

@@ -17,7 +17,7 @@ export default function NewsroomYoutube({ className = '' }) {
   const buttonClass = 'shadow-md rounded border mx-2 mb-2 focus:outline-none';
 
   return (
-    <div className="flex-col overflow-auto">
+    <div className={`flex-col overflow-auto ${className}`} data-testid="NewsroomYoutube-main">
       <Swiper
         modules={[Navigation, A11y]}
         spaceBetween={8}
@@ -41,10 +41,10 @@ export default function NewsroomYoutube({ className = '' }) {
       </Swiper>
 
       <div className="flex flex-row ml-2 justify-content-center md:justify-content-start">
-        <button ref={prevElRef} className={`${buttonClass} py-3 px-6 ml-0 ${current === 0 ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}>
+        <button ref={prevElRef} className={`${buttonClass} py-3 px-6 ml-0 ${current === 0 ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`} data-testid="Youtube-Prev-button">
           <ArrowLeft className='w-4' />
         </button>
-        <button ref={nextElRef} className={`${buttonClass} py-1 px-4 ${checkLastSnapIndex(current) ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}>
+        <button ref={nextElRef} className={`${buttonClass} py-1 px-4 ${checkLastSnapIndex(current) ? 'cursor-not-allowed bg-white border-gray-200 text-gray-200' : 'bg-secondary-100  hover:bg-secondary-500 border-secondary-500  text-secondary-500 hover:text-white'}`}  data-testid="Youtube-Next-button">
           <ArrowRight className='w-8' />
         </button>
       </div>

components/newsroom/YouTubeCard.js

@@ -9,13 +9,13 @@ export default function YouTubeCard({ video }) {
     <li className={`rounded-lg min-w-full max-w-md h-full px-2 pb-6`}>
       <article className='h-full rounded-lg'>
         <div className={`h-full flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`}>
-          <img
+          <img data-testid="YoutubeCard-img"
             src={video.image_url}
             alt="video"
             className="h-60 w-full object-cover"
           />
 
-          <div className="flex-1 bg-white p-6 flex flex-col justify-between">
+          <div className="flex-1 bg-white p-6 flex flex-col justify-between" data-testid="YoutubeCard-main">
             <div>
               <Heading level="h3" typeStyle="heading-sm-semibold" className="mt-2">
                 {video.title}