test: add e2e tests for roadmap and case studies page

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.verifyLink();
+  });
+
+  it('User verifies Outcome tooltip', () => {
+    roadmapPage.verifyTooltip(0);
+  });
+
+  it('User verifies Solution tooltip', () => {
+    roadmapPage.verifyTooltip(1);
+  });
+
+  it('User verifies Implementation tooltip', () => {
+    roadmapPage.verifyTooltip(2);
+  });
+});

cypress/casestudies.cy.js

@@ -0,0 +1,48 @@
+import CaseStudiesPage from './pages/CaseStudiesPage';
+
+let casestudiespage;
+
+beforeEach(() => {
+  casestudiespage = new CaseStudiesPage();
+  casestudiespage.visit();
+});
+
+describe('Critical User Flows in CaseStudies Page', () => {
+it('User navigates to the Case Studies Page and verifies the header', () => {
+  casestudiespage.verifyHeader();
+});
+
+it('User verifies FAQ link is visible and contains correct URL', () => {
+  casestudiespage.verifyFaqLink();
+});
+
+it('User verifies Cards link is visible and contains correct URL', () => {
+  casestudiespage.verifyCardsLink();
+});
+
+  it('User verifies Submit a Pull Request Link is visible and contains correct URL', () => {
+    casestudiespage.verifySubmitPullRequestLink();
+  });
+});
+
+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', () => {
+    links.forEach(({ href, label }) => {
+      casestudiespage.verifyLinksWork(href, label);
+    });
+  });
+});

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/pages/BlogPage.js

@@ -2,5 +2,9 @@ class BlogPage {
   verifyPageLoaded() {
     cy.contains('h1', 'Welcome to our blog!').should('be.visible');
   }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
 }
 export default BlogPage;

cypress/pages/CaseStudiesPage.js

@@ -1,6 +1,72 @@
 class CaseStudiesPage {
+  visit() {
+    cy.visit('/casestudies');
+  }
+
+  verifyElementIsVisible(selector) {
+    cy.get(selector).should('be.visible');
+  }
+
+  verifyHeadingExists(headingText) {
+    cy.contains('h1', headingText).should('be.visible');
+  }
+
+  verifyElementHasAttribute(selector, attribute, value) {
+    cy.get(selector).should('have.attr', attribute, value);
+  }
+
+  verifyScrollDown() {
+    cy.contains('h1', 'Adopters').scrollIntoView().should('be.visible');
+  }
+
+  verifyLinkExists(linkName, linkUrl, index = 0) {
+    cy.get('[data-testid="CaseStudyCard-main"]')
+      .eq(index)
+      .within(() => {
+        cy.get(`img[alt*="${linkName.split(' ')[0]}"]`).should('exist');
+      })
+      .closest('a')
+      .should('have.attr', 'href', `${linkUrl}`);
+  }
+
+  verifyLinksWork(href, label) {
+    cy.get(`a[href="${href}"]`)
+      .first()
+      .should('exist')
+      .should('have.attr', 'href', href);
+  }
+
+  verifyFaqLink() {
+    cy.contains('a', 'FAQ')
+      .should('be.visible')
+      .should(
+        'have.attr',
+        'href',
+        'https://github.com/asyncapi/website/blob/master/README.md#case-studies',
+      );
+  }
+
+  verifySubmitPullRequestLink() {
+    cy.contains('a', 'submit a pull request')
+      .should('be.visible')
+      .should(
+        'have.attr',
+        'href',
+        'https://github.com/asyncapi/website/blob/master/config/usecases.yaml',
+      );
+  }
+
+  verifyCardsLink() {
+    this.verifyLinkExists('Adeo Group', 'casestudies/adeogroup', 0);
+    this.verifyLinkExists('HDI Global SE', 'casestudies/hdiglobal', 1);
+  }
+
   verifyPageLoaded() {
     cy.contains('h1', 'Case Studies').should('be.visible');
   }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
 }
 export default CaseStudiesPage;

cypress/pages/CommunityPage.js

@@ -1,7 +1,10 @@
 class CommunityPage {
   verifyPageLoaded() {
-    cy.contains('h1','Home of #CommunityOps')
-    .should('be.visible');
+    cy.contains('h1', 'Home of #CommunityOps').should('be.visible');
+  }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
   }
 }
-export default CommunityPage;
+export default CommunityPage;

cypress/pages/DocsPage.js

@@ -28,24 +28,31 @@ class DocsPage extends BasePage {
   goToConceptsSection() {
     this.navigateToSection('Concepts', '/docs/concepts');
   }
+
   goToTutorialsSection() {
     this.navigateToSection('Tutorials', '/docs/tutorials');
   }
+
   goToToolsSection() {
     this.navigateToSection('Tools', '/docs/tools');
   }
+
   goToGuidesSection() {
     this.navigateToSection('Guides', '/docs/guides');
   }
+
   goToReferenceSection() {
     this.navigateToSection('Reference', '/docs/reference');
   }
+
   goToMigrationsSection() {
     this.navigateToSection('Migration', '/docs/migration');
   }
+
   goToCommunitySection() {
     this.navigateToSection('Community', '/docs/community');
   }
+
   verifyConceptSubsection({ href, label }) {
     this.verifyLinkByLabel(href, label);
   }

cypress/pages/RoadmapPage.js

@@ -1,6 +1,31 @@
 class RoadmapPage {
+  visit() {
+    cy.visit('/roadmap');
+  }
+
   verifyPageLoaded() {
-    cy.contains('h1', 'AsyncAPI becomes the #1 API specification for defining and developing APIs.').should('be.visible');
+    cy.contains(
+      'h1',
+      'AsyncAPI becomes the #1 API specification for defining and developing APIs.',
+    ).should('be.visible');
+  }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
+
+  verifyLink() {
+    cy.get('[data-testid="TextLink-href"]').should(
+      'have.attr',
+      'href',
+      'https://github.com/asyncapi/community',
+    );
+  }
+
+  verifyTooltip(index) {
+    cy.get('[data-testid="InlineHelp-icon"]').eq(index).trigger('mouseover');
+    cy.get('[data-testid="InlineHelp"]').should('be.visible');
   }
 }
+
 export default RoadmapPage;

cypress/pages/homepage.js

@@ -74,8 +74,12 @@ class HomePage {
     this.verifyElementIsVisible('[data-testid="Navbar-logo"]');
   }
 
-  verifyHeader(text = headerText) {
-    this.verifyHeadingExists(text);
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
+
+  verifyPageLoaded() {
+    this.verifyHeadingExists(headerText);
   }
 
   verifyGithubStarButton(link = githubStarLink) {