feat: add unit tests for case study card , check render of tools pages & newsletter

components/CaseStudyCard.js

@@ -10,7 +10,7 @@ export default function CaseStudyCard({
       <div className="pt-10 flex flex-wrap lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center">
         {studies.map((study, index) => (
           <a key={index} href={`casestudies/${study.id}`}>
-            <div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4 max-w-sm">
+            <div className="rounded-md border border-gray-200 overflow-hidden bg-white p-4 max-w-sm" data-testid="CaseStudyCard-main">
               <span className="mr-2">                  
                   <img
                     className="m-auto h-16"

cypress/test/CaseStudyCard.cy.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import CaseStudyCard from '../../components/CaseStudyCard';
+import CaseStudiesList from "../../config/case-studies.json";
+describe('CaseStudyCard Component', () => {
+
+  it('renders the CaseStudyCard component with study data', () => {
+    mount(<CaseStudyCard studies={CaseStudiesList} />);
+
+    cy.get('[data-testid="CaseStudyCard-main"]').should('have.length', CaseStudiesList.length); 
+
+    CaseStudiesList.forEach((study, index) => {
+      cy.get(`.rounded-md:eq(${index}) img`).should('have.attr', 'src', study.company.logo);
+      cy.get(`.rounded-md:eq(${index}) img`).should('have.attr', 'alt', study.company.name);
+    });
+  });
+
+  it('does not render anything when studies array is empty', () => {
+    mount(<CaseStudyCard studies={[]} />);
+
+    cy.get('.rounded-md').should('not.exist');
+  });
+});

cypress/test/pages/casestudies/index.cy.js

@@ -0,0 +1,14 @@
+import Casestudies from "../../../../pages/casestudies";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Case Study Pages', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <Casestudies />
+            </MockApp>
+        );
+    cy.get('[data-testid="CaseStudy-main"]').should('exist');
+    cy.get('[data-testid="CaseStudy-card"]').should('exist');
+    });
+});

cypress/test/pages/newsletter/index.cy.js

@@ -0,0 +1,12 @@
+import NewsletterIndexPage from "../../../../pages/newsletter";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Newsletter', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <NewsletterIndexPage/>
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/cli.cy.js

@@ -0,0 +1,12 @@
+import CliPage from "../../../../pages/tools/cli";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for cli tools ', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <CliPage />
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/generator.cy.js

@@ -0,0 +1,13 @@
+
+import GeneratorPage from "../../../../pages/tools/generator";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for generator tools', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <GeneratorPage />
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/github-actions.cy.js

@@ -0,0 +1,13 @@
+
+import GithubActionsPage from "../../../../pages/tools/github-actions";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Github Actions ', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <GithubActionsPage />
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/index.cy.js

@@ -0,0 +1,12 @@
+import Toolsdashboard from "../../../../pages/tools";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Tools Dashboard', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <Toolsdashboard/>
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/modelina.cy.js

@@ -0,0 +1,13 @@
+
+import ModelinaPlaygroundPage from "../../../../pages/tools/modelina";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Modelina Pages', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <ModelinaPlaygroundPage/>
+            </MockApp>
+        );
+    });
+});

cypress/test/pages/tools/parsers.cy.js

@@ -0,0 +1,13 @@
+
+import ParsersPage from "../../../../pages/tools/parsers";
+import MockApp from "../../../utils/MockApp";
+import {mount} from 'cypress/react';
+describe('Test for Parsers', () => {
+    it('renders correctly', () => {
+        mount(
+            <MockApp>
+                <ParsersPage/>
+            </MockApp>
+        );
+    });
+});

pages/casestudies/index.js

@@ -5,7 +5,7 @@ import TextLink from '../../components/typography/TextLink';
 import Heading from "../../components/typography/Heading";
 import CaseStudiesList from "../../config/case-studies.json";
 
-export default function casestudies() {
+export default function Casestudies() {
   const description =
     "Learn about different case studies based on AsyncAPI spec and related tools.";
   const image = "/img/social/case-studies.webp";
@@ -19,13 +19,13 @@ export default function casestudies() {
       wide
     >
 
-      <div className="py-10 relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl">
+      <div className="py-10 relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl" data-testid="CaseStudy-main">
         <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center">
           <div className="col-start-3 col-span-5">
             <Heading level="h1" typeStyle="heading-lg">
               {title}
             </Heading>
-            <Paragraph typeStyle="body-md" className="my-4 max-w-4xl">
+            <Paragraph typeStyle="body-md" className="my-4 max-w-4xl" >
               The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on recommendations and best practices.
               It is also good to confront with real-life case studies that explain how people really use AsyncAPI and what are their flows.
             </Paragraph>
@@ -37,7 +37,7 @@ export default function casestudies() {
             </Paragraph>
           </div>
         </div>
-        <div>
+        <div data-testid="CaseStudy-card">
           <CaseStudyCard studies={CaseStudiesList}
           />
         </div>

pages/tools/index.js

@@ -6,7 +6,7 @@ import Paragraph from '../../components/typography/Paragraph';
 import TextLink from '../../components/typography/TextLink';
 import { useEffect, useState } from 'react';
 
-export default function toolsDashboard() {
+export default function ToolsIndex() {
   const description = 'Tools Dashboard for AsyncAPI Initiative';
   const image = '/img/social/tools-dashboard-card.webp';