From d4a3ede7c1d345adafb0a56556e1c6bda87ea09a Mon Sep 17 00:00:00 2001
From: Tausifqureshi786 <qamin9333@gmail.com>
Date: Thu, 25 May 2023 00:09:37 -0600
Subject: [PATCH 1/3] Update contact-form.tsx

Add 'data-cy' attribute value to the inputs, error spans, headers and the send message button to safely fetch them in cypress tests
---
 .../molecules/contact-form/contact-form.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/contact-form/contact-form.tsx b/src/components/molecules/contact-form/contact-form.tsx
index 63437d8..f027ec8 100644
--- a/src/components/molecules/contact-form/contact-form.tsx
+++ b/src/components/molecules/contact-form/contact-form.tsx
@@ -116,13 +116,14 @@ const ContactForm = () => {
               </Label>
               <TextInput
                 maxLength={50}
+                data-cy="name-input"
                 type={"text"}
                 placeholder={"Your name"}
                 value={name}
                 isInvalid={error.name}
                 onChange={(e) => setName(e.target.value)}
               />
-              {error.name && <span className="text-rose-500">Please add a name</span>}
+              {error.name && <span data-cy="name-error-msg" className=" text-rose-500">Please add a name</span>}
             </VStack>
           
             <VStack mt={2} justifyContent={"flex-start"} alignItems={"flex-start"}>
@@ -131,13 +132,14 @@ const ContactForm = () => {
               </Label>
               <TextInput
                 maxLength={60}
+                data-cy="email-input"
                 type={"email"}
                 placeholder={"you@company.com"}
                 value={email}
                 isInvalid={error.email}
                 onChange={(e) => setEmail(e.target.value)}
               />
-              {error.email && <span className="text-rose-500">Please add a proper email address</span>}
+              {error.email && <span data-cy="email-error-msg" className="text-rose-500">Please add a proper email address</span>}
             </VStack>
 
             <VStack mt={2} justifyContent={"flex-start"} alignItems={"flex-start"}>
@@ -147,18 +149,20 @@ const ContactForm = () => {
               <TextBox
                 maxLength={400}
                 h={20}
+                data-cy="note-input"
                 placeholder={"Tell us something..."}
                 value={message}
                 isInvalid={error.message}
                 onChange={(e) => setMessage(e.target.value)}
               />
-              {error.message && <span className="text-rose-500">Please add a message</span>}
+              {error.message && <span data-cy="note-error-msg" className="text-rose-500">Please add a message</span>}
             </VStack>
 
             <div className="mt-8">
               <DefaultButton
                 w={"100%"}
                 py={3}
+                data-cy="send-msg-btn"
                 color={"white"}
                 borderRadius={"12px"}
                 backgroundColor={"blue.500"}
@@ -182,10 +186,10 @@ const ContactForm = () => {
       
       {statuses.isSuccess && 
         <span className="flex flex-col gap-4 text-center">
-          <HeaderText className="text-primary !text-lg" level="h2">
+          <HeaderText data-cy="email-sent-title" className="text-primary !text-lg" level="h2">
             Thank you for your feedback! 
           </HeaderText>
-          <DefaultText>
+          <DefaultText data-cy="email-sent-msg">
             We will get back to you as soon as possible!
           </DefaultText>
         </span>

From 02dc95e16476c6dcc125dca6e3008446cd8162a4 Mon Sep 17 00:00:00 2001
From: Tausifqureshi786 <qamin9333@gmail.com>
Date: Thu, 25 May 2023 00:13:18 -0600
Subject: [PATCH 2/3] Create contactuscomponent.cy.tsx

Add test suite for contact us component for the given test cases in the issue #132
---
 cypress/components/contactuscomponent.cy.tsx | 66 ++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 cypress/components/contactuscomponent.cy.tsx

diff --git a/cypress/components/contactuscomponent.cy.tsx b/cypress/components/contactuscomponent.cy.tsx
new file mode 100644
index 0000000..2846018
--- /dev/null
+++ b/cypress/components/contactuscomponent.cy.tsx
@@ -0,0 +1,66 @@
+
+import ContactContent from "../../src/components/molecules/contact-form/contact-form"
+
+describe('Checks the Contact Us component for accepting three cases of inputs', () => {
+  beforeEach(()=> {
+    cy.mount(<ContactContent />)
+    
+    // input text field for name
+    cy.get('[data-cy="name-input"]').as('nameInputTextField')
+            
+    // input text element for email
+    cy.get('[data-cy="email-input"]').as('emailInputTextField')
+    'data-cy="note-input"'
+
+    // input element for message 
+    cy.get('[data-cy="note-input"]').as('messageEmailTextArea')
+
+    // button element 
+    cy.get('[data-cy="send-msg-btn"]').as('sendMessageBtn')
+
+  })
+
+    it('Case 1: Show error messages in a new span element when no text is provided in name, email and message inputs in the component', ()=> {
+        cy.get('@nameInputTextField').clear()
+        cy.get('@emailInputTextField').clear()
+        cy.get('@messageEmailTextArea').clear()
+
+        cy.get('@sendMessageBtn').click()
+
+        cy.get('[data-cy="name-error-msg"]').contains('Please add a name')
+        cy.get('[data-cy="email-error-msg"]').contains('Please add a proper email address')
+        cy.get('[data-cy="note-error-msg"]').contains('Please add a message')
+    })
+
+    it("Case 2 : Show the success message after proper inputs for name, email and message inputs are provided", () => {
+      cy.fixture('example').as('exampleInput')
+      cy.get('@nameInputTextField').type('Tausif Qureshi')
+      cy.get('@emailInputTextField').type('tausif2606@gmail.com')
+      cy.get('@messageEmailTextArea').type('Hello tech is hiring!')
+
+      cy.intercept('POST','/api/process-email', (req) => {
+        const statusCode = 200
+        req.reply(statusCode, {data:"Email sent"})
+
+      })
+      cy.get('@sendMessageBtn').click()
+
+      cy.get('[data-cy="email-sent-title"]').contains('Thank you for your feedback!')
+      cy.get('[data-cy="email-sent-msg"]').contains('We will get back to you as soon as possible!')
+
+    })
+
+    it("Case 3: Show error under the name and message field ", ()=> {
+      cy.get('@nameInputTextField').clear()
+      cy.get('@emailInputTextField').type('tausif2606@gmail.com')
+      cy.get('@messageEmailTextArea').clear()
+
+      cy.get('@sendMessageBtn').click()
+
+      cy.get('[data-cy="name-error-msg"]').contains('Please add a name')
+      cy.get('[data-cy="note-error-msg"]').contains('Please add a message')
+
+    })
+
+
+})
\ No newline at end of file

From 22d1d2f5d67a7823863f277313b579d2ef4d4905 Mon Sep 17 00:00:00 2001
From: Tausifqureshi786 <qamin9333@gmail.com>
Date: Thu, 25 May 2023 16:47:43 -0600
Subject: [PATCH 3/3] name-change of component import for ContactForm

---
 cypress/components/contactuscomponent.cy.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/cypress/components/contactuscomponent.cy.tsx b/cypress/components/contactuscomponent.cy.tsx
index 2846018..596be4d 100644
--- a/cypress/components/contactuscomponent.cy.tsx
+++ b/cypress/components/contactuscomponent.cy.tsx
@@ -1,10 +1,9 @@
 
-import ContactContent from "../../src/components/molecules/contact-form/contact-form"
+import ContactForm from "../../src/components/molecules/contact-form/contact-form"
 
 describe('Checks the Contact Us component for accepting three cases of inputs', () => {
   beforeEach(()=> {
-    cy.mount(<ContactContent />)
-    
+    cy.mount(<ContactForm />)
     // input text field for name
     cy.get('[data-cy="name-input"]').as('nameInputTextField')