test: add e2e tests for roadmap and case studies page

config/tools.json

@@ -866,7 +866,7 @@
               "borderColor": "border-[#CA1A33]"
             },
             {
-              "name": "Liquid",
+              "name": "AsyncAPI CLI",
               "color": "bg-[#61d0f2]",
               "borderColor": "border-[#40ccf7]"
             },
@@ -1556,7 +1556,7 @@
               "borderColor": "border-[#CA1A33]"
             },
             {
-              "name": "Liquid",
+              "name": "AsyncAPI CLI",
               "color": "bg-[#61d0f2]",
               "borderColor": "border-[#40ccf7]"
             },

cypress/RoadmapPage.cy.js

@@ -0,0 +1,30 @@
+import RoadmapPage from './pages/RoadmapPage';
+
+describe('RoadMap Page Navigation and Functionality', () => {
+  let roadmapPage;
+
+  beforeEach(() => {
+    roadmapPage = new RoadmapPage();
+    roadmapPage.visit();
+  });
+
+  it('User navigates to the RoadMap Page and verifies the header', () => {
+    roadmapPage.verifyPageLoaded();
+  });
+
+  it('User clicks on the community page link and verifies navigation', () => {
+    roadmapPage.verifyCommunityLink();
+  });
+
+  const tooltips = [
+    { name: 'Outcome', index: 0 },
+    { name: 'Solution', index: 1 },
+    { name: 'Implementation', index: 2 }
+  ];
+
+  tooltips.forEach(({ name, index }) => {
+    it(`User verifies ${name} tooltip`, () => {
+      roadmapPage.verifyTooltip(index);
+    });
+  });
+});

cypress/casestudies.cy.js

@@ -0,0 +1,42 @@
+import CaseStudiesPage from './pages/CaseStudiesPage';
+import { verifyLinks } from './support/helpers';
+
+let casestudiespage;
+
+beforeEach(() => {
+  casestudiespage = new CaseStudiesPage();
+  casestudiespage.visit();
+});
+
+describe('Critical User Flows in CaseStudies Page', () => {
+  const verifications = [
+    { name: 'header', testName: 'User navigates to the Case Studies Page and verifies the header', fn: () => casestudiespage.verifyHeader() },
+    { name: 'FAQ link', testName: 'User verifies FAQ link is visible and contains correct URL', fn: () => casestudiespage.verifyFaqLink() },
+    { name: 'Cards link', testName: 'User verifies Cards link is visible and contains correct URL', fn: () => casestudiespage.verifyCardsLink() },
+    { name: 'Submit PR link', testName: 'User verifies Submit a Pull Request Link is visible and contains correct URL', fn: () => casestudiespage.verifySubmitPullRequestLink() }
+  ];
+
+  verifications.forEach(({ testName, fn }) => {
+    it(testName, fn);
+  });
+});
+
+describe('Adopters Table', () => {
+  it('Navigates to the Case Studies page and scrolls down to the Adopters Table', () => {
+    casestudiespage.verifyScrollDown();
+  });
+});
+
+describe('Links under Resources Section', () => {
+  let links;
+
+  before(() => {
+    cy.fixture('caseStudiesLinks').then((data) => {
+      links = data;
+    });
+  });
+
+  it('Verifies all Links under Resources work', () => {
+    verifyLinks(links, (href, label) => casestudiespage.verifyResourceLink(href), 'href', 'label');
+  });
+});

cypress/docspage.cy.js

@@ -28,22 +28,22 @@ describe('Docs Page Tests', () => {
     docsPage.goToReferenceSection();
     docsPage.goToMigrationsSection();
     docsPage.goToCommunitySection();
+  });
 
-    it('verifying Card Links present on the Docs Page', () => {
-      const cards = [
-        { href: '/docs/concepts' },
-        { href: '/docs/tutorials' },
-        { href: '/docs/guides' },
-        { href: '/docs/tools' },
-        { href: '/docs/reference' },
-        { href: '/docs/migration' },
-        { href: '/docs/community' },
-        { href: '/docs/reference/specification/v3.1.0-explorer' },
-      ];
+  it('verifying Card Links present on the Docs Page', () => {
+    const cards = [
+      { href: '/docs/concepts' },
+      { href: '/docs/tutorials' },
+      { href: '/docs/guides' },
+      { href: '/docs/tools' },
+      { href: '/docs/reference' },
+      { href: '/docs/migration' },
+      { href: '/docs/community' },
+      { href: '/docs/reference/specification/v3.1.0-explorer' },
+    ];
 
-      cards.forEach((card) => {
-        docsPage.verifyCardLinks(card.href);
-      });
+    cards.forEach((card) => {
+      docsPage.verifyCardLinks(card.href);
     });
   });
 });

