Merge branch 'tools_testcases' of https://github.com/reachaadrika/web…

…site into tools_testcases

components/features/FeatureList.js

@@ -1,50 +1,39 @@
 export const features = [
-    {
-      name: "Specification",
-      description:
-        "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
-      links: [{ label: "Documentation", href: "docs/specifications/latest", id:'whyasyncapi-spec-documentation-link' }],
-    },
-    {
-      name: "Document APIs",
-      description:
-        "Use our tools to generate documentation at the build level, on a server, and on a client.",
-      links: [
-        {
-          label: "HTML Template",
-          href: "https://github.com/asyncapi/html-template",
-          id:'whyasyncapi-apis-htmltemplate-link'
-        },
-        {
-          label: "React Component",
-          href: "https://github.com/asyncapi/asyncapi-react/",
-          id:'whyasyncapi-apis-reactcomponents-link'
-        },
-      ],
-    },
-    {
-      name: "Code Generation",
-      description:
-        "Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.",
-      links: [{ label: "Generator", href: "tools/generator", id:'whyasyncapi-generation-generator-link' }, { label: "Modelina", href: "tools/modelina", id:'whyasyncapi-generation-modelina-link' }],
-    },
-    {
-      name: "Community",
-      description: "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
-      links: [
-        { label: "Join our Slack", href: "https://asyncapi.com/slack-invite", id:'whyasyncapi-community-slack-link' },
-      ],
-    },
-    {
-      name: "Open Governance",
-      description:
-        "Our Open-Source project is part of Linux Foundation and works under an Open Governance model.",
-      links: [{ label: "Read more about Open Governance", href: "blog/governance-motivation", id:'whyasyncapi-governance-more-link' }, { label: "TSC Members", href: "community/tsc", id:'whyasyncapi-governance-tsc-link' }],
-    },
-    {
-      name: "And much more...",
-      description:
-        "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
-      links: [{ label: "View GitHub Discussions", href: "https://github.com/asyncapi/community/discussions", id:'whyasyncapi-muchmore-github-link' }],
-    },
-  ];
+  {
+    id: "specification",
+    links: [{ label: "Documentation", href: "docs/specifications/latest", id: 'whyasyncapi-spec-documentation-link' }],
+  },
+  {
+    id: 'document-apis',
+    links: [
+      {
+        label: "HTML Template",
+        href: "https://github.com/asyncapi/html-template",
+        id: 'whyasyncapi-apis-htmltemplate-link'
+      },
+      {
+        label: "React Component",
+        href: "https://github.com/asyncapi/asyncapi-react/",
+        id: 'whyasyncapi-apis-reactcomponents-link'
+      },
+    ],
+  },
+  {
+    id: "code-generation",
+    links: [{ label: "Generator", href: "tools/generator", id: 'whyasyncapi-generation-generator-link' }, { label: "Modelina", href: "tools/modelina", id: 'whyasyncapi-generation-modelina-link' }],
+  },
+  {
+    id: "community",
+    links: [
+      { label: "Join our Slack", href: "https://asyncapi.com/slack-invite", id: 'whyasyncapi-community-slack-link' },
+    ],
+  },
+  {
+    id: "open-governance",
+    links: [{ label: "Read more about Open Governance", href: "blog/governance-motivation", id: 'whyasyncapi-governance-more-link' }, { label: "TSC Members", href: "community/tsc", id: 'whyasyncapi-governance-tsc-link' }],
+  },
+  {
+    id: "much-more",
+    links: [{ label: "View GitHub Discussions", href: "https://github.com/asyncapi/community/discussions", id: 'whyasyncapi-muchmore-github-link' }],
+  },
+];

components/features/index.jsx

@@ -1,7 +1,8 @@
+import React from "react";
 import Heading from "../typography/Heading";
 import Paragraph from "../typography/Paragraph";
 import TextLink from "../typography/TextLink";
-import Link from 'next/link'
+import Link from 'next/link';
 import { features } from "./FeatureList";
 import { useTranslation } from "../../lib/i18n";
 
