From 8b075a5a14e4b0e8ca39e7719a7d99c202f8e571 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Thu, 22 Jun 2023 01:40:46 +0530
Subject: [PATCH 1/9] add unit tests for button component

---
 components/buttons/Button.js                  |  4 +-
 components/buttons/ChapterSuggestion.js       |  1 +
 components/buttons/DocsButton.js              |  8 ++--
 components/buttons/GitHubIssue.js             |  2 +-
 cypress/test/buttons/ApplyJob.cy.js           | 23 +++++++++
 cypress/test/buttons/ChapterSuggestion.cy.js  | 40 ++++++++++++++++
 cypress/test/buttons/DocsButton.cy.js         | 32 +++++++++++++
 cypress/test/buttons/GithubButton.cy.js       | 27 +++++++++++
 cypress/test/buttons/GithubIssue.cy.js        | 18 +++++++
 .../test/buttons/GoogleCalendarButton.cy.js   | 24 ++++++++++
 cypress/test/buttons/ICSFileButton.cy.js      | 26 ++++++++++
 cypress/test/buttons/SlackButton.cy.js        | 27 +++++++++++
 cypress/test/buttons/SubscribeButton.cy.js    | 27 +++++++++++
 cypress/test/buttons/YoutubeButton.cy.js      | 27 +++++++++++
 cypress/test/buttons/buttons.cy.js            | 48 +++++++++++++++++++
 15 files changed, 327 insertions(+), 7 deletions(-)
 create mode 100644 cypress/test/buttons/ApplyJob.cy.js
 create mode 100644 cypress/test/buttons/ChapterSuggestion.cy.js
 create mode 100644 cypress/test/buttons/DocsButton.cy.js
 create mode 100644 cypress/test/buttons/GithubButton.cy.js
 create mode 100644 cypress/test/buttons/GithubIssue.cy.js
 create mode 100644 cypress/test/buttons/GoogleCalendarButton.cy.js
 create mode 100644 cypress/test/buttons/ICSFileButton.cy.js
 create mode 100644 cypress/test/buttons/SlackButton.cy.js
 create mode 100644 cypress/test/buttons/SubscribeButton.cy.js
 create mode 100644 cypress/test/buttons/YoutubeButton.cy.js
 create mode 100644 cypress/test/buttons/buttons.cy.js

