132 cypress test for contact us form

cypress/components/contactuscomponent.cy.tsx

@@ -0,0 +1,65 @@
+
+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(<ContactForm />)
+    // 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')
+
+    })
+
+
+})

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>