fix(onboarding-flow): impletement cypress test

stakwork · Oct 26, 2024 · a90b6aa · a90b6aa
1 parent 3e12f26
commit a90b6aa
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git 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
@@ -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"