-
-
Notifications
You must be signed in to change notification settings - Fork 632
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.
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
feat: adding unit tests for newsroom component #1891
feat: adding unit tests for newsroom component #1891
Conversation
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-1891--asyncapi-website.netlify.app/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do relevant changes as suggested in test files as well.
<section className="mt-10 lg:mt-4 relative w-fit mx-auto lg:w-1/2" data-testid="NewsroomSection-div"> | ||
<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="Newsroom-sectionDiv"> | ||
<Heading typeStyle="heading-md-semibold" level="h3"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that the data-testId
used in both div tag are of almost same name, written in different style. You shouldn't practice this naming conventions. Instead, make the testId related to the content inside the div. For example, NewsroomSection-div
can be written as NewsroomSection-Featured
and Newsroom-sectionDiv
can be written as NewsroomSection-main
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Applying the suggested changes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
{ | ||
"content": "Most popular repositories", | ||
"slug": "most-popular-repositories", | ||
"lvl": 3, | ||
"i": 19, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Traffic growth", | ||
"slug": "traffic-growth", | ||
"lvl": 3, | ||
"i": 20, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "What's next with GitHub", | ||
"slug": "whats-next-with-github", | ||
"lvl": 3, | ||
"i": 21, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "npm", | ||
"slug": "npm", | ||
"lvl": 2, | ||
"i": 22, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Top packages", | ||
"slug": "top-packages", | ||
"lvl": 3, | ||
"i": 23, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "What's next with npm", | ||
"slug": "whats-next-with-npm", | ||
"lvl": 3, | ||
"i": 24, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "YouTube", | ||
"slug": "youtube", | ||
"lvl": 2, | ||
"i": 25, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Watch time goes crazy", | ||
"slug": "watch-time-goes-crazy", | ||
"lvl": 3, | ||
"i": 26, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Most popular videos", | ||
"slug": "most-popular-videos", | ||
"lvl": 3, | ||
"i": 27, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "What's next with YouTube", | ||
"slug": "whats-next-with-youtube", | ||
"lvl": 3, | ||
"i": 28, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Open Collective", | ||
"slug": "open-collective", | ||
"lvl": 2, | ||
"i": 29, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Ultimate questions - how many people use the spec?", | ||
"slug": "ultimate-questions---how-many-people-use-the-spec", | ||
"lvl": 2, | ||
"i": 30, | ||
"seen": 0 | ||
}, | ||
{ | ||
"content": "Final words", | ||
"slug": "final-words", | ||
"lvl": 2, | ||
"i": 31, | ||
"seen": 0 | ||
} | ||
], | ||
"readingTime": 18, | ||
"sectionSlug": "/blog", | ||
"sectionWeight": 0, | ||
"id": "pages/blog/2020-summary.md", | ||
"isIndex": false, | ||
"slug": "/blog/2020-summary" | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Store this object as part of different static file where you can use this content to test BlogLayout and DocLayout as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Once this PR is merged , will add for docsLayout and BlogLayout as well , else it will cause a lot of conflicts .
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
target="_blank" | ||
rel="noopener noreferrer" | ||
data-testid={ `article-${ index }` } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
data-testid={ `article-${ index }` } | |
data-testid={ `NewsroomArticle-${ index }` } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -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-Next"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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-Next"> | |
<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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
<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-Prev"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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-Prev"> | |
<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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -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" data-testid="NewsroomYoutube-main"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div className="flex-col overflow-auto" data-testid="NewsroomYoutube-main"> | |
<div className={`flex-col overflow-auto ${className}`} data-testid="NewsroomYoutube-main"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -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-Next"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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-Next"> | |
<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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
}); | ||
it('slides to the next slide', () => { | ||
mount(<NewsroomBlogPosts />); | ||
cy.get('[data-testid="Blog-Next"]').click(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Make the click event work automatically using trigger
or { force: true }
.
Applicable everywhere.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
it('slides to the next slide', () => { | ||
mount(<NewsroomBlogPosts />); | ||
cy.get('[data-testid="Blog-Next"]').click(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use CSS class libraries of swiper to see which is the active post inside the slider. CSS library used is: swiper-slide-active
.
Applicable everywhere.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -0,0 +1,25 @@ | |||
import { mount } from 'cypress/react' | |||
import NewsroomSection from '../../../components/newsroom/NewsroomSection'; | |||
const newsroom = ["Latest news and blogs", "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."] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Only check for the heading, the content inside heading can be modified later on.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not updated in implementation yet.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
const newsroom = ["Latest news and blogs", "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."] | ||
describe('Features Component', () => { | ||
it('renders without errors', () => { | ||
mount(<NewsroomSection />); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use beforeEach
function of cypress to avoid repition of mount function.
Applicable everywhere.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
… newsroom_testcases
Co-authored-by: Akshat Nema <[email protected]>
Co-authored-by: Akshat Nema <[email protected]>
cypress/test/newsroom/Newsroom.cy.js
Outdated
it('checks TwitterTimelineEmbed', () => { | ||
mount( | ||
<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" data-testid="Newsroom-Twitter"> | ||
<TwitterTimelineEmbed | ||
sourceType="profile" | ||
screenName="AsyncAPISpec" | ||
options={ { tweetLimit: '2' } } | ||
/> | ||
</div> | ||
</div> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can't test the component like this by moounting the hardcoded implementation right from the test file. You should check for the Twitter Ebed using data-testId only.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -0,0 +1,25 @@ | |||
import { mount } from 'cypress/react' | |||
import NewsroomSection from '../../../components/newsroom/NewsroomSection'; | |||
const newsroom = ["Latest news and blogs", "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."] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not updated in implementation yet.
Co-authored-by: Akshat Nema <[email protected]>
/rtm |
Description
Newsroom component , of the website , has following components within it , and each component represented a piece of Newsroom component . Following are the components that are included for this :
Featured BlogItem
Newsroom
-NewsroomArticle
-NewsroomSection
-NewsroomYoutube
-YoutubeCard
-Swiper
Related issue(s)
fixes #1773