feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components #1827

reachaadrika · 2023-06-22T16:49:42Z

Description

In this PR , I have included the tests for some small UI components in the website , these components are present in the standalone files in the website . Following are the standalone files for which I have included the tests for :

1. InlineHelp.js : This is a toggle / hover component where when we hover on the Question Mark Icon , a helper text appears . The tests I have included here are as follows :

toggles help text visibility on click and hover

2. MacWindow.js : In this component , a MAC like UI has to appear , the tests I have included here are as follows :

renders the component props

3. NewsletterSubscribe : In this component , I have added the following tests :

renders the component with props

4.Profile : For this profile component , I have added the following tests :

renders null when profiles array is empty
renders profile links and names when profiles array is not empty

5. Remember : I have included following tests for this component :

renders the component with the provided title and children
renders the component with default title and no children

6. Warning : I have included following tests for this component :
-renders the component with the provided title and description

Related issue(s)
fixes #1826

netlify · 2023-06-22T16:49:47Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`0122320`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b3df92e28d49000879ac4c
😎 Deploy Preview	https://deploy-preview-1827--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-06-23T10:03:30Z

⚡️ Lighthouse report for the changes in this PR:

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

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

… additional_tests

imabp · 2023-06-25T10:51:49Z

cypress/test/InlineHelp.cy.js

+      cy.get('[data-testid="InlineHelp"]').should('not.exist');
+
+      // Click on the question mark icon to show text
+      cy.get('svg').click(); 


data-testID @reachaadrika

imabp · 2023-06-25T10:52:02Z

cypress/test/InlineHelp.cy.js

+      cy.get('[data-testid="InlineHelp"]').should('be.visible').should('contain', text);
+
+      // Click on the question mark icon again to hide text
+      cy.get('svg').click();


data-testID @reachaadrika

imabp · 2023-06-25T10:52:10Z

cypress/test/InlineHelp.cy.js

+      cy.get('[data-testid="InlineHelp"]').should('not.exist');
+
+      // Hover the question mark icon to show text
+      cy.get('svg').trigger('mouseover');


data-testID @reachaadrika

imabp · 2023-06-25T10:52:19Z

cypress/test/InlineHelp.cy.js

+      cy.get('[data-testid="InlineHelp"]').should('be.visible').should('contain', text);
+
+      // Move the cursor from the question mark icon to hide text
+      cy.get('svg').trigger('mouseout');


data-testID @reachaadrika

imabp · 2023-06-25T10:52:41Z

cypress/test/MacWindow.cy.js

+    cy.get('div')
+      .should('have.class', className)


data-testID @reachaadrika

imabp · 2023-06-25T10:52:55Z

cypress/test/NewsletterSubscribe.cy.js