diff --git a/components/buttons/Button.js b/components/buttons/Button.js
index 3c19313c6cb..bf149a3e3f1 100644
--- a/components/buttons/Button.js
+++ b/components/buttons/Button.js
@@ -19,7 +19,7 @@ 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>
@@ -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
index 137b944c09c..3d28a1f8001 100644
--- 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
index c8b64b4f72c..4f9d5d2af23 100644
--- 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
index c54098d6fb6..30fcdcde47c 100644
--- 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/cypress/test/buttons/ApplyJob.cy.js b/cypress/test/buttons/ApplyJob.cy.js
new file mode 100644
index 00000000000..4bbfb2b3c9a
--- /dev/null
+++ b/cypress/test/buttons/ApplyJob.cy.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import ApplyJobButton from '../../../components/buttons/ApplyJob';
+import Button from '../../../components/buttons/Button';
+
+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/ChapterSuggestion.cy.js b/cypress/test/buttons/ChapterSuggestion.cy.js
new file mode 100644
index 00000000000..8b5c72300a9
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..624c0a97e66
--- /dev/null
+++ 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');
+      });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GithubButton.cy.js b/cypress/test/buttons/GithubButton.cy.js
new file mode 100644
index 00000000000..84ed488cf6b
--- /dev/null
+++ 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');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GithubIssue.cy.js b/cypress/test/buttons/GithubIssue.cy.js
new file mode 100644
index 00000000000..c4cc18c4990
--- /dev/null
+++ b/cypress/test/buttons/GithubIssue.cy.js
@@ -0,0 +1,18 @@
+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" />);
+      cy.get('.bg-black').should('have.class', 'custom-class');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GoogleCalendarButton.cy.js b/cypress/test/buttons/GoogleCalendarButton.cy.js
new file mode 100644
index 00000000000..01465b4f145
--- /dev/null
+++ 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');
+    });
+  });
+  
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/ICSFileButton.cy.js b/cypress/test/buttons/ICSFileButton.cy.js
new file mode 100644
index 00000000000..e93c4a683b6
--- /dev/null
+++ b/cypress/test/buttons/ICSFileButton.cy.js
@@ -0,0 +1,26 @@
+import { mount } from 'cypress/react';
+import GoogleCalendarButton from '../../../components/buttons/ICSFileButton';
+
+describe('GoogleCalendarButton', () => {
+
+  it('renders correctly with custom props', () => {
+    const customHref = 'https://example.com';
+  
+    mount(
+      <GoogleCalendarButton
+        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(<GoogleCalendarButton />);
+    cy.contains('Download ICS File').should('be.visible');
+  });
+});
diff --git a/cypress/test/buttons/SlackButton.cy.js b/cypress/test/buttons/SlackButton.cy.js
new file mode 100644
index 00000000000..adea0c3a819
--- /dev/null
+++ b/cypress/test/buttons/SlackButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import SlackButton from '../../../components/buttons/SlackButton';
+describe('Slack Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<SlackButton/>);
+      cy.contains('Join on Slack').should('be.visible');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'href', '/slack-invite');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <SlackButton
+          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');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/SubscribeButton.cy.js b/cypress/test/buttons/SubscribeButton.cy.js
new file mode 100644
index 00000000000..3f4693185f9
--- /dev/null
+++ b/cypress/test/buttons/SubscribeButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import SubscribeButton from '../../../components/buttons/SubscribeButton';
+
+describe('Slack Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<SubscribeButton/>);
+      cy.contains('Subscribe').should('be.visible');
+  
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <SubscribeButton
+          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');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/YoutubeButton.cy.js b/cypress/test/buttons/YoutubeButton.cy.js
new file mode 100644
index 00000000000..bddedaa27a1
--- /dev/null
+++ b/cypress/test/buttons/YoutubeButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import YoutubeButton from '../../../components/buttons/YoutubeButton';
+
+describe('Slack Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<YoutubeButton/>);
+      cy.contains('Watch on YouTube').should('be.visible');
+  
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <YoutubeButton
+          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');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/buttons.cy.js b/cypress/test/buttons/buttons.cy.js
new file mode 100644
index 00000000000..89ef1788001
--- /dev/null
+++ b/cypress/test/buttons/buttons.cy.js
@@ -0,0 +1,48 @@
+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);
+  });
+});

From ad8e4138691c9e2c131180c71463d0db31d9229d Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sat, 1 Jul 2023 19:02:41 +0530
Subject: [PATCH 2/9] fixed spacing

---
 cypress/test/buttons/ApplyJob.cy.js            |  4 ++--
 cypress/test/buttons/ChapterSuggestion.cy.js   |  8 ++++----
 cypress/test/buttons/GithubButton.cy.js        |  4 ++--
 cypress/test/buttons/GithubIssue.cy.js         |  3 ++-
 .../test/buttons/GoogleCalendarButton.cy.js    |  2 +-
 cypress/test/buttons/ICSFileButton.cy.js       |  4 ++--
 cypress/test/buttons/SlackButton.cy.js         |  4 ++--
 cypress/test/buttons/SubscribeButton.cy.js     |  4 ++--
 cypress/test/buttons/YoutubeButton.cy.js       |  4 ++--
 cypress/test/buttons/buttons.cy.js             | 18 +++++++++---------
 10 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/cypress/test/buttons/ApplyJob.cy.js b/cypress/test/buttons/ApplyJob.cy.js
