From 088daada5fd3b47520f1e17d383ac34dde173418 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Tue, 13 Jun 2023 02:53:28 +0530
Subject: [PATCH 1/7] adding tests for both components

---
 components/form/Select.js        |  4 ++--
 components/slack/Message.js      | 14 ++++++------
 components/slack/index.js        |  2 +-
 cypress/test/form/Select.cy.js   | 35 ++++++++++++++++++++++++++++++
 cypress/test/slack/index.cy.js   | 21 ++++++++++++++++++
 cypress/test/slack/message.cy.js | 37 ++++++++++++++++++++++++++++++++
 6 files changed, 103 insertions(+), 10 deletions(-)
 create mode 100644 cypress/test/form/Select.cy.js
 create mode 100644 cypress/test/slack/index.cy.js
 create mode 100644 cypress/test/slack/message.cy.js

diff --git a/components/form/Select.js b/components/form/Select.js
index 2068102a3052..0def1301c383 100644
--- a/components/form/Select.js
+++ b/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>
       ))}
diff --git a/components/slack/Message.js b/components/slack/Message.js
index a60fb2923b71..8f1ff3b18d81 100644
--- a/components/slack/Message.js
+++ b/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="SlackMessage-img2" />) : (<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>
             ))
           }
diff --git a/components/slack/index.js b/components/slack/index.js
index 7ccacd972c7b..366882607933 100644
--- a/components/slack/index.js
+++ b/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="slack-message">
         <SlackMessage
           avatar="/img/homepage/lukasz-homepage-slack.webp"
           name="Lukasz Gornicki"
diff --git a/cypress/test/form/Select.cy.js b/cypress/test/form/Select.cy.js
new file mode 100644
index 000000000000..424288bf301f
--- /dev/null
+++ b/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');
+      });
+  });
+});
diff --git a/cypress/test/slack/index.cy.js b/cypress/test/slack/index.cy.js
new file mode 100644
index 000000000000..fa9f86808513
--- /dev/null
+++ b/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="slack-message"]').eq(0).as('message1').should('exist')
+
+    // Verify the second Slack message
+    cy.get('[data-testid="slack-message"]').eq(0).as('message2').should('exist')
+
+    // Verify the third Slack message
+    cy.get('[data-testid="slack-message"]').eq(0).as('message3').should('exist')
+
+    // Verify the fourth Slack message
+    cy.get('[data-testid="slack-message"]').eq(0).as('message4').should('exist')
+  });
+});
diff --git a/cypress/test/slack/message.cy.js b/cypress/test/slack/message.cy.js
new file mode 100644
index 000000000000..45a91d883af3
--- /dev/null
+++ b/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 = 'path/to/avatar.jpg' // 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-img2"]').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) 
+    })
+  })
+})

From 4201220091190d571278c4c281971bb0aded1bae Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sun, 18 Jun 2023 15:33:38 +0530
Subject: [PATCH 2/7] fix names and test-ids for consistency

---
 components/slack/index.js      | 2 +-
 cypress/test/slack/index.cy.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/slack/index.js b/components/slack/index.js
index 366882607933..27a49ef2b53c 100644
--- a/components/slack/index.js
+++ b/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"   data-testid="slack-message">
+      <div className="flex-1 py-2"   data-testid="SlackMessage">
         <SlackMessage
           avatar="/img/homepage/lukasz-homepage-slack.webp"
           name="Lukasz Gornicki"
diff --git a/cypress/test/slack/index.cy.js b/cypress/test/slack/index.cy.js
index fa9f86808513..063417c53194 100644
--- a/cypress/test/slack/index.cy.js
+++ b/cypress/test/slack/index.cy.js
@@ -7,15 +7,15 @@ describe('Slack Component', () => {
     mount(<Slack />);
 
     // Verify the first Slack message
-    cy.get('[data-testid="slack-message"]').eq(0).as('message1').should('exist')
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message1').should('exist')
 
     // Verify the second Slack message
-    cy.get('[data-testid="slack-message"]').eq(0).as('message2').should('exist')
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message2').should('exist')
 
     // Verify the third Slack message
-    cy.get('[data-testid="slack-message"]').eq(0).as('message3').should('exist')
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message3').should('exist')
 
     // Verify the fourth Slack message
-    cy.get('[data-testid="slack-message"]').eq(0).as('message4').should('exist')
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message4').should('exist')
   });
 });

