From 3708aef68f4068a04f51e55b9503c44fac1b6035 Mon Sep 17 00:00:00 2001 From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com> Date: Mon, 17 Jul 2023 11:45:12 +0530 Subject: [PATCH] feat: add unit tests for campaigns folder (#1724) Co-authored-by: akshatnema <20bcs022@iiitdmj.ac.in>%0ACo-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com> --- components/campaigns/AnnoucementHero.js | 7 ++- .../campaigns/AnnouncementRamainingDays.js | 2 +- components/campaigns/Banner.js | 6 +- cypress/test/ComponentName.cy.js | 5 -- .../test/campaignTests/AnnouncementHero.cy.js | 55 +++++++++++++++++++ .../AnnouncementRemainingDays.cy.js | 38 +++++++++++++ cypress/test/campaignTests/Banner.cy.js | 50 +++++++++++++++++ 7 files changed, 151 insertions(+), 12 deletions(-) delete mode 100644 cypress/test/ComponentName.cy.js create mode 100644 cypress/test/campaignTests/AnnouncementHero.cy.js create mode 100644 cypress/test/campaignTests/AnnouncementRemainingDays.cy.js create mode 100644 cypress/test/campaignTests/Banner.cy.js diff --git a/components/campaigns/AnnoucementHero.js b/components/campaigns/AnnoucementHero.js index 88928285b52..81fce0c2c54 100644 --- a/components/campaigns/AnnoucementHero.js +++ b/components/campaigns/AnnoucementHero.js @@ -28,15 +28,15 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
+ typeStyle="heading-lg" > AsyncAPI Conf on Tour 2023 +
diff --git a/components/campaigns/AnnouncementRamainingDays.js b/components/campaigns/AnnouncementRamainingDays.js index df521333ad2..7584dbc6e79 100644 --- a/components/campaigns/AnnouncementRamainingDays.js +++ b/components/campaigns/AnnouncementRamainingDays.js @@ -17,7 +17,7 @@ export default function AnnouncementRemainingDays({ dateTime, eventName }) { } return ( - + {text} until {eventName} ) diff --git a/components/campaigns/Banner.js b/components/campaigns/Banner.js index 1942a7f28d5..28e309ce9ef 100644 --- a/components/campaigns/Banner.js +++ b/components/campaigns/Banner.js @@ -19,8 +19,8 @@ export default function Banner({}) { } return ( -
-
+
+

@@ -37,7 +37,7 @@ export default function Banner({}) {

- { - it('playground', () => { - // cy.mount() - }) -}) \ No newline at end of file diff --git a/cypress/test/campaignTests/AnnouncementHero.cy.js b/cypress/test/campaignTests/AnnouncementHero.cy.js new file mode 100644 index 00000000000..d2eeb1ddeba --- /dev/null +++ b/cypress/test/campaignTests/AnnouncementHero.cy.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { mount } from '@cypress/react'; +import AnnouncementHero from '../../../components/campaigns/AnnoucementHero'; +beforeEach(() => { + mount(); +}); + + +describe('AnnouncementHero Component', () => { + it('should render the component when the date is within the valid range', () => { + // Set the current date to May + const mockDate = new Date('2023-05-01T00:00:00Z'); + cy.clock(mockDate.getTime()); + // Assert that the component is rendered + //check for background color + cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'bg-gray-50'); + }); + + it('should display the correct event information', () => { + const mockDate = new Date('2023-05-01T00:00:00Z'); + cy.clock(mockDate.getTime()); + // Assert the event details + cy.get('[data-testid="AnnouncementHero-main-div"]').contains('AsyncAPI Conf on Tour 2023').should('exist'); + cy.get('[data-testid="AnnouncementHero-main-div"]').contains('London Edition').should('exist'); + cy.get('[data-testid="AnnouncementHero-main-div"]').contains('20th of September, 2023 | London, UK').should('exist'); + cy.contains('Submit a session').should('exist'); + }); + + it('should have a link to submit a session', () => { + const mockDate = new Date('2023-05-01T00:00:00Z'); + cy.clock(mockDate.getTime()); + // Assert the link + cy.get('[data-testid="AnnouncementHero-submit-session"]').should('have.attr', 'href', 'https://conference.asyncapi.com/') + .should('have.attr', 'target', '_blank') + .contains('Submit a session'); + }); + //check if announcement rendered is small or large . + it('should render a small announcement when "small" prop is true', () => { + const mockDate = new Date('2023-05-01T00:00:00Z'); + cy.clock(mockDate.getTime()); + + mount(); + + cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mb-4'); + }); + + it('should render a large announcement when "small" prop is false', () => { + const mockDate = new Date('2023-05-01T00:00:00Z'); + cy.clock(mockDate.getTime()); + + mount(); + + cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mx-3 mt-3 p-3 mb-6'); + }); +}); diff --git a/cypress/test/campaignTests/AnnouncementRemainingDays.cy.js b/cypress/test/campaignTests/AnnouncementRemainingDays.cy.js new file mode 100644 index 00000000000..783788c6214 --- /dev/null +++ b/cypress/test/campaignTests/AnnouncementRemainingDays.cy.js @@ -0,0 +1,38 @@ +import moment from 'moment'; +import { mount } from '@cypress/react'; +import AnnouncementRemainingDays from '../../../components/campaigns/AnnouncementRamainingDays'; + +describe('AnnouncementRemainingDays', () => { + it('displays correct countdown text', () => { + const dateTime = moment().add(2, 'days').toISOString(); // Set the dateTime value as desired + const eventName = 'Your Event'; // Set the eventName as desired + + mount(); + + const date = moment(dateTime); + const now = moment(); + const days = date.diff(now, 'days'); + + let text; + if (days >= 1) { + text = `${days} ${days === 1 ? 'day' : 'days'}`; + } else { + const hours = date.diff(now, 'hours'); + if (hours > 1) { + text = 'A few hours'; + } else { + const minutes = date.diff(now, 'minutes'); + if (minutes > 1) { + text = 'A few minutes'; + } + } + } + + cy.get('[data-testid="AnnouncementRemainingDays-text"]').should('have.text', `${text} until ${eventName}`); + + //check class font-extrabold + cy.get('[data-testid="AnnouncementRemainingDays-text"]').should('have.class', 'font-extrabold'); + }); +}); + +/// Make sure to adjust the dateTime and eventName variables as needed for your specific testcase \ No newline at end of file diff --git a/cypress/test/campaignTests/Banner.cy.js b/cypress/test/campaignTests/Banner.cy.js new file mode 100644 index 00000000000..670384d7bf9 --- /dev/null +++ b/cypress/test/campaignTests/Banner.cy.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { mount } from '@cypress/react'; +import Banner from '../../../components/campaigns/Banner'; + +describe('Banner Component', () => { + it('should not render the banner when the date is not within the valid range', () => { + const today = new Date(); + const [day, month, year] = [today.getUTCDate(), today.getUTCMonth(), today.getUTCFullYear()]; + if (year > 2022 || month !== 10 || day < 6) { + mount(); + cy.get('[data-testid="Banner-main-div"]').should('not.exist'); + + } else { + mount(); + cy.get('[data-testid="Banner-main-div"]').should('be.visible'); + + } + }); + + it('should render the banner when the date is within the valid range', () => { + const mockDate = new Date(2021, 10, 12).getTime(); + cy.clock(mockDate); + mount(); + cy.get('[data-testid="Banner-main-div"]').should('be.visible'); + }); + + it('should display the correct message when the date is within the valid range', () => { + const mockDate = new Date(2021, 10, 12).getTime(); + cy.clock(mockDate); + mount(); + cy.contains('.font-medium', 'AsyncAPI Conference 2022 has ended').should('be.visible'); + }); + + it('should have a link to the recordings playlist', () => { + const mockDate = new Date(2021, 10, 12).getTime(); + cy.clock(mockDate); + mount(); + cy.get('[data-testid="Banner-link"]') + .should('have.attr', 'href', 'https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl') + .should('have.attr', 'target', '_blank') + .should('have.attr', 'rel', 'noopener noreferrer'); + }); + + it('should have the max-w-screen-xl class in the div element', () => { + const mockDate = new Date(2021, 10, 12).getTime(); + cy.clock(mockDate); + mount(); + cy.get('.max-w-screen-xl').should('exist'); + }); +});