+  it('renders the component with default props', () => {
+    mount(<NewsletterSubscribe />);
+
+    cy.get('div.p-8.text-center').should('exist');


data-testID @reachaadrika

imabp · 2023-06-25T10:54:32Z

cypress/test/NewsletterSubscribe.cy.js

+    mount(<NewsletterSubscribe />);
+
+    cy.get('div.p-8.text-center').should('exist');
+    cy.contains('Subscribe to our newsletter').should('exist');


declare all the hardcode text in a constant variable, and use it here
const NewsletterConstants = [
"sentence1",
"sentence2"
]
And use Newsletter[0] like that, so the code becomes maintainable, when the text changes.

imabp · 2023-06-25T10:54:49Z

cypress/test/NewsletterSubscribe.cy.js

+
+    cy.get('div.p-8.text-center').should('exist');
+    cy.contains('Subscribe to our newsletter').should('exist');
+    cy.contains( 'We respect your inbox. No spam, promise ✌️').should('exist');


same as discussed above

imabp

Minor Changes, please fix asap

akshatnema · 2023-06-27T12:40:30Z

@reachaadrika Kindly update the PR title related to changes inside PR

…a/website into additional_testcases

…chaadrika/website into additional_tests" This reverts commit b90f9f9, reversing changes made to 7bcda57.

This reverts commit 442f631, reversing changes made to df79cec.

This reverts commit ab05b65.

… additional_tests

akshatnema

Make the relevant changes inside test files as well, regarding naming conventions.

akshatnema · 2023-07-11T07:30:40Z

components/MacWindow.js

          {title}
        </div>
-        <div className="hidden sm:block"> {/* This block is used for aligning the title on the center */}
+        <div className="hidden sm:block" data-testid="MacWindow-title"> {/* This block is used for aligning the title on the center */}


Suggested change

<div className="hidden sm:block" data-testid="MacWindow-title"> {/* This block is used for aligning the title on the center */}

<div className="hidden sm:block" data-testid="MacWindow-title-center"> {/* This block is used for aligning the title on the center */}

components/NewsletterSubscribe.js

akshatnema · 2023-07-11T07:31:09Z

components/NewsletterSubscribe.js

@@ -13,13 +13,14 @@ export default function NewsletterSubscribe ({
  const paragraphTextColor = dark ? 'text-gray-300' : ''

  return (
-    <div className={className}>
+    <div className={className} data-testid="NewsletterSubscribe-div">


Suggested change

<div className={className} data-testid="NewsletterSubscribe-div">

<div className={className} data-testid="NewsletterSubscribe-main">

akshatnema · 2023-07-11T07:31:30Z

components/Profile.js

@@ -3,9 +3,9 @@ export default function Profile({profiles = [], className}) {
    return null;
  }
    return (
-      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md">
+      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-div">


Suggested change

<div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-div">

<div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-main">

akshatnema · 2023-07-11T07:31:49Z

components/Remember.js

@@ -2,10 +2,10 @@ import LightBulb from './icons/LightBulb'

 export default function Remember({ title = 'Remember', className, children }) {
  return (
-    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`}>
-      <h5 className="pb-2 mb-4 border-b border-gray-900 text-lg">
+    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-div">


Suggested change

<div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-div">

<div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-main">

akshatnema · 2023-07-11T07:35:15Z

config/AMBASSADORS_MEMBERS.json

@@ -225,7 +225,7 @@
    "github": "M3lkior",
    "twitter": "ldussart",
    "country": "🇫🇷",
-    "bio": "Ludovic has been working for Ineat for the last 10 years. Starting as a java developer, he is now a Solutions Architect, working with his customers to build EDA-oriented digital products wherever possible. His first contributions to AsyncAPI date back to 2020 around the kafka and avro specifications. Since then, Ludovic has been spreading the word about AsyncAPI to companies in Northern France, to accelerate adoption of the initiative.",
+    "bio": "Ludovic is an Ineat employee since 10 years. Starting as java developer, he is now Solutions Architect and work with his customers to build digital products, EDA oriented when possible. His first contributions on AsyncAPI was in 2020 around the kafka and avro specifications. Since this day, Ludovic talk about AsyncAPI in the North of France compagnies in order to speedup the initiative adoption.",


Why the Ambassadors data has been changed?

I did not mean to change , this , it reflects the changes made by a merge commit . This is not the change I made .

akshatnema · 2023-07-11T07:47:50Z

cypress/test/MacWindow.cy.js

+    const title = '';
+    const children = '';


Add some title and child elements here to test the component correctly and preview the Component in Cypress.

akshatnema · 2023-07-11T07:48:15Z

cypress/test/MacWindow.cy.js

+    const className = 'my-mac-window';
+    const contentClassName = 'my-content';


Add correct classNames accordingly to check the properties similarly.

akshatnema · 2023-07-11T08:07:05Z

cypress/test/NewsletterSubscribe.cy.js

+    cy.contains(NewsletterConstants[0]).should('exist');
+    cy.contains(NewsletterConstants[1]).should('exist');


You should insert the data inside forms instead of checking the data inside array this way. You can refer to - https://www.browserstack.com/guide/how-to-fill-and-submit-forms-in-cypress, to type the content inside forms and then check after submitting it.

okay @akshatnema will keep in mind

akshatnema · 2023-07-11T08:08:22Z

cypress/test/Profile.cy.js

+      {
+        name: 'John Doe',
+        link: 'https://example.com/john',
+        avatar: 'john-avatar.png',


Add proper filepath for avatar here from public folder.

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

…bsite into additional_tests

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

akshatnema · 2023-07-16T12:20:33Z

/rtm

adding tests for additional components

5f866bf

reachaadrika requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners June 22, 2023 16:49

Merge branch 'master' into additional_tests

2a6f2c8

reachaadrika and others added 3 commits June 23, 2023 18:31

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

abdadac

… additional_tests

Merge branch 'master' into additional_tests

df79cec

add additional tests

c265ed5

imabp reviewed Jun 25, 2023

View reviewed changes

imabp suggested changes Jun 25, 2023

View reviewed changes

reachaadrika and others added 3 commits June 27, 2023 17:47

Merge branch 'master' into additional_testcases

ea50e66

Merge branch 'master' into additional_tests

442f631

fixes

810f7f8

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

reachaadrika changed the title ~~feat: adding unit tests for other additional components~~ feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components Jun 27, 2023

reachaadrika added 3 commits June 27, 2023 18:20

fixes

c9ffb30

Merge branch 'additional_testcases' of https://github.com/reachaadrik…

80f25cb

…a/website into additional_testcases

fixes

7bcda57

reachaadrika and others added 9 commits June 27, 2023 18:52

Revert "Merge branch 'additional_testcases' of https://github.com/rea…

c5f841f

…chaadrika/website into additional_tests" This reverts commit b90f9f9, reversing changes made to 7bcda57.

Revert "Merge branch 'master' into additional_tests"

7f860f7

This reverts commit 442f631, reversing changes made to df79cec.

Revert "Revert "Merge branch 'master' into additional_testcases""

7e005d3

This reverts commit ab05b65.

Merge branch 'master' into additional_tests

547553f

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

2960295

… additional_tests

Merge branch 'master' into additional_tests

8ce2b65

Merge branch 'master' into additional_tests

4449022

Merge branch 'master' into additional_tests

63ee9ed

Merge branch 'master' into additional_tests

6614f62

akshatnema requested changes Jul 11, 2023

View reviewed changes

reachaadrika and others added 5 commits July 11, 2023 16:32

Update components/NewsletterSubscribe.js

71e6ced

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Merge branch 'master' into additional_tests

5160f03

Merge branch 'additional_tests' of https://github.com/reachaadrika/we…

9625c50

…bsite into additional_tests

finished changes for Inline

f010f32

Merge branch 'master' into additional_tests

952d623

reachaadrika requested a review from Mayaleeeee as a code owner July 14, 2023 21:14

reachaadrika and others added 8 commits July 15, 2023 02:44

Update components/Warning.js

a110b45

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Update components/Warning.js

fcb5935

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Update components/Warning.js

34df299

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Update components/Remember.js

5c80208

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Update Warning.cy.js

33a4770

Update Remember.cy.js

2c22d32

Update components/Profile.js

925e820

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>

Merge branch 'master' into additional_tests

be06b6f

akshatnema approved these changes Jul 16, 2023

View reviewed changes

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

asyncapi-bot merged commit 277288d into asyncapi:master Jul 16, 2023

akshatnema added 2 commits July 16, 2023 22:52

Revert Ambassadors_members.json file

9ffab70

Update mock data in Profile.js

0122320

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components #1827

feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components #1827

reachaadrika commented Jun 22, 2023

netlify bot commented Jun 22, 2023 •

edited

Loading

github-actions bot commented Jun 23, 2023 •

edited

Loading

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp left a comment

akshatnema commented Jun 27, 2023

akshatnema left a comment

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema commented Jul 16, 2023

	<div className="hidden sm:block" data-testid="MacWindow-title"> {/* This block is used for aligning the title on the center */}
	<div className="hidden sm:block" data-testid="MacWindow-title-center"> {/* This block is used for aligning the title on the center */}

	<div className={className} data-testid="NewsletterSubscribe-div">
	<div className={className} data-testid="NewsletterSubscribe-main">

	<div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-div">
	<div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-main">

	<div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-div">
	<div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-main">

		const className = 'my-mac-window';
		const contentClassName = 'my-content';

		cy.contains(NewsletterConstants[0]).should('exist');
		cy.contains(NewsletterConstants[1]).should('exist');

feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components #1827

feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components #1827

Conversation

reachaadrika commented Jun 22, 2023

netlify bot commented Jun 22, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented Jun 23, 2023 • edited Loading

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

imabp left a comment

Choose a reason for hiding this comment

akshatnema commented Jun 27, 2023

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

akshatnema commented Jul 16, 2023

netlify bot commented Jun 22, 2023 •

edited

Loading

github-actions bot commented Jun 23, 2023 •

edited

Loading