From f20f976847e39d7d1e13c6df9fb7cf36bda572cb Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 10:51:25 +0500
Subject: [PATCH] fix(cypress): test

---
 cypress/e2e/admin/signin.cy.ts                | 12 +++--
 src/components/App/index.tsx                  | 53 ++++++++++++-------
 src/components/AppContainer/index.tsx         | 30 +++--------
 .../OnboardingFlow/GraphDetailsStep/index.tsx |  7 ++-
 4 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/cypress/e2e/admin/signin.cy.ts b/cypress/e2e/admin/signin.cy.ts
index 0fa11ba33..310bff01b 100644
--- a/cypress/e2e/admin/signin.cy.ts
+++ b/cypress/e2e/admin/signin.cy.ts
@@ -12,16 +12,20 @@ describe('Admin Login', () => {
     const title = `Testing NavFiber`
     const description = 'Testing Graph Description'
 
-    cy.get('[data-testid="onboarding-title"]').should('have.text', 'Welcome to SecondBrain!')
+    // 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')
 
     // Efficiently interact with the about title
-    cy.get('#cy-graph-title-id').should('be.visible').click().type('{selectAll}').type(title)
+    cy.get('#cy-about-title-id').should('be.visible').click().type('{selectAll}').type(title)
 
     // Efficiently interact with the about description
-    cy.get('#cy-graph-description-id').should('be.visible').click().type('{selectAll}').type(description)
+    cy.get('#cy-about-id').should('be.visible').click().type('{selectAll}').type(description)
 
     // Submit the form
-    cy.get('#onboarding-confirm-cta').click()
+    cy.get('#add-node-submit-cta').click()
     cy.wait('@updateAbout')
 
     cy.wait(1000)
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index bf355b12b..8265c14b9 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -15,6 +15,7 @@ import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useFeatureFlagStore } from '~/stores/useFeatureFlagStore'
 import { useUpdateSelectedNode } from '~/stores/useGraphStore'
+import { useModal } from '~/stores/useModalStore'
 import { useTeachStore } from '~/stores/useTeachStore'
 import { useUserStore } from '~/stores/useUserStore'
 import {
@@ -29,6 +30,7 @@ import { colors } from '~/utils/colors'
 import { updateBudget } from '~/utils/setBudget'
 import version from '~/utils/versionHelper'
 import { ModalsContainer } from '../ModalsContainer'
+import { OnboardingModal } from '../ModalsContainer/OnboardingFlow'
 import { ActionsToolbar } from './ActionsToolbar'
 import { AppBar } from './AppBar'
 import { DeviceCompatibilityNotice } from './DeviceCompatibilityNotification'
@@ -56,9 +58,10 @@ const LazySideBar = lazy(() => import('./SideBar').then(({ SideBar }) => ({ defa
 export const App = () => {
   const [searchParams] = useSearchParams()
   const query = searchParams.get('q')
-  const { setBudget, setNodeCount } = useUserStore((s) => s)
+  const { setBudget, setNodeCount, isAdmin } = useUserStore((s) => s)
   const queueRef = useRef<FetchDataResponse | null>(null)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const { open, visible } = useModal('onboardingFlow')
 
   const {
     setSidebarOpen,
@@ -68,6 +71,7 @@ export const App = () => {
     setTranscriptOpen,
     universeQuestionIsOpen,
     setUniverseQuestionIsOpen,
+    appMetaData,
   } = useAppStore((s) => s)
 
   const setTeachMeAnswer = useTeachStore((s) => s.setTeachMeAnswer)
@@ -322,10 +326,16 @@ export const App = () => {
   }, [runningProjectId, setRunningProjectMessages])
 
   useEffect(() => {
-    if (!splashDataLoading) {
-      setUniverseQuestionIsOpen()
+    if (isAdmin && !appMetaData?.title && !visible) {
+      open() // Open the onboarding modal if conditions are met
     }
-  }, [setUniverseQuestionIsOpen, splashDataLoading])
+  }, [isAdmin, appMetaData?.title, open, visible])
+
+  useEffect(() => {
+    if (!splashDataLoading && !visible) {
+      setUniverseQuestionIsOpen() // Set universe question open only if onboarding is not visible
+    }
+  }, [setUniverseQuestionIsOpen, splashDataLoading, visible])
 
   return (
     <>
@@ -336,22 +346,25 @@ export const App = () => {
       <Leva hidden={!isDevelopment || true} isRoot />
 
       <Suspense fallback={<div>Loading...</div>}>
-        {!splashDataLoading ? (
-          <Wrapper direction="row">
-            <FormProvider {...form}>
-              <LazyMainToolbar />
-              {!universeQuestionIsOpen && <LazySideBar />}
-              <LazyUniverse />
-              <Overlay />
-              <AppBar />
-              <Version>v{version}</Version>
-              <ActionsToolbar />
-            </FormProvider>
-
-            <ModalsContainer />
-            <Toasts />
-          </Wrapper>
-        ) : null}
+        {!splashDataLoading &&
+          (visible ? (
+            <OnboardingModal /> // Show OnboardingModal if visible
+          ) : (
+            <Wrapper direction="row">
+              <FormProvider {...form}>
+                <LazyMainToolbar />
+                {!universeQuestionIsOpen && <LazySideBar />}
+                <LazyUniverse />
+                <Overlay />
+                <AppBar />
+                <Version>v{version}</Version>
+                <ActionsToolbar />
+              </FormProvider>
+
+              <ModalsContainer />
+              <Toasts />
+            </Wrapper>
+          ))}
       </Suspense>
     </>
   )
diff --git a/src/components/AppContainer/index.tsx b/src/components/AppContainer/index.tsx
index a491f866a..5fb15f96b 100644
--- a/src/components/AppContainer/index.tsx
+++ b/src/components/AppContainer/index.tsx
@@ -1,40 +1,24 @@
-import { lazy, Suspense, useEffect } from 'react'
+import { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import { useAppStore } from '~/stores/useAppStore'
-import { useModal } from '~/stores/useModalStore'
-import { useUserStore } from '~/stores/useUserStore'
+
 import { E2ETests } from '~/utils'
 import { AppProviders } from '../App/Providers'
 import { AuthGuard } from '../Auth'
-import { OnboardingModal } from '../ModalsContainer/OnboardingFlow'
 
 const LazyApp = lazy(() => import('../App').then(({ App }) => ({ default: App })))
 
 export const AppContainer = () => {
   const App = <LazyApp />
-  const [isAdmin] = useUserStore((s) => [s.isAdmin, s.setPubKey])
-  const { open, visible } = useModal('onboardingFlow')
-  const { appMetaData } = useAppStore((s) => s)
-
-  useEffect(() => {
-    if (isAdmin && !appMetaData?.title && !visible) {
-      open()
-    }
-  }, [isAdmin, appMetaData?.title, open, visible])
 
   return (
     <AppProviders>
       <Suspense fallback={<div>Loading...</div>}>
         <AuthGuard>
-          {visible ? (
-            <OnboardingModal />
-          ) : (
-            <Routes>
-              <Route element={App} path="/" />
-              <Route element={App} path="/search" />
-              <Route element={App} path="*" />
-            </Routes>
-          )}
+          <Routes>
+            <Route element={App} path="/" />
+            <Route element={App} path="/search" />
+            <Route element={App} path="*" />
+          </Routes>
         </AuthGuard>
       </Suspense>
       <E2ETests />
diff --git a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
index 171d669a1..5331ec103 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 data-testid="onboarding-title">Welcome to SecondBrain!</StyledText>
+        <StyledText>Welcome to SecondBrain!</StyledText>
         <StyledSubText>Set a name and short description for your graph.</StyledSubText>
       </Flex>
 
       <StyledWrapper>
         <Flex className="input__wrapper">
           <TextInput
-            id="cy-graph-title-id"
+            id="graph-title"
             label="Title"
             maxLength={50}
             name="title"
@@ -58,7 +58,7 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
             }}
           />
           <TextInput
-            id="cy-graph-description-id"
+            id="graph-description"
             label="Description"
             maxLength={100}
             name="description"
@@ -78,7 +78,6 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
         <Button
           color="secondary"
           disabled={isSubmitting || !!error || !isFormValid}
-          id="onboarding-confirm-cta"
           onClick={onSubmit}
           size="large"
           variant="contained"