test: add e2e tests for pages under tools dropdown

cypress/docspage.cy.js

@@ -12,7 +12,7 @@ beforeEach(() => {
 });
 
 describe('Docs Page Tests', () => {
-  it('User navigates SideBar containing various sections', () => {
+  it('verifying navigation to SideBar containing various sections', () => {
     docsPage.goToConceptsSection();
 
     cy.get('@subsections').then((subsections) => {
@@ -29,7 +29,7 @@ describe('Docs Page Tests', () => {
     docsPage.goToMigrationsSection();
     docsPage.goToCommunitySection();
 
-    it('User verifies Card Links present on the Docs Page', () => {
+    it('verifying Card Links present on the Docs Page', () => {
       const cards = [
         { href: '/docs/concepts' },
         { href: '/docs/tutorials' },

cypress/fixtures/toolsPages.json

@@ -0,0 +1,37 @@
+{
+    "generator": {
+        "path": "/tools/generator",
+        "heading": "Docs, Code, Anything!",
+        "image": "generator diagram",
+        "github": "https://www.github.com/asyncapi/generator",
+        "docs": "/docs/tools/generator"
+    },
+    "cli": {
+        "path": "/tools/cli",
+        "heading": "Interact with AsyncAPI from the comfort of your CLI",
+        "install": "npm install -g @asyncapi/cli",
+        "github": "https://www.github.com/asyncapi/cli",
+        "docs": "/docs/tools/cli"
+    },
+    "parsers": {
+        "path": "/tools/parsers",
+        "heading": "Build your own tools",
+        "install": "npm install @asyncapi/parser",
+        "github": "https://www.github.com/asyncapi/parser-js"
+    },
+    "githubActions": {
+        "path": "/tools/github-actions",
+        "heading": "Automate using GitHub Actions",
+        "github": "https://www.github.com/asyncapi/github-action-for-generator"
+    },
+    "modelina": {
+        "path": "/tools/modelina",
+        "heading": "Modelina",
+        "install": "npm install @asyncapi/modelina",
+        "tryIt": {
+            "text": "Try it now",
+            "href": "https://modelina.org/playground"
+        },
+        "github": "https://www.github.com/asyncapi/modelina"
+    }
+}

cypress/header.cy.js

@@ -8,15 +8,15 @@ describe('Header Links Validation', () => {
     header.visit(); 
   });
 
-  it('User hovers over Docs dropdown and sees the dropdown', () => {
+  it('Verifying if user hovers over Docs dropdown and sees the dropdown', () => {
     header.verifyDocsDropdown();
   });
 
-  it('User hovers over Tools dropdown and sees the dropdown', () => {
+  it('Verifying if user hovers over Tools dropdown and sees the dropdown', () => {
     header.verifyToolsDropdown();
   });
 
-  it('User hovers over Community dropdown and sees the dropdown', () => {
+  it('Verifying if user hovers over Community dropdown and sees the dropdown', () => {
     header.verifyCommunityDropdown();
   });
 });

cypress/pages/BaseFooterPage.js

@@ -6,8 +6,8 @@ class BasePage {
   verifyLink(href, text, attr = 'href') {
     const chain = cy
       .get(`a[${attr}="${href}"]`)
-      .should('be.visible')
-      .and('have.attr', attr, href);
+      //.should('be.visible')
+      .should('have.attr', attr, href);
     return text ? chain.and('contain', text) : chain;
   }
 }

cypress/pages/BaseHeaderPage.js

@@ -1,8 +1,7 @@
 
 class BasePage {
-  visit(path = '/') {
-    cy.visit(path)
-    return this;
+  visit() {
+    cy.visit('/')
   }
 
   getElement(selector) {
@@ -11,8 +10,8 @@ class BasePage {
 
   hoverElement(selector) {
     return this.getElement(selector)
-    .trigger('mouseover')
-    .trigger('mouseenter');
+      .trigger('mouseover')
+      .trigger('mouseenter');
   }
 }
 

cypress/pages/BasePage.js

@@ -0,0 +1,55 @@
+class BasePage {
+  visit(url = '/') {
+    cy.visit(url);
+  }
+
+  getElement(selector) {
+    return cy.get(selector);
+  }
+
+  hoverElement(selector) {
+    return this.getElement(selector)
+      .trigger('mouseover')
+      .trigger('mouseenter');
+  }
+
+  verifyElementIsVisible(selector) {
+    return this.getElement(selector).should('be.visible');
+  }
+
+  verifyElementHasAttribute(selector, attribute, value) {
+    return this.getElement(selector).should('have.attr', attribute, value);
+  }
+
+  verifyHeadingExists(headingText) {
+    return cy.contains('h1, h2, h3, h4, h5, h6', headingText).should('be.visible');
+  }
+
+  verifyLink(href, text, { findByText = false } = {}) {
+    if (findByText && text) {
+      const chain = cy.contains('a', text).should('be.visible');
+      return href ? chain.and('have.attr', 'href', href) : chain;
+    }
+    const chain = cy.get(`a[href="${href}"]`).should('be.visible').and('have.attr', 'href', href);
+    return text ? chain.and('contain', text) : chain;
+  }
+
+  verifyButtonLink(href, buttonText) {
+    return this.verifyLink(href, buttonText, { findByText: true });
+  }
+
+  verifyElementContainsText(selector, text) {
+    return cy.contains(selector, text).should('exist');
+  }
+
+  verifyImageVisible(altText) {
+    return cy.get(`img[alt="${altText}"]`)
+      .should('be.visible')
+      .and('have.attr', 'src')
+      .should('not.be.empty');
+  }
+
+
+}
+
+export default BasePage;

cypress/pages/BasePageTools.js

@@ -1,14 +1,14 @@
 class BasePage {
-  visit(path) {
-    cy.visit(path);
+  visit() {
+    cy.visit('/');
   }
 
   getHeaderText(selector, expectedText) {
     cy.get(selector).should('contain.text', expectedText);
   }
 
   getLink(href, text) {
-   return cy.contains(`a[href="${href}"]`, text)
+    return cy.contains(`a[href="${href}"]`, text)
       .should('be.visible')
       .and('have.attr', 'href', href);
   }

cypress/pages/BlogPage.js

@@ -1,6 +1,9 @@
-class BlogPage {
+import BasePage from './BasePage';
+
+class BlogPage extends BasePage {
   verifyPageLoaded() {
-    cy.contains('h1', 'Welcome to our blog!').should('be.visible');
+    this.verifyHeadingExists('Welcome to our blog!');
   }
 }
+
 export default BlogPage;

cypress/pages/CaseStudiesPage.js

@@ -1,6 +1,9 @@
-class CaseStudiesPage {
+import BasePage from './BasePage';
+
+class CaseStudiesPage extends BasePage {
   verifyPageLoaded() {
-    cy.contains('h1', 'Case Studies').should('be.visible');
+    this.verifyHeadingExists('Case Studies');
   }
 }
+
 export default CaseStudiesPage;

cypress/pages/CommunityPage.js

@@ -1,7 +1,9 @@
-class CommunityPage {
+import BasePage from './BasePage';
+
+class CommunityPage extends BasePage {
   verifyPageLoaded() {
-    cy.contains('h1','Home of #CommunityOps')
-    .should('be.visible');
+    this.verifyHeadingExists('Home of #CommunityOps');
   }
 }
+
 export default CommunityPage;

cypress/pages/Footer.js

@@ -1,14 +1,14 @@
 import BasePage from './BaseFooterPage';
 
 class Footer extends BasePage {
-  
+
   constructor() {
     super();
-    this.footerSelector = 'footer'; 
+    this.footerSelector = 'footer';
   }
 
   verifyFooterLink(href, text, attr = 'href') {
-    cy.get(this.footerSelector).within(() => {
+    cy.get(this.footerSelector).filter(':visible').first().within(() => {
       this.verifyLink(href, text, attr);
     });
   }

cypress/pages/RoadmapPage.js

@@ -1,6 +1,9 @@
-class RoadmapPage {
+import BasePage from './BasePage';
+
+class RoadmapPage extends BasePage {
   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.');
   }
 }
+
 export default RoadmapPage;

cypress/pages/ToolsPage.js

@@ -1,12 +1,12 @@
-import BasePage from './BasePageTools';
+import BasePage from './BasePage';
 
 class ToolsPage extends BasePage {
   visitToolsPage() {
     super.visit('/tools');
   }
 
   verifyPageLoaded() {
-    cy.contains('h1', 'Tools').should('be.visible');
+    this.verifyHeadingExists('Tools');
   }
 
   verifyHeader() {
@@ -24,21 +24,8 @@ class ToolsPage extends BasePage {
       .parents('.rounded-lg.border.shadow-md')
       .first()
       .within(() => {
-        cy.get('h2').should('contain', heading);
+        this.verifyHeadingExists(heading);
       });
   }
-
-  verifyWebsiteLinks(href, heading) {
-    this.verifyToolLink(href, heading, 'website');
-  }
-
-  verifyGithubLinks(href, heading) {
-    this.verifyToolLink(href, heading, 'github');
-  }
-
-  verifyDocsLinks(href, heading) {
-    this.verifyToolLink(href, heading, 'docs');
-  }
 }
-
 export default ToolsPage;

cypress/pages/basepagedocs.js

@@ -1,6 +1,6 @@
 class BasePage {
-  visit(path = '/') {
-    cy.visit(path);
+  visit() {
+    cy.visit('/');
   }
 
   verifyLinkByHref(href) {
@@ -11,9 +11,9 @@ class BasePage {
         const wrap = cy.wrap($a);
         return $a.prop('target') === '_self'
           ? wrap.invoke('removeAttr', 'target').click()
-         : wrap.click();
-    });
- }
+          : wrap.click();
+      });
+  }
 
   verifyLinkByLabel(href, label) {
     cy.get(`a[href="${href}"]`).contains(label).click();

cypress/pages/homepage.js

@@ -1,3 +1,4 @@
+import BasePage from './BasePage';
 import CaseStudiesPage from './CaseStudiesPage';
 import DocsPage from './DocsPage';
 import RoadmapPage from './RoadmapPage';
@@ -34,30 +35,9 @@ const homepageLinks = features.flatMap((feature) =>
   })),
 );
 
-class HomePage {
+class HomePage extends BasePage {
   visit() {
-    cy.visit('/');
-  }
-
-  verifyElementIsVisible(selector) {
-    cy.get(selector).should('be.visible');
-  }
-
-  verifyElementHasAttribute(selector, attribute, value) {
-    cy.get(selector).should('have.attr', attribute, value);
-  }
-
-  verifyHeadingExists(headingText) {
-    cy.contains('h1, h2, h3, h4, h5, h6', headingText).should('be.visible');
-  }
-
-  verifyLinkExists(linkName, linkUrl) {
-    cy.get('a')
-      .contains(linkName, { matchCase: false })
-      .should('exist')
-      .then(($el) => {
-        cy.wrap($el).invoke('attr', 'href').should('include', linkUrl);
-      });
+    return super.visit('/');
   }
 
   verifyCardTitles(customTitles, testId = null) {
@@ -71,21 +51,20 @@ class HomePage {
   }
 
   verifyNavbarLogo() {
-    this.verifyElementIsVisible('[data-testid="Navbar-logo"]');
+    return this.verifyElementIsVisible('[data-testid="Navbar-logo"]');
   }
 
   verifyHeader(text = headerText) {
-    this.verifyHeadingExists(text);
+    return this.verifyHeadingExists(text);
   }
 
   verifyGithubStarButton(link = githubStarLink) {
     const selector = '[data-testid="Navbar-main"] [data-testid="Button-link"]';
-    this.verifyElementIsVisible(selector);
-    this.verifyElementHasAttribute(selector, 'href', link);
+    return this.verifyElementIsVisible(selector).and('have.attr', 'href', link);
   }
 
   verifyReadTheDocsButton(link = readDocsLink) {
-    cy.get(`[data-testid="Button-link"][href="${link}"]`).should('be.visible');
+    return cy.get(`[data-testid="Button-link"][href="${link}"]`).should('be.visible');
   }
 
   verifyHomepageCards(

cypress/pages/toolsGenerator.js

@@ -0,0 +1,12 @@
+import BasePage from './BasePage';
+import toolsData from '../fixtures/toolsPages.json';
+
+class ToolsGenerator extends BasePage {
+
+  verifyGeneratorWorkflowDiagram() {
+    return this.verifyImageVisible(toolsData.generator.image);
+  }
+
+}
+
+export default ToolsGenerator;