feat: adding unit tests for InlineHelp ,MacWindow , Newsletter , Profile ,Remember and Warning components

components/InlineHelp.js

@@ -18,10 +18,10 @@ export default function InlineHelp({
     <div className={className}>
       {
         isHelpVisible && (
-          <div className="absolute left-0 right-0 mt-6 p-2 bg-gray-800 text-center text-white text-xs rounded normal-case lg:-ml-4 lg:w-48">{text}</div>
+          <div className="absolute left-0 right-0 mt-6 p-2 bg-gray-800 text-center text-white text-xs rounded normal-case lg:-ml-4 lg:w-48" data-testid="InlineHelp">{text}</div>
         )
       }
-      <QuestionMark className="cursor-pointer h-4 -mt-0.5 inline-block text-gray-500" onClick={() => setIsHelpVisible(!isHelpVisible)} onMouseEnter={() => setIsHelpVisible(true)} onMouseLeave={() => setIsHelpVisible(false)} />
+      <QuestionMark className="cursor-pointer h-4 -mt-0.5 inline-block text-gray-500" onClick={() => setIsHelpVisible(!isHelpVisible)} onMouseEnter={() => setIsHelpVisible(true)} onMouseLeave={() => setIsHelpVisible(false)} data-testid="InlineHelp-icon" />
     </div>
   )
 }

components/MacWindow.js

@@ -7,17 +7,17 @@ export default function MacWindow({
   children,
 }) {
   return (
-    <div className={`${className} rounded`}>
-      <div className="flex text-left px-4 py-2">
+    <div className={`${className} rounded`} data-testid="MacWindow-main">
+      <div className="flex text-left px-4 py-2" data-testid="MacWindow-div">
         <div>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-close mr-2"></span>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-minimize mr-2"></span>
           <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-maximize mr-2"></span>
         </div>
-        <div className="flex-1 text-gray-400 text-sm px-2 truncate text-left sm:text-center" title={title}>
+        <div className="flex-1 text-gray-400 text-sm px-2 truncate text-left sm:text-center" title={title} data-testid="MacWindow-title-div">
           {title}
         </div>
-        <div className="hidden sm:block"> {/* This block is used for aligning the title on the center */}
+        <div className="hidden sm:block" data-testid="MacWindow-title-center"> {/* This block is used for aligning the title on the center */}
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>
           <span className="inline-block w-2.5 h-2.5 mr-2"></span>

components/NewsletterSubscribe.js

@@ -13,7 +13,7 @@ export default function NewsletterSubscribe ({
   const paragraphTextColor = dark ? 'text-gray-300' : ''
 
   return (
-    <div className={className}>
+    <div className={className} data-testid="NewsletterSubscribe-main">
       <Heading 
         level="h3"
         textColor={headTextColor}
@@ -28,8 +28,8 @@ export default function NewsletterSubscribe ({
       <form name="form 1" method="POST" className="md:flex" data-netlify="true">
         <input type="hidden" name="form-name" value="form 1" />
         <input type="hidden" name="type" value={type} />
-        <input type="text" name="name" placeholder="Your name" className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required />
-        <input type="email" name="email" placeholder="Your email" className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required />
+        <input type="text" name="name" placeholder="Your name" className="form-input block w-full sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-text-input"/>
+        <input type="email" name="email" placeholder="Your email" className="form-input block w-full mt-2 sm:text-sm sm:leading-5 md:mr-2 md:mt-0 md:flex-1 rounded-md" required data-testid="NewsletterSubscribe-email-input"/>
         <Button type="submit" text="Subscribe" className="w-full mt-2 md:mr-2 md:mt-0 md:flex-1" />
       </form>
     </div>

components/Profile.js

@@ -3,9 +3,10 @@ export default function Profile({profiles = [], className}) {
     return null;
   }
     return (
-      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md">
+      <div className="p-4 grid grid-cols-2 sm:grid-cols-4 gap-5 border border-slate-100 mt-4 rounded drop-shadow-md" data-testid="Profiles-main">
         {profiles.map((profile) => (
-          <a
+          <a  
+            data-testid="Profiles-link"
             href={profile.link}
             key={profile.name}
             target="_blank"

components/Remember.js

@@ -2,10 +2,10 @@ import LightBulb from './icons/LightBulb'
 
 export default function Remember({ title = 'Remember', className, children }) {
   return (
-    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`}>
-      <h5 className="pb-2 mb-4 border-b border-gray-900 text-lg">
+    <div className={`${className} p-4 mt-4 mb-8 bg-secondary-100 rounded text-gray-900`} data-testid="Remember-main">
+      <h5 className="pb-2 mb-4 border-b border-gray-900 text-lg" data-testid="Remember-heading">
         <LightBulb className="mr-2 -mt-0.5 h-8 inline-block" />
-        <span className="inline-block ml-2 font-medium font-sans antialiased">{title}</span>
+        <span className="inline-block ml-2 font-medium font-sans antialiased" data-testid="Remember-title">{title}</span>
       </h5>
     <div>
       { children }

components/Warning.js

@@ -2,16 +2,16 @@ import IconExclamation from "./icons/Exclamation";
 
 export default function Warning({ className = '', title, description }) {
   return (
-    <div className={`${className} rounded-md bg-yellow-50 p-4`}>
+    <div className={`${className} rounded-md bg-yellow-50 p-4`} data-testid="Warning-main">
       <div className="flex">
         <div className="flex-shrink-0">
           <IconExclamation className="h-5 w-5" />
         </div>
         <div className="ml-3">
-          <h3 className="text-sm leading-5 font-medium text-yellow-800 uppercase">
+          <h3 className="text-sm leading-5 font-medium text-yellow-800 uppercase" data-testid="Warning-title">
             {title}
           </h3>
-          <div className="mt-2 text-sm leading-5 text-yellow-700">
+          <div className="mt-2 text-sm leading-5 text-yellow-700" data-testid="Warning-description">
             <p>{description}</p>
           </div>
         </div>

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(<InlineHelp text={ text } />);
+    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');
+
+  });
+});

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(
+      <MacWindow
+        className={className}
+        contentClassName={contentClassName}
+        title={title}
+      >
+        {children}
+      </MacWindow>
+    );
+    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);
+      });
+  });
+});

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(<NewsletterSubscribe />);
+
+    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');
+
+  });
+});

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(<Profile {...props} />);
+    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(<Profile {...props} />);
+   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);
+      });
+  });
+});

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 = <div data-testid="Remember-children">Remember content</div>;
+      mount(
+      <Remember title={title} className={className}>
+        {children}
+      </Remember>
+    );
+  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(<Remember className={className} />);
+    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');
+      });
+  });
+});

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(
+      <Warning className={className} title={title} description={description} />
+    );
+    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');
+      });
+  });
+});