{ children }
diff --git a/components/Warning.js b/components/Warning.js
index c7b54e730c2..93b32ccc557 100644
--- a/components/Warning.js
+++ b/components/Warning.js
@@ -2,16 +2,16 @@ import IconExclamation from "./icons/Exclamation";
export default function Warning({ className = '', title, description }) {
return (
-
+
-
+
{title}
-
diff --git a/cypress/test/InlineHelp.cy.js b/cypress/test/InlineHelp.cy.js
new file mode 100644
index 00000000000..2bdbaa85ae2
--- /dev/null
+++ b/cypress/test/InlineHelp.cy.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import InlineHelp from '../../components/InlineHelp';
+
+describe('InlineHelp', () => {
+ it('toggles help text visibility on click and hover', () => {
+ const text = 'Helpful information';
+ mount();
+ cy.get('[data-testid="InlineHelp"]').should('not.exist');
+ // Click on the question mark icon to show text
+ cy.get('[data-testid="InlineHelp-icon"]').click();
+ // Click on the question mark icon again to hide text
+ cy.get('[data-testid="InlineHelp-icon"]').click();
+ // Hover the question mark icon to show text
+ cy.get('[data-testid="InlineHelp-icon"]').trigger('mouseover');
+ // Move the cursor away from the question mark icon to hide text
+ cy.get('[data-testid="InlineHelp-icon"]').trigger('mouseout');
+
+ });
+});
diff --git a/cypress/test/MacWindow.cy.js b/cypress/test/MacWindow.cy.js
new file mode 100644
index 00000000000..d952d4ce8f9
--- /dev/null
+++ b/cypress/test/MacWindow.cy.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import MacWindow from '../../components/MacWindow';
+
+describe('MacWindow Component', () => {
+ it('renders the component props', () => {
+ const className = 'bg-code-editor-dark h-full border-gray-800 border shadow-lg transition-all duration-500 ease-in-out';
+ const contentClassName = "text-left text-white text-sm font-mono font-medium transition-all duration-500 ease-in-out break-words md:min-h-108";
+ const title="asyncapi.yaml";
+ const children = 'This is the children component for testing can be replaced';
+ mount(
+
+ {children}
+
+ );
+ cy.get('[data-testid="MacWindow-main"]')
+ .should('have.class', className)
+ .within(() => {
+ cy.get('[data-testid="MacWindow-div"]').should('exist');
+
+ cy.get('[data-testid="MacWindow-div"]').within(() => {
+ cy.get('div').should('have.length', 3);
+ });
+ cy.get('[data-testid="MacWindow-title-div"]')
+ .should('exist')
+ .and('have.attr', 'title', title)
+ .and('have.text', title);
+ cy.get('[data-testid="MacWindow-title-center"]').should('exist').and('have.length', 1);
+ });
+ });
+});
diff --git a/cypress/test/NewsletterSubscribe.cy.js b/cypress/test/NewsletterSubscribe.cy.js
new file mode 100644
index 00000000000..4afeb407c91
--- /dev/null
+++ b/cypress/test/NewsletterSubscribe.cy.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import NewsletterSubscribe from '../../components/NewsletterSubscribe';
+
+describe('NewsletterSubscribe Component', () => {
+ it('renders the component with default props', () => {
+ mount();
+
+ cy.get('[data-testid="NewsletterSubscribe-main"]').should('exist');
+ cy.get('[data-testid="NewsletterSubscribe-text-input"]').type("name");
+ cy.get('[data-testid="NewsletterSubscribe-email-input"]').type("test@gmail.com")
+ cy.get('form[name="form 1"]').should('exist');
+ cy.get('input[name="type"]').should('exist');
+ cy.get('input[name="name"]').should('exist');
+ cy.get('input[name="email"]').should('exist');
+
+ });
+});
diff --git a/cypress/test/Profile.cy.js b/cypress/test/Profile.cy.js
new file mode 100644
index 00000000000..29d695202c3
--- /dev/null
+++ b/cypress/test/Profile.cy.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Profile from '../../components/Profile';
+describe('Profile Component', () => {
+ it('renders null when profiles array is empty', () => {
+ const props = {
+ profiles: [],
+ className: 'my-profiles',
+ };
+ mount();
+ cy.get('[data-testid="Profiles-div"]').should('not.exist');
+ });
+
+ it('renders profile links and names when profiles array is not empty', () => {
+ const profiles = [
+ {
+ name: 'Alejandra Quetzalli',
+ avatar: 'https://avatars.githubusercontent.com/alequetzalli',
+ link: 'https://github.com/alequetzalli'
+ },
+ {
+ name: 'Azeez Elegbede',
+ avatar: 'https://avatars.githubusercontent.com/acethecreator',
+ link: 'https://github.com/acethecreator'
+ }
+ ];
+ const props = {
+ profiles,
+ className: 'my-profiles',
+ };
+ mount();
+ cy.get('[data-testid="Profiles-main"]').find('[data-testid="Profiles-link"]').should('have.length', profiles.length)
+ .each(($profileLink, index) => {
+ const profile = profiles[index];
+ cy.wrap($profileLink)
+ .should('have.attr', 'href', profile.link)
+ .find('img')
+ .should('have.attr', 'src', profile.avatar)
+ .should('have.attr', 'alt', profile.name)
+ .siblings('.text-sm')
+ .should('have.text', profile.name);
+ });
+ });
+});
diff --git a/cypress/test/Remember.cy.js b/cypress/test/Remember.cy.js
new file mode 100644
index 00000000000..a793eecad8c
--- /dev/null
+++ b/cypress/test/Remember.cy.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Remember from '../../components/Remember';
+import LightBulb from '../../components/icons/LightBulb';
+describe('Remember Component', () => {
+ it('renders the component with the provided title and children', () => {
+ const title = 'Remember This';
+ const className = 'remember';
+ const children =
Remember content
;
+ mount(
+
+ {children}
+
+ );
+ cy.get('[data-testid="Remember-main"]')
+ .should('exist')
+ .within(() => {
+ cy.get('[data-testid="Remember-heading"]')
+ .should('have.length', 1)
+ .within(() => {
+ cy.get(LightBulb).should('exist');
+ cy.contains('[data-testid="Remember-title"]', title).should('exist');
+ });
+
+ cy.get('[data-testid="Remember-children"]').should('exist');
+ });
+ });
+
+ it('renders the component with default title and no children', () => {
+ const className = 'remember';
+ mount();
+ cy.get('[data-testid="Remember-main"]')
+ .should('exist')
+ .within(() => {
+ cy.get('[data-testid="Remember-heading"]').should('have.length', 1).within(() => {
+ cy.get(LightBulb).should('exist');
+ cy.contains('[data-testid="Remember-title"]', 'Remember').should('exist');
+ });
+ cy.get('[data-testid="Remember-children"]').should('not.exist');
+ });
+ });
+});
diff --git a/cypress/test/Warning.cy.js b/cypress/test/Warning.cy.js
new file mode 100644
index 00000000000..224662c4ceb
--- /dev/null
+++ b/cypress/test/Warning.cy.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Warning from '../../components/Warning';
+import IconExclamation from '../../components/icons/Exclamation';
+
+describe('Warning Component', () => {
+ it('renders the component with the provided title and description', () => {
+ const className = 'my-warning';
+ const title = 'Warning Title';
+ const description = 'Warning description text';
+ mount(
+
+ );
+ cy.get('[data-testid="Warning-main"]')
+ .should('exist')
+ .within(() => {
+ cy.get(IconExclamation).should('exist');
+ cy.contains('[data-testid="Warning-title"]', title).should('exist');
+ cy.contains('[data-testid="Warning-description"]', description).should('exist');
+ });
+ });
+});