feat: adding unit tests for docsCards and feature folders

components/docs/DocsCards.js

@@ -48,28 +48,30 @@ const cards = [
 
 export function DocsCards() {
   return (
-    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2'>
+    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2' data-testid="Docs-main-div">
+
       {cards.map(card => (
-        <Card key={card.title} {...card} />
+        <Card key={card.title} {...card}  />
       ))}
+
     </div>
   );
 }
 
 function Card({ title, description, link, className, Icon }) {
   return (
     <Link href={link}>
-      <a href={link} className='cursor-pointer'>
+      <a href={link} className='cursor-pointer' data-testid="Docs-link">
         <div className="h-full border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg p-6">
-          <div>
+          <div data-testid="Docs-div-contents">
             <Heading 
               level="h3"
               typeStyle="heading-sm-semibold"
               className='pb-4 border-b border-gray-300'
             >
               <div className='flex flex-row items-center'>
-                <div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`}>
-                  <Icon className="h-6 w-6"/>
+                <div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`} data-testid="Docs-icon">
+                  <Icon className="h-6 w-6" />
                 </div>
                 <span className='ml-4'>{title}</span>
               </div>

components/features/index.jsx

@@ -69,14 +69,16 @@ export default function Features() {
           Improving the current state of Event-Driven Architectures (EDA)
         </Paragraph>
         <div className="mt-12 text-left">
-          <ul className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          <ul className="grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" data-testid="feature-ul">
             {features.map((feature) => (
-              <li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8">
-                <div>
+              <li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8" 
+              data-testid="feature-li">
+                <div >
                   <Heading 
                   level="h3"
                   typeStyle="heading-md-semibold"
                   className="mt-8"
+
                 >
                   {feature.name}
                 </Heading>
@@ -86,7 +88,7 @@ export default function Features() {
                     </Paragraph>
                   )}
                 </div>
-                <div className="flex justify-between">
+                <div className="flex justify-between" >
                   {feature.links.map((link) => {
                     return (
                       <Link href={link.href} key={link.label}>

cypress/test/docs/DocsCards.cy.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from '@cypress/react';
+import {DocsCards} from '../../../components/docs/DocsCards';
+import IconGettingStarted from '../../../components/icons/GettingStarted';
+import IconTutorials from '../../../components/icons/Tutorials';
+import IconUseCases from '../../../components/icons/UseCases';
+import IconGuide from '../../../components/icons/Guide';
+import IconSpec from '../../../components/icons/Spec';
+
+const cards = [
+    {
+      title: 'Concepts',
+      description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
+      link: '/docs/concepts',
+      className: 'bg-secondary-200',
+      Icon: IconGettingStarted,
+    },
+    {
+      title: 'Tutorials',
+      description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
+      link: '/docs/tutorials',
+      className: 'bg-pink-100',
+      Icon: IconTutorials,
+    },
+    {
+      title: 'Tools',
+      description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
+      link: '/docs/tools',
+      className: 'bg-green-200',
+      Icon: IconUseCases,
+    },
+    {
+      title: 'Guides',
+      description: "Our Guides section teaches AsyncAPI's capabilities at a high level.",
+      link: '/docs/guides',
+      className: 'bg-primary-200',
+      Icon: IconGuide,
+    },
+    {
+      title: 'Reference',
+      description: 'Our Reference section documents the AsyncAPI specification.',
+      link: '/docs/reference',
+      className: 'bg-yellow-200',
+      Icon: IconSpec,
+    }
+  ];
+
+describe('DocsCards', () => {
+  beforeEach(() => {
+    mount(<DocsCards />);
+  });
+
+
+  it('renders the correct number of cards', () => {
+    cy.get('[data-testid="Docs-main-div"] [data-testid="Docs-link"]').should('have.length', cards.length);
+  });
+
+
+   it('renders card titles and descriptions correctly', () => {
+    cy.get('[data-testid="Docs-main-div"] ').each(($card, index) => {
+      const card = cards[index];
+      cy.wrap($card).within(() => {
+        cy.get('[data-testid="Docs-div-contents"]').should('contain', card.title);
+        cy.get('[data-testid="Docs-div-contents"]').should('contain', card.description);
+
+      });
+    });
+  });
+
+
+  it('navigates to the correct link on card click', () => {
+    cy.get('[data-testid="Docs-main-div"]').each(($card) => {
+      cy.wrap($card).get('[data-testid="Docs-link"]').should('exist');
+    });
+  });
+
+  it('renders each icon correctly', () => {
+    cy.get('[data-testid="Docs-main-div"] ').each(($card) => {
+      cy.wrap($card).get('[data-testid="Docs-icon"]').should('exist');
+    });
+  });
+
+
+})

cypress/test/features/index.cy.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Features from '../../../components/features/index';
+const features = [
+    {
+      name: "Specification",
+      description:
+        "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
+      links: [{ label: "Documentation", href: "docs/specifications/latest", id:'whyasyncapi-spec-documentation-link' }],
+    },
+    {
+      name: "Document APIs",
+      description:
+        "Use our tools to generate documentation at the build level, on a server, and on a client.",
+      links: [
+        {
+          label: "HTML Template",
+          href: "https://github.com/asyncapi/html-template",
+          id:'whyasyncapi-apis-htmltemplate-link'
+        },
+        {
+          label: "React Component",
+          href: "https://github.com/asyncapi/asyncapi-react/",
+          id:'whyasyncapi-apis-reactcomponents-link'
+        },
+      ],
+    },
+    {
+      name: "Code Generation",
+      description:
+        "Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.",
+      links: [{ label: "Generator", href: "tools/generator", id:'whyasyncapi-generation-generator-link' }, { label: "Modelina", href: "tools/modelina", id:'whyasyncapi-generation-modelina-link' }],
+    },
+    {
+      name: "Community",
+      description: "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
+      links: [
+        { label: "Join our Slack", href: "https://asyncapi.com/slack-invite", id:'whyasyncapi-community-slack-link' },
+      ],
+    },
+    {
+      name: "Open Governance",
+      description:
+        "Our Open-Source project is part of Linux Foundation and works under an Open Governance model.",
+      links: [{ label: "Read more about Open Governance", href: "blog/governance-motivation", id:'whyasyncapi-governance-more-link' }, { label: "TSC Members", href: "community/tsc", id:'whyasyncapi-governance-tsc-link' }],
+    },
+    {
+      name: "And much more...",
+      description:
+        "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
+      links: [{ label: "View GitHub Discussions", href: "https://github.com/asyncapi/community/discussions", id:'whyasyncapi-muchmore-github-link' }],
+    },
+  ];
+
+
+describe('Features Component', () => {
+  it('renders all features with their names, descriptions, and links', () => {
+    mount(<Features />);
+
+    //check number of features rendered is equal to features array
+    cy.get('[data-testid="feature-ul"] [data-testid="feature-li"]').should('have.length', features.length); // there are 6 features in the list
+
+    features.forEach((feature, index) => {
+      cy.get('[data-testid="feature-ul"] [data-testid="feature-li"]').eq(index).as('feature');
+
+      cy.get('@feature').within(() => {
+        cy.get('h3').should('have.text', feature.name);
+        cy.get('p').should('have.text', feature.description);
+
+        feature.links.forEach((link, linkIndex) => {
+            cy.get('a').eq(linkIndex).should('have.attr', 'href').then((hrefValue) => {
+              const formattedHrefValue = hrefValue.replace(/^\//, '');   // remove this / so that the value is equal to link.href
+              expect(formattedHrefValue).to.equal(link.href);
+            });
+          });
+
+      });
+    });
+  });
+});