Merge branch 'master' into footer_test

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/MDX.js

@@ -10,7 +10,7 @@ import ChapterSuggestions from '../components/buttons/ChapterSuggestions'
 import CodeBlock from '../components/editor/CodeBlock'
 import Remember from '../components/Remember'
 import Warning from '../components/Warning'
-import Sponsors from '../components/Sponsors'
+import Sponsors from "./sponsors/Sponsors";
 import Caption from '../components/Caption'
 import Row from '../components/layout/Row'
 import Column from '../components/layout/Column'

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>

components/sponsors/GoldSponsors.js

@@ -0,0 +1,27 @@
+import {goldSponsors} from './GoldSponsorsList';
+export default function GoldSponsors({ className = '', showSupportBanner = true }) {
+   return (
+      <div className={`text-center ${className}`}>
+        <div className="flex flex-wrap mb-8 items-center justify-center md:px-4">
+          {goldSponsors.map((sponsor, index) => (
+            <a
+              key={index}
+              href={sponsor.website}
+              target="_blank"
+              className="block relative text-center w-2/3 px-4 py-4 sm:p-0 sm:w-1/2 md:w-1/3 lg:w-1/5"
+              rel="noopener noreferrer"
+              data-testid="GoldSponsors-link"
+            >
+              <img
+                className="inline-block sm:h-12"
+                src={sponsor.imageSrc}
+                alt={sponsor.name}
+                data-testid="GoldSponsors-img"
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+

components/sponsors/GoldSponsorsList.js

@@ -0,0 +1,8 @@
+export const goldSponsors = [
+  {
+    name: 'Red Hat',
+    imageSrc: '/img/sponsors/redhat.svg',
+    website: 'https://www.redhat.com/',
+  },
+
+];

components/sponsors/SilverSponsors.js

@@ -0,0 +1,27 @@
+import { Silversponsors } from "./SilverSponsorsList";
+export default function SilverSponsors({ className = '', showSupportBanner = true }) {
+    return (
+      <div className={`text-center ${className}`}>
+        <div className="flex flex-wrap mb-8 items-center justify-center md:px-4">
+          {Silversponsors.map((sponsor, index) => (
+            <a
+              key={index}
+              href={sponsor.url}
+              target="_blank"
+              className="block relative text-center w-2/3 px-4 py-4 sm:p-0 sm:w-1/2 md:w-1/3 lg:w-1/5"
+              rel="noopener noreferrer"
+              data-testid="SilverSponsors-link"
+            >
+              <img
+                className="inline-block sm:h-9"
+                src={sponsor.image}
+                alt={sponsor.name}
+                data-testid="SilverSponsors-img"
+              />
+            </a>
+          ))}
+        </div>
+      </div>
+    );
+  }
+

components/sponsors/SilverSponsorsList.js

@@ -0,0 +1,8 @@
+export const Silversponsors = [
+    {
+      name: 'Bump.sh',
+      url: 'https://bump.sh/asyncapi?utm_source=asyncapi&utm_medium=referral&utm_campaign=sponsor',
+      image: '/img/sponsors/bumpsh.svg'
+    },
+
+  ];

components/sponsors/Sponsors.js

@@ -0,0 +1,44 @@
+import { sponsors } from "./SponsorsList";
+export default function Sponsors({ className = '', showSupportBanner = true }) {
+return (
+    <div className={`text-center ${className}`}>
+      <ul className="flex flex-wrap mb-4 items-center justify-center md:px-4">
+        {sponsors.map((sponsor, index) => (
+          <li
+            key={index}
+            className="w-2/3 sm:w-1/4 md:w-1/3 lg:w-1/5"
+            data-testid="Sponsors-list"
+          >
+            <a
+              href={sponsor.link}
+              target="_blank"
+              className="block relative text-center px-4 py-4 sm:p-0"
+              rel="noopener noreferrer"
+              data-testid="Sponsors-link"
+            >
+              <img
+                className={sponsor.imageClass}
+                src={sponsor.imageSrc}
+                alt={sponsor.altText}
+                data-testid="Sponsors-img"
+              />
+            </a>
+          </li>
+        ))}
+      </ul>
+      {showSupportBanner && (
+        <div className="md:px-4">
+          <span className="text-gray-500">Want to become a sponsor?</span>{' '}
+          <a
+            href="https://opencollective.com/asyncapi"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary-600"
+          >
+            Support us!
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}

components/sponsors/SponsorsList.js

@@ -0,0 +1,30 @@
+export const sponsors = [
+    {
+      name: 'IBM',
+      link: 'https://www.ibm.com',
+      imageSrc: '/img/sponsors/ibm.png',
+      altText: 'IBM',
+      imageClass: 'inline-block px-4 sm:h-14',
+    },
+    {
+      name: 'IQVIA Technologies',
+      link: 'https://www.iqvia.com',
+      imageSrc: '/img/sponsors/iqvia.png',
+      altText: 'IQVIA Technologies',
+      imageClass: 'inline-block px-4 sm:h-10',
+    },
+    {
+      name: 'Postman',
+      link: 'https://www.postman.com',
+      imageSrc: '/img/sponsors/postman.png',
+      altText: 'Postman',
+      imageClass: 'inline-block px-2 sm:h-18 flex-shrink-0',
+    },
+    {
+      name: 'Solace',
+      link: 'https://www.solace.com',
+      imageSrc: '/img/sponsors/solace.png',
+      altText: 'Solace',
+      imageClass: 'inline-block px-4 sm:h-10',
+    },
+  ];

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');
+  });
+});