Skip to content

Commit

Permalink
Merge branch 'lib_tests' of https://github.com/reachaadrika/website i…
Browse files Browse the repository at this point in the history
…nto lib_tests
  • Loading branch information
reachaadrika committed Jul 18, 2023
2 parents 0d63206 + f505d49 commit 52cbc75
Show file tree
Hide file tree
Showing 22 changed files with 565 additions and 63 deletions.
6 changes: 3 additions & 3 deletions components/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
44 changes: 22 additions & 22 deletions components/OpenAPIComparison.js

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions components/newsroom/FeaturedBlogPost.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions components/newsroom/Newsroom.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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" />
Expand All @@ -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"
Expand All @@ -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" />
Expand Down
13 changes: 7 additions & 6 deletions components/newsroom/NewsroomArticle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
6 changes: 3 additions & 3 deletions components/newsroom/NewsroomBlogPosts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions components/newsroom/NewsroomSection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions components/newsroom/NewsroomYoutube.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions components/newsroom/YouTubeCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
27 changes: 27 additions & 0 deletions cypress/test/AlgoliaSearch.cy.js
Original file line number Diff line number Diff line change
@@ -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')
});
});
8 changes: 8 additions & 0 deletions cypress/test/GeneratorInstallation.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { mount } from 'cypress/react';
import GeneratorInstallation from '../../components/GeneratorInstallation';

describe('GeneratorInstallation', () => {
it('renders without errors', () => {
mount(<GeneratorInstallation />);
});
});
57 changes: 57 additions & 0 deletions cypress/test/OpenAPIComparison.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { mount } from '@cypress/react'
import OpenAPIComparison from '../../components/OpenAPIComparison'

describe('OpenAPIComparison', () => {
it('renders without errors', () => {
mount(<OpenAPIComparison />);

});

it('changes background color on hover', () => {
mount(<OpenAPIComparison />);

// Hover over the "Info" element
cy.contains('Info').trigger('mouseover');
cy.get('[data-testid="OpenAPI-sec-info"]').should('exist');

// Hover over the "Servers" element
cy.contains('Servers').trigger('mouseover');
cy.get('[data-testid="OpenAPI-sec-servers"]').should('exist');

// Hover over the "Paths" element
cy.contains('Paths').trigger('mouseover');
cy.get('[data-testid="OpenAPI-paths"]').should('exist');

// Hover over the "Path Item" element
cy.contains('Path Item').trigger('mouseover');
cy.get('[data-testid="OpenAPI-path-item"]').should('exist');

// Hover over the "Summary and description" element
cy.contains('Summary and description').trigger('mouseover');
cy.get('[data-testid="OpenAPI-summary"]').should('exist');

// Hover over the "Operation (GET, PUT, POST, etc.)" element
cy.contains('Operation (GET, PUT, POST, etc.)').trigger('mouseover');
cy.get('[data-testid="OpenAPI-operation"]').should('exist');

// Hover over the "Request" element
cy.contains('Request').trigger('mouseover');
cy.get('[data-testid="OpenAPI-request"]').should('exist');

// Hover over the "Responses" element
cy.contains('Responses').trigger('mouseover');
cy.get('[data-testid="OpenAPI-responses"]').should('exist');

// Hover over the "Tags" element
cy.contains('Tags').trigger('mouseover');
cy.get('[data-testid="OpenAPI-tags"]').should('exist');

// Hover over the "External Docs" element
cy.contains('External Docs').trigger('mouseover');
cy.get('[data-testid="OpenAPI-external"]').should('exist');

// Hover over the "Components" element
cy.contains('Components').trigger('mouseover');
cy.get('[data-testid="OpenAPI-components"]').should('exist');
});
});
6 changes: 1 addition & 5 deletions cypress/test/lib/staticHelpers.cy.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import { mount } from '@cypress/react';

import {
getEvents
} from '../../../lib/staticHelpers';
import { getEvents } from '../../../lib/staticHelpers';

describe('getEvents', () => {
it('should return sorted events in ascending order', () => {
Expand Down
Loading

0 comments on commit 52cbc75

Please sign in to comment.