feat: add unit tests for navigation component (#2069)

Co-authored-by: akshatnema <[email protected]>
asyncapi · Aug 22, 2023 · 287fdc8 · 287fdc8
1 parent e11ab6e
commit 287fdc8
Show file tree

Hide file tree

Showing 25 changed files with 495 additions and 61 deletions.
diff --git a/components/navigation/BlogPostItem.js b/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">

diff --git a/components/navigation/DocsMobileMenu.js b/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>

diff --git a/components/navigation/DocsNav.js b/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 => (

diff --git a/components/navigation/EventPostItem.js b/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>
   );

diff --git a/components/navigation/FlyoutMenu.js b/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">

diff --git a/components/navigation/MenuBlocks.js b/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}

diff --git a/components/navigation/MobileNavMenu.js b/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>

diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -9,7 +9,7 @@ import LearningPanel from './LearningPanel'
 import CommunityPanel from "./CommunityPanel"
 import MobileNavMenu from './MobileNavMenu'
 import otherItems from './otherItems'
-import Button from '../buttons/Button'
+
 import GithubButton from "../buttons/GithubButton"
 import { SearchButton } from '../AlgoliaSearch';
 import IconLoupe from '../icons/Loupe';
@@ -108,17 +108,17 @@ export default function NavBar({
       <div className="flex w-full justify-between items-center py-6 lg:justify-start lg:space-x-10">
         {!hideLogo && (
           <div className="lg:w-auto lg:flex-1">
-            <div className="flex">
+            <div className="flex" >
               <Link href="/">
-                <a className="cursor-pointer" aria-label="AsyncAPI">
+                <a className="cursor-pointer" aria-label="AsyncAPI" data-testid="Navbar-logo">
                   <AsyncAPILogo className="h-8 w-auto sm:h-8" />
                 </a>
               </Link>
             </div>
           </div>
         )}
 
-        <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden">
+        <div className="flex flex-row items-center justify-center -mr-2 -my-2 lg:hidden" data-testid="Navbar-search">
           <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"
@@ -133,7 +133,7 @@ export default function NavBar({
           </button>
         </div>
 
-        <nav className="hidden lg:flex lg:items-center lg:justify-end space-x-6 xl:space-x-10 w-full">
+        <nav className="hidden lg:flex lg:items-center lg:justify-end space-x-6 xl:space-x-10 w-full" data-testid="Navbar-main">
           <div className="relative" onMouseLeave={() => showMenu(null)} ref={learningRef}>
             <NavItem
               text="Docs"
@@ -197,6 +197,7 @@ export default function NavBar({
 
       {/* Mobile menu, show/hide based on mobile menu state. */}
       {mobileMenuOpen && <MobileNavMenu onClickClose={() => setMobileMenuOpen(false)} />}
+
     </div>
   )
 }
diff --git a/components/navigation/NavItem.js b/components/navigation/NavItem.js
@@ -32,7 +32,7 @@ export default function NavItem ({
   if(href) {
     return (
       <Link href={href}>
-        <a {...attrs} className={`${attrs.className} ${router.pathname.startsWith(href) ? "text-black" :"text-gray-700"}`} target={target}>
+        <a {...attrs} className={`${attrs.className} ${router.pathname.startsWith(href) ? "text-black" :"text-gray-700"}`} target={target} data-testid="NavItem-Link">
           <span>{text}</span>
           {hasDropdown && <NavItemDropdown />}
         </a>

diff --git a/components/navigation/NavMenu.js b/components/navigation/NavMenu.js
@@ -12,7 +12,7 @@ export default function NavMenu({ items = [] }) {
             {
               items.map((item, index) => (
                 <Link href={item.href} key={index}>
-                <a target={item.target || '_self'} rel="noopener noreferrer" className="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
+                <a target={item.target || '_self'} rel="noopener noreferrer" className="-m-3 p-3 block space-y-1 rounded-md hover:bg-gray-50 transition ease-in-out duration-150" data-testid="NavMenu-Link">
                   <Paragraph typeStyle="body-sm" textColor="text-gray-900" className="font-semibold">
                     {item.text}
                   </Paragraph>

diff --git a/components/navigation/StickyNavbar.js b/components/navigation/StickyNavbar.js
@@ -1,5 +1,5 @@
 export default function StickyNavbar({children, className=''}) {
-  return <div className={`sticky top-0 w-full bg-white border-b border-gray-300 z-50 ${className}`}>
+  return <div className={`sticky top-0 w-full bg-white border-b border-gray-300 z-50 ${className}`} data-testid="Sticky-div">
       {children}
   </div>;
 }
diff --git a/components/navigation/TutorialList.js b/components/navigation/TutorialList.js
@@ -9,6 +9,7 @@ export default function TutorialList({ className = '' }) {
   const tutorials = navItems.filter(item => item.sectionSlug === post.slug && !item.isIndex)
 
   return (
+    <DocsContext.Consumer >
     <div className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2`}>
       {
         tutorials.map((tuto, index) => (
@@ -27,5 +28,6 @@ export default function TutorialList({ className = '' }) {
         ))
       }
     </div>
+    </DocsContext.Consumer>
   )
 }