Merge branch 'master' into tools_testcases

asyncapi · Jul 17, 2023 · a3725be · a3725be
2 parents dac869c + ab12e85
commit a3725be
Show file tree

Hide file tree

Showing 28 changed files with 715 additions and 70 deletions.
diff --git a/components/Modal.js b/components/Modal.js
@@ -22,8 +22,8 @@ export default function Modal({
   }
 
   return (
-    <div ref={modalRef} tabIndex={-1} className="backdrop-blur bg-black/30 fixed inset-0 z-30 flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
-      <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl sm:p-6">
+    <div ref={modalRef} tabIndex={-1} className="backdrop-blur bg-black/30 fixed inset-0 z-30 flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 my-auto mt-2" onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
+      <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all m-auto sm:w-full sm:max-w-4xl sm:p-6">
         <div className="flex justify-between mb-6">
           <h1 className="text-lg font-bold truncate mr-4">{title}</h1>
           <button onClick={() => onModalClose()} data-testid="Modal-close">
@@ -32,7 +32,7 @@ export default function Modal({
             </svg>
           </button>
         </div>
-        <div className="w-full overflow-auto max-h-120">
+        <div className="w-full overflow-auto lg:max-h-[70vh] max-h-[65vh]">
           {children}
         </div>
       </div>

diff --git a/components/OpenAPIComparison.js b/components/OpenAPIComparison.js
diff --git a/components/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js
@@ -28,15 +28,15 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
       <div
         className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
           small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
-        }`}
+        }`} data-testid = "AnnouncementHero-main-div"
       >
         <Heading
           className="countdown-text-gradient"
           level="h2"
-          typeStyle="heading-lg"
-        >
+          typeStyle="heading-lg" >
           AsyncAPI Conf on Tour 2023
         </Heading>
+
         <Heading
           className="countdown-text-gradient"
           level="h3"
@@ -53,6 +53,7 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
             href="https://conference.asyncapi.com/"
             target="_blank"
             text="Submit a session"
+            data-testid="AnnouncementHero-submit-session"
           />
         </div>
       </div>

diff --git a/components/campaigns/AnnouncementRamainingDays.js b/components/campaigns/AnnouncementRamainingDays.js
@@ -17,7 +17,7 @@ export default function AnnouncementRemainingDays({ dateTime, eventName }) {
   }
 
   return (
-    <span className="font-extrabold countdown-text-gradient block">
+    <span className="font-extrabold countdown-text-gradient block" data-testid="AnnouncementRemainingDays-text">
       {text} until {eventName}
     </span>
   )

diff --git a/components/campaigns/Banner.js b/components/campaigns/Banner.js
@@ -19,8 +19,8 @@ export default function Banner({}) {
   }
 
   return (
-    <div className="bg-gray-100">
-      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8">
+    <div className="bg-gray-100" data-testid="Banner-main-div">
+      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8" >
         <div className="flex items-center justify-between flex-wrap">
           <div className="flex md:hidden w-0 flex-1 flex items-center text-xs">
             <p className="font-medium text-gray-700">
@@ -37,7 +37,7 @@ export default function Banner({}) {
             </p>
           </div>
           <div className="flex">
-            <a
+            <a data-testid="Banner-link"
               href="https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl"
               className="flex items-center justify-center px-4 py-1 border border-transparent rounded-md shadow-sm text-xs font-medium text-indigo-600 focus:text-indigo-600 bg-white hover:bg-indigo-50"
               target="_blank" rel="noopener noreferrer"

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

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

diff --git a/components/newsroom/NewsroomArticle.js b/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>
   );
 }
diff --git a/components/newsroom/NewsroomBlogPosts.js b/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>

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

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

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

diff --git a/cypress/test/AlgoliaSearch.cy.js b/cypress/test/AlgoliaSearch.cy.js
@@ -0,0 +1,27 @@
+import { mount } from 'cypress/react'
+import AlgoliaSearch from '../../components/AlgoliaSearch'
+import { SearchButton } from '../../components/AlgoliaSearch';
+import { DocSearchModal } from '@docsearch/react'
+
+describe('AlgoliaSearch component', () => {
+  it('renders without errors', () => {
+    mount(
+      <AlgoliaSearch>
+        <SearchButton>Search</SearchButton>
+      </AlgoliaSearch>
+    )
+  })
+
+  it('performs search for a specific page', () => {
+    mount(
+      <AlgoliaSearch>
+        <SearchButton>Open Search</SearchButton>
+      </AlgoliaSearch>
+    );
+    cy.get('button').click(); // Open the search modal
+    cy.get('input[placeholder="Search resources"]').type('welcome')
+    cy.should('have.value', 'welcome')
+    // Check if the docsearch-list element contains the text 'Welcome'
+    cy.get('#docsearch-list').contains('Welcome')
+  });
+});
diff --git a/cypress/test/ComponentName.cy.js b/cypress/test/ComponentName.cy.js
diff --git a/cypress/test/GeneratorInstallation.cy.js b/cypress/test/GeneratorInstallation.cy.js
@@ -0,0 +1,8 @@
+import { mount } from 'cypress/react';
+import GeneratorInstallation from '../../components/GeneratorInstallation';
+
+describe('GeneratorInstallation', () => {
+    it('renders without errors', () => {
+        mount(<GeneratorInstallation />);
+    });
+});