feat: adding unit tests for calendar modal and caption component (#1811)

components/Calendar.js

@@ -16,7 +16,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
       </Heading> 
       <ul>
         {getEvents(eventsData, size).map((event, index) => (
-          <li key={index}>
+          <li key={index} data-testid="Calendar-list-item">
             <a
               href={event.url}
               className="flex-grow flex sm:items-center items-start flex-col sm:flex-row mb-1 mt-2"
@@ -40,7 +40,7 @@ export default function Calendar({ className = '', size, text="text-left" }) {
         ))}
       </ul>
       {eventsExist ? 
-        <div className='pt-4'>
+        <div className='pt-4' data-testid="Calendar-button">
           <GoogleCalendarButton 
             href={CALENDAR_URL}
             text="View Calendar"

components/Caption.js

@@ -1,6 +1,6 @@
 export default function Caption ({children}) {
   return (
-    <p className="text-center text-xs text-gray-500 mt-2">
+    <p className="text-center text-xs text-gray-500 mt-2" data-testid="Caption-paragraph">
       {children}
     </p>
   )

components/Modal.js

@@ -26,7 +26,7 @@ export default function Modal({
       <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl sm:p-6">
         <div className="flex justify-between mb-6">
           <h1 className="text-lg font-bold truncate mr-4">{title}</h1>
-          <button onClick={() => onModalClose()}>
+          <button onClick={() => onModalClose()} data-testid="Modal-close">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

cypress/test/Calendar.cy.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Calendar from '../../components/Calendar';
+import eventsData from '../../config/meetings.json';
+
+describe('Calendar component', () => {
+  beforeEach(() => {
+    mount(<Calendar />);
+  });
+
+  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');
+    }
+  });
+});

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(<Caption>AsyncAPI</Caption>);
+  });
+
+  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');
+  });
+});

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(<Modal title="Test Modal" onModalClose={onModalClose} />);
+
+      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(<Modal title="Test Modal" onModalClose={onModalClose} />);
+
+      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(<Modal title="Test Modal" onModalClose={onModalClose} />);
+
+      cy.get('.backdrop-blur').type('{esc}');
+
+      cy.get('@onModalClose').should('have.been.calledOnce');
+    });
+  });