cypress/fixtures/caseStudiesLinks.json

@@ -0,0 +1,82 @@
+[
+  {
+    "href": "https://www.youtube.com/watch?v=_MwzLZMwFN8",
+    "label": "Video: Raiffeisen Bank - GitOps with AsyncAPI"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=m8I0fYjx6Cc",
+    "label": "Video: LEGO Group - Documentation as Configuration"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=qjarcJQVLOg",
+    "label": "Video: LEGO Group - Cross-Domain Events"
+  },
+  {
+    "href": "https://www.confluent.io/events/kafka-summit-apac-2021/self-service-events-and-decentralised-governance-with-asyncapi-a-real-world/",
+    "label": "Video: Bank of New Zealand - Self-service Events"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=yjHgT0n2BtA",
+    "label": "Video: Zora Robotics - MQTT APIs for IoT"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=SxTpGRaNIPo",
+    "label": "Video: Walmart and eBay - AsyncAPI Specification"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=0_7QZyKLPoE",
+    "label": "Video: Postman - Synapse Event Infrastructure"
+  },
+  {
+    "href": "https://drive.google.com/file/d/1AVCG9_fFtuOtrvZVZWENmU2aDT7C51Jr/view?usp=sharing",
+    "label": "Slides: Adobe - AsyncAPI and Modelina"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=m4KS6FSeTT4",
+    "label": "Video: Open University of Catalonia - Smart Ports"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=CGLlxYy66LY",
+    "label": "Video: Oracle - Data Replication"
+  },
+  {
+    "href": "https://www.asyncapi.com/blog/transfergo-asyncapi-story",
+    "label": "Article: TransferGo - AsyncAPI Story"
+  },
+  {
+    "href": "https://drive.google.com/file/d/1y67PI8NaITPPwZAiDF2Zs7ISfcIpqMV8/view?usp=sharing",
+    "label": "Slides: Kuehne+Nagel - GitOps for Kafka"
+  },
+  {
+    "href": "https://adidas.gitbook.io/api-guidelines/asynchronous-api-guidelines/kafka-asynchronous-guidelines/a_introduction/why-asyncapi",
+    "label": "Docs: Adidas - API Guidelines"
+  },
+  {
+    "href": "https://drive.google.com/file/d/1YzLwQZsMUXGwj_Lsqv-ZnvV2knuowWrS/view?usp=drive_link",
+    "label": "Slides: Morgan Stanley - WebSocket APIs"
+  },
+  {
+    "href": "https://www.asyncapi.com/casestudies/adeogroup",
+    "label": "Use Case: Adeo - Documentation Standards"
+  },
+  {
+    "href": "https://www.asyncapi.com/casestudies/hdiglobal",
+    "label": "Use Case: HDI Global SE - Documentation"
+  },
+  {
+    "href": "https://www.youtube.com/watch?v=KcYiD67gEh0&list=PLbi1gRlP7pig_nA0tRlr0hU_h5sB2HXcq&index=6",
+    "label": "Video: SAP - Event Catalog"
+  },
+  {
+    "href": "https://www.slideshare.net/slideshow/apidays-paris-2022-adding-a-mock-as-a-service-capability-to-your-api-strategy-portfolio-ludovic-pourrat-lombard-odier/255041645#4",
+    "label": "Slides: Lombard Odier - Mock as a Service"
+  },
+  {
+    "href": "https://github.com/siemens/rosita",
+    "label": "Code: Siemens AG - ROS2 Interfaces"
+  },
+  {
+    "href": "https://github.com/pagopa/p4pa-registries/blob/develop/asyncapi/generated.asyncapi.json",
+    "label": "Code: PagoPA - Event-Driven APIs"
+  }
+]

cypress/footer.cy.js

@@ -8,21 +8,17 @@ describe('Footer Links Validation', () => {
     footer.visit();
   });
 
-  it('verifies the initiative links in the footer', () => {
-    initiativeLinks.forEach(({ url, label }) => {
-      footer.verifyFooterLink(url, label);
-    });
-  });
-
-  it('verifies the social links in the footer', () => {
-    socialMediaData.forEach(({ url, label }) => {
-      footer.verifyFooterLink(url, label);
-    });
-  });
+  const linkGroups = [
+    { name: 'initiative', links: initiativeLinks },
+    { name: 'social', links: socialMediaData },
+    { name: 'news', links: newsLinks }
+  ];
 
