feat: add unit tests for campaigns folder (#1724)

Co-authored-by: akshatnema <[email protected]>%0ACo-authored-by: Akshat Nema <[email protected]>

components/campaigns/AnnoucementHero.js

@@ -28,15 +28,15 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
       <div
         className={`bg-gray-50 border border-gray-200 py-6 rounded ${className} ${
           small ? 'mb-4' : 'mx-3 mt-3 p-3 mb-6'
-        }`}
+        }`} data-testid = "AnnouncementHero-main-div"
       >
         <Heading
           className="countdown-text-gradient"
           level="h2"
-          typeStyle="heading-lg"
-        >
+          typeStyle="heading-lg" >
           AsyncAPI Conf on Tour 2023
         </Heading>
+
         <Heading
           className="countdown-text-gradient"
           level="h3"
@@ -53,6 +53,7 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
             href="https://conference.asyncapi.com/"
             target="_blank"
             text="Submit a session"
+            data-testid="AnnouncementHero-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="AnnouncementRemainingDays-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="Banner-main-div">
+      <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="Banner-link"
               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,55 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import AnnouncementHero from '../../../components/campaigns/AnnoucementHero';
+beforeEach(() => {
+  mount(<AnnouncementHero />);
+});
+
+
+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(<AnnouncementHero small />);
+
+    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(<AnnouncementHero small={false} />);
+
+    cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mx-3 mt-3 p-3 mb-6');
+  });
+});

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="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 

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(<Banner />);
+      cy.get('[data-testid="Banner-main-div"]').should('not.exist');
+
+    } else {
+      mount(<Banner />);
+      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(<Banner />);
+    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(<Banner />);
+    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(<Banner />);
+    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(<Banner />);
+    cy.get('.max-w-screen-xl').should('exist');
+  });
+});