feat: adding unit tests for button component (#1818)

asyncapi · Jul 12, 2023 · 3360e15 · 3360e15
1 parent b44aa95
commit 3360e15
Show file tree

Hide file tree

Showing 18 changed files with 376 additions and 10 deletions.
diff --git a/components/buttons/Button.js b/components/buttons/Button.js
@@ -19,16 +19,16 @@ export default function Button({
 
   if (!href) {
     return (
-      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-main" > 
         {
           icon && iconPosition === 'left' && (
-            <span className="inline-block mr-2">{icon}</span>
+            <span className="inline-block mr-2" data-testid="Button-icon-left">{icon}</span>
           )
         }
         <span className="inline-block">{text}</span>
         {
           icon && iconPosition === 'right' && (
-            <span className="inline-block ml-2">{icon}</span>
+            <span className="inline-block ml-2" data-testid="Button-icon-right">{icon}</span>
           )
         }
       </button>
@@ -37,7 +37,7 @@ export default function Button({
 
   return (
     <Link href={href} passHref>
-      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-link">
         {
           icon && iconPosition === 'left' && (
             <span className="inline-block mr-2">{icon}</span>

diff --git a/components/buttons/ChapterSuggestion.js b/components/buttons/ChapterSuggestion.js
@@ -16,6 +16,7 @@ export default function ChapterSuggestion({
         rel="noopener noreferrer"
         title={description}
         className={`${className} flex flex-col mt-4 p-6 max-w-lg rounded shadow-md border border-gray-200 text-gray-900 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300`}
+       data-testid="ChapterSuggestion-link"
       >
         <h5 className="text-lg font-medium font-sans antialiased mb-2">{title}</h5>
         <p className="flex-1 mb-2 font-normal text-gray-600 font-sans antialiased">{description}</p>

diff --git a/components/buttons/DocsButton.js b/components/buttons/DocsButton.js
@@ -7,7 +7,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.prevPage && <Link href={post.prevPage.href} passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-left cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Prevdiv">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-6 w-6 inline mr-1"
@@ -26,7 +26,7 @@ export default function DocsButton({ post, className='' }) {
                   Go Back
                 </div>
               </div>
-              <div className="font-medium text-base my-2">{post.prevPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-PrevPage" >{post.prevPage.title}</div>
             </div>
             </a>
           </Link>
@@ -36,7 +36,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.nextPage && <Link href={post.nextPage.href} className='h-auto' passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-right cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Nextdiv">
                 <div className="font-bold my-auto text-sm inline uppercase">
                   Up Next
                 </div>
@@ -55,7 +55,7 @@ export default function DocsButton({ post, className='' }) {
                   />
                 </svg>
               </div>
-              <div className="font-medium text-base my-2">{post.nextPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-NextPage">{post.nextPage.title}</div>
             </div>
             </a>
           </Link>

diff --git a/components/buttons/GitHubIssue.js b/components/buttons/GitHubIssue.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function GitHubIssue({className=''}) {
     return (
-        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
+        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer' data-testid="GithubIssue-Link">
             <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />
             Create Issue on GitHub
         </a>

diff --git a/components/buttons/ICSFileButton.js b/components/buttons/ICSFileButton.js
@@ -1,7 +1,7 @@
 import Button from './Button';
 import IconCalendar from '../icons/Calendar';
 
-export default function GoogleCalendarButton({
+export default function ICSFButton({
   text = 'Download ICS File',
   href,
   target = '_blank',

diff --git a/cypress/test/buttons/ApplyJob.cy.js b/cypress/test/buttons/ApplyJob.cy.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import ApplyJobButton from '../../../components/buttons/ApplyJob';
+
+describe('ApplyJobButton', () => {
+  const job = {
+    contact: 'https://www.asyncapi.com/',
+  };
+
+  beforeEach(() => {
+    mount(<ApplyJobButton job={job} />);
+  });
+
+  it('renders the ApplyJobButton component', () => {
+    cy.contains('Apply for this job').should('exist');
+  });
+
+  it('sets the correct href and target attributes', () => {
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://www.asyncapi.com/');
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+  });
+});
diff --git a/cypress/test/buttons/Buttons.cy.js b/cypress/test/buttons/Buttons.cy.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Button from '../../../components/buttons/Button';
+import IconGithub from '../../../components/icons/Github'
+describe('Button component', () => {
+  it('renders a button without href', () => {
+    const text = 'Click me';
+    const type = 'button';
+    const icon = <IconGithub />;
+    mount(
+      <Button text={text} type={type} icon={icon} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.text', text);
+    cy.get('[data-testid="Button-main"]').should('have.attr', 'type', type);
+    cy.get('[data-testid="Button-link"]').should('not.exist');
+  });
+
+  it('renders a button with href', () => {
+    const text = 'Click me';
+    const href = '/link';
+    const target = '_blank';
+    mount(
+      <Button text={text} href={href} target={target} />
+    );
+    cy.get('[data-testid="Button-link"]').should('have.text', text);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', href);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', target);
+    cy.get('[data-testid="Button-main"]').should('not.exist');
+  });
+
+  it('renders a small button', () => {
+    const text = 'Click me';
+    const buttonSize = 'small';
+    mount(
+      <Button text={text} buttonSize={buttonSize} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.class', 'px-3 py-2 text-sm');
+  });
+  it('renders a button with custom class', () => {
+    const text = 'Click me';
+    const className = 'custom-button';
+
+    mount(
+      <Button text={text} className={className} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.class', className);
+  });
+
+  it('does not render an icon with position left in the button', () => {
+    const text = 'Click me';
+    mount(
+      <Button text={text} />
+    );
+    cy.get('[data-testid="Button-icon-left"]').should('not.exist');
+  });
+
+  it('does not render an icon with position left in the button', () => {
+    const text = 'Click me';
+    mount(
+      <Button text={text} />
+    );
+    cy.get('[data-testid="Button-icon-right"]').should('not.exist');
+  });
+});
diff --git a/cypress/test/buttons/ChapterSuggestion.cy.js b/cypress/test/buttons/ChapterSuggestion.cy.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import ChapterSuggestion from '../../../components/buttons/ChapterSuggestion';
+describe('ChapterSuggestion', () => {
+  const chapter = {
+    href: 'https://www.asyncapi.com/',
+    target: '_self', 
+    title: 'Chapter Title',
+    description: 'Chapter Description',
+    linkText: 'Read More',
+    className: 'custom-class',
+  };
+  beforeEach(() => {
+    mount(<ChapterSuggestion {...chapter} />);
+  });
+
+  it('renders the ChapterSuggestion component', () => {
+    cy.contains(chapter.title).should('exist');
+    cy.contains(chapter.description).should('exist');
+    cy.contains(chapter.linkText).should('exist');
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'href', chapter.href);
+  });
+
+  it('applies the correct className', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.class', chapter.className);
+  });
+
+  it('sets the target attribute', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'target', chapter.target);
+  });
+
+  it('sets the title attribute', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'title', chapter.description);
+  });
+
+  it('renders the link text and IconArrowRight', () => {
+    cy.contains(chapter.linkText).should('exist');
+    cy.get('svg').should('have.class', 'h-4');
+  });
+});
diff --git a/cypress/test/buttons/DocsButton.cy.js b/cypress/test/buttons/DocsButton.cy.js
@@ -0,0 +1,32 @@
+import {mount} from 'cypress/react';
+import DocsButton from '../../../components/buttons/DocsButton';
+describe('DocsButton', () => {
+
+    it('does not render buttons without post data', () => {
+        mount(<DocsButton />);
+        cy.get('[data-testid="DocsButton-div"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-PrevPage"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-div"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-NextPage"]').should('not.exist');
+      });
+
+    it('renders correctly with post data', () => {
+        // mock post object with dummy data
+        const post = {
+          prevPage: {
+            href: 'https://www.asyncapi.com/',
+            title: 'Previous Page',
+          },
+          nextPage: {
+            href: 'https://www.asyncapi.com/',
+            title: 'Next Page',
+          },
+        };
+        mount(<DocsButton post={post} />);
+        cy.get('[data-testid="DocsButton-Prevdiv"]').should('contain', 'Go Back');
+        cy.get('[data-testid="DocsButton-PrevPage"]').should('contain', 'Previous Page');
+        cy.get('[data-testid="DocsButton-Nextdiv"]').should('contain', 'Up Next');
+        cy.get('[data-testid="DocsButton-NextPage"]').should('contain', 'Next Page');
+      });
+  });
+
diff --git a/cypress/test/buttons/GithubButton.cy.js b/cypress/test/buttons/GithubButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import GithubButton from '../../../components/buttons/GithubButton'
+describe('GithubButton', () => {
+    it('renders correctly with default props', () => {
+      mount(<GithubButton />);
+      cy.contains('View on Github').should('be.visible');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'href', 'https://github.com/asyncapi');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+});
+
+    it('renders correctly with custom props', () => {
+      mount(
+        <GithubButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+          inNav="true"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+    });
+  });
+
diff --git a/cypress/test/buttons/GithubIssue.cy.js b/cypress/test/buttons/GithubIssue.cy.js
@@ -0,0 +1,19 @@
+import {mount} from 'cypress/react'
+import GitHubIssue from '../../../components/buttons/GitHubIssue';
+describe('GitHubIssue', () => {
+    it('renders correctly with default props', () => {
+      mount(<GitHubIssue />);
+      cy.contains('Create Issue on GitHub').should('be.visible');
+      cy.get('[data-testid="GithubIssue-Link"]')
+        .should('have.attr', 'href', 'https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+')
+        .should('have.attr', 'target', '_blank')
+        .should('have.attr', 'rel', 'noopener noreferrer');
+    });
+
+    it('renders correctly with custom class', () => {
+      mount(<GitHubIssue className="custom-class" />);
+      //data-testid was not working here
+      cy.get('.bg-black').should('have.class', 'custom-class');
+    });
+  });
+
diff --git a/cypress/test/buttons/GoogleCalendarButton.cy.js b/cypress/test/buttons/GoogleCalendarButton.cy.js
@@ -0,0 +1,24 @@
+import {mount} from 'cypress/react'
+import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButton'
+describe('GoogleCalendarButton', () => {
+    it('renders correctly with default props', () => {
+      mount(<GoogleCalendarButton />);
+      cy.contains('Add to Google Calendar').should('be.visible');
+    });
+
+    it('renders correctly with custom props', () => {
+      mount(
+        <GoogleCalendarButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com').and('have.attr', 'target', '_self');
+    });
+  });
+
+
diff --git a/cypress/test/buttons/ICSFileButton.cy.js b/cypress/test/buttons/ICSFileButton.cy.js
@@ -0,0 +1,26 @@
+import { mount } from 'cypress/react';
+import ICSFButton from '../../../components/buttons/ICSFileButton';
+
+describe('ICSFButton', () => {
+
+  it('renders correctly with custom props', () => {
+    const customHref = 'https://example.com';
+
+    mount(
+      < ICSFButton
+        text="Custom Text"
+        href={customHref}
+        target="_self"
+        iconPosition="right"
+      />
+    );
+    cy.contains('Custom Text').should('be.visible');
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', customHref);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+  });
+
+  it('renders correctly with default props', () => {
+    mount(<ICSFButton />);
+    cy.contains('Download ICS File').should('be.visible');
+  });
+});
diff --git a/cypress/test/buttons/OpenInPlaygroundButton.cy.js b/cypress/test/buttons/OpenInPlaygroundButton.cy.js
@@ -0,0 +1,9 @@
+import { mount } from 'cypress/react';
+import OpenInPlaygroundButton from "../../../components/buttons/OpenInPlaygroundButton"
+
+describe('OpenInPlaygroundButton', () => {
+it('renders correctly with default props', () => {
+        mount(<OpenInPlaygroundButton />);
+        cy.contains('Open Playground').should('be.visible');
+    });
+});
diff --git a/cypress/test/buttons/OpenInStudioButton.cy.js b/cypress/test/buttons/OpenInStudioButton.cy.js
@@ -0,0 +1,21 @@
+import { mount } from 'cypress/react';
+import OpenInStudioButton from '../../../components/buttons/OpenInStudioButton';
+
+describe('OpenInStudioButton', () => {
+
+    it('renders correctly with custom props', () => {
+        mount(
+            < OpenInStudioButton
+                text="Custom Text"
+                target="_self"
+                iconPosition="right"
+            />
+        );
+        cy.contains('Custom Text').should('be.visible');
+    });
+
+    it('renders correctly with default props', () => {
+        mount(<OpenInStudioButton />);
+        cy.contains('Open in Studio').should('be.visible');
+    });
+});