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

reachaadrika · 2023-06-23T19:39:11Z

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. AuthorAvatars : This is a standalone file in the code , which tells and shares the Author details . For this component I have included following tests :

renders the author avatars without links
renders the author avatars with links

2. TOC : This is a standalone file in the code , I have included following testcases for this :

renders the TOC correctly with empty content
-renders the TOC correctly
expands and collapses the TOC on click

3. Hero : This is also a standalone file , and has the main hero component in the code . For this component I have included following tests :

4. Meeting : This is also a standalone file . I have included following test cases .

5.Figure : This is also a standalone file .

DemoAnimation : This is also a standalone file .

Related issue(s)
fixes #1830

netlify · 2023-06-23T19:39:17Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`6f00ff2`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b96cfa1857690008c857dd
😎 Deploy Preview	https://deploy-preview-1831--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-23T19:41:34Z

⚡️ Lighthouse report for the changes in this PR:

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

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

imabp · 2023-06-25T10:46:17Z

cypress/test/TOC.cy.js

+  it('renders the TOC correctly with empty content', () => {
+    mount(<TOC toc={[]} />);
+
+    cy.get('.hidden').should('not.exist');


use data-tested @reachaadrika

@reachaadrika Kindly address this comment.

@akshatnema test-id is not working , here tried to use both the divs , since I am only checking for hidden which is an optional css

imabp · 2023-06-25T10:46:46Z

cypress/test/TOC.cy.js

+  it('expands and collapses the TOC on click', () => {
+    mount(<TOC toc={toc} />);
+
+    // Verify initial state
+    cy.get('.hidden').should('exist'); // TOC content should be hidden
+
+    // Click on the TOC header
+    cy.get('h5').click();
+
+    // Verify expanded state
+    cy.get('.hidden').should('not.exist'); // TOC content should be visible
+
+    // Click again on the TOC header
+    cy.get('h5').click();
+
+    // Verify collapsed state
+    cy.get('.hidden').should('exist'); // TOC content should be hidden


use data-tested @reachaadrika

For this component , I am checking if hidden is present or not and there is a check for this in multiple div blocks , thus data-testid doesn't work here

imabp · 2023-06-25T10:47:03Z

cypress/test/AuthorAvatars.cy.js

+      cy.get('a')
+        .should('not.exist');
+
+      cy.get('img')
+        .eq(index)
+        .should('have.attr', 'src', author.photo)
+        .should('have.attr', 'title', author.name)
+        .should('have.class', index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authorsWithoutLinks.length - 1) * 7}`)
+        .should('have.class', `z-${(authorsWithoutLinks.length - 1 - index) * 10}`)
+        .should('have.class', 'h-10 w-10 border-2 border-white rounded-full object-cover hover:z-50');
+    });
+  });


use data-tested @reachaadrika

imabp · 2023-06-25T10:47:24Z

cypress/test/AuthorAvatars.cy.js

+      cy.get(`a[alt="${author.name}"][href="${author.link}"]`)
+        .should('have.length', 1)
+        .within(() => {
+          cy.get('img')
+            .should('have.attr', 'src', author.photo)
+            .should('have.attr', 'title', author.name)
+            .should('have.class', index > 0 ? `absolute left-${index * 7} top-0` : `relative mr-${(authors.length - 1) * 7}`)
+            .should('have.class', `z-${(authors.length - 1 - index) * 10}`)
+            .should('have.class', 'h-10 w-10 border-2 border-white rounded-full object-cover hover:z-50');
+        });
+    });


why not data-tested

imabp

Please go through the comments, and run through the code.
You should be using data-testid ..

akshatnema · 2023-06-27T12:41:00Z

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

…a/website into additional_testcases

akshatnema · 2023-07-08T04:30:03Z

components/Feedback.js

@@ -71,7 +71,7 @@ export default function Feedback(className = '') {
            <div className='block mx-auto w-fit'>
                <img src='/img/illustrations/icons/icon-x.svg' className='md:w-14' />
            </div>
-            <div className='text-center mx-auto text-lg mt-4'>
+            <div className='text-center mx-auto text-lg mt-4' data-testid="Feedback-div2">


Making naming convention with 1,2,3.. as suffux is not good practice, kindly update it with good naming for data-testid.

akshatnema · 2023-07-08T04:33:02Z

components/Feedback.js

@@ -50,7 +50,7 @@ export default function Feedback(className = '') {
                <div className='block mx-auto w-fit'>
                    <img src='/img/illustrations/icons/icon-check.svg' className='md:w-14' />
                </div>
-                <div className='text-center mx-auto text-lg mt-4'>
+                <div className='text-center mx-auto text-lg mt-4' data-testid="Feedback-div">


Unit test for this component is not added in PR.

For this component , I require another file namely Routers which is in another PR once that is merged I will push the tests for this component , since pushing this separately can cause conflicts

So,on which PR, these particular changes are dependent on?

For Feedback , it is dependent on Layout component pr #1914 , which has router file , and as you suggested in #1891 , to use the mock data here for PR #1914 , once it gets merged I can make the changes in PR #1914 so that is ready for a fresh review .

akshatnema · 2023-07-08T04:40:30Z

components/Hero.js

+            <Button className="block md:inline-block" text="Read the docs" href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />} 
+            data-testid="Hero-Button"/>
+            {/* Wrap SearchButton with AlgoliaSearch component */}
+            <AlgoliaSearch>


Specify the reason for wrapping the Algolia Search in this component.

Here will writing the tests for Hero , Search Button was not able to access the context , and some other refs , thus wrapped AlgoliaSearch component around it

akshatnema · 2023-07-20T16:31:05Z

/rtm

asyncapi-bot · 2023-07-20T16:31:19Z

Hello, @akshatnema! 👋🏼
This PR is not up to date with the base branch and can't be merged.
Please update your branch manually with the latest version of the base branch.
PRO-TIP: Add a comment to your PR with the text: /au or /autoupdate and our bot will take care of updating the branch in the future. The only requirement for this to work is to enable Allow edits from maintainers option in your PR.
Thanks 😄

akshatnema · 2023-07-20T17:24:22Z

/rtm

add additional tests

c265ed5

reachaadrika requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners June 23, 2023 19:39

reachaadrika changed the title ~~add additional tests~~ deat : add additional tests Jun 23, 2023

reachaadrika changed the title ~~deat : add additional tests~~ feat : add additional tests Jun 23, 2023

reachaadrika changed the title ~~feat : add additional tests~~ feat: adding unit tests for additional components Jun 23, 2023

imabp reviewed Jun 25, 2023

View reviewed changes

imabp suggested changes Jun 25, 2023

View reviewed changes

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

Merge branch 'master' into additional_testcases

ea50e66

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 additional components~~ feat: adding unit tests for AuthorAvatars , TOC , Hero , Meeting and DemoAnimation and Figure components Jun 27, 2023

reachaadrika and others 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

Merge branch 'master' into additional_testcases

ce0016b

akshatnema requested changes Jul 8, 2023

View reviewed changes

reachaadrika added 5 commits July 8, 2023 13:33

Merge branch 'master' into additional_testcases

d226d65

Merge branch 'master' into additional_testcases

412c37d

Merge branch 'master' into additional_testcases

85f3fff

Merge branch 'master' into additional_testcases

ff842a1

Merge branch 'master' into additional_testcases

e9b9634

Merge branch 'master' into additional_testcases

ed363ba

reachaadrika requested a review from Mayaleeeee as a code owner July 13, 2023 20:17

Merge branch 'master' into additional_testcases

c22e994

akshatnema changed the title ~~feat: adding unit tests for AuthorAvatars , TOC , Hero , Meeting and DemoAnimation and Figure components~~ feat: add unit tests for AuthorAvatars , TOC , Hero , Meeting and DemoAnimation and Figure components Jul 17, 2023

reachaadrika and others added 7 commits July 17, 2023 13:22

Merge branch 'master' into additional_testcases

4e67f40

Merge branch 'master' into additional_testcases

13375a5

add Feedback

2dc6e5f

add test for Feedback component

11cb022

Merge branch 'master' into additional_testcases

d10cc96

Merge branch 'master' into additional_testcases

036f816

Update mock data

384ca73

akshatnema approved these changes Jul 20, 2023

View reviewed changes

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

Merge branch 'master' into additional_testcases

6f00ff2

asyncapi-bot removed the ready-to-merge label Jul 20, 2023

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

asyncapi-bot merged commit 7d5c2fd into asyncapi:master Jul 20, 2023
12 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

reachaadrika commented Jun 23, 2023

netlify bot commented Jun 23, 2023 •

edited

Loading

github-actions bot commented Jun 23, 2023 •

edited

Loading

imabp Jun 25, 2023

akshatnema Jul 18, 2023

reachaadrika Jul 18, 2023

imabp Jun 25, 2023

reachaadrika Jun 27, 2023

imabp Jun 25, 2023

imabp Jun 25, 2023

imabp left a comment

akshatnema commented Jun 27, 2023

akshatnema Jul 8, 2023

akshatnema Jul 8, 2023

reachaadrika Jul 8, 2023

akshatnema Jul 11, 2023

reachaadrika Jul 11, 2023

akshatnema Jul 8, 2023

reachaadrika Jul 8, 2023

akshatnema commented Jul 20, 2023

asyncapi-bot commented Jul 20, 2023

akshatnema commented Jul 20, 2023

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

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

Conversation

reachaadrika commented Jun 23, 2023

netlify bot commented Jun 23, 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

imabp left a comment

Choose a reason for hiding this comment

akshatnema commented Jun 27, 2023

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 20, 2023

asyncapi-bot commented Jul 20, 2023

akshatnema commented Jul 20, 2023

netlify bot commented Jun 23, 2023 •

edited

Loading

github-actions bot commented Jun 23, 2023 •

edited

Loading