feat: add unit tests for campaigns folder #1724

reachaadrika · 2023-05-29T12:50:57Z

Description

Here the unit tests have been added for the 'campaigns' component of the AsyncAPI , which displays recent campaign banners and announcements , for eg : the Madrid conference 2023 . This component has 3 files namely :
Banner.js : This showcases the event banner or the announcement banner . Therefore there were 3 major unit tests that were written for this page :
1. It should render the banner when the date is within the valid range .
2. should display the correct message when the date is within the valid range
3. should have a link to the recordings playlist
  For this in the current system , 'All the tests have been passed '
  Below is the result :

These tests pass since right now we do not have the need to display this ended banner , instead we have to display the Announcement banner for Madrid .

AnnouncementRemainingDays.js : Countdown . The tests included here are :
1. displays correct countdown text
  For this test , one can add the specific dateTime and eventName for the event . Currently I have taken arbitary values for the same .
  
  These tests pass and have displayed current no. of days .
AnnouncementHero.js : Main poster for the conference . The tests included here are :
1. should render the banner when it should be shown
2. should not render the banner when it should be hidden
  For now test 2 fails since there is no class present and the banner has to be shown to the users .

These changes do not introduce any breaking changes .

Related issue(s)
Fixes #1718

netlify · 2023-05-29T12:51:05Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`6027dd5`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/64b415ac05917f0008ff4304
😎 Deploy Preview	https://deploy-preview-1724--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-05-29T12:53:31Z

⚡️ Lighthouse report for the changes in this PR:

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

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

akshatnema · 2023-06-03T07:04:46Z

cypress/test/ComponentName.cy.js

This file is already deleted in another PR. It may create issues while merging any of the PRs.

akshatnema · 2023-06-03T07:07:39Z

cypress/test/campaignTests/Banner.cy.js

+    } else {
+      mount(<Banner />);
+     // cy.wait(1000); // Adjust the wait time as needed
+      cy.get('.bg-gray-100').should('be.visible');


also check for the .max-w-screen for this component, because it's an important UI aspect. It should cover the whole screen in terms of width.

done the required changes in current commit .

akshatnema · 2023-06-03T07:10:25Z

cypress/test/campaignTests/AnnouncementRemainingDays.cy.js

+      }
+    }
+
+    cy.get('.countdown-text-gradient').should('have.text', `${text} until ${eventName}`);


Also check for font-extrabold class because it's an announcement. No one in the future should remove the class.

done the required changes in current commit .

cypress/test/campaignTests/AnnouncementHero.cy.js

akshatnema · 2023-06-03T16:17:29Z

cypress/test/campaignTests/Banner.cy.js

+
+    if (year === 2022 && month === 10 && day >= 6) {
+      mount(<Banner />);
+     //cy.wait(1000); // Adjust the wait time as needed


Why the wait time is included in the tests?

Included the wait time earlier , had to test something specific , removed it , though I will remove the comments .

@akshatnema made a new commit removing the wait time , I am sorry for the commit message here , VS code did it , I was not able to connect to git , so had to push through source control in vs .

imabp · 2023-06-04T11:44:19Z

cypress/test/campaignTests/AnnouncementHero.cy.js

+    mount(<AnnouncementHero />);
+
+    // Assert that the component is rendered
+    cy.get('.bg-gray-50').should('exist');


We can use, data-componentName, in the original component, and use it in cypress for more accurate testing?
cc: @akshatnema @reachaadrika

For example:

<button id="main" class="btn btn-large" name="submission" role="button" data-cy="submit" > Submit </button>

Cypress Code

cy.get('[data-cy="submit"]')

Benefits of using data-ComponentId, it is isolated from all the JS CSS changes, (post css as well) offers more accuracy to our testing.

Refer this Cypres documentation

I think @reachaadrika is using it at many places. Maybe she forgot about it here, but yeah, the test for background color should be there as it tests whether component is rendering it's properties also.

I am checking for background and for rest of the components I will add data attribute

done the suggested changes , do check @imabp

cy.get('.bg-gray-50').should('exist');

@reachaadrika still the change is not reflected here
Kindly update

imabp

Let's use data-componentName, which is isolated from all the changes, that might happen as part of CSS and JS manipulations.

Please refer this section of doc, on how to use it

imabp · 2023-06-04T11:48:20Z

cypress/test/campaignTests/AnnouncementHero.cy.js

+    mount(<AnnouncementHero />);
+
+    // Assert that the component is not rendered
+    cy.get('.bg-gray-50').should('not.exist');


same here as well, using data-componentName
ref

sure @imabp adding data-cy and I will keep in mind to add data-cy rather than relying on tags and classes

Yes @reachaadrika, please replace the implementation this with data-cy="nameOfTheComponent", and this will be helpful when we check complex properties of an element. :)

done the suggested changes , do check @imabp

… campaignTests

… into campaignTests

… campaignTests

… into campaignTests

akshatnema · 2023-07-16T11:38:29Z

components/campaigns/AnnoucementHero.js

@@ -27,16 +27,16 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
    <Container wide as="section" padding='' className='text-center'>
      <div
        className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
