Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: adding unit tests for layout component #1914

Merged
merged 27 commits into from
Jul 16, 2023
Merged

feat: adding unit tests for layout component #1914

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
5f4fb69
tests
reachaadrika Jun 29, 2023
36a2e61
initial tests
reachaadrika Jul 4, 2023
29cab0a
tests for layout component
reachaadrika Jul 6, 2023
dc937fc
Merge branch 'master' into layout_tests
reachaadrika Jul 7, 2023
e7dcab5
Merge branch 'master' into layout_tests
reachaadrika Jul 8, 2023
d937303
Merge branch 'master' of https://github.com/reachaadrika/website into…
reachaadrika Jul 11, 2023
dd473c9
Merge branch 'master' into layout_tests
reachaadrika Jul 13, 2023
aa1b5f4
Update components/layout/DocsLayout.js
reachaadrika Jul 13, 2023
3ffd1ea
Update components/layout/GenericLayout.js
reachaadrika Jul 13, 2023
e3e69de
Update cypress/utils/router.js
reachaadrika Jul 13, 2023
a03c7fe
Merge branch 'master' into layout_tests
reachaadrika Jul 13, 2023
0b9fbdf
initial changes
reachaadrika Jul 13, 2023
c774e8e
Update cypress/test/layout/Layout.cy.js
reachaadrika Jul 13, 2023
c630acc
Update cypress/test/layout/GenericPostLayout.cy.js
reachaadrika Jul 13, 2023
f145b6f
Update cypress/support/component.js
reachaadrika Jul 13, 2023
4df9259
Update cypress/test/layout/GenericLayout.cy.js
reachaadrika Jul 13, 2023
9217f3a
Merge branch 'master' into layout_tests
reachaadrika Jul 13, 2023
925ac99
changes for layout done
reachaadrika Jul 13, 2023
2722aee
Merge branch 'layout_tests' of https://github.com/reachaadrika/websit…
reachaadrika Jul 13, 2023
3041803
Merge branch 'master' into layout_tests
reachaadrika Jul 14, 2023
877c24b
Merge branch 'master' into layout_tests
reachaadrika Jul 14, 2023
ef1cad9
revert the changes in Head component
reachaadrika Jul 15, 2023
a420118
Merge branch 'layout_tests' of https://github.com/reachaadrika/websit…
reachaadrika Jul 15, 2023
dae79c7
Merge branch 'master' into layout_tests
reachaadrika Jul 16, 2023
341b810
revert head changes
reachaadrika Jul 16, 2023
2ce6a2b
Merge branch 'layout_tests' of https://github.com/reachaadrika/websit…
reachaadrika Jul 16, 2023
b9453a0
Correct spacings
akshatnema Jul 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions components/AlgoliaSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@ export const DOCS_INDEX_NAME = 'asyncapi-docs';
const APP_ID = 'Z621OGRI9Y';
const API_KEY = '5a4122ae46ce865146d23d3530595d38';

const SearchContext = createContext()
const SearchContext = createContext({
isOpen: false,
onOpen: () => {},
onClose: () => {},
onInput: () => {},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are the functions, part of React Context?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

});


export default function AlgoliaSearch({ children }) {
const [isOpen, setIsOpen] = useState(false);
Expand Down Expand Up @@ -47,14 +53,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} />}
Expand Down
55 changes: 32 additions & 23 deletions components/Head.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
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 || {};

//enable google analytics
if (typeof window !== 'undefined') {
TagManager.initialize({gtmId: 'GTM-T58BTVQ'})
ReactGA.initialize('UA-109278936-1')
ReactGA.pageview(window.location.pathname + window.location.search)
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;

useEffect(() => {
// Enable Google Analytics
TagManager.initialize({ gtmId: 'GTM-T58BTVQ' });
ReactGA.initialize('UA-109278936-1');
ReactGA.pageview(window.location.pathname + window.location.search);
}, []);

return (
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
Expand All @@ -50,13 +59,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:card" content="summary_large_image" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why value has been changed to content?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed this to some error , resolved this to previous one since it is not needed now .

<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} />
Expand All @@ -66,5 +75,5 @@ export default function HeadComponent({

<title>{title}</title>
</Head>
)
);
}
86 changes: 55 additions & 31 deletions components/layout/BlogLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-head"
>
{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>
Expand All @@ -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 */

Expand All @@ -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>
)
}
);
}
6 changes: 3 additions & 3 deletions components/layout/Column.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-div">
{children}
</div>
)
);
}
35 changes: 25 additions & 10 deletions components/layout/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function Container ({
export default function Container({
children,
fluid = false,
flex = false,
Expand All @@ -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-div"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
data-testid="Container-div"
data-testid="Container-main"

Applicable everywhere

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

>
{children}
</Tag>
)
}
);
}
Loading