feat: adding unit tests for form and slack folders

components/form/Select.js

@@ -6,13 +6,13 @@ export default function Select({
   selected,
 }) {
   return (
-    <select
+    <select data-testid="Select-form"
       onChange={(ev) => onChange(ev.target.value)}
       className={twMerge(`form-select h-full py-0 pl-2 pr-8 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`)}
       value={selected}
     >
       {options.map((option, index) => (
-        <option key={index} selected={option.value === selected} value={option.value}>
+        <option key={index} selected={option.value === selected} value={option.value} data-testid="Option-form">
           {option.text}
         </option>
       ))}

components/slack/Message.js

@@ -6,19 +6,19 @@ export default function SlackMessage({
   reactions = [],
 }) {
   return (
-    <div className={`flex pl-2 my-2 text-left ${className}`}>
-      <img className="block w-9 h-9 mr-2 rounded object-cover" src={avatar} alt={name}/>
+    <div className={`flex pl-2 my-2 text-left ${className}`} data-testid="SlackMessage-main-div">
+      <img className="block w-9 h-9 mr-2 rounded object-cover" src={avatar} alt={name} data-testid="SlackMessage-img"/>
       <div>
-        <div className="font-bold text-sm -mt-1">{name}</div>
-        <p className="text-sm">
+        <div className="font-bold text-sm -mt-1"  data-testid="SlackMessage-name">{name}</div>
+        <p className="text-sm" data-testid="SlackMessage-text">
           {text}
         </p>
         <div className="mt-0.5">
           {
             reactions.map((reaction, index) => (
-              <div key={index} className={`inline px-2 py-0.5 mr-1 rounded-xl ${reaction.mine ? 'bg-blue-50 border border-blue-500' : 'bg-gray-100'}`}>
-                { reaction.icon ? (<img className="inline-block -mt-0.5 w-4 h-4 object-contain" src={reaction.icon} alt={reaction.name}/>) : (<span className="text-xs mr-1">{reaction.emoji}</span>) }
-                <span className="inline-block text-blue-500 font-bold ml-1 text-xs">{reaction.count}</span>
+              <div key={index} className={`inline px-2 py-0.5 mr-1 rounded-xl ${reaction.mine ? 'bg-blue-50 border border-blue-500' : 'bg-gray-100'}`} data-testid="SlackMessage-reaction">
+                { reaction.icon ? (<img className="inline-block -mt-0.5 w-4 h-4 object-contain" src={reaction.icon} alt={reaction.name} data-testid="reactionIcon" />) : (<span className="text-xs mr-1" data-testid="SlackMessage-span">{reaction.emoji}</span>) }
+                <span className="inline-block text-blue-500 font-bold ml-1 text-xs" data-testid="SlackMessage-count">{reaction.count}</span>
               </div>
             ))
           }

components/slack/index.js

@@ -22,7 +22,7 @@ export default function Slack({
         <div className="mb-1 h-2 rounded-xl bg-white bg-opacity-25 w-1/4"></div>
         <div className="mb-1 h-2 rounded-xl bg-white bg-opacity-25 w-1/3"></div>
       </div>
-      <div className="flex-1 py-2">
+      <div className="flex-1 py-2"   data-testid="SlackMessage">
         <SlackMessage
           avatar="/img/homepage/lukasz-homepage-slack.webp"
           name="Lukasz Gornicki"

cypress/test/form/Select.cy.js

@@ -0,0 +1,35 @@
+import { mount } from 'cypress/react';
+import Select from '../../../components/form/Select';
+
+describe('Select Component', () => {
+  const options = [
+    { value: 'option1', text: 'Option 1' },
+    { value: 'option2', text: 'Option 2' },
+    { value: 'option3', text: 'Option 3' },
+  ];
+
+  it('should call onChange when an option is selected', () => {
+    const onChange = cy.stub().as('onChange');
+    mount(<Select onChange={onChange} options={options} />);
+
+    cy.get('[data-testid="Select-form"]').select('option2');
+    cy.get('@onChange').should('be.calledOnceWith', 'option2');
+  });
+
+  it('should render options correctly', () => {
+    mount(<Select options={options} selected="option2" />);
+
+    cy.get('[data-testid="Select-form"]')
+      .find('[data-testid="Option-form"]')
+      .should(($options) => {
+        expect($options).to.have.length(3);
+
+        const optionValues = $options.map((_, el) => Cypress.$(el).val()).get();
+        expect(optionValues).to.deep.eq(['option1', 'option2', 'option3']);
+
+        const selectedOption = $options.filter(':selected');
+        expect(selectedOption).to.have.length(1);
+        expect(selectedOption.text()).to.eq('Option 2');
+      });
+  });
+});

cypress/test/slack/Message.cy.js

@@ -0,0 +1,37 @@
+import { mount } from '@cypress/react'
+import SlackMessage from '../../../components/slack/Message'
+describe('SlackMessage component', () => {
+  it('renders the SlackMessage component correctly', () => {
+    const avatarSrc = '../../../public/img/avatars/dalelane.webp' // Replace 
+    const name = 'John Doe'
+    const text = 'Hello, world!'
+    const reactions = [
+      { emoji: '👍', count: 5 },
+      { emoji: '❤️', count: 3 },
+      // Add more reactions
+    ]
+
+    mount(
+      <SlackMessage avatar={ avatarSrc } name={ name } text={ text } reactions={ reactions } />
+    )
+
+
+    cy.get('[data-testid="SlackMessage-main-div"]').should('exist')
+    cy.get('[ data-testid="SlackMessage-img"]').should('have.attr', 'src', avatarSrc)
+    cy.get('[data-testid="SlackMessage-name"]').should('contain', name)
+    cy.get('[data-testid="SlackMessage-text"]').should('contain', text)
+
+    // Check the reaction elements
+    reactions.forEach((reaction, index) => {
+      cy.get('[data-testid="SlackMessage-reaction"]').eq(index).as('reactionElement')
+
+      if (reaction.icon) {
+        cy.get('@reactionElement').find('[data-testid="SlackMessage-reactionIcon"]').should('have.attr', 'src', reaction.icon)
+      } else {
+        cy.get('@reactionElement').find('[data-testid="SlackMessage-span"]').should('contain', reaction.emoji)
+      }
+
+      cy.get('@reactionElement').find('[data-testid="SlackMessage-count"]').should('contain', reaction.count)
+    })
+  })
+})

cypress/test/slack/index.cy.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Slack from '../../../components/slack/index';
+
+describe('Slack Component', () => {
+  it('renders the Slack messages correctly', () => {
+    mount(<Slack />);
+
+    // Verify the first Slack message
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message-1').should('exist')
+
+    // Verify the second Slack message
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message-2').should('exist')
+
+    // Verify the third Slack message
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message-3').should('exist')
+
+    // Verify the fourth Slack message
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message-4').should('exist')
+  });
+});