feat: adding unit tests for layout component (#1914)

Co-authored-by: akshatnema <[email protected]>
asyncapi · Jul 16, 2023 · bd4504a · bd4504a
1 parent 2920787
commit bd4504a
Show file tree

Hide file tree

Showing 25 changed files with 1,039 additions and 267 deletions.
diff --git a/components/AlgoliaSearch.js b/components/AlgoliaSearch.js
@@ -11,7 +11,7 @@ export const DOCS_INDEX_NAME = 'asyncapi-docs';
 const APP_ID = 'Z621OGRI9Y';
 const API_KEY = '5a4122ae46ce865146d23d3530595d38';
 
-const SearchContext = createContext()
+const SearchContext = createContext({});
 
 export default function AlgoliaSearch({ children }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -47,14 +47,7 @@ export default function AlgoliaSearch({ children }) {
       <Head>
         <link rel="preconnect" href={`https://${APP_ID}-dsn.algolia.net`} crossOrigin="true" />
       </Head>
-      <SearchContext.Provider
-        value={{
-          isOpen,
-          onOpen,
-          onClose,
-          onInput,
-        }}
-      >
+      <SearchContext.Provider value={{ isOpen, onOpen, onClose, onInput }}>
         {children}
       </SearchContext.Provider>
       {isOpen && <AlgoliaModal initialQuery={initialQuery} onClose={onClose} indexName={indexName} />}

diff --git a/components/Head.js b/components/Head.js
@@ -1,24 +1,33 @@
-import { useContext } from 'react'
-import Head from 'next/head'
-import AppContext from '../context/AppContext'
-import ReactGA from 'react-ga'
-import TagManager from 'react-gtm-module'
+import { useContext, useEffect } from 'react';
+import Head from 'next/head';
+import AppContext from '../context/AppContext';
+import ReactGA from 'react-ga';
+import TagManager from 'react-gtm-module';
 
 export default function HeadComponent({
   title,
   description = 'Open source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the industry standard for defining asynchronous APIs.',
   image = '/img/social/website-card.jpg',
   rssTitle = 'RSS Feed for AsyncAPI Initiative Blog',
-  rssLink = '/rss.xml'
+  rssLink = '/rss.xml',
 }) {
-  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || "http://localhost:3000"
-  const { path = '' } = useContext(AppContext)
-  const permalink = `${url}${path}`
-  let type = 'website'
-  if (path.startsWith('/docs') || path.startsWith('/blog')) type = 'article'
-  if (!image.startsWith('http') && !image.startsWith('https')) image = `${url}${image}`
-  const permTitle = 'AsyncAPI Initiative for event-driven APIs'
-  title = title ? `${title} | ${permTitle}` : permTitle
+  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || 'http://localhost:3000';
+  const appContext = useContext(AppContext);
+  const { path = '' } = appContext || {};
+
+  const permalink = `${url}${path}`;
+  let type = 'website';
+
+  if (path.startsWith('/docs') || path.startsWith('/blog')) {
+    type = 'article';
+  }
+
+  if (!image.startsWith('http') && !image.startsWith('https')) {
+    image = `${url}${image}`;
+  }
+
+  const permTitle = 'AsyncAPI Initiative for event-driven APIs';
+  title = title ? `${title} | ${permTitle}` : permTitle;
 
   //enable google analytics
   if (typeof window !== 'undefined') {
@@ -27,6 +36,7 @@ export default function HeadComponent({
     ReactGA.pageview(window.location.pathname + window.location.search)
   }
 
+
   return (
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -50,13 +60,13 @@ export default function HeadComponent({
       <meta itemProp="name" content={title} />
       <meta itemProp="description" content={description} />
       <meta itemProp="image" content={image} />
-      
+
       {/* Twitter Card data */}
       <meta name="twitter:card" value="summary_large_image" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={image} />
-      
+
       {/* Open Graph data */}
       <meta property="og:title" content={title} />
       <meta property="og:type" content={type} />
@@ -66,5 +76,5 @@ export default function HeadComponent({
 
       <title>{title}</title>
     </Head>
-  )
+  );
 }
diff --git a/components/layout/BlogLayout.js b/components/layout/BlogLayout.js
@@ -1,56 +1,71 @@
-import { useRouter } from 'next/router'
-import HtmlHead from 'next/head'
-import ErrorPage from 'next/error'
-import moment from 'moment'
-import Head from '../Head'
-import BlogContext from '../../context/BlogContext'
-import TOC from '../TOC'
-import NavBar from '../navigation/NavBar'
-import Container from './Container'
-import AuthorAvatars from '../AuthorAvatars'
-import StickyNavbar from '../navigation/StickyNavbar'
-import AnnouncementHero from '../campaigns/AnnoucementHero'
+import { useRouter } from 'next/router';
+import HtmlHead from 'next/head';
+import ErrorPage from 'next/error';
+import moment from 'moment';
+import Head from '../Head';
+import BlogContext from '../../context/BlogContext';
+import TOC from '../TOC';
+import NavBar from '../navigation/NavBar';
+import Container from './Container';
+import AuthorAvatars from '../AuthorAvatars';
+import StickyNavbar from '../navigation/StickyNavbar';
+import AnnouncementHero from '../campaigns/AnnoucementHero';
 
 export default function BlogLayout({ post, children }) {
-  if (!post) return <ErrorPage statusCode={404} />
-  if (post.title === undefined) throw new Error('Post title is required')
+  if (!post) return <ErrorPage statusCode={404} />;
+  if (post.title === undefined) throw new Error('Post title is required');
 
-  const router = useRouter()
+  const router = useRouter();
   if (!router.isFallback && !post?.slug) {
-    return <ErrorPage statusCode={404} />
+    return <ErrorPage statusCode={404} />;
   }
 
   return (
     <BlogContext.Provider value={{ post }}>
-      <StickyNavbar>
+      <StickyNavbar data-testid="BlogLayout-Navbar">
         <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
       </StickyNavbar>
-      <AnnouncementHero className='my-4 mx-8' />
+      <AnnouncementHero className="my-4 mx-8" />
       <Container cssBreakingPoint="lg" flex flexReverse>
-        <TOC toc={post.toc} cssBreakingPoint="lg" className="bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-40 lg:max-w-64 lg:-mr-20 xl:min-w-72 xl:-mr-36" />
+        <TOC
+          toc={post.toc}
+          cssBreakingPoint="lg"
+          className="bg-blue-100 mt-4 p-4 sticky top-20 overflow-y-auto max-h-screen lg:bg-transparent lg:mt-2 lg:pt-0 lg:pb-8 lg:top-24 lg:max-h-(screen-16) lg:border-l lg:border-gray-200 lg:min-w-40 lg:max-w-64 lg:-mr-20 xl:min-w-72 xl:-mr-36"
+        />
         <main className="mt-8 px-4 sm:px-6 lg:pr-8 lg:pl-0 lg:flex-1 lg:max-w-172 xl:max-w-172">
           <header className="pr-4 sm:pr-6 md:pr-8">
-            <h1 className="text-4xl font-normal text-gray-800 font-sans antialiased">{post.title}</h1>
+            <h1
+              className="text-4xl font-normal text-gray-800 font-sans antialiased"
+              data-testid="BlogLayout-main"
+            >
+              {post.title}
+            </h1>
             <div className="mt-6 flex items-center">
               <div className="relative flex-shrink-0">
                 <AuthorAvatars authors={post.authors} />
               </div>
               <div className="ml-3">
                 <p className="text-sm leading-5 font-medium text-gray-900">
                   <span className="hover:underline">
-                    {post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link}>{author.name}</a> : author.name).reduce((prev, curr) => [prev, ' & ', curr])}
+                    {post.authors
+                      .map((author, index) =>
+                        author.link ? (
+                          <a key={index} alt={author.name} href={author.link}>
+                            {author.name}
+                          </a>
+                        ) : (
+                          author.name
+                        )
+                      )
+                      .reduce((prev, curr) => [prev, ' & ', curr])}
                   </span>
                 </p>
                 <div className="flex text-sm leading-5 text-gray-500">
                   <time dateTime={post.date}>
                     {moment(post.date).format('MMMM D, YYYY')}
                   </time>
-                  <span className="mx-1">
-                    &middot;
-                  </span>
-                  <span>
-                    {post.readingTime} min read
-                  </span>
+                  <span className="mx-1">&middot;</span>
+                  <span>{post.readingTime} min read</span>
                 </div>
               </div>
             </div>
@@ -62,7 +77,11 @@ export default function BlogLayout({ post, children }) {
               image={post.cover}
             />
             <HtmlHead>
-              <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb852c7b57ed596" async />
+              <script
+                type="text/javascript"
+                src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cb852c7b57ed596"
+                async
+              />
               <style>{`
                 /* AddThis hack */
 
@@ -82,11 +101,16 @@ export default function BlogLayout({ post, children }) {
               `}</style>
               {post.canonical && <link rel="canonical" href={post.canonical} />}
             </HtmlHead>
-            <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className="mt-6 mb-6 w-full" />
+            <img
+              src={post.cover}
+              alt={post.coverCaption}
+              title={post.coverCaption}
+              className="mt-6 mb-6 w-full"
+            />
             {children}
           </article>
         </main>
       </Container>
     </BlogContext.Provider>
-  )
-}
+  );
+}
diff --git a/components/layout/Column.js b/components/layout/Column.js
@@ -1,7 +1,7 @@
-export default function Column ({children}) {
+export default function Column({ children }) {
   return (
-    <div className="mb-4 md:mb-0 md:flex-1 md:mx-1">
+    <div className="mb-4 md:mb-0 md:flex-1 md:mx-1" data-testid="Column-main">
       {children}
     </div>
-  )
+  );
 }
diff --git a/components/layout/Container.js b/components/layout/Container.js
@@ -1,4 +1,4 @@
-export default function Container ({
+export default function Container({
   children,
   fluid = false,
   flex = false,
@@ -9,17 +9,32 @@ export default function Container ({
   className = '',
   as,
 }) {
-  const commonClassNames = `${flex ? `${cssBreakingPoint === 'lg' ? 'lg:flex' : 'md:flex'}` : 'block'} ${flexReverse ? `${cssBreakingPoint === 'lg' ? 'lg:flex-row-reverse' : 'md:flex-row-reverse'}`  : ''} ${className} ${padding}`
-  const wideClassNames = `max-w-screen-xl ${commonClassNames}`
-  const regularClassNames = `max-w-4xl ${commonClassNames}`
-  const normalClassNames = `${wide ? wideClassNames : regularClassNames} mx-auto w-full`
-  const fluidClassNames = `${commonClassNames}`
+  const commonClassNames = `${
+    flex ? `${cssBreakingPoint === 'lg' ? 'lg:flex' : 'md:flex'}` : 'block'
+  } ${
+    flexReverse
+      ? `${
+          cssBreakingPoint === 'lg'
+            ? 'lg:flex-row-reverse'
+            : 'md:flex-row-reverse'
+        }`
+      : ''
+  } ${className} ${padding}`;
+  const wideClassNames = `max-w-screen-xl ${commonClassNames}`;
+  const regularClassNames = `max-w-4xl ${commonClassNames}`;
+  const normalClassNames = `${
+    wide ? wideClassNames : regularClassNames
+  } mx-auto w-full`;
+  const fluidClassNames = `${commonClassNames}`;
 
   const Tag = as || 'div';
-  
+
   return (
-    <Tag className={fluid ? fluidClassNames : normalClassNames}>
+    <Tag
+      className={fluid ? fluidClassNames : normalClassNames}
+      data-testid="Container-main"
+    >
       {children}
     </Tag>
-  )
-}
+  );
+}