+
{
+ beforeEach(() => {
+ mount();
+ });
+
+ it('renders the upcoming events', () => {
+ cy.get('[data-testid="Calendar-list-item"]').should('have.length', eventsData.length);
+ });
+
+ it('renders the "View Calendar" button if events exist', () => {
+ if (eventsData.length > 0) {
+ cy.get('[data-testid="Calendar-button"]').should('be.visible');
+ } else {
+ cy.get('[data-testid="Calendar-button"]').should('not.exist');
+ }
+ });
+
+ it('renders the "No meetings scheduled" message if no events exist', () => {
+ if (eventsData.length === 0) {
+ cy.contains('There are no meetings scheduled for next few days.').should('be.visible');
+ } else {
+ cy.contains('There are no meetings scheduled for next few days.').should('not.exist');
+ }
+ });
+});
diff --git a/cypress/test/Caption.cy.js b/cypress/test/Caption.cy.js
new file mode 100644
index 00000000000..464cc4dcad7
--- /dev/null
+++ b/cypress/test/Caption.cy.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Caption from '../../components/Caption';
+
+describe('Caption component', () => {
+ beforeEach(() => {
+ mount(AsyncAPI);
+ });
+
+ it('renders the caption text correctly', () => {
+ cy.contains('AsyncAPI').should('be.visible');
+ });
+
+ it('check correct CSS classes', () => {
+ cy.get('[data-testid="Caption-paragraph"]').should('have.class', 'text-center').and('have.class', 'text-xs')
+ .and('have.class', 'text-gray-500')
+ .and('have.class', 'mt-2');
+ });
+});
diff --git a/cypress/test/Modal.cy.js b/cypress/test/Modal.cy.js
new file mode 100644
index 00000000000..c3ab3a0fd98
--- /dev/null
+++ b/cypress/test/Modal.cy.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Modal from '../../components/Modal';
+
+
+describe('Modal', () => {
+ it('should call onModalClose when the close button is clicked', () => {
+ const onModalClose = cy.stub().as('onModalClose');
+ mount();
+
+ cy.get('[data-testid="Modal-close"]').click();
+
+ cy.get('@onModalClose').should('have.been.calledOnce');
+ });
+
+ it('should call onModalClose when the backdrop is clicked', () => {
+ const onModalClose = cy.stub().as('onModalClose');
+ mount();
+
+ cy.get('.backdrop-blur').click();
+
+ cy.get('@onModalClose').should('have.been.calledOnce');
+ });
+
+ it('should call onModalClose when the Escape key is pressed', () => {
+ const onModalClose = cy.stub().as('onModalClose');
+ mount();
+
+ cy.get('.backdrop-blur').type('{esc}');
+
+ cy.get('@onModalClose').should('have.been.calledOnce');
+ });
+ });
\ No newline at end of file
diff --git a/cypress/test/footer/Footer.cy.js b/cypress/test/footer/Footer.cy.js
new file mode 100644
index 00000000000..d0ad207ae64
--- /dev/null
+++ b/cypress/test/footer/Footer.cy.js
@@ -0,0 +1,42 @@
+import { mount } from '@cypress/react'
+import Footer from '../../../components/footer/Footer'
+import { socialMediaLinks, initiativeLinks } from '../../../components/footer/FooterList'
+
+describe('Footer component', () => {
+ beforeEach(() => {
+ mount()
+ })
+
+ it('renders initiative links', () => {
+ cy.get('[data-testid=Footer-initiative-links] a').should('have.length', initiativeLinks.length)
+ })
+
+ it('displays correct initiative link labels and URLs', () => {
+ cy.get('[data-testid=Footer-initiative-links] a').each(($link, index) => {
+ const { label, url } = initiativeLinks[index]
+ expect($link).to.have.text(label)
+ expect($link).to.have.attr('href', url)
+ })
+ })
+
+ it('renders social media links', () => {
+ cy.get('[data-testid=Footer-social-media-links] a').should('have.length', socialMediaLinks.length)
+ })
+
+ it('displays correct social media link', () => {
+ cy.get('[data-testid=Footer-social-media-links] a').each(($link, index) => {
+ const { url } = socialMediaLinks[index]
+ expect($link).to.have.attr('href', url)
+
+ })
+ })
+ it('displays the end content', () => {
+ cy.get('[data-testid="Footer-content"]').should('be.visible')
+ })
+
+ it('checks for logo and link associated with it', () => {
+ cy.get('[data-testid="Footer-logo-link"]').should('exist')
+ cy.get('[data-testid="Footer-logo-link"]').should('have.attr', 'href', '/')
+
+ })
+})
diff --git a/cypress/test/form/Select.cy.js b/cypress/test/form/Select.cy.js
new file mode 100644
index 00000000000..424288bf301
--- /dev/null
+++ b/cypress/test/form/Select.cy.js
@@ -0,0 +1,35 @@
+import { mount } from 'cypress/react';
+import Select from '../../../components/form/Select';
+
+describe('Select Component', () => {
+ const options = [
+ { value: 'option1', text: 'Option 1' },
+ { value: 'option2', text: 'Option 2' },
+ { value: 'option3', text: 'Option 3' },
+ ];
+
+ it('should call onChange when an option is selected', () => {
+ const onChange = cy.stub().as('onChange');
+ mount();
+
+ cy.get('[data-testid="Select-form"]').select('option2');
+ cy.get('@onChange').should('be.calledOnceWith', 'option2');
+ });
+
+ it('should render options correctly', () => {
+ mount();
+
+ cy.get('[data-testid="Select-form"]')
+ .find('[data-testid="Option-form"]')
+ .should(($options) => {
+ expect($options).to.have.length(3);
+
+ const optionValues = $options.map((_, el) => Cypress.$(el).val()).get();
+ expect(optionValues).to.deep.eq(['option1', 'option2', 'option3']);
+
+ const selectedOption = $options.filter(':selected');
+ expect(selectedOption).to.have.length(1);
+ expect(selectedOption.text()).to.eq('Option 2');
+ });
+ });
+});
diff --git a/cypress/test/slack/Message.cy.js b/cypress/test/slack/Message.cy.js
new file mode 100644
index 00000000000..87b81e67456
--- /dev/null
+++ b/cypress/test/slack/Message.cy.js
@@ -0,0 +1,37 @@
+import { mount } from '@cypress/react'
+import SlackMessage from '../../../components/slack/Message'
+describe('SlackMessage component', () => {
+ it('renders the SlackMessage component correctly', () => {
+ const avatarSrc = '../../../public/img/avatars/dalelane.webp' // Replace
+ const name = 'John Doe'
+ const text = 'Hello, world!'
+ const reactions = [
+ { emoji: '👍', count: 5 },
+ { emoji: '❤️', count: 3 },
+ // Add more reactions
+ ]
+
+ mount(
+
+ )
+
+
+ cy.get('[data-testid="SlackMessage-main-div"]').should('exist')
+ cy.get('[ data-testid="SlackMessage-img"]').should('have.attr', 'src', avatarSrc)
+ cy.get('[data-testid="SlackMessage-name"]').should('contain', name)
+ cy.get('[data-testid="SlackMessage-text"]').should('contain', text)
+
+ // Check the reaction elements
+ reactions.forEach((reaction, index) => {
+ cy.get('[data-testid="SlackMessage-reaction"]').eq(index).as('reactionElement')
+
+ if (reaction.icon) {
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-reactionIcon"]').should('have.attr', 'src', reaction.icon)
+ } else {
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-span"]').should('contain', reaction.emoji)
+ }
+
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-count"]').should('contain', reaction.count)
+ })
+ })
+})
diff --git a/cypress/test/slack/index.cy.js b/cypress/test/slack/index.cy.js
new file mode 100644
index 00000000000..4a7c2698c33
--- /dev/null
+++ b/cypress/test/slack/index.cy.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Slack from '../../../components/slack/index';
+
+describe('Slack Component', () => {
+ it('renders the Slack messages correctly', () => {
+ mount();
+
+ // Verify the first Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-1').should('exist')
+
+ // Verify the second Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-2').should('exist')
+
+ // Verify the third Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-3').should('exist')
+
+ // Verify the fourth Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-4').should('exist')
+ });
+});
diff --git a/pages/_app.js b/pages/_app.js
index 2c7bdf7fc3d..7b3a41781ac 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,7 +2,7 @@ import Head from 'next/head';
import Layout from '../components/layout/Layout'
import Banner from '../components/campaigns/Banner'
import AppContext from '../context/AppContext'
-import Footer from "../components/Footer";
+import Footer from '../components/footer/Footer'
import { MDXProvider } from '../components/MDX';
import AlgoliaSearch from '../components/AlgoliaSearch';
import ScrollButton from '../components/buttons/ScrollButton';
diff --git a/pages/blog/index.js b/pages/blog/index.js
index 763a5c66728..03e2ef01bb8 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -1,20 +1,12 @@
import { useContext, useState } from "react";
-import Link from "next/link";
import { useRouter } from "next/router";
-import NavBar from "../../components/navigation/NavBar";
-import Container from "../../components/layout/Container";
import BlogContext from "../../context/BlogContext";
import BlogPostItem from "../../components/navigation/BlogPostItem";
-import Footer from "../../components/Footer";
-import Head from "../../components/Head";
-import AnnouncementHero from "../../components/campaigns/AnnoucementHero";
import Filter from "../../components/navigation/Filter";
import Empty from "../../components/illustrations/empty";
import Heading from "../../components/typography/Heading";
-import StickyNavbar from "../../components/navigation/StickyNavbar"
import Paragraph from "../../components/typography/Paragraph";
import TextLink from "../../components/typography/TextLink";
-import Button from "../../components/buttons/Button";
import GenericLayout from "../../components/layout/GenericLayout";
export default function BlogIndexPage() {
diff --git a/pages/jobs/index.js b/pages/jobs/index.js
index 5e6bb3646e4..0a06834d2e3 100644
--- a/pages/jobs/index.js
+++ b/pages/jobs/index.js
@@ -1,13 +1,8 @@
import { useContext, useState } from "react";
-import NavBar from "../../components/navigation/NavBar";
import JobsContext from "../../context/JobsContext";
import JobPostItem from "../../components/navigation/JobPostItem";
-import Footer from "../../components/Footer";
-import Head from "../../components/Head";
import Filter from "../../components/navigation/Filter";
-import AnnouncementHero from "../../components/campaigns/AnnoucementHero";
import Empty from "../../components/illustrations/empty";
-import StickyNavbar from "../../components/navigation/StickyNavbar"
import Heading from "../../components/typography/Heading";
import Paragraph from "../../components/typography/Paragraph";
import TextLink from "../../components/typography/TextLink";