-  it('verifies the news links in the footer', () => {
-    newsLinks.forEach(({ url, label }) => {
-      footer.verifyFooterLink(url, label);
+  linkGroups.forEach(({ name, links }) => {
+    it(`verifies the ${name} links in the footer`, () => {
+      links.forEach(({ url, label }) => {
+        footer.verifyFooterLink(url, label);
+      });
     });
   });
 

cypress/pages/basepagedocs.js → cypress/pages/BaseDocsPage.js

@@ -1,6 +1,6 @@
-class BasePage {
-  visit() {
-    cy.visit('/');
+class BaseDocsPage {
+  visit(path = '/') {
+    cy.visit(path);
   }
 
   verifyLinkByHref(href) {
@@ -24,4 +24,4 @@ class BasePage {
   }
 }
 
-export default BasePage;
+export default BaseDocsPage;

cypress/pages/BaseFooterPage.js

@@ -1,4 +1,4 @@
-class BasePage {
+class BaseFooterPage {
   visit() {
     cy.visit('/');
   }
@@ -12,4 +12,4 @@ class BasePage {
   }
 }
 
-export default BasePage;
+export default BaseFooterPage;

cypress/pages/BaseHeaderPage.js

@@ -1,7 +1,7 @@
-
-class BasePage {
-  visit() {
-    cy.visit('/')
+class BaseHeaderPage {
+  visit(path = '/') {
+    cy.visit(path);
+    return this;
   }
 
   getElement(selector) {
@@ -15,4 +15,4 @@ class BasePage {
   }
 }
 
-export default BasePage;
+export default BaseHeaderPage;

cypress/pages/BasePage.js

@@ -34,6 +34,12 @@ class BasePage {
     return text ? chain.and('contain', text) : chain;
   }
 
+  getLink(href, text) {
+    return cy.contains(`a[href="${href}"]`, text)
+      .should('be.visible')
+      .and('have.attr', 'href', href);
+  }
+
   verifyButtonLink(href, buttonText) {
     return this.verifyLink(href, buttonText, { findByText: true });
   }
@@ -49,6 +55,13 @@ class BasePage {
       .should('not.be.empty');
   }
 
+  scrollToElement(selector) {
+    cy.get(selector).scrollIntoView().should('be.visible');
+  }
+
+  scrollToText(text) {
+    cy.contains(text).scrollIntoView().should('be.visible');
+  }
 }
 
 export default BasePage;

cypress/pages/BlogPage.js

@@ -4,6 +4,10 @@ class BlogPage extends BasePage {
   verifyPageLoaded() {
     this.verifyHeadingExists('Welcome to our blog!');
   }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
 }
 
 export default BlogPage;

cypress/pages/CaseStudiesPage.js

@@ -4,6 +4,46 @@ class CaseStudiesPage extends BasePage {
   verifyPageLoaded() {
     this.verifyHeadingExists('Case Studies');
   }
+
+  verifyScrollDown() {
+    this.scrollToText('Adopters');
+  }
+
+  verifyCardLink(cardName, cardUrl, index = 0) {
+    cy.get('[data-testid="CaseStudyCard-main"]')
+      .eq(index)
+      .within(() => {
+        cy.get(`img[alt*="${cardName.split(' ')[0]}"]`).should('exist');
+      })
+      .closest('a')
+      .should('have.attr', 'href', cardUrl);
+  }
+
+  verifyResourceLink(href) {
+    cy.get(`a[href="${href}"]`)
+      .first()
+      .should('exist')
+      .should('have.attr', 'href', href);
+  }
+
+  verifyFaqLink() {
+    this.verifyButtonLink(
+      'https://github.com/asyncapi/website/blob/master/README.md#case-studies',
+      'FAQ'
+    );
+  }
+
+  verifySubmitPullRequestLink() {
+    this.verifyButtonLink(
+      'https://github.com/asyncapi/website/blob/master/config/usecases.yaml',
+      'submit a pull request'
+    );
+  }
+
+  verifyCardsLink() {
+    this.verifyCardLink('Adeo Group', 'casestudies/adeogroup', 0);
+    this.verifyCardLink('HDI Global SE', 'casestudies/hdiglobal', 1);
+  }
 }
 
 export default CaseStudiesPage;