feat: adding unit tests for newsroom component #1891

reachaadrika · 2023-07-03T21:11:57Z

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

NewsroomBlogPost

-NewsroomSection

-NewsroomYoutube

-YoutubeCard

-Swiper

Related issue(s)
fixes #1773

netlify · 2023-07-03T21:12:02Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`78b1943`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b55fd8fe742a00087c47c0
😎 Deploy Preview	https://deploy-preview-1891--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-07-03T21:13:56Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	50
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🔴 PWA	30

Lighthouse ran on https://deploy-preview-1891--asyncapi-website.netlify.app/

akshatnema

Do relevant changes as suggested in test files as well.

components/newsroom/Newsroom.js

akshatnema · 2023-07-08T10:48:52Z

components/newsroom/NewsroomSection.js

+      <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">


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.

Applying the suggested changes

components/newsroom/NewsroomYoutube.js

components/newsroom/YouTubeCard.js

akshatnema · 2023-07-08T11:02:35Z

cypress/test/newsroom/FeaturedBlogItem.cy.js

+        {
+            "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"
+}
+


Store this object as part of different static file where you can use this content to test BlogLayout and DocLayout as well.

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]>

akshatnema · 2023-07-13T09:33:27Z

components/newsroom/NewsroomArticle.js

            target="_blank"
            rel="noopener noreferrer"
+            data-testid={ `article-${ index }` }


Suggested change

data-testid={ `article-${ index }` }

data-testid={ `NewsroomArticle-${ index }` }

akshatnema · 2023-07-13T09:35:07Z

components/newsroom/NewsroomBlogPosts.js

@@ -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">


Suggested change

<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">

akshatnema · 2023-07-13T09:35:19Z

components/newsroom/NewsroomBlogPosts.js

          <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">


Suggested change

<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">

akshatnema · 2023-07-13T09:36:38Z

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" data-testid="NewsroomYoutube-main">


Suggested change

<div className="flex-col overflow-auto" data-testid="NewsroomYoutube-main">

<div className={`flex-col overflow-auto ${className}`} data-testid="NewsroomYoutube-main">

akshatnema · 2023-07-13T09:36:59Z

components/newsroom/NewsroomYoutube.js

@@ -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">


Suggested change

<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">

cypress/test/newsroom/NewsroomBlogPost.cy.js

akshatnema · 2023-07-13T10:10:35Z

cypress/test/newsroom/NewsroomBlogPost.cy.js

