Merge branch 'master' into calender_tests

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/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/sponsors/GoldSponsors.cy.js

@@ -0,0 +1,22 @@
+import {mount} from 'cypress/react'
+import GoldSponsors from '../../../components/sponsors/GoldSponsors';
+import { goldSponsors } from '../../../components/sponsors/GoldSponsorsList';
+describe('GoldSponsors Component', () => {
+  beforeEach(() => {
+    mount(<GoldSponsors />);
+  });
+
+  it('renders the gold sponsors', () => {
+    cy.get('.flex-wrap')
+      .find('[data-testid="GoldSponsors-link"]')
+      .should('have.length', goldSponsors.length)
+      .each(($sponsor, index) => {
+        const sponsor = goldSponsors[index];
+        cy.wrap($sponsor)
+          .should('have.attr', 'href', sponsor.website)
+          .find('[data-testid="GoldSponsors-img"]')
+          .should('have.attr', 'src', sponsor.imageSrc)
+          .should('have.attr', 'alt', sponsor.name);
+      });
+  });
+});

cypress/test/sponsors/SilverSponsors.cy.js

@@ -0,0 +1,18 @@
+import { mount } from 'cypress/react';
+import SilverSponsors from '../../../components/sponsors/SilverSponsors';
+import { Silversponsors } from '../../../components/sponsors/SilverSponsorsList';
+
+describe('SilverSponsors', () => {
+  it('renders silver sponsors correctly', () => {
+    mount(
+      <SilverSponsors />
+    );
+    Silversponsors.forEach((sponsor, index) => {
+      cy.get('[data-testid="SilverSponsors-link"]').eq(index)
+        .should('have.attr', 'href', sponsor.url)
+        .find('[data-testid="SilverSponsors-img"]')
+        .should('have.attr', 'src', sponsor.image)
+        .should('have.attr', 'alt', sponsor.name);
+    });
+  });
+});

cypress/test/sponsors/Sponsors.cy.js

@@ -0,0 +1,36 @@
+import { mount } from 'cypress/react';
+import Sponsors from '../../../components/sponsors/Sponsors';
+import { sponsors } from '../../../components/sponsors/SponsorsList';
+
+describe('Sponsors Component', () => {
+  it('renders sponsors correctly', () => {
+    mount(<Sponsors sponsors={sponsors} />);
+
+    sponsors.forEach((sponsor, index) => {
+      cy.get('[data-testid="Sponsors-list"]').eq(index).within(() => {
+        cy.get('[data-testid="Sponsors-link"]')
+          .should('have.attr', 'href', sponsor.link)
+          .should('have.attr', 'target', '_blank')
+          .should('have.attr', 'rel', 'noopener noreferrer');
+
+        cy.get('[data-testid="Sponsors-img"]')
+          .should('have.attr', 'src', sponsor.imageSrc)
+          .should('have.attr', 'alt', sponsor.altText);
+      });
+    });
+  });
+  it('shows support banner when showSupportBanner prop is true', () => {
+    mount(<Sponsors sponsors={sponsors} showSupportBanner={true} />);
+    cy.contains('Want to become a sponsor?');
+    cy.contains('Support us!')
+      .should('have.attr', 'href', 'https://opencollective.com/asyncapi')
+      .should('have.attr', 'target', '_blank')
+      .should('have.attr', 'rel', 'noopener noreferrer');
+  });
+
+  it('does not show support banner when showSupportBanner prop is false', () => {
+    mount(<Sponsors sponsors={sponsors} showSupportBanner={false} />);
+    cy.contains('Want to become a sponsor?').should('not.exist');
+    cy.contains('Support us!').should('not.exist');
+  });
+});

pages/index.js

@@ -2,7 +2,7 @@ import Container from '../components/layout/Container'
 import NavBar from '../components/navigation/NavBar'
 import Hero from '../components/Hero'
 import NewsletterSubscribe from '../components/NewsletterSubscribe'
-import Sponsors from '../components/Sponsors'
+import Sponsors from '../components/sponsors/Sponsors'
 import Head from '../components/Head'
 import Slack from '../components/slack'
 import Button from '../components/buttons/Button'
@@ -16,8 +16,8 @@ import Testimonial from '../components/Testimonial'
 import Heading from '../components/typography/Heading'
 import Paragraph from '../components/typography/Paragraph'
 import TextLink from '../components/typography/TextLink'
-import GoldSponsors from '../components/GoldSponsors'
-import SilverSponsors from '../components/SilverSponsors'
+import GoldSponsors from '../components/sponsors/GoldSponsors'
+import SilverSponsors from '../components/sponsors/SilverSponsors'
 import SupportUs from '../components/SupportUs'
 import StickyNavbar from '../components/navigation/StickyNavbar'
 import GoogleCalendarButton from '../components/buttons/GoogleCalendarButton';