From a90b6aaab4f9d30d48a9ba7302cc23f3b96d7e5f Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sat, 26 Oct 2024 21:10:21 +0500
Subject: [PATCH] fix(onboarding-flow): impletement cypress test

---
 cypress/e2e/admin/signin.cy.ts                       | 12 ++++--------
 .../OnboardingFlow/GraphDetailsStep/index.tsx        |  7 ++++---
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/admin/signin.cy.ts b/cypress/e2e/admin/signin.cy.ts
index 310bff01b..0fa11ba33 100644
--- a/cypress/e2e/admin/signin.cy.ts
+++ b/cypress/e2e/admin/signin.cy.ts
@@ -12,20 +12,16 @@ describe('Admin Login', () => {
     const title = `Testing NavFiber`
     const description = 'Testing Graph Description'
 
-    // Open settings modal
-    cy.get('div[data-testid="settings-modal"]').should('be.visible').click()
-
-    // Asserting the settings label text
-    cy.get('[data-testid="setting-label"]').should('have.text', 'Admin Settings')
+    cy.get('[data-testid="onboarding-title"]').should('have.text', 'Welcome to SecondBrain!')
 
     // Efficiently interact with the about title
-    cy.get('#cy-about-title-id').should('be.visible').click().type('{selectAll}').type(title)
+    cy.get('#cy-graph-title-id').should('be.visible').click().type('{selectAll}').type(title)
 
     // Efficiently interact with the about description
-    cy.get('#cy-about-id').should('be.visible').click().type('{selectAll}').type(description)
+    cy.get('#cy-graph-description-id').should('be.visible').click().type('{selectAll}').type(description)
 
     // Submit the form
-    cy.get('#add-node-submit-cta').click()
+    cy.get('#onboarding-confirm-cta').click()
     cy.wait('@updateAbout')
 
     cy.wait(1000)
diff --git a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
index 5331ec103..171d669a1 100644
--- a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
+++ b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
@@ -37,14 +37,14 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
   return (
     <Flex>
       <Flex align="center" direction="column" justify="center">
-        <StyledText>Welcome to SecondBrain!</StyledText>
+        <StyledText data-testid="onboarding-title">Welcome to SecondBrain!</StyledText>
         <StyledSubText>Set a name and short description for your graph.</StyledSubText>
       </Flex>
 
       <StyledWrapper>
         <Flex className="input__wrapper">
           <TextInput
-            id="graph-title"
+            id="cy-graph-title-id"
             label="Title"
             maxLength={50}
             name="title"
@@ -58,7 +58,7 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
             }}
           />
           <TextInput
-            id="graph-description"
+            id="cy-graph-description-id"
             label="Description"
             maxLength={100}
             name="description"
@@ -78,6 +78,7 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
         <Button
           color="secondary"
           disabled={isSubmitting || !!error || !isFormValid}
+          id="onboarding-confirm-cta"
           onClick={onSubmit}
           size="large"
           variant="contained"