index 4bbfb2b3c9a..6a5b10172a0 100644
--- a/cypress/test/buttons/ApplyJob.cy.js
+++ b/cypress/test/buttons/ApplyJob.cy.js
@@ -17,7 +17,7 @@ describe('ApplyJobButton', () => {
   });
 
   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');
+    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/ChapterSuggestion.cy.js b/cypress/test/buttons/ChapterSuggestion.cy.js
index 8b5c72300a9..84eb5eb9a4a 100644
--- a/cypress/test/buttons/ChapterSuggestion.cy.js
+++ b/cypress/test/buttons/ChapterSuggestion.cy.js
@@ -18,19 +18,19 @@ describe('ChapterSuggestion', () => {
     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);
+    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);
+    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);
+    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);
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'title', chapter.description);
   });
 
   it('renders the link text and IconArrowRight', () => {
diff --git a/cypress/test/buttons/GithubButton.cy.js b/cypress/test/buttons/GithubButton.cy.js
index 84ed488cf6b..270d0ec4f99 100644
--- a/cypress/test/buttons/GithubButton.cy.js
+++ b/cypress/test/buttons/GithubButton.cy.js
@@ -20,8 +20,8 @@ describe('GithubButton', () => {
         />
       );
       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');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
     });
   });
   
\ No newline at end of file
diff --git a/cypress/test/buttons/GithubIssue.cy.js b/cypress/test/buttons/GithubIssue.cy.js
index c4cc18c4990..5a9107cf684 100644
--- a/cypress/test/buttons/GithubIssue.cy.js
+++ b/cypress/test/buttons/GithubIssue.cy.js
@@ -4,7 +4,7 @@ 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"]')
+      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');
@@ -12,6 +12,7 @@ describe('GitHubIssue', () => {
   
     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
index 01465b4f145..2803b1f3e64 100644
--- a/cypress/test/buttons/GoogleCalendarButton.cy.js
+++ b/cypress/test/buttons/GoogleCalendarButton.cy.js
@@ -17,7 +17,7 @@ describe('GoogleCalendarButton', () => {
         />
       );
       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');
+      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
index e93c4a683b6..ffb276adc57 100644
--- a/cypress/test/buttons/ICSFileButton.cy.js
+++ b/cypress/test/buttons/ICSFileButton.cy.js
@@ -15,8 +15,8 @@ describe('GoogleCalendarButton', () => {
       />
     );
     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');
+    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', () => {
diff --git a/cypress/test/buttons/SlackButton.cy.js b/cypress/test/buttons/SlackButton.cy.js
index adea0c3a819..7f03469cbbc 100644
--- a/cypress/test/buttons/SlackButton.cy.js
+++ b/cypress/test/buttons/SlackButton.cy.js
@@ -20,8 +20,8 @@ describe('Slack Button', () => {
         />
       );
       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');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
     });
   });
   
\ No newline at end of file
diff --git a/cypress/test/buttons/SubscribeButton.cy.js b/cypress/test/buttons/SubscribeButton.cy.js
index 3f4693185f9..dd2c7d32eb4 100644
--- a/cypress/test/buttons/SubscribeButton.cy.js
+++ b/cypress/test/buttons/SubscribeButton.cy.js
@@ -20,8 +20,8 @@ describe('Slack Button', () => {
         />
       );
       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');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
     });
   });
   
\ No newline at end of file
diff --git a/cypress/test/buttons/YoutubeButton.cy.js b/cypress/test/buttons/YoutubeButton.cy.js
index bddedaa27a1..beb2f2444ea 100644
--- a/cypress/test/buttons/YoutubeButton.cy.js
+++ b/cypress/test/buttons/YoutubeButton.cy.js
@@ -20,8 +20,8 @@ describe('Slack Button', () => {
         />
       );
       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');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
     });
   });
   
