feat: add unit tests for campaigns folder

components/campaigns/AnnoucementHero.js

@@ -29,22 +29,24 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
         className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
           small ? 'mb-4' : 'mb-12'
         }`}
+        data-testid = "container-div"
       >
         <Heading
           className="countdown-text-gradient"
           level="h2"
           typeStyle="heading-lg"
+
         >
           AsyncAPI Conf on Tour 2023
         </Heading>
         <Heading
           className="countdown-text-gradient"
           level="h3"
           typeStyle="heading-sm"
-        >
+          data-testid="sub-heading "     >
           Madrid Edition
         </Heading>
-        <Paragraph typeStyle="body-lg">
+        <Paragraph typeStyle="body-lg" >
           October, 2023 | Madrid, Spain
         </Paragraph>
         <AnnouncementRemainingDays dateTime={cfpDeadline} eventName="the end for Call for Speakers." />
@@ -53,6 +55,7 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
             href="https://sessionize.com/aacot-madrid/"
             target="_blank"
             text="Submit a session"
+            data-testid="submit-session"
           />
         </div>
       </div>

components/campaigns/AnnouncementRamainingDays.js

@@ -17,7 +17,7 @@ export default function AnnouncementRemainingDays({ dateTime, eventName }) {
   }
 
   return (
-    <span className="font-extrabold countdown-text-gradient block">
+    <span className="font-extrabold countdown-text-gradient block" data-testid="span-text">
       {text} until {eventName}
     </span>
   )

components/campaigns/Banner.js

@@ -19,8 +19,8 @@ export default function Banner({}) {
   }
 
   return (
-    <div className="bg-gray-100">
-      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8">
+    <div className="bg-gray-100" data-testid="main-div-banner">
+      <div className="mx-auto max-w-screen-xl py-1 px-3 sm:px-6 lg:px-8" >
         <div className="flex items-center justify-between flex-wrap">
           <div className="flex md:hidden w-0 flex-1 flex items-center text-xs">
             <p className="font-medium text-gray-700">
@@ -37,7 +37,7 @@ export default function Banner({}) {
             </p>
           </div>
           <div className="flex">
-            <a
+            <a data-testid="linkTorecordings"
               href="https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl"
               className="flex items-center justify-center px-4 py-1 border border-transparent rounded-md shadow-sm text-xs font-medium text-indigo-600 focus:text-indigo-600 bg-white hover:bg-indigo-50"
               target="_blank" rel="noopener noreferrer"

cypress/test/campaignTests/AnnouncementHero.cy.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import AnnouncementHero from '../../../components/campaigns/AnnoucementHero';
+
+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());
+
+    mount(<AnnouncementHero />);
+
+    // Assert that the component is rendered 
+    //check for background color 
+    cy.get('.bg-gray-50').should('exist');
+  });
+
+  it('should not render the component when the date is outside the valid range', () => {
+    // Set the current date to June
+    const mockDate = new Date('2023-06-01T00:00:00Z');
+    cy.clock(mockDate.getTime());
+
+    mount(<AnnouncementHero />);
+
+    // Assert that the component is not rendered
+    cy.get('[data-testid="container-div"]').should('not.exist');
+  });
+
+  it('should display the correct event information', () => {
+    const mockDate = new Date('2023-05-01T00:00:00Z');
+    cy.clock(mockDate.getTime());
+
+    mount(<AnnouncementHero />);
+
+    // Assert the event details
+    cy.get('[data-testid="container-div"]').contains( 'AsyncAPI Conf on Tour 2023').should('exist');
+    cy.get('[data-testid="container-div"]').contains( 'Madrid Edition').should('exist');
+    cy.get('[data-testid="container-div"]').contains('October, 2023 | Madrid, Spain').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());
+
+    mount(<AnnouncementHero />);
+
+    // Assert the link
+    cy.get('[data-testid="submit-session"]')
+      .should('have.attr', 'href', 'https://sessionize.com/aacot-madrid/')
+      .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(<AnnouncementHero small />);
+
+    cy.get('[data-testid="container-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(<AnnouncementHero small={false} />);
+
+    cy.get('[data-testid="container-div"]').should('have.class', 'mb-12');
+  });
+});

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(<AnnouncementRemainingDays dateTime={dateTime} eventName={eventName} />);
+
+    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="span-text"]').should('have.text', `${text} until ${eventName}`);
+
+    //check class font-extrabold 
+    cy.get('[data-testid="span-text"]').should('have.class', 'font-extrabold');
+  });
+});
+
+/// Make sure to adjust the dateTime and eventName variables as needed for your specific testcase 

cypress/test/campaignTests/Banner.cy.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import Banner from '../../../components/campaigns/Banner';
+
+describe('Banner Component', () => {
+  it('should render the banner when the date is within the valid range', () => {
+    const today = new Date();
+    const day = today.getUTCDate();
+    const month = today.getUTCMonth();
+    const year = today.getUTCFullYear();
+
+    if (year > 2022 || month !== 10 || day < 6) {
+      mount(<Banner />);
+      cy.get('[data-testid="main-div-banner"]').should('not.exist');
+
+    } else {
+      mount(<Banner />);
+
+      cy.get('[data-testid="main-div-banner"]').should('be.visible');
+
+    }
+  });
+
+  it('should display the correct message when the date is within the valid range', () => {
+    const today = new Date();
+    const day = today.getUTCDate();
+    const month = today.getUTCMonth();
+    const year = today.getUTCFullYear();
+
+    if (year > 2022 || month !== 10 || day < 6) {
+      mount(<Banner />);
+
+      //checking css class that font is medium or not 
+      cy.contains('.font-medium', 'AsyncAPI Conference 2022 has ended').should('not.exist');
+    } else {
+      mount(<Banner />);
+
+      cy.contains('.font-medium', 'AsyncAPI Conference 2022 has ended').should('be.visible');
+    }
+  });
+
+  it('should have a link to the recordings playlist', () => {
+    const today = new Date();
+    const day = today.getUTCDate();
+    const month = today.getUTCMonth();
+    const year = today.getUTCFullYear();
+
+    if (year === 2022 && month === 10 && day >= 6) {
+      mount(<Banner />);
+
+      cy.get('[data-testid="linkTorecordings"]')
+        .should('have.attr', 'href', 'https://www.youtube.com/playlist?list=PLbi1gRlP7pijRiA32SU36hD_FW-2qyPhl')
+        .should('have.attr', 'target', '_blank')
+        .should('have.attr', 'rel', 'noopener noreferrer');
+    } else {
+      mount(<Banner />);
+
+      cy.get('[data-testid="linkTorecordings"]').should('not.exist');
+    }
+  });
+
+
+  //check to see if max-w-screen is present or not , for full width element
+  it('should have the max-w-screen-xl class in the div element', () => {
+    const today = new Date();
+    const day = today.getUTCDate();
+    const month = today.getUTCMonth();
+    const year = today.getUTCFullYear();
+
+    if (year === 2022 && month === 10 && day >= 6) {
+      mount(<Banner />);
+
+      //check for max-w-screen-xl class, since it is an imp check
+      cy.get('.max-w-screen-xl').should('exist');
+
+    } else {
+      mount(<Banner />);
+      cy.get('.max-w-screen-xl').should('not.exist');
+    }
+  });
+
+
+});
+