From 4b4ebff2d5271038e4af45a3f912c3d2a527332d Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Sun, 27 Oct 2024 18:32:02 +0500
Subject: [PATCH] fix(unit): test

---
 .../OnboardingFlow/GraphDetailsStep/index.tsx |   3 +-
 .../OnboardingFlow/__tests__/index.tsx        | 120 ++++++++++++++++++
 2 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ModalsContainer/OnboardingFlow/__tests__/index.tsx

diff --git a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
index 105275862..007ba80ac 100644
--- a/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
+++ b/src/components/ModalsContainer/OnboardingFlow/GraphDetailsStep/index.tsx
@@ -36,7 +36,7 @@ export const GraphDetailsStep: FC<Props> = ({ onSubmit, error }) => {
 
   return (
     <Flex>
-      <Flex align="center" direction="column" justify="center">
+      <Flex direction="column" justify="space-between">
         <StyledText>Welcome to SecondBrain</StyledText>
         <StyledSubText>Set a name and short description for your graph.</StyledSubText>
       </Flex>
@@ -101,7 +101,6 @@ const StyledText = styled(Text)`
   font-size: 22px;
   font-weight: 600;
   font-family: 'Barlow';
-  text-align: center;
   margin-bottom: 10px;
 `
 
diff --git a/src/components/ModalsContainer/OnboardingFlow/__tests__/index.tsx b/src/components/ModalsContainer/OnboardingFlow/__tests__/index.tsx
new file mode 100644
index 000000000..520e1c7c2
--- /dev/null
+++ b/src/components/ModalsContainer/OnboardingFlow/__tests__/index.tsx
@@ -0,0 +1,120 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { postAboutData } from '~/network/fetchSourcesData'
+import { useModal } from '~/stores/useModalStore'
+import { OnboardingModal } from '../index'
+
+jest.mock('~/network/fetchSourcesData', () => ({
+  postAboutData: jest.fn(),
+}))
+
+jest.mock('~/stores/useModalStore', () => ({
+  useModal: jest.fn(),
+}))
+
+const useModalMock = useModal as jest.MockedFunction<typeof useModal>
+const postAboutDataMock = postAboutData as jest.MockedFunction<typeof postAboutData>
+
+describe('OnboardingModal Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    useModalMock.mockReturnValue({
+      close: jest.fn(),
+      visible: true,
+    })
+  })
+
+  test('renders the onboarding modal', () => {
+    render(<OnboardingModal />)
+    expect(screen.getByText('Welcome to SecondBrain')).toBeInTheDocument()
+    expect(screen.getByText('Set a name and short description for your graph.')).toBeInTheDocument()
+  })
+
+  test('submits form successfully', async () => {
+    postAboutDataMock.mockResolvedValue({ status: 'success' })
+
+    render(<OnboardingModal />)
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph title here...'), { target: { value: 'Test Title' } })
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph description here...'), {
+      target: { value: 'Test Description' },
+    })
+
+    fireEvent.click(screen.getByText('Confirm'))
+
+    await waitFor(() => {
+      expect(postAboutDataMock).toHaveBeenCalledWith({
+        title: 'Test Title',
+        description: 'Test Description',
+      })
+    })
+  })
+
+  test('displays error on form submission failure', async () => {
+    postAboutDataMock.mockRejectedValue({ status: 400, json: async () => ({ errorCode: 'Error occurred' }) })
+
+    render(<OnboardingModal />)
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph title here...'), { target: { value: 'Test Title' } })
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph description here...'), {
+      target: { value: 'Test Description' },
+    })
+
+    fireEvent.click(screen.getByText('Confirm'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Error occurred')).toBeInTheDocument()
+    })
+  })
+
+  test('closes modal on successful submission', async () => {
+    const closeMock = jest.fn()
+
+    useModalMock.mockReturnValue({
+      close: closeMock,
+      visible: true,
+    })
+
+    postAboutDataMock.mockResolvedValue({ status: 'success' })
+
+    render(<OnboardingModal />)
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph title here...'), { target: { value: 'Test Title' } })
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph description here...'), {
+      target: { value: 'Test Description' },
+    })
+
+    fireEvent.click(screen.getByText('Confirm'))
+
+    await waitFor(() => {
+      expect(closeMock).toHaveBeenCalled()
+    })
+  })
+
+  test('resets form and error on modal close', async () => {
+    const { rerender } = render(<OnboardingModal />)
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph title here...'), { target: { value: 'Test Title' } })
+
+    fireEvent.change(screen.getByPlaceholderText('Type graph description here...'), {
+      target: { value: 'Test Description' },
+    })
+
+    useModalMock.mockReturnValue({
+      close: jest.fn(),
+      visible: false,
+    })
+
+    rerender(<OnboardingModal />)
+
+    waitFor(() => {
+      expect(screen.getByPlaceholderText('Type graph title here...')).toHaveValue('')
+      expect(screen.getByPlaceholderText('Type graph description here...')).toHaveValue('')
+    })
+  })
+})