Fix sign up form bug

src/components/Contexts/UserContext.jsx

@@ -26,6 +26,8 @@ export const UserProvider = ({ children }) => {
   }, []);
  
   const signIn = async (username, password) => {
+    let result = null;
+
     try {
       if (!username) throw new Error('Email is required');
       if (!password) throw new Error('Password is required');
@@ -33,7 +35,7 @@ export const UserProvider = ({ children }) => {
       setFetching(true);
       setError(null);
   
-      const result = await auth.signIn(username, password);
+      result = await auth.signIn(username, password);
 
       if (result.message) throw new Error(result.message);
       signedIn(result);
@@ -44,9 +46,13 @@ export const UserProvider = ({ children }) => {
     finally {
       setFetching(false);
     }
+
+    return result;
   };
 
   const signUp = async (username, password, confirmPassword) => {
+    let result = null;
+
     try {
       if (!username) throw new Error('Email is required');
       if (!password) throw new Error('Password is required');
@@ -55,7 +61,7 @@ export const UserProvider = ({ children }) => {
       setFetching(true);
       setError(null);
 
-      const result = await auth.signUp(username, password);
+      result = await auth.signUp(username, password);
       if (result.message) throw new Error(result.message);
     }
     catch (error) {
@@ -64,6 +70,26 @@ export const UserProvider = ({ children }) => {
     finally {
       setFetching(false);
     }
+
+    return result;
+  };
+
+  const signUpAndIn =  async (username, password, confirmPassword) => {
+    let result = null;
+
+    try {
+      result = await signUp(username, password, confirmPassword);
+      if (result.message) throw new Error(result.message);
+      result = await signIn(username, password);
+    }
+    catch (error) {
+      setError(error.message);
+    }
+    finally {
+      setFetching(false);
+    }
+
+    return result;
   };
 
   const signOut = async () => {
@@ -86,6 +112,7 @@ export const UserProvider = ({ children }) => {
       setError,
       signIn,
       signUp,
+      signUpAndIn,
       signOut,
     }}>
       {children}

src/components/Contexts/UserContext.test.jsx

@@ -19,7 +19,7 @@ describe("UseContext", () => {
             <button data-testid="signUpNoEmail" onClick={() => signUp("")}/>
             <button data-testid="signUpNoPassword" onClick={() => signUp("test@test.com", "")}/>
             <button data-testid="signUpBadConfirm" onClick={() => signUp("test@test.com", "password", "")}/>
-            <button data-testid="signUp" onClick={() => signUp("test@test.com", "password", "password")}/>          
+            <button data-testid="signUp" onClick={() => signUp("test@test.com", "password", "password")}/>        
           </>
         );
       };
@@ -60,10 +60,11 @@ describe("UseContext", () => {
     });
 
     it("Handle server error", async () => {
-      auth.setSignUpResponse({ message: "SERVER-ERROR", error: "ERR" });
+      auth.setSignInResponse({ message: "SIGN-IN-ERROR" })
+      auth.setSignUpResponse({ message: "SIGN-UP-ERROR", error: "ERR" });
       fireEvent.click(screen.getByTestId("signUp"));
       await waitFor(() => expect(screen.getByTestId("fetching").innerHTML).toEqual("false"));
-      expect(screen.getByTestId("error").innerHTML).toEqual("SERVER-ERROR");
+      expect(screen.getByTestId("error").innerHTML).toEqual("SIGN-UP-ERROR");
       auth.setSignUpResponse({});
     });
   });

src/components/Contexts/__mocks__/UserContext.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 let token = null;
 let fetching = false;
 let error = null;
+let signInResp = {};
+let signUpResp = {};
 
 export const UserProvider = ({ children }) => {
   return (
@@ -16,10 +18,13 @@ export const useUserContext = () => ({
   token,
   fetching,
   error,
-  setError: jest.fn(),
-  signIn: jest.fn(),
-  signUp: jest.fn(),
+  setError: jest.fn((value) => {
+    error = value;
+  }),
+  signIn: jest.fn(() => signInResp),
+  signUp: jest.fn(() => signUpResp),
   signOut: jest.fn(),
+  signUpAndIn: jest.fn(),
 });
 
 export const setToken = (val) => {
@@ -33,3 +38,7 @@ export const setFetching = (val) => {
 export const setError = (val) => {
   error = val;
 };
+
+export const setSignUpResp = (val) => {
+  signUpResp = val;
+};

src/components/SignUpForm/SignUpForm.test.jsx

@@ -1,14 +1,17 @@
 jest.mock("../Contexts/UserContext");
 
 import { BrowserRouter } from 'react-router-dom';
-import { render, cleanup } from "@testing-library/react"
+import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react";
 import SignUpForm from './index';
 
-describe("Sign Up Form", () => {
+describe.only("Sign Up Form", () => {
+
+  afterEach(() => {
+    cleanup();
+  });
 
   it("Should render", () => {
     const { container } = render(<BrowserRouter><SignUpForm /></BrowserRouter>);
     expect(container).toMatchSnapshot();
-    cleanup();
-  })
+  });
 })

src/components/SignUpForm/index.jsx

@@ -5,7 +5,7 @@ import useStyles from '../Styles';
 import { useUserContext }  from '../Contexts/UserContext';
 
 export default function SignInForm() {
-    const { signUp, signIn, fetching, setError } = useUserContext();
+    const { signUpAndIn, fetching, setError } = useUserContext();
     const classes = useStyles();
     const emailEl = useRef(null);
     const passwordEl = useRef(null);
@@ -16,8 +16,7 @@ export default function SignInForm() {
         const email = emailEl.current.value;
         const password = passwordEl.current.value;
         const confirm = confirmEl.current.value;
-        await signUp(email, password, confirm);
-        await signIn(email, password);
+        await signUpAndIn(email, password, confirm);
       }
       catch (e) {
         setError(e.message);