Fixed registration workflow

__test__/screens/Registration/InformationScreen/InformationScreen.test.tsx

@@ -3,6 +3,8 @@ import { render, fireEvent } from "@testing-library/react-native"
 import InformationScreen from "../../../../screens/Registration/InformationScreen/InformationScreen"
 import { SafeAreaProvider } from "react-native-safe-area-context"
 import { RegistrationContext } from "../../../../contexts/RegistrationContext"
+import { showErrorToast } from "../../../../components/ToastMessage/toast"
+import { Keyboard } from "react-native"
 
 const mockNavigate = jest.fn()
 jest.mock("@react-navigation/native", () => {
@@ -29,10 +31,14 @@ jest.mock("../../../../components/ToastMessage/toast", () => ({
 }))
 
 describe("Information Screen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it("renders all input fields and buttons", () => {
     const providerProps = {
-      selectedInterests: ["one"], 
-      setSelectedInterests: jest.fn(), 
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
       description: "",
       setDescription: jest.fn(),
       firstName: "",
@@ -44,6 +50,7 @@ describe("Information Screen", () => {
       location: "",
       setLocation: jest.fn(),
     }
+
     const { getByPlaceholderText, getByText } = render(
       <SafeAreaProvider>
         <RegistrationContext.Provider value={providerProps}>
@@ -64,10 +71,103 @@ describe("Information Screen", () => {
     expect(getByText("Add a description now"))
   })
 
+  it("opens the date picker modal and sets hasBeenTouched to true when the Date of Birth section is pressed", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "",
+      setFirstName: jest.fn(),
+      lastName: "",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+    const { getByText, queryByText } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    const dobSection = getByText("Date of Birth*")
+    fireEvent.press(dobSection)
+
+    // Verify the date modal is opened
+    expect(queryByText("JJ.MM.YYYY")).toBeFalsy() // The placeholder text should no longer be there
+
+    // Since we don't have a direct way to check if date picker modal is opened,
+    // we use the fact that the modal should be visible after onPress is called.
+    expect(queryByText("JJ.MM.YYYY")).toBeNull() // Placeholder should change after modal opens
+  })
+
+  it("renders the TouchableWithoutFeedback component", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "",
+      setFirstName: jest.fn(),
+      lastName: "",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+    const { getByTestId } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    expect(getByTestId("information-screen")).toBeTruthy()
+  })
+
+  it("dismisses the keyboard when TouchableWithoutFeedback is pressed", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "",
+      setFirstName: jest.fn(),
+      lastName: "",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+
+    // Mock Keyboard.dismiss
+    const dismissSpy = jest.spyOn(Keyboard, "dismiss")
+
+    const { getByTestId } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    const touchableWithoutFeedback = getByTestId("information-screen")
+    fireEvent.press(touchableWithoutFeedback)
+
+    expect(dismissSpy).toHaveBeenCalled()
+  })
+
   it("navigates to description up screen on footer press", () => {
     const providerProps = {
-      selectedInterests: ["one"], 
-      setSelectedInterests: jest.fn(), 
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
       description: "",
       setDescription: jest.fn(),
       firstName: "",
@@ -94,8 +194,8 @@ describe("Information Screen", () => {
 
   it("doesn't go forward when name is not completed", () => {
     const providerProps = {
-      selectedInterests: ["one"], 
-      setSelectedInterests: jest.fn(), 
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
       description: "",
       setDescription: jest.fn(),
       firstName: "",
@@ -121,8 +221,8 @@ describe("Information Screen", () => {
 
   it("doesn't go forward when surname is not completed", () => {
     const providerProps = {
-      selectedInterests: ["one"], 
-      setSelectedInterests: jest.fn(), 
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
       description: "",
       setDescription: jest.fn(),
       firstName: "name",
@@ -148,8 +248,8 @@ describe("Information Screen", () => {
 
   it("doesn't go forward when date is not completed", () => {
     const providerProps = {
-      selectedInterests: ["one"], 
-      setSelectedInterests: jest.fn(), 
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
       description: "",
       setDescription: jest.fn(),
       firstName: "name",
@@ -172,5 +272,93 @@ describe("Information Screen", () => {
     const NextButton = getByText("Next")
     fireEvent.press(NextButton)
   })
+  it("shows error toast when first name is missing", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "",
+      setFirstName: jest.fn(),
+      lastName: "last name",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+    const { getByText } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    const NextButton = getByText("Next")
+    fireEvent.press(NextButton)
+    expect(showErrorToast).toHaveBeenCalledWith(
+      "You need to input your first name!"
+    )
+  })
+
+  it("shows error toast when last name is missing", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "first name",
+      setFirstName: jest.fn(),
+      lastName: "",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+    const { getByText } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    const NextButton = getByText("Next")
+    fireEvent.press(NextButton)
+    expect(showErrorToast).toHaveBeenCalledWith(
+      "You need to input your last name!"
+    )
+  })
 
+  it("shows error toast when date of birth is not selected", () => {
+    const providerProps = {
+      selectedInterests: ["one"],
+      setSelectedInterests: jest.fn(),
+      description: "",
+      setDescription: jest.fn(),
+      firstName: "first name",
+      setFirstName: jest.fn(),
+      lastName: "last name",
+      setLastName: jest.fn(),
+      date: new Date(),
+      setDate: jest.fn(),
+      location: "",
+      setLocation: jest.fn(),
+    }
+    const { getByText } = render(
+      <SafeAreaProvider>
+        <RegistrationContext.Provider value={providerProps}>
+          <InformationScreen />
+        </RegistrationContext.Provider>
+      </SafeAreaProvider>
+    )
+
+    const NextButton = getByText("Next")
+    fireEvent.press(NextButton)
+    expect(showErrorToast).toHaveBeenCalledWith(
+      "You need to input your birth day!"
+    )
+  })
 })

components/InputField/styles.ts

@@ -6,7 +6,7 @@ const styles = StyleSheet.create({
     borderColor: lightGray,
     borderRadius: 25,
     borderWidth: 1,
-    height: 40,
+    height: 50,
     marginTop: 5,
     paddingHorizontal: 30,
     width: "100%",
@@ -19,14 +19,16 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
   },
   labelContainer: {
-    width: "100%"
+    width: "100%",
   },
   section: {
     alignItems: "center",
     flex: 1,
     justifyContent: "center",
     margin: 10,
+    marginVertical: 20,
     maxHeight: 70,
+    paddingHorizontal: 10,
   },
 })
 

screens/Registration/AuthenticationScreen/AuthenticationScreen.tsx

@@ -6,7 +6,7 @@ import {
   View,
   Keyboard,
   TextInput,
-  Dimensions,
+
 } from "react-native"
 import InputField from "../../../components/InputField/InputField"
 import styles from "./styles"
@@ -70,17 +70,14 @@ const AuthenticationScreen: React.FC = () => {
   }
 
   return (
-    <TouchableWithoutFeedback 
-    style={[
-      styles.container, 
-      {height: Dimensions.get('window').height + insets.bottom + insets.top}
-    ]}
-      onPress={() => Keyboard.dismiss()}>
+    <TouchableWithoutFeedback
+      style={styles.container}
+      onPress={() => Keyboard.dismiss()}
+    >
       <View
         style={[
           styles.view,
           { paddingBottom: insets.bottom, paddingTop: insets.top },
-          {height: Dimensions.get('window').height + insets.bottom + insets.top}
         ]}
       >
         <Image

screens/Registration/AuthenticationScreen/styles.ts

@@ -1,12 +1,17 @@
 import { StyleSheet } from "react-native"
-import { peach, lightPeach, shadowColor, white } from "../../../assets/colors/colors"
+import {
+  peach,
+  lightPeach,
+  shadowColor,
+  white,
+} from "../../../assets/colors/colors"
 
 import { BUTTON_RADIUS } from "../../../assets/global/constants"
 const styles = StyleSheet.create({
   absolute: {
     bottom: 0,
-    position: 'absolute',
-    width: '100%'
+    position: "absolute",
+    width: "100%",
   },
   button: {
     alignItems: "center",
@@ -27,9 +32,9 @@ const styles = StyleSheet.create({
     width: "60%",
   },
   container: {
-    alignContent: 'center',
+    alignContent: "center",
     backgroundColor: white,
-    flexDirection: 'column',
+    flexDirection: "column",
     marginLeft: 40,
     marginVertical: 10,
   },
@@ -59,8 +64,9 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
   view: {
-    backgroundColor: white
-  }
-}) 
+    backgroundColor: white,
+    height: "100%",
+  },
+})
 
 export default styles