From 2b15a06184a05cd94f2834eaedfb4a49d5d5b92a Mon Sep 17 00:00:00 2001
From: Aadrika Bhargava <64789514+reachaadrika@users.noreply.github.com>
Date: Sat, 8 Jul 2023 13:51:52 +0530
Subject: [PATCH 3/7] Update cypress/test/slack/index.cy.js

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 cypress/test/slack/index.cy.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/cypress/test/slack/index.cy.js b/cypress/test/slack/index.cy.js
index 063417c53194..4a7c2698c335 100644
--- a/cypress/test/slack/index.cy.js
+++ b/cypress/test/slack/index.cy.js
@@ -7,15 +7,15 @@ describe('Slack Component', () => {
     mount(<Slack />);
 
     // Verify the first Slack message
-    cy.get('[data-testid="SlackMessage"]').eq(0).as('message1').should('exist')
+    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('message2').should('exist')
+    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('message3').should('exist')
+    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('message4').should('exist')
+    cy.get('[data-testid="SlackMessage"]').eq(0).as('message-4').should('exist')
   });
 });

From 3570ce51edf6cfd8f6b88820c685fac35fec35c1 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sat, 8 Jul 2023 13:58:37 +0530
Subject: [PATCH 4/7] test-id addition

---
 components/slack/Message.js      | 2 +-
 cypress/test/slack/message.cy.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/slack/Message.js b/components/slack/Message.js
index 8f1ff3b18d81..c1a3c612e8ba 100644
--- a/components/slack/Message.js
+++ b/components/slack/Message.js
@@ -17,7 +17,7 @@ export default function SlackMessage({
           {
             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'}`} 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="SlackMessage-img2" />) : (<span className="text-xs mr-1" data-testid="SlackMessage-span">{reaction.emoji}</span>) }
+                { 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>
             ))
diff --git a/cypress/test/slack/message.cy.js b/cypress/test/slack/message.cy.js
index 45a91d883af3..a215f4dccd30 100644
--- a/cypress/test/slack/message.cy.js
+++ b/cypress/test/slack/message.cy.js
@@ -26,7 +26,7 @@ describe('SlackMessage component', () => {
       cy.get('[data-testid="SlackMessage-reaction"]').eq(index).as('reactionElement') 
 
       if (reaction.icon) {
-        cy.get('@reactionElement').find('[data-testid="SlackMessage-img2"]').should('have.attr', 'src', 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) 
       }

From 6eca29e79d62c4a890ac15649fc2e09c1e87119d Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sat, 8 Jul 2023 17:45:47 +0530
Subject: [PATCH 5/7] add avatar check

---
 cypress/test/slack/message.cy.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/cypress/test/slack/message.cy.js b/cypress/test/slack/message.cy.js
index a215f4dccd30..87b81e67456c 100644
--- a/cypress/test/slack/message.cy.js
+++ b/cypress/test/slack/message.cy.js
@@ -2,7 +2,7 @@ import { mount } from '@cypress/react'
 import SlackMessage from '../../../components/slack/Message'
 describe('SlackMessage component', () => {
   it('renders the SlackMessage component correctly', () => {
-    const avatarSrc = 'path/to/avatar.jpg' // Replace 
+    const avatarSrc = '../../../public/img/avatars/dalelane.webp' // Replace 
     const name = 'John Doe'
     const text = 'Hello, world!'
     const reactions = [
@@ -12,26 +12,26 @@ describe('SlackMessage component', () => {
     ]
 
     mount(
-      <SlackMessage avatar={avatarSrc} name={name} text={text} reactions={reactions} />
+      <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-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') 
+      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) 
+        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-span"]').should('contain', reaction.emoji)
       }
 
-      cy.get('@reactionElement').find('[data-testid="SlackMessage-count"]').should('contain', reaction.count) 
+      cy.get('@reactionElement').find('[data-testid="SlackMessage-count"]').should('contain', reaction.count)
     })
   })
 })

From bd590037d443c4884c2077359a745989af265490 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sun, 9 Jul 2023 22:57:55 +0530
Subject: [PATCH 6/7] delete file for renaming

---
 cypress/test/slack/message.cy.js | 37 --------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 cypress/test/slack/message.cy.js

diff --git a/cypress/test/slack/message.cy.js b/cypress/test/slack/message.cy.js
deleted file mode 100644
index 87b81e67456c..000000000000
--- a/cypress/test/slack/message.cy.js
+++ /dev/null
@@ -1,37 +0,0 @@
-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)
-    })
-  })
-})

From 55094807c4222c28c7d7b9891b2518a14dd3eef0 Mon Sep 17 00:00:00 2001
From: reachaadrika <aadrikabhargava12@gmail.com>
Date: Sun, 9 Jul 2023 22:58:59 +0530
Subject: [PATCH 7/7] renamed the file Message.cy.js

---
 cypress/test/slack/Message.cy.js | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 cypress/test/slack/Message.cy.js

diff --git a/cypress/test/slack/Message.cy.js b/cypress/test/slack/Message.cy.js
new file mode 100644
index 000000000000..87b81e67456c
--- /dev/null
+++ b/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)
+    })
+  })
+})