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

@@ -0,0 +1,36 @@
+class BasePage {
+  visit(path = '/') {
+    cy.visit(path);
+    return this;
+  }
+
+  verifyHeadingExists(headingText, tag = 'h1') {
+    cy.get(tag).should('contain.text', headingText);
+  }
+
+  verifyElementIsVisible(selector) {
+    cy.get(selector).should('be.visible');
+  }
+
+  verifyElementHasAttribute(selector, attribute, value) {
+    cy.get(selector).should('have.attr', attribute, value);
+  }
+
+  scrollToText(text) {
+    cy.contains(text).scrollIntoView();
+  }
+
+  verifyButtonLink(href, text) {
+    cy.contains('a', text)
+      .should('have.attr', 'href', href)
+      .should('be.visible');
+  }
+
+  verifyLink(href, text) {
+    cy.get(`a[href="${href}"]`)
+      .should('be.visible')
+      .and('contain.text', text);
+  }
+}
+
+export default BasePage;

cypress/pages/CaseStudiesPage.js

@@ -1,6 +1,57 @@
-class CaseStudiesPage {
+import BasePage from './BasePage';
+
+class CaseStudiesPage extends BasePage {
+  visit() {
+    super.visit('/casestudies');
+  }
+
   verifyPageLoaded() {
-    cy.contains('h1', 'Case Studies').should('be.visible');
+    this.verifyHeadingExists('Case Studies', 'h1');
+  }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
+
+  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;

cypress/pages/RoadmapPage.js

@@ -1,6 +1,33 @@
-class RoadmapPage {
+import BasePage from './BasePage';
+
+class RoadmapPage extends BasePage {
+  visit() {
+    super.visit('/roadmap');
+  }
+
   verifyPageLoaded() {
-    cy.contains('h1', 'AsyncAPI becomes the #1 API specification for defining and developing APIs.').should('be.visible');
+    this.verifyHeadingExists(
+      'AsyncAPI becomes the #1 API specification for defining and developing APIs.',
+      'h1'
+    );
+  }
+
+  verifyHeader() {
+    this.verifyPageLoaded();
+  }
+
+  verifyCommunityLink() {
+    this.verifyElementHasAttribute(
+      '[data-testid="TextLink-href"]',
+      '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) {

cypress/support/helpers.js

@@ -0,0 +1,5 @@
+export function verifyLinks(linksArray, verifyFn, urlKey = 'url', labelKey = 'label') {
+  linksArray.forEach((link) => {
+    verifyFn(link[urlKey], link[labelKey]);
+  });
+}