-          small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
-        }`}
+          small ? 'mb-4' : 'mb-12'


@reachaadrika Why did you changed the CSS here?
You should check for these classNames inside the test file instead of reverting it to previous classes.

akshatnema · 2023-07-16T11:41:34Z

cypress/test/campaignTests/Banner.cy.js

+    const today = new Date();
+    const [day,  month, year] = [today.getUTCDate(),  today.getUTCMonth(),  today.getUTCFullYear()];
+    if (year > 2022 || month !== 10 || day < 6) {
+      mount(<Banner />);


Use beforeEach here to mount the Banner Component

For this I can't use BeforeEach since , for some parts in the code , I am rendering Banner after the clock is set , to get the Banner displayed like here const mockDate = new Date(2021, 10, 12).getTime(); cy.clock(mockDate); mount(<Banner />);

… into campaignTests

akshatnema · 2023-07-17T06:14:39Z

/rtm

unit tests for campaigns folder

563ac08

reachaadrika requested review from derberg, mcturco, akshatnema, magicmatatjahu and asyncapi-bot-eve as code owners May 29, 2023 12:50

other changes to the code , name fix and fixing eslint errors

7ee04b5

reachaadrika changed the title ~~unit tests for campaigns folder~~ adding unit tests for campaigns May 29, 2023

Merge branch 'master' into campaignTests

510ae01

reachaadrika changed the title ~~adding unit tests for campaigns~~ adding new unit tests for campaigns May 29, 2023

reachaadrika changed the title ~~adding new unit tests for campaigns~~ Adding unit tests for campaigns folder May 29, 2023

reachaadrika changed the title ~~Adding unit tests for campaigns folder~~ feat: adding unit tests for campaigns folder May 29, 2023

Merge branch 'master' into campaignTests

c6a39a5

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

Merge branch 'master' into campaignTests

7eab794

akshatnema reviewed Jun 3, 2023

View reviewed changes

akshatnema requested changes Jun 3, 2023

View reviewed changes

akshatnema requested a review from imabp June 3, 2023 07:15

reachaadrika and others added 2 commits June 3, 2023 19:03

Merge branch 'master' into campaignTests

13e87e6

changes in unit tests

418c7fa

akshatnema reviewed Jun 3, 2023

View reviewed changes

git

d514196

imabp reviewed Jun 4, 2023

View reviewed changes

imabp suggested changes Jun 4, 2023

View reviewed changes

reachaadrika and others added 3 commits June 7, 2023 00:06

Merge branch 'master' into campaignTests

91585c2

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

d796bcc

… campaignTests

adding data-cy attribute

f8c3af6

reachaadrika and others added 18 commits June 20, 2023 01:53

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

27f04df

… campaignTests

Merge branch 'master' into campaignTests

8bdaeac

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

62934b6

… into campaignTests

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

933dde2

… campaignTests

Merge branch 'master' into campaignTests

ddb3809

Merge branch 'master' into campaignTests

5900eae

Merge branch 'master' into campaignTests

5f6d2de

Merge branch 'master' into campaignTests

dd0b0e4

Merge branch 'master' into campaignTests

334887f

fix campaign tests

d2b1ab9

Merge branch 'master' into campaignTests

3f339e9

Merge branch 'master' into campaignTests

34f39c8

Merge branch 'master' into campaignTests

af76387

Merge branch 'master' into campaignTests

26df0f0

Merge branch 'master' into campaignTests

017e1f6

fixed tests for Banner

bcd67f7

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

fcd713f

… into campaignTests

Merge branch 'master' into campaignTests

8128550

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

Merge branch 'master' into campaignTests

b80e195

akshatnema reviewed Jul 16, 2023

View reviewed changes

akshatnema changed the title ~~feat: adding unit tests for campaigns folder~~ feat: add unit tests for campaigns folder Jul 16, 2023

reachaadrika and others added 4 commits July 16, 2023 21:36

fix Announcement Hero

015b510

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

6027dd5

… into campaignTests

Format AnnouncementHero.js

5af3471

Merge branch 'master' into campaignTests

2cd75e7

akshatnema approved these changes Jul 17, 2023

View reviewed changes

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add unit tests for campaigns folder #1724

feat: add unit tests for campaigns folder #1724

reachaadrika commented May 29, 2023 •

edited

Loading

netlify bot commented May 29, 2023 •

edited

Loading

github-actions bot commented May 29, 2023 •

edited

Loading

akshatnema Jun 3, 2023

akshatnema Jun 3, 2023

reachaadrika Jun 3, 2023

akshatnema Jun 3, 2023

reachaadrika Jun 3, 2023

akshatnema Jun 3, 2023

reachaadrika Jun 3, 2023

reachaadrika Jun 3, 2023

imabp Jun 4, 2023 •

edited

Loading

akshatnema Jun 4, 2023

reachaadrika Jun 4, 2023

reachaadrika Jun 7, 2023

imabp Jun 8, 2023 •

edited

Loading

reachaadrika Jun 17, 2023

imabp left a comment

imabp Jun 4, 2023

reachaadrika Jun 4, 2023

imabp Jun 4, 2023

reachaadrika Jun 7, 2023

akshatnema Jul 16, 2023

reachaadrika Jul 16, 2023

akshatnema Jul 16, 2023

reachaadrika Jul 16, 2023 •

edited

Loading

akshatnema commented Jul 17, 2023

feat: add unit tests for campaigns folder #1724

feat: add unit tests for campaigns folder #1724

Conversation

reachaadrika commented May 29, 2023 • edited Loading

netlify bot commented May 29, 2023 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

github-actions bot commented May 29, 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 Jun 4, 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

imabp Jun 8, 2023 • edited Loading

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

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

reachaadrika Jul 16, 2023 • edited Loading

Choose a reason for hiding this comment

akshatnema commented Jul 17, 2023

reachaadrika commented May 29, 2023 •

edited

Loading

netlify bot commented May 29, 2023 •

edited

Loading

github-actions bot commented May 29, 2023 •

edited

Loading

imabp Jun 4, 2023 •

edited

Loading

imabp Jun 8, 2023 •

edited

Loading

reachaadrika Jul 16, 2023 •

edited

Loading