feat: adding unit tests for community folder

components/community/Card.js

@@ -15,20 +15,20 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
             <div className="p-2 rounded-xl bg-gray-100 text-center w-min text-xs flex justify-between">
               <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
             </div>
-            <div className="mt-3">
+            <div className="mt-3" data-testid="Card-heading">
               <Heading level="h1" typeStyle="heading-md">
                 {heading}
               </Heading>
             </div>
-            <div className="mt-2">
+            <div className="mt-2" data-testid="Card-desc">
               <Paragraph
                 textColor={bg ? 'text-black' : 'text-gray-600'}
                 typeStyle="body-sm"
               >
                 {description}
               </Paragraph>
             </div>
-            <div className="text-right w-full flex justify-end">
+            <div className="text-right w-full flex justify-end" data-testid="Card-icon">
               <IconArrowUp className="w-[20px]" />
             </div>
           </div>
@@ -48,7 +48,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
         <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
       </div>
 
-      <div className="mt-10">
+      <div className="mt-10" data-testid="Card-heading-lg">
         <Heading
           level="h1"
           typeStyle="heading-lg"
@@ -57,7 +57,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
           {heading}
         </Heading>
       </div>
-      <div className="mt-6">
+      <div className="mt-6" data-testid="Card-desc-lg">
         <Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
       </div>
       <div className="mt-10">

components/community/Header.js

@@ -5,28 +5,29 @@ import Button from '../buttons/Button';
 
 export default function Header({className = ''}) {
   return (
-      <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0">
+      <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0" data-testid="Header-hero-heading">
         <Heading
           className="countdown-text-gradient font-bold"
           level="h6"
           typeStyle="heading-xs"
         >
           AsyncAPI Community
         </Heading>
-        <div className="mt-10">
+        <div className="mt-10" data-testid="Header-heading-1">
           <Heading level="h1" typeStyle="heading-xl" className="">
             <span className="title block md:-mt-1 leading-[3rem]">
               Welcome to the
               <br /> AsyncAPI Community
             </span>
           </Heading>
         </div>
-        <div className="mt-5 w-5/6">
+        <div className="mt-5 w-5/6" data-testid="Header-heading-2">
           <Heading
             level="h2"
             typeStyle="body-md"
             textColor="text-gray-700"
             className="text-slate-500 text-sm"
+
           >
             We're an OSS community that's passionate about AsyncAPI. Join us in
             building the future of Event Driven APIs by asking questions,
@@ -39,7 +40,7 @@ export default function Header({className = ''}) {
             text="AsyncAPI Discussions"
             href="https://github.com/orgs/asyncapi/discussions"
             target="_blank"
-            icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" />}
+            icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" data-testid="Header-IconRocket" />}
           />
         </div>
       </div>

components/community/Hero.js

@@ -5,28 +5,28 @@ export default function Hero({ className = '' }) {
   return (
     <>
       <div className="overflow-hidden orbits">
-        <div className="orbit-container">
-          <div id="first-orbit" className="orbit">
+        <div className="orbit-container" data-testid="orbit-div">
+          <div id="first-orbit" className="orbit" data-testid="Hero-first">
             {orbitData[0].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} className="orbit-img" />
+                <img src={orbit.img} alt={orbit.alt} className="orbit-img" data-testid="Hero-firstimg" />
               </div>
             ))}
             <div className="w-full absolute h-full flex justify-center z-40">
               <Header />
             </div>
           </div>
-          <div id="second-orbit" className="orbit">
+          <div id="second-orbit" className="orbit" data-testid="Hero-second">
             {orbitData[1].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} />
+                <img src={orbit.img} alt={orbit.alt} data-testid="Hero-secondimg" />
               </div>
             ))}
           </div>
-          <div id="third-orbit" className="orbit">
+          <div id="third-orbit" className="orbit" data-testid="Hero-third">
             {orbitData[2].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
-                <img src={orbit.img} alt={orbit.alt} />
+                <img src={orbit.img} alt={orbit.alt} data-testid="Hero-thirdimg"/>
               </div>
             ))}
           </div>

components/community/HomeCard.js

