feat: add integration tests for dashboard component & community pages

components/community/Card.js

@@ -11,7 +11,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
         <a target={link.includes('http') && '_blank'}>
           <div
             className={`p-3 cursor-pointer border shadow-xl rounded w-full border-[#ad20e2] ${bg}`}
-          >
+            data-testid="Card-small-bg">
             <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>
@@ -41,10 +41,10 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
       className={`h-140 w-full shadow-xl rounded p-6 border ${
         !bg && 'border-[#ad20e2]'
       } ${bg}`}
-    >
+    data-testid="Card-lg-bg">
       <div
         className={`p-2 rounded-xl text-center w-min text-xs flex justify-between ${taglineBg}`}
-      >
+      data-testid="Card-lg-tagline">
         <span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
       </div>
 
@@ -62,7 +62,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
       </div>
       <div className="mt-10">
         <Link href={link}>
-          <a>
+          <a data-testid="Card-link-lg">
             <div className={`flex ${btnBg} cursor-pointer`}>
               <IconArrowUp className={`w-[20px] ${btnBg}`} />{' '}
               <span className="ml-2 text-sm">{btnText}</span>

cypress/test/community/Card.cy.js

@@ -25,6 +25,8 @@ describe('SmallHomeCards', () => {
     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');
+    cy.get(`[href="/path"]`).should('exist');
+
   });
 
   it('renders large card correctly', () => {
@@ -46,6 +48,7 @@ describe('SmallHomeCards', () => {
     // 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(`[href="/path"]`).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');
 

cypress/test/dashboard/GoodFirstIssuesTip.cy.js

@@ -8,13 +8,11 @@ describe('GoodFirstIssuesTip', () => {
   });
 
   it('toggles the tip when hovering over the icon', () => {
-    cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseenter');
-    cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseleave');
-
+    cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').click({force:true});
   });
 
   it('renders the tip content with the correct text', () => {
-    cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').trigger('mouseenter');
+    cy.get('[data-testid="GoodFirstIssuesTip-hover-icon"]').click({force:true});
    //checking for the available class here
     cy.get('.bg-white').should('have.css', 'visibility', 'visible');
 

cypress/test/dashboard/Header.cy.js

@@ -22,10 +22,11 @@ describe('Header', () => {
       'contain',
       'Visualize our progress. Get involved.'
     );
-    cy.get('[data-testid="Github-button"]').should('exist');
-    cy.get('[data-testid="Slack-button"]').should('exist');
+
     cy.contains('Contribution Guide')
       .should('have.attr', 'href', 'https://github.com/asyncapi?type=source#-contribute-to-asyncapi')
       .should('have.attr', 'target', '_blank');
+    cy.contains('View on Github')
+    cy.contains('Join on Slack')
   });
 });

cypress/test/pages/community/ambassadors/index.cy.js

@@ -0,0 +1,95 @@
+import MockApp from "../../../../utils/mockApp";
+import Index from '../../../../../pages/community/ambassadors/index'
+import ambassadorList from '../../../../../config/ambassador_lists.json'
+import ambassadors from '../../../../../config/AMBASSADORS_MEMBERS.json'
+import { addAdditionalUserInfo } from "../../../../../pages/community/ambassadors/index";
+import { sortBy } from 'lodash';
+describe('Test for Ambassadors', () => {
+    beforeEach(() => {
+        cy.mount(<MockApp><Index /></MockApp>)
+    });
+
+    it('displays the main Ambassadors section ', () => {
+        cy.get('[data-testid="Ambassadors-main"]').should('exist')
+        cy.get('[data-testid="Ambassadors-content"]').should('exist')
+        cy.get('[data-testid="Ambassadors-button"]').should('exist')
+        cy.get(`[href="https://github.com/asyncapi/community/blob/master/AMBASSADOR_ORGANIZATION.md#are-you-interested-in-becoming-an-official-asyncapi-ambassador"]`).should('exist');
+        cy.get('[data-testid="Ambassadors-Iframe"]').should('exist')
+        cy.get('[data-testid="Ambassadors-contributions"]').should('exist')
+    });
+
+    it('renders the ambassador list with correct data', () => {
+        ambassadorList.contents.forEach((link) => {
+            cy.get('[data-testid="Ambassadors-list"]')
+                .find(`img[alt="${link.title}"]`)
+                .should('exist')
+                .and('have.attr', 'src', link.icon);
+
+            cy.get('[data-testid="Ambassadors-list"]')
+                .contains('h2', link.title)
+                .should('exist');
+
+            cy.get('[data-testid="Ambassadors-list"]')
+                .contains('p', link.details)
+                .should('exist');
+        });
+    });
+
+    it('renders the ambassadors with correct data', () => {
+        const asyncapiAmbassadors = sortBy(
+            ambassadors.map((user) => addAdditionalUserInfo(user)),
+            ['name']
+        );
+        cy.get('[data-testid="Ambassadors-members-main"]')
+            .children()
+            .should('have.length', asyncapiAmbassadors.length);
+
+        asyncapiAmbassadors.forEach((ambassador) => {
+            cy.get('[data-testid="Ambassadors-members-details"]')
+                .contains('div', ambassador.name)
+
+            cy.get('[data-testid="Ambassadors-members-img"]')
+                .find(`img[alt="${ambassador.name}"]`)
+
+                .and('have.attr', 'src', ambassador.img);
+
+            cy.get('[data-testid="Ambassadors-members"]')
+                .contains('div', ambassador.title);
+
+        });
+
+    });
+
+    it('displays the Tokens of our appreciation section with correct data', () => {
+        cy.contains('Tokens of our appreciation').should('exist');
+
+        cy.contains('We appreciate your commitment and passion for sharing your knowledge with your communities. Let us support you!')
+            .should('exist');
+
+        ambassadorList.tokens.forEach((token) => {
+            cy.contains('.mt-20 li', token.emoji).should('exist');
+            cy.contains('.mt-20 li', token.title).should('exist');
+            cy.contains('.mt-20 li', token.details).should('exist');
+        });
+    });
+
+    it('displays the Become an AsyncAPI Ambassador section with correct data', () => {
+        cy.contains('Become an AsyncAPI Ambassador').should('exist');
+
+        cy.contains('The AsyncAPI Ambassador program is now open for applications! If you’re selected, you’ll join AsyncAPI\'s mission of helping community members all over the world, build the future of Event-Driven APIs.')
+            .should('exist');
+
+        cy.contains('Become an Ambassador now')
+            .should('have.attr', 'href', 'https://github.com/asyncapi/community/blob/master/AMBASSADOR_ORGANIZATION.md#are-you-interested-in-becoming-an-official-asyncapi-ambassador');
+    });
+
+    it('should display NewsletterSubscribe', () => {
+        cy.get('[data-testid="NewsletterSubscribe-main"]').should('exist');
+        cy.get('[data-testid="NewsletterSubscribe-text-input"]').type("name");
+        cy.get('[data-testid="NewsletterSubscribe-email-input"]').type("[email protected]")
+        cy.get('form[name="form 1"]').should('exist');
+        cy.get('input[name="type"]').should('exist');
+        cy.get('input[name="name"]').should('exist');
+        cy.get('input[name="email"]').should('exist');
+    });
+});

cypress/test/pages/community/dashboard.cy.js

@@ -0,0 +1,28 @@
+import MockApp from "../../../utils/mockApp";
+import Home from "../../../../pages/community/dashboard";
+import Header from "../../../../components/dashboard/Header";
+import { mount } from '@cypress/react'
+describe('Integration Test for Dashboard ', () => {
+
+    it('should filter GoodFirstIssues and check dashboard render ', () => {
+        mount(
+            <MockApp>
+                <Home />
+            </MockApp>
+        );
+        // Click on the first filter option
+        cy.get(Header).should('exist')
+        cy.contains('AsyncAPI - Dashboard')
+        cy.get('[data-testid="Filters-img-container"]').click({ force: true });
+        cy.get('[data-testid="Filter-menu"]').within(() => {
+            cy.get('[data-testid="Select-form"]').eq(0).select('asyncapi/generator', { force: true });
+            cy.get('[data-testid="Select-form"]').eq(1).select('docs')
+        });
+        //check if selected is only displayed
+        cy.contains('asyncapi/generator');
+        cy.contains('docs')
+        //check if this is not selected options are not displayed
+        cy.should('not.contain', 'asyncapi/community');
+        cy.should('not.contain', 'javascript');
+    });
+});

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

@@ -0,0 +1,74 @@
+import MockApp from "../../../utils/mockApp";
+import CommunityIndexPage from "../../../../pages/community";
+
+describe('CommunityIndexPage', () => {
+  beforeEach(() => {
+    cy.mount(<MockApp><CommunityIndexPage /></MockApp>)
+  });
+
+  it('displays the page title & check for first Community Home Card', () => {
+    cy.contains('AsyncAPI Community Meetings');
+    cy.get('[data-testid="CommunityIndex-HomeCard"]').should('exist')
+    cy.get('[data-testid="HomeCard-main"]').contains('Thanking our AsyncAPI Ambassadors')
+    cy.get('[data-testid="HomeCard-title"]').contains('Ambassador Programs')
+    cy.get(`[href="/community/ambassadors"]`).should('exist');
+    cy.get('[data-testid="HomeCard-button"]').should('exist');
+    cy.get(".bg-ambassador").should('exist')
+  });
+
+  it('checks for CommunityIndex Display Card', () => {
+    cy.get('[data-testid="CommunityIndex-IssuesCard"]').should('exist')
+    cy.get('[data-testid="Card-lg-bg"]').should('have.class', 'bg-code-editor-dark')
+    cy.get('[data-testid="Card-lg-tagline"]').should('have.class', 'bg-pink-100')
+    cy.get('[data-testid="Card-heading-lg"]').should('exist');
+    cy.get('[data-testid="Card-desc-lg"]').should('exist');
+    cy.get(`[href="/community/dashboard"]`).should('exist');
+  });
+
+  it('should display the Newsroom Card', () => {
+    cy.get('[data-testid="CommunityIndex-Newsroom-Card"]').should('exist');
+    cy.get('[data-testid="Card-lg-bg"]').should('have.class', 'bg-code-editor-dark');
+    cy.get('[data-testid="Card-lg-tagline"]').should('have.class', 'bg-pink-100');
+    cy.get('[data-testid="Card-heading-lg"]').should('exist');
+    cy.get('[data-testid="Card-desc-lg"]').should('exist');
+    cy.get('[href="/community/newsroom"]').should('exist');
+  });
+
+  it('should display the Toolings Card', () => {
+    cy.get('[data-testid="CommunityIndex-Toolings-Card"]').should('exist');
+    cy.get('[data-testid="Card-lg-tagline"]').should('exist')
+    cy.get('[data-testid="Card-heading-lg"]').should('exist')
+    cy.get('[data-testid="Card-desc-lg"]').should('exist')
+    cy.get('[href="/tools"]').should('exist');
+  });
+
+  it('should display other cards correctly', () => {
+   cy.get('[data-testid="CommunityCards-Goals"]').should('exist');
+   cy.get('[href="https://github.com/asyncapi/community/discussions/513"]').should('exist');
+   cy.get('[data-testid="CommunityCards-Contributors"]').should('exist');
+   cy.get('[href="https://github.com/orgs/asyncapi/discussions/593"]').should('exist');
+   cy.get('[data-testid="CommunityCards-TSC"]').should('exist');
+   cy.get('[href="/community/tsc"]').should('exist');  
+  });
+
+  it('should display slack card ' ,() => {
+    cy.get('[data-testid="CommunityCards-Slack"]').should('exist');
+    cy.get('[data-testid="CommunityIndex-HomeCard"]').should('exist')
+    cy.get('[data-testid="HomeCard-main"]').contains('All community info, tracked')
+    cy.get('[data-testid="HomeCard-title"]').contains('AsyncAPI Slack')
+    cy.get(`[href="https://asyncapi.com/slack-invite"]`).should('exist');
+    cy.get('[data-testid="HomeCard-button"]').should('exist');
+    cy.get(".bg-channelCover").should('exist')
+  });
+
+  it('should display NewsletterSubscribe',()=>{
+   cy.get('[data-testid="CommunityCard-subscribe"]').should('exist');
+   cy.get('[data-testid="NewsletterSubscribe-main"]').should('exist');
+   cy.get('[data-testid="NewsletterSubscribe-text-input"]').type("name");
+   cy.get('[data-testid="NewsletterSubscribe-email-input"]').type("[email protected]")
+   cy.get('form[name="form 1"]').should('exist');
+   cy.get('input[name="type"]').should('exist');
+   cy.get('input[name="name"]').should('exist');
+   cy.get('input[name="email"]').should('exist');
+  });
+});

cypress/test/pages/community/newsroom.cy.js

@@ -0,0 +1,14 @@
+import MockApp from "../../../utils/mockApp";
+import { mount } from "@cypress/react";
+import NewsroomSection from '../../../../components/newsroom/NewsroomSection'
+
+describe('Test for Newsroom Section Pages', () => {
+ it('renders correctly', () => {
+        mount(
+            <MockApp>
+             <NewsroomSection/>
+            </MockApp>
+           );
+
+      });
+});

cypress/utils/MockApp.js

@@ -0,0 +1,27 @@
+import AppContext from "../../context/AppContext";
+import { MDXProvider } from "../../components/MDX";
+import Layout from "../../components/layout/Layout";
+import AlgoliaSearch from "../../components/AlgoliaSearch";
+import { createRouter } from "./router";
+import MockRouter from "./router";
+
+import Head from "next/head";
+
+export default function MockApp({ children }) {
+  return (
+    <AppContext.Provider value={{ path: createRouter.asPath }}>
+      <Head>
+        <script async defer src="https://buttons.github.io/buttons.js"></script>
+      </Head>
+      <MDXProvider>
+        <AlgoliaSearch>
+          <div className="flex flex-col min-h-screen">
+            <MockRouter pathname="/">
+              <Layout>  {children} </Layout>
+            </MockRouter>
+          </div>
+        </AlgoliaSearch>
+      </MDXProvider>
+    </AppContext.Provider>
+  )
+}

cypress/utils/router.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 
-const createRouter = (params) => ({
+export const createRouter = (params) => ({
   route: '/',
   pathname: '/',
   query: {},