\ No newline at end of file
diff --git a/cypress/test/buttons/buttons.cy.js b/cypress/test/buttons/buttons.cy.js
index 89ef1788001..f77ccf16eaa 100644
--- a/cypress/test/buttons/buttons.cy.js
+++ b/cypress/test/buttons/buttons.cy.js
@@ -10,9 +10,9 @@ describe('Button component', () => {
     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');
+    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', () => {
@@ -22,10 +22,10 @@ describe('Button component', () => {
     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');
+    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', () => {
@@ -34,7 +34,7 @@ describe('Button component', () => {
     mount(
       <Button text={text} buttonSize={buttonSize} />
     );
-    cy.get('[ data-testid="Button-main"]').should('have.class', 'px-3 py-2 text-sm');
+    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';
@@ -43,6 +43,6 @@ describe('Button component', () => {
     mount(
       <Button text={text} className={className} />
     );
-    cy.get('[ data-testid="Button-main"]').should('have.class', className);
+    cy.get('[data-testid="Button-main"]').should('have.class', className);
   });
 });

From 08b8325025b2ba3617ab7fb0e70579cf0dc6d42a Mon Sep 17 00:00:00 2001
From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:56:52 +0530
Subject: [PATCH 3/9] Update cypress/test/buttons/ApplyJob.cy.js

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 cypress/test/buttons/ApplyJob.cy.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/test/buttons/ApplyJob.cy.js b/cypress/test/buttons/ApplyJob.cy.js
index 6a5b10172a0..69189e8156f 100644
--- a/cypress/test/buttons/ApplyJob.cy.js
+++ b/cypress/test/buttons/ApplyJob.cy.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { mount } from 'cypress/react';
 import ApplyJobButton from '../../../components/buttons/ApplyJob';
-import Button from '../../../components/buttons/Button';
 
 describe('ApplyJobButton', () => {
   const job = {

From 0167ed20262c6f62a79ba1f4cb2905bdf4f1a21d Mon Sep 17 00:00:00 2001
From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:57:16 +0530
Subject: [PATCH 4/9] Update cypress/test/buttons/SubscribeButton.cy.js

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 cypress/test/buttons/SubscribeButton.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/test/buttons/SubscribeButton.cy.js b/cypress/test/buttons/SubscribeButton.cy.js
index dd2c7d32eb4..55c3b191be4 100644
--- a/cypress/test/buttons/SubscribeButton.cy.js
+++ b/cypress/test/buttons/SubscribeButton.cy.js
@@ -1,7 +1,7 @@
 import {mount} from 'cypress/react';
 import SubscribeButton from '../../../components/buttons/SubscribeButton';
 
-describe('Slack Button', () => {
+describe('Subscribe Button', () => {
     it('renders correctly with default props', () => {
       mount(<SubscribeButton/>);
       cy.contains('Subscribe').should('be.visible');

From 165e6bc84e86def232e9214913ebf48d161c3400 Mon Sep 17 00:00:00 2001
From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:57:27 +0530
Subject: [PATCH 5/9] Update cypress/test/buttons/YoutubeButton.cy.js

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 cypress/test/buttons/YoutubeButton.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/test/buttons/YoutubeButton.cy.js b/cypress/test/buttons/YoutubeButton.cy.js
index beb2f2444ea..ec202ace7f8 100644
--- a/cypress/test/buttons/YoutubeButton.cy.js
+++ b/cypress/test/buttons/YoutubeButton.cy.js
@@ -1,7 +1,7 @@
 import {mount} from 'cypress/react';
 import YoutubeButton from '../../../components/buttons/YoutubeButton';
 
-describe('Slack Button', () => {
+describe('Youtube Button', () => {
     it('renders correctly with default props', () => {
       mount(<YoutubeButton/>);
       cy.contains('Watch on YouTube').should('be.visible');

From 7cb9f8c8b26342500de19681df689d0660490aee Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Wed, 12 Jul 2023 00:15:30 +0530
Subject: [PATCH 6/9] fixed required changes

---
 components/buttons/Button.js             |  4 ++--
 cypress/test/buttons/ICSFileButton.cy.js |  8 ++++----
 cypress/test/buttons/buttons.cy.js       | 16 ++++++++++++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/buttons/Button.js b/components/buttons/Button.js
index bf149a3e3f1..d75e61f8a2f 100644
--- a/components/buttons/Button.js
+++ b/components/buttons/Button.js
@@ -22,13 +22,13 @@ export default function Button({
       <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>
diff --git a/cypress/test/buttons/ICSFileButton.cy.js b/cypress/test/buttons/ICSFileButton.cy.js
index ffb276adc57..13964726699 100644
--- a/cypress/test/buttons/ICSFileButton.cy.js
+++ b/cypress/test/buttons/ICSFileButton.cy.js
@@ -1,13 +1,13 @@
 import { mount } from 'cypress/react';
-import GoogleCalendarButton from '../../../components/buttons/ICSFileButton';
+import ICSFButton from '../../../components/buttons/ICSFileButton';
 
-describe('GoogleCalendarButton', () => {
+describe('ICSFButton', () => {
 
   it('renders correctly with custom props', () => {
     const customHref = 'https://example.com';
   
     mount(
-      <GoogleCalendarButton
+      < ICSFButton
         text="Custom Text"
         href={customHref}
         target="_self"
@@ -20,7 +20,7 @@ describe('GoogleCalendarButton', () => {
   });
 
   it('renders correctly with default props', () => {
-    mount(<GoogleCalendarButton />);
+    mount(<ICSFButton />);
     cy.contains('Download ICS File').should('be.visible');
   });
 });
diff --git a/cypress/test/buttons/buttons.cy.js b/cypress/test/buttons/buttons.cy.js
index f77ccf16eaa..38a30d26bc4 100644
--- a/cypress/test/buttons/buttons.cy.js
+++ b/cypress/test/buttons/buttons.cy.js
@@ -45,4 +45,20 @@ describe('Button component', () => {
     );
     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');
+  });
 });

From c1d566ede272c6020d5c23c988e11a473abb9d0a Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Wed, 12 Jul 2023 00:23:22 +0530
Subject: [PATCH 7/9] fix named import ICFSButton

---
 components/buttons/ICSFileButton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/buttons/ICSFileButton.js b/components/buttons/ICSFileButton.js
index e7e4dbdd126..78ac35cc609 100644
--- 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',

From 5b9ef3d92ea60455cc5320012b77e5567f4219e2 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Wed, 12 Jul 2023 00:23:50 +0530
Subject: [PATCH 8/9] added tests for buttons left

---
 .../test/buttons/OpenInPlaygroundButton.cy.js |  9 ++++++++
 cypress/test/buttons/OpenInStudioButton.cy.js | 21 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 cypress/test/buttons/OpenInPlaygroundButton.cy.js
 create mode 100644 cypress/test/buttons/OpenInStudioButton.cy.js

diff --git a/cypress/test/buttons/OpenInPlaygroundButton.cy.js b/cypress/test/buttons/OpenInPlaygroundButton.cy.js
new file mode 100644
index 00000000000..d7523630290
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..dd276aa6da1
--- /dev/null
+++ 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');
+    });
+});

From da9b8efac5c9aa0fea383f7b6487d82b0927ab10 Mon Sep 17 00:00:00 2001
From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com>
Date: Wed, 12 Jul 2023 00:27:22 +0530
Subject: [PATCH 9/9] Rename buttons.cy.js to Buttons.cy.js

---
 cypress/test/buttons/{buttons.cy.js => Buttons.cy.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename cypress/test/buttons/{buttons.cy.js => Buttons.cy.js} (100%)

diff --git a/cypress/test/buttons/buttons.cy.js b/cypress/test/buttons/Buttons.cy.js
similarity index 100%
rename from cypress/test/buttons/buttons.cy.js
rename to cypress/test/buttons/Buttons.cy.js