add tests for Heading , Paragraph and Link components

components/typography/TextLink.js

@@ -14,7 +14,7 @@ export default function TextLink({
         <>
             {' '}
             <Link href={href}>
-                <a id={id} target={target} rel="noreferrer noopener" className={classNames}>
+                <a data-testid="TextLink-href" id={id} target={target} rel="noreferrer noopener" className={classNames}>
                     {children}
                 </a>
             </Link>

cypress/test/typography/Heading.cy.js

@@ -0,0 +1,25 @@
+import { mount } from '@cypress/react';
+import Heading from '../../../components/typography/Heading'
+describe('Heading Component', () => {
+    beforeEach(() => {
+      cy.mount(<Heading>Default Heading</Heading>);
+    });
+
+    it('renders the heading with the default style', () => {
+      cy.get('h2').should('have.class', 'text-primary-800');
+      cy.get('h2').should( 'have.class','font-heading text-heading-md font-bold tracking-heading md:text-heading-lg' );
+      cy.get('h2').should('contain', 'Default Heading');
+    });
+
+    it('renders the heading with custom style', () => {
+      cy.mount(
+        <Heading typeStyle="heading-sm-semibold" level="h3" textColor="text-red-500">
+          Heading with custom styles
+        </Heading>
+      );
+     cy.get('h3').should('have.class', 'text-red-500');
+      cy.get('h3').should( 'have.class','font-heading text-heading-sm font-semibold tracking-heading');
+      cy.get('h3').should('contain', 'Heading with custom styles');
+    });
+  });
+

cypress/test/typography/Paragraph.cy.js

@@ -0,0 +1,32 @@
+import { mount } from '@cypress/react';
+import Paragraph from '../../../components/typography/Paragraph';
+describe('Paragraph Component', () => {
+    beforeEach(() => {
+      cy.mount(
+        <Paragraph typeStyle="body-lg" textColor="text-gray-700" fontWeight="font-bold">
+          Default Paragraph
+        </Paragraph>
+      );
+    });
+
+    it('renders the paragraph with the default style', () => {
+      cy.get('p').should('have.class', 'text-gray-700');
+      cy.get('p').should('have.class', 'text-lg');
+      cy.get('p').should('have.class', 'font-bold');
+      cy.get('p').should('contain', 'Default Paragraph');
+    });
+
+    it('renders the paragraph with custom style', () => {
+      cy.mount(
+        <Paragraph typeStyle="body-md" textColor="text-blue-500" fontWeight="font-semibold">
+           Paragraph with custom styles
+        </Paragraph>
+      );
+
+      cy.get('p').should('have.class', 'text-blue-500');
+      cy.get('p').should('have.class', 'text-md');
+      cy.get('p').should('have.class', 'font-semibold');
+      cy.get('p').should('contain', 'Paragraph with custom styles');
+    });
+  });
+

cypress/test/typography/TextLink.cy.js

@@ -0,0 +1,33 @@
+import { mount } from '@cypress/react';
+import TextLink from '../../../components/typography/TextLink'
+describe('TextLink Component', () => {
+    it('renders a link with the provided props and content', () => {
+      const href = '/test';
+      const className = 'custom-class';
+      const target = '_blank';
+      const id = 'test-link';
+      const children = 'Test Link';
+
+      cy.mount(
+        <TextLink href={href} className={className} target={target} id={id}>
+          {children}
+        </TextLink>
+      );
+
+      cy.get('[data-testid="TextLink-href" ]')
+        .should('have.attr', 'href', href)
+        .should('have.class', 'text-secondary-500')
+        .should('have.class', 'underline')
+        .should('have.class', 'hover:text-gray-800')
+        .should('have.class', 'font-medium')
+        .should('have.class', 'transition')
+        .should('have.class', 'ease-in-out')
+        .should('have.class', 'duration-300')
+        .should('have.class', className)
+        .should('have.attr', 'target', target)
+        .should('have.attr', 'rel', 'noreferrer noopener')
+        .should('have.attr', 'id', id)
+        .should('contain', children);
+    });
+  });
+