@@ -6,17 +6,18 @@ export default function HomeCards({headline, title, description, btnText, link,
   return (
     <div className="z-40 mt-20 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
       <div className="p-10 flex justify-between w-full md:w-2/5 h-auto flex-col text-center md:text-left">
-        <div>
+        <div  data-testid="HomeCard-main">
           <Heading
             level="h2"
             typeStyle="heading-md"
             textColor="text-purple-300"
+
           >
             {headline}
           </Heading>
         </div>
-        <div>
-          <Heading level="h2" typeStyle="heading-lg" className="mt-10">
+        <div data-testid="HomeCard-title">
+          <Heading level="h2" typeStyle="heading-lg" className="mt-10" >
             {title}
           </Heading>
           <Heading
@@ -27,7 +28,7 @@ export default function HomeCards({headline, title, description, btnText, link,
           >
             {description}
           </Heading>
-          <div className="mt-10">
+          <div className="mt-10" data-testid="HomeCard-button">
             <Button text={btnText} buttonSize="medium" href={link} />
           </div>
         </div>

cypress/test/community/Card.cy.js

@@ -0,0 +1,55 @@
+import { mount } from 'cypress/react';
+import SmallHomeCards from '../../../components/community/Card';
+import React from 'react';
+import IconArrowUp from '../../../components/icons/ArrowUp';
+
+describe('SmallHomeCards', () => {
+  it('renders small card correctly', () => {
+    const props = {
+      type: 'small',
+      icon: <IconArrowUp />,
+      tagline: 'Tagline',
+      taglineBg: 'bg-gray-100',
+      heading: 'Heading',
+      description: 'Description',
+      bg: 'bg-white',
+      btnText: 'Button',
+      btnBg: 'bg-gray-200',
+      link: '/path'
+    };
+
+    mount(<SmallHomeCards {...props} /> );
+    // Testing for small prop classes and styles
+
+    cy.get('[data-testid="Card-heading"]').contains('Heading').should('exist');
+    cy.get('[data-testid="Card-desc"]').contains('Description').should('exist');
+    cy.get('[data-testid="Card-heading"]').should('have.class','mt-3');
+    cy.get('[data-testid="Card-desc"]').should('have.class','mt-2');
+  });
+
+  it('renders large card correctly', () => {
+    const props = {
+      type: 'large',
+      icon: <IconArrowUp />,
+      tagline: 'Tagline',
+      taglineBg: 'bg-gray-100',
+      heading: 'Heading',
+      description: 'Description',
+      bg: 'bg-blue-500',
+      btnText: 'Button',
+      btnBg: 'bg-gray-200',
+      link: '/path'
+    };
+
+    mount(<SmallHomeCards {...props} />);
+
+    // Testing for large prop classes and styles
+    cy.get('[data-testid="Card-heading-lg"]').contains('Heading').should('exist');
+    cy.get('[data-testid="Card-desc-lg"]').contains('Description').should('exist');
+    cy.get('[data-testid="Card-heading-lg"]').should('have.class','mt-10');
+    cy.get('[data-testid="Card-desc-lg"]').should('have.class','mt-6');
+
+
+  });
+});
+// note : props passed can be changed according to the user 

cypress/test/community/Header.cy.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Header from '../../../components/community/Header';
+
+describe('Header Component', () => {
+  it('renders the Header component correctly', () => {
+    mount(<Header />);
+    cy.get('[data-testid="Header-hero-heading"]').should('exist');
+    cy.get('[data-testid="Header-heading-1"]').should('exist');
+    cy.get('[data-testid="Header-heading-2"]').should('exist');
+    cy.contains('AsyncAPI Discussions').should('exist');
+
+  });
+
+  it('displays the correct text in the Heading components and styles ', () => {
+    mount(<Header />);
+    cy.get('[data-testid="Header-hero-heading"]').contains('AsyncAPI Community').should('have.class', 'font-bold');
+    cy.get('[data-testid="Header-heading-1"]').contains('Welcome to the AsyncAPI Community').should('have.class','title block md:-mt-1 leading-[3rem]');
+    cy.get('[data-testid="Header-heading-2"]').contains('We\'re an OSS community').should('have.class','text-slate-500 text-sm')
+  });
+
+  it('contains a Button component with the correct props', () => {
+    mount(<Header />);
+
+    cy.contains('AsyncAPI Discussions')
+      .should('have.attr', 'href', 'https://github.com/orgs/asyncapi/discussions')
+      .and('have.attr', 'target', '_blank');
+      cy.get('[data-testid="Header-IconRocket"]').should('exist');
+
+  });
+});

cypress/test/community/Hero.cy.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Hero from '../../../components/community/Hero'
+import orbitData from '../../../config/orbitData.json'
+
+describe('Hero Component', () => {
+  beforeEach(() => {
+    mount(<Hero />);
+  });
+
+  it('renders the complete component' ,() => {
+    cy.get('[data-testid="orbit-div"]').should('exist')
+  })
+  it('renders the first orbit with orbitData', () => {
+    cy.get('[data-testid="Hero-first"]').should('exist');
+    cy.get('[data-testid="Hero-firstimg"]').should('have.length', orbitData[0].length);
+  });
+
+  it('renders the second orbit with orbitData', () => {
+    cy.get('[data-testid="Hero-second"]').should('exist');
+    cy.get('[data-testid="Hero-secondimg"]').should('have.length', orbitData[1].length);
+  });
+
+  it('renders the third orbit with orbitData', () => {
+    cy.get('[data-testid="Hero-third"]').should('exist');
+    cy.get('[data-testid="Hero-thirdimg"]').should('have.length', orbitData[2].length);
+  });
+
+
+});

cypress/test/community/HomeCard.cy.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import HomeCards from '../../../components/community/HomeCard';
+
+describe('HomeCards Component', () => {
+  it('renders correctly', () => {
+    const props = {
+      headline: 'Heading Hero',
+      title: 'Title',
+      description: ' Description',
+      btnText: 'Button',
+      link: 'https://sample.com',
+      className: 'sample-class',
+    };
+
+    mount(<HomeCards {...props} />);
+    cy.get('[data-testid="HomeCard-main"]').should('exist');
+    cy.get('[data-testid="HomeCard-title"]').should('exist');
+    cy.get('[data-testid="HomeCard-button"]').should('exist');
+    cy.get(`[href="https://sample.com"]`).should('exist');
+    cy.get('.sample-class').should('exist');
+  });
+});
+// note : props passed can be changed according to the user