+    });
+    it('slides to the next slide', () => {
+        mount(<NewsroomBlogPosts />);
+        cy.get('[data-testid="Blog-Next"]').click();


Make the click event work automatically using trigger or { force: true }.

Applicable everywhere.

akshatnema · 2023-07-13T10:14:42Z

cypress/test/newsroom/NewsroomBlogPost.cy.js

+    it('slides to the next slide', () => {
+        mount(<NewsroomBlogPosts />);
+        cy.get('[data-testid="Blog-Next"]').click();
+


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.

akshatnema · 2023-07-13T10:15:55Z

cypress/test/newsroom/NewsroomSection.cy.js

@@ -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."]


Only check for the heading, the content inside heading can be modified later on.

This is not updated in implementation yet.

akshatnema · 2023-07-13T10:19:11Z

cypress/test/newsroom/NewsroomSection.cy.js

+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 />);


Use beforeEach function of cypress to avoid repition of mount function.

Applicable everywhere.

… newsroom_testcases

Co-authored-by: Akshat Nema <[email protected]>

cypress/test/newsroom/Newsroom.cy.js

akshatnema · 2023-07-13T18:54:53Z

cypress/test/newsroom/Newsroom.cy.js

+    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>
+        );


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.

akshatnema · 2023-07-13T18:56:06Z

cypress/test/newsroom/NewsroomSection.cy.js

@@ -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."]


This is not updated in implementation yet.

Co-authored-by: Akshat Nema <[email protected]>

akshatnema · 2023-07-17T16:04:25Z

/rtm

tests for newsroom component

c8bc90b

reachaadrika requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners July 3, 2023 21:11

reachaadrika changed the title ~~feat: adding unit tests for newroom component~~ feat: adding unit tests for newsroom component Jul 3, 2023

reachaadrika added 3 commits July 7, 2023 16:03

Merge branch 'master' into newsroom_testcases

526eadc

Merge branch 'master' into newsroom_testcases

67607c1

Merge branch 'master' into newsroom_testcases

50708c9

akshatnema requested changes Jul 8, 2023

View reviewed changes

reachaadrika and others added 8 commits July 8, 2023 16:35

Update components/newsroom/YouTubeCard.js

86a3236

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/YouTubeCard.js

9d20043

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/NewsroomYoutube.js

00c5f76

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/Newsroom.js

1ddd4bc

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/Newsroom.js

ad22a06

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/Newsroom.js

af8fe65

Co-authored-by: Akshat Nema <[email protected]>

Update components/newsroom/Newsroom.js

83c5e2d

Co-authored-by: Akshat Nema <[email protected]>

changes done for newsroom tests

760286d

akshatnema added the gsoc This label should be used for issues or discussions related to ideas for Google Summer of Code label Jul 10, 2023

reachaadrika added 4 commits July 11, 2023 00:03

Merge branch 'master' into newsroom_testcases

999117f

Merge branch 'master' into newsroom_testcases

f432ee0

Merge branch 'master' into newsroom_testcases

4b98152

Merge branch 'master' into newsroom_testcases

cadadf8

reachaadrika mentioned this pull request Jul 11, 2023

feat: add unit tests for AuthorAvatars , TOC , Hero , Meeting and DemoAnimation and Figure components #1831

Merged

Merge branch 'master' into newsroom_testcases

1a4d0cb

akshatnema requested changes Jul 13, 2023

View reviewed changes

Merge branch 'master' into newsroom_testcases

7f72c1f

reachaadrika requested a review from Mayaleeeee as a code owner July 13, 2023 12:57

reachaadrika and others added 6 commits July 13, 2023 23:07

Merge branch 'master' into newsroom_testcases

c75ac8d

Merge branch 'master' of https://github.com/reachaadrika/website into…

d721d19

… newsroom_testcases

Update cypress/test/newsroom/NewsroomBlogPost.cy.js

f03994d

Co-authored-by: Akshat Nema <[email protected]>

changes done for newsroom component

2504648

changes done

8c7b34f

Update cypress/test/newsroom/FeaturedBlogItem.cy.js

6293230

Co-authored-by: Akshat Nema <[email protected]>

akshatnema reviewed Jul 13, 2023

View reviewed changes

reachaadrika and others added 9 commits July 14, 2023 00:28

Update cypress/test/newsroom/Newsroom.cy.js

a44a1c5

Co-authored-by: Akshat Nema <[email protected]>

Merge branch 'master' into newsroom_testcases

5c49e5d

required changes

991eb18

removed subheadings check

69818a7

Merge branch 'master' into newsroom_testcases

2015538

Merge branch 'master' into newsroom_testcases

5f6d579

Merge branch 'master' into newsroom_testcases

bff14ff

Merge branch 'master' into newsroom_testcases

2051b90

Update code formatting and spacing

1444783

akshatnema approved these changes Jul 17, 2023

View reviewed changes

Merge branch 'master' into newsroom_testcases

78b1943

asyncapi-bot added the ready-to-merge label Jul 17, 2023

asyncapi-bot merged commit ab12e85 into asyncapi:master Jul 17, 2023
11 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adding unit tests for newsroom component #1891

feat: adding unit tests for newsroom component #1891

reachaadrika commented Jul 3, 2023

netlify bot commented Jul 3, 2023 •

edited

Loading

github-actions bot commented Jul 3, 2023 •

edited

Loading

akshatnema left a comment

akshatnema Jul 8, 2023

reachaadrika Jul 8, 2023

reachaadrika Jul 9, 2023

akshatnema Jul 8, 2023

reachaadrika Jul 9, 2023

reachaadrika Jul 9, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

reachaadrika Jul 13, 2023

akshatnema Jul 13, 2023

akshatnema commented Jul 17, 2023

	data-testid={ `article-${ index }` }
	data-testid={ `NewsroomArticle-${ index }` }

	<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">

	<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">

	<div className="flex-col overflow-auto" data-testid="NewsroomYoutube-main">
	<div className={`flex-col overflow-auto ${className}`} data-testid="NewsroomYoutube-main">

feat: adding unit tests for newsroom component #1891

feat: adding unit tests for newsroom component #1891

Conversation

reachaadrika commented Jul 3, 2023

netlify bot commented Jul 3, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Jul 3, 2023 • edited Loading

akshatnema left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akshatnema commented Jul 17, 2023

netlify bot commented Jul 3, 2023 •

edited

Loading

github-actions bot commented Jul 3, 2023 •

edited

Loading