@@ -25,33 +26,25 @@ export default function Features() {
         <div className="mt-12 text-left">
           <ul className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" data-testid="Feature-ul">
             {features.map((feature) => (
-              <li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8"
-                data-testid="Feature-li">
-                <div >
-                  <Heading
-                    level="h3"
-                    typeStyle="heading-md-semibold"
-                    className="mt-8"
-
-                  >
-                    {feature.name}
+              <li key={feature.id} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8" data-testid="Feature-li">
+                <div>
+                  <Heading level="h3" typeStyle="heading-md-semibold" className="mt-8">
+                    {t(`features.${feature.id}.name`)}
                   </Heading>
-                  {feature.description && (
+                  {(
                     <Paragraph typeStyle="body-md" className="mt-5">
-                      {feature.description}
+                      {t(`features.${feature.id}.description`)}
                     </Paragraph>
                   )}
                 </div>
-                <div className="flex justify-between" >
-                  {feature.links.map((link) => {
-                    return (
-                      <Link href={link.href} key={link.label}>
-                        <TextLink id={link.id} href={link.href} className="mt-6 inline-block">
-                          {link.label}
-                        </TextLink>
-                      </Link>
-                    );
-                  })}
+                <div className="flex justify-between">
+                  {feature.links.map((link) => (
+                    <Link href={link.href} key={link.label}>
+                      <TextLink id={link.id} href={link.href} className="mt-6 inline-block">
+                        {t(`features.${feature.id}.links.${link.id}`)}
+                      </TextLink>
+                    </Link>
+                  ))}
                 </div>
               </li>
             ))}

components/navigation/BlogPostItem.js

@@ -28,8 +28,8 @@ export default forwardRef(function BlogPostItem({ post, className = '', id=''},
     <li className={`rounded-lg ${className}`} ref={ref} id={id}>
       <article className='h-full rounded-lg'>
           <Link href={post.slug} passHref>
-            <a 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 className="h-48 w-full object-cover" src={post.cover} alt="" loading="lazy" />
+            <a 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`} data-testid="BlogPostItem-Link">
+              <img className="h-48 w-full object-cover" src={post.cover} alt="" loading="lazy" data-testid="BlogPostItem-Img"/>
               <div className="flex-1 bg-white p-6 flex flex-col justify-between">
                 <div className="flex-1">
                   <Paragraph typeStyle="body-sm" textColor="text-indigo-500">

components/navigation/DocsMobileMenu.js

@@ -6,22 +6,22 @@ import IconLoupe from '../icons/Loupe';
 export default function DocsMobileMenu({
   post,
   navigation,
-  onClickClose = () => {},
+  onClickClose = () => { },
 }) {
   return (
     <div className="z-60 lg:hidden">
       <div className="fixed inset-0 flex z-40">
         <div className="fixed inset-0">
           <div
             className="absolute inset-0 bg-gray-600 opacity-75"
-            onClick={onClickClose}
+            onClick={ onClickClose }
           ></div>
         </div>
 
         <div className="relative flex-1 flex flex-col max-w-xs w-full bg-white">
           <div className="absolute top-0 right-0 -mr-14 p-1">
             <button
-              onClick={onClickClose}
+              onClick={ onClickClose }
               className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
               aria-label="Close sidebar"
             >
@@ -48,7 +48,7 @@ export default function DocsMobileMenu({
             <div className="w-full mt-10 mb-4 px-2">
               <SearchButton
                 className="flex w-full items-center text-left text-sm space-x-3 px-3 py-1.5 bg-white hover:bg-secondary-100 border-gray-300 hover:border-secondary-500 border text-gray-700 hover:text-secondary-500 shadow-sm transition-all duration-500 ease-in-out rounded-md"
-                indexName={DOCS_INDEX_NAME}
+                indexName={ DOCS_INDEX_NAME }
               >
                 <IconLoupe />
                 <span className="flex-auto">Search docs...</span>
@@ -57,19 +57,19 @@ export default function DocsMobileMenu({
 
             <nav className="mt-5 px-2 mb-4">
               <ul>
-                {Object.values(navigation).map((navItem) => (
+                { Object.values(navigation).map((navItem) => (
                   <DocsNav
-                    item={navItem}
-                    active={post.slug}
-                    onClick={onClickClose}
+                    item={ navItem }
+                    active={ post.slug }
+                    onClick={ onClickClose }
                   />
-                ))}
+                )) }
               </ul>
             </nav>
           </div>
         </div>
         <div className="flex-shrink-0 w-14">
-          {/* Force sidebar to shrink to fit close icon */}
+          {/* Force sidebar to shrink to fit close icon */ }
         </div>
       </div>
     </div>

components/navigation/DocsNav.js

@@ -25,11 +25,11 @@ export default function DocsNav({
   const bucket = serializedBuckets[item.item.rootSectionId];
 
   return (
-    <li className='mb-4' key={item.item.title}>
+    <li className='mb-4' key={item.item.title} data-testid="DocsNav-item">
       <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={bucket} onClick={onClick} />
       <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
         {Object.values(subCategories).map((subCategory) => (
-          <li key={subCategory.item.title}>
+          <li key={subCategory.item.title}  data-testid="DocsNav-subitem">
             <DocsNavItem {...subCategory.item} activeSlug={active} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClick} />
             <ul className='border-l border-gray-200 pl-4'>
               {subCategory.children && subCategory.children.map(subItem => (

components/navigation/EventPostItem.js

@@ -30,44 +30,46 @@ function EventPostItem({ post, className, id }) {
 
   const defaultCover = '/img/homepage/confBlurBg.webp';
   let active = true;
-  if(currentDate > post.date.format()){
-    active = false
+  let postDate = moment(post.date); // Convert post.date to a moment object if necessary
+
+  if (!postDate.isValid()) {
+    // Handle invalid date if necessary
+    active = false;
+  } else if (currentDate > postDate.format()) {
+    active = false;
   }
+
   return (
     <li key={id} className={`${className}`} data-testid="EventPostItem-main">
       <article className='h-full rounded-lg shadow-md hover:shadow-lg'>
-          <a href={post.url} target='_blank' rel='noreferrer'>
-            <img
-              src={
-                post.banner
-                  ? post.banner
-                  : defaultCover
-              }
-              alt={post.title}
-              className='w-full h-52 object-cover rounded-t-lg'
-            />
-            <div className='mt-2 p-5 flex flex-col justify-between h-52 '>
-              <div>
-                <div className='flex items-center'>
-                  {icon}{' '}
-                  <p className={`ml-3 font-bold text-md ${color}`}>{type}</p>
-                </div>
-                <Heading level='h3' typeStyle='body-lg' className='mt-4'>
-                  {post.title}
-                </Heading>
-              </div>
+        <a href={post.url} target='_blank' rel='noreferrer' data-testid="EventPostItem-link">
+          <img
+            src={post.banner ? post.banner : defaultCover}
+            alt={post.title}
+            className='w-full h-52 object-cover rounded-t-lg'
+            data-testid="EventPostItem-img"
+          />
+          <div className='mt-2 p-5 flex flex-col justify-between h-52 ' data-testid="EventPostItem-post">
+            <div>
               <div className='flex items-center'>
-                <IconCalendar className='' />{' '}
-                <span className='text-sm font-semibold ml-4'>
-                  {active
-                    ? moment(post.date).format('MMMM D, YYYY')
-                    : 'View Recording'
-                  }
-                </span>{' '}
-                <ArrowRightIcon className='w-4 ml-3' />
+                {icon}{' '}
+                <p className={`ml-3 font-bold text-md ${color}`}>{type}</p>
               </div>
+              <Heading level='h3' typeStyle='body-lg' className='mt-4'>
+                {post.title}
+              </Heading>
+            </div>
+            <div className='flex items-center'>
+              <IconCalendar className='' />{' '}
+              <span className='text-sm font-semibold ml-4' data-testid="Event-span">
+                {active
+                  ? moment(postDate).format('MMMM D, YYYY')
+                  : 'View Recording'}
+              </span>{' '}
+              <ArrowRightIcon className='w-4 ml-3' />
             </div>
-          </a>
+          </div>
+        </a>
       </article>
     </li>
   );

components/navigation/FlyoutMenu.js

@@ -4,7 +4,7 @@ export default function Flyout ({
   items = [],
 }) {
   return (
-    <div className="absolute z-50 -ml-4 pt-3 transform w-screen max-w-md md:ml-12 md:transform md:-translate-x-1/2 lg:left-1/2 lg:-translate-x-1/2 lg:max-w-3xl">
+    <div className="absolute z-50 -ml-4 pt-3 transform w-screen max-w-md md:ml-12 md:transform md:-translate-x-1/2 lg:left-1/2 lg:-translate-x-1/2 lg:max-w-3xl" data-testid="Flyout-main">
       <div className="rounded-lg shadow-lg">
         <div className="rounded-lg shadow-xs overflow-hidden">
           <div className="z-20 relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">

components/navigation/MenuBlocks.js

@@ -12,17 +12,17 @@ export default function MenuBlocks ({
           const isExternalHref = item.href && item.href.startsWith('http');
           return (
             <Link href={item.comingSoon ? '' : item.href} key={index}>
-              <a 
+              <a data-testid="MenuBlocks-Link"
                 className="-m-3 p-3 flex items-start space-x-4 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150" 
                 target={isExternalHref ? "_blank" : undefined} 
                 rel={isExternalHref ? "noopener noreferrer" : undefined}
               >
-                <div className={`flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-lg ${item.className ? item.className : 'border border-gray-800 bg-secondary-100'} text-gray-900 sm:h-12 sm:w-12 ${item.comingSoon && 'opacity-50'}`}>
+                <div className={`flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-lg ${item.className ? item.className : 'border border-gray-800 bg-secondary-100'} text-gray-900 sm:h-12 sm:w-12 ${item.comingSoon && 'opacity-50'}`} data-testid="MenuBlock-icon">
                   <item.icon className="h-6 w-6" />
                 </div>
                 <div className="space-y-1">
                   <Paragraph typeStyle="body-md" textColor="text-gray-900" fontWeight="font-semibold">
-                    <span className={item.comingSoon && 'opacity-50'}>{ item.title }</span> { item.comingSoon && <Label text="Coming soon" /> } { item.beta && <Label text="Beta" /> }
+                    <span className={item.comingSoon && 'opacity-50'} >{ item.title }</span> { item.comingSoon && <Label text="Coming soon" /> } { item.beta && <Label text="Beta" /> }
                   </Paragraph>
                   <Paragraph typeStyle="body-sm" className={item.comingSoon && 'opacity-50'}>
                     {item.description}

components/navigation/MobileNavMenu.js

@@ -15,11 +15,11 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
           <div className="pt-5 pb-6 px-5 space-y-6">
             <div className="flex items-center justify-between">
               <Link href="/" className="flex">
-                <a className="cursor-pointer">
+                <a className="cursor-pointer" data-testid="MobileNav-Logo">
                   <AsyncAPILogo className="h-8 w-auto" />
                 </a>
               </Link>
-              <div className="flex flex-row items-center justify-content -mr-2">
+              <div className="flex flex-row items-center justify-content -mr-2" data-testid="MobileNav-button">
                 <SearchButton
                   className="flex items-center text-left space-x-2 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
                   aria-label="Open Search"
@@ -63,7 +63,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
             <div className="py-2 space-y-2">
               <Link href="/docs" className="flex">
                 <h4 className="text-gray-500 font-medium block mb-4">
-                  <a className="cursor-pointer">Docs</a>
+                  <a className="cursor-pointer" data-testid="MobileNav-docs">Docs</a>
                 </h4>
               </Link>
               <MenuBlocks items={learningItems} />
@@ -72,7 +72,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
           <div className="py-2 px-5 space-y-2">
             <Link href="/tools" 
             className="flex">
-              <h4 className="text-gray-500 font-medium block mb-4"> <a className="cursor-pointer">Tools</a></h4>
+              <h4 className="text-gray-500 font-medium block mb-4"> <a className="cursor-pointer" data-testid="MobileNav-tools" >Tools</a></h4>
             </Link>
               <MenuBlocks items={toolingItems} />
           </div>
@@ -91,6 +91,7 @@ export default function MobileNavMenu({ onClickClose = () => {} }) {
                       rel="noopener noreferrer"
                       key={index}
                       className="text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150 block mb-4"
+                      data-testid="MobileNav-others"
                     >
                       {item.text}
                     </a>