wadedesir · wadedesir · Feb 6, 2024 · Feb 6, 2024
diff --git a/frontend/README.md b/frontend/README.md
@@ -77,29 +77,93 @@ Note: You can run `npx eslint --fix .` while in the frontend directory to automa
 #### Test
 #### Test
 
-### Component: Login
-#### Test
-#### Test
+### LoginForm Component
+#### Test #1: Renders LoginForm component
+Ensures that the LoginForm component renders inputs for "Username" and "Password" along with a login button.
+https://github.com/wadedesir/notes-app/blob/8a2b94eb8af7730bd972c8e6c4635fe0c17d6489/frontend/__tests__/LoginForm.test.js#L13-L34
+
+#### Test #2: Calls authenticate function on click event
+Verifies that the authenticate function is called when the login button is clicked.
+https://github.com/wadedesir/notes-app/blob/8a2b94eb8af7730bd972c8e6c4635fe0c17d6489/frontend/__tests__/LoginForm.test.js#L59-L64
+
+### Test #3: Calls setUsername with value from username input
+Ensures that the setUsername function is called with the correct value when there is a change in the "Username" input.
+https://github.com/wadedesir/notes-app/blob/8a2b94eb8af7730bd972c8e6c4635fe0c17d6489/frontend/__tests__/LoginForm.test.js#L66-L74
+
+### Test #4: Calls setPassword with value from password input
+Validates that the setPassword function is called with the correct value when there is a change in the "Password" input.
+https://github.com/wadedesir/notes-app/blob/8a2b94eb8af7730bd972c8e6c4635fe0c17d6489/frontend/__tests__/LoginForm.test.js#L76-L84
 
 ### Component: Note
 #### Test
 #### Test
 
-### Component: SignUpForm
-#### Test
-#### Test
+### SignUp Form Component
+#### Test #1: Renders SignUpForm component
+Ensures that the SignUpForm component is rendered successfully by checking for the presence of input placeholders for "Username," "Password," and "Confirm password."
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUpForm.test.js#L7-L12
+
+#### Test #2: Displays error message for mismatched passwords
+Verifies that the SignUpForm component displays an error message when the passwords provided do not match. The test simulates user input, triggering the error message to appear, and checks if it is rendered.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUpForm.test.js#L15-L30
+
+#### Test #3: Does not display error message when passwords match
+Ensures that the SignUpForm component does not display an error message when the provided passwords match. The test confirms that the error message disappears when passwords are identical.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUpForm.test.js#L33-L50
+
+#### Test #4: Calls authenticate function when passwords match and button is clicked
+Verifies that the SignUpForm component calls the authenticate function when the passwords match, and the submit button is clicked. The test uses a mock authenticate function and checks if it is called exactly once.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUpForm.test.js#L53-L75
+
+### Test #5: Does not call authenticate if passwords do not match
+Ensures that the SignUpForm component does not call the authenticate function if the passwords do not match. The test sets up a scenario where passwords mismatch, clicks the submit button, and checks that the authenticate function is not called.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUpForm.test.js#L77-L96
 
 ### Page: Home
 #### Test
 #### Test
 
-### Page: Login
-#### Test
-#### Test
+### Login Page
+#### Test #1: Renders Login component
+Verifies that the Login component is rendered successfully.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L13-L15
 
-### Page: SignUp page
-#### Test
-#### Test
+#### Test #2: Renders Login component with logo
+Ensures that the Login component displays the logo with the correct styling by checking for the presence of the logo and confirming it has the expected class names.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L18-L23
+
+#### Test #3: Renders login form with input fields
+Validates that the login form within the Login component renders input fields for "Username" and "Password," along with a login button.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L26-L35
+
+#### Test #4: Renders link to sign up page
+Ensures that the Login component renders a link to the sign-up page.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L38-L44
+
+#### Test #5: Correct credentials trigger successful login
+Tests the Login component's response to correct credentials, triggering a successful login. This test simulates user input, mocks a successful response from the server, and checks if the login call was made with the correct credentials.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L46-L69
+
+#### Test #6: Wrong credentials result do not log in
+Verifies that incorrect credentials do not lead to a successful login. This test simulates user input, mocks a failed response from the server, and checks if the login call was made.
+https://github.com/wadedesir/notes-app/blob/a14b8cd7519d57ebd33cd54b5380679df39ebda7/frontend/__tests__/Login.test.js#L71-L90
+
+### SignUp Page
+#### Test #1: Renders SignUp component
+Ensures that the SignUp component is rendered successfully by checking for the presence of the "Already have an account?" text.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUp.test.js#L9-L14
+
+#### Test #2: Renders SignUp component with logo
+Ensures that the SignUp component displays the logo with the correct styling by checking for the presence of the logo and confirming it has the expected class names.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUp.test.js#L17-L22
+
+#### Test #3: Form submission with valid data and successful response
+Ensures that the SignUp component handles form submission correctly with valid data and responds appropriately. This test simulates user input, triggers a form submission, and mocks a successful response from the server. It checks if the navigation to the login page is triggered after a successful signup.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUp.test.js#L25-L48
+
+#### Test #4: Wrong credentials result in failure
+Ensures that the SignUp component handles incorrect credentials properly. This test simulates user input with incorrect credentials, triggers a form submission, and mocks a response from the server indicating a failure (status code 400). The test checks if the axios.post method was called, indicating that a login attempt was made with wrong credentials.
+https://github.com/wadedesir/notes-app/blob/3a93fc3bcdd5559d8a17ec374169f79dcd60cb86/frontend/__tests__/SignUp.test.js#L50-L71
 
 ### App
 #### Test

diff --git a/frontend/__tests__/Login.test.js b/frontend/__tests__/Login.test.js
@@ -88,74 +88,4 @@ describe('Login Component', () => {
     expect(axios.post.mock.calls.length).toBeGreaterThan(0)
 
   })
-
-
-
-  // TEST #5
-  // test('form submission with valid data and successful response', async () => {
-  //   axios.post.mockResolvedValue({
-  //     status: 200,
-  //     data: { token: 'dummyToken' },
-  //   })
-
-  //   render(<MemoryRouter><Login /></MemoryRouter>)
-
-  //   // Simulate user input
-  //   const usernameInput = screen.getByPlaceholderText('Username')
-  //   const passwordInput = screen.getByPlaceholderText('Password')
-
-  //   fireEvent.change(usernameInput, { target: { value: 'username' } })
-  //   fireEvent.change(passwordInput, { target: { value: 'password' } })
-
-  //   // Simulate form submission
-  //   fireEvent.click(screen.getByRole('button', { name: 'Login' }))
-
-  //   // Wait for axios post call to be made
-  //   await waitFor(() => expect(axios.post).toHaveBeenCalledWith(
-  //     'http://localhost:8420/v1/login',
-  //     { username: 'username', password: 'password' }
-  //   ))
-
-  //   // Wait for the navigation to complete
-  //   await waitFor(() => {
-  //     // Try finding the element by data-testid
-  //     const homeComponent = screen.queryByTestId('home-component')
-  //     expect(homeComponent).toBeInTheDocument()
-  //   }, { timeout: 5000 })
-  // })
-
-    // TEST #7
-    // test('form submission with valid data and unsuccessful response', async () => {
-    //   // Mock axios.post to reject with an unsuccessful response
-    //   axios.post.mockRejectedValue({
-    //     response: {
-    //       status: 401,
-    //       data: { error: 'Authentication failed' }, // Add an error message similar to a real response
-    //     },
-    //   })
-
-    //   render(<MemoryRouter><Login /></MemoryRouter>)
-
-    //   // Simulate user input
-    //   const usernameInput = screen.getByPlaceholderText('Username')
-    //   const passwordInput = screen.getByPlaceholderText('Password')
-
-    //   fireEvent.change(usernameInput, { target: { value: 'username' } })
-    //   fireEvent.change(passwordInput, { target: { value: 'password' } })
-
-    //   // Simulate form submission
-    //   fireEvent.click(screen.getByRole('button', { name: 'Login' }))
-
-    //   // Wait for axios post call to be made
-    //   await waitFor(() => expect(axios.post).toHaveBeenCalledWith(
-    //     'http://localhost:8420/v1/login',
-    //     { username: 'username', password: 'password' }
-    //   ))
-
-    //   // Wait for the error message to be displayed
-    //   waitFor(() => {
-    //     const errorMessage = screen.getByText('Authentication failed')
-    //     expect(errorMessage).toBeInTheDocument()
-    //   }, { timeout: 10000 })
-    // })
 })
diff --git a/frontend/__tests__/LoginForm.test.js b/frontend/__tests__/LoginForm.test.js
@@ -1,88 +1,83 @@
 import React from "react"
 import "@testing-library/jest-dom"
-import { fireEvent, render, screen} from "@testing-library/react"
+import { fireEvent, render, screen } from "@testing-library/react"
 import LoginForm from "../src/components/LoginForm"
 
 describe("Tests for LoginForm Component", () => {
-    //Mocks for setter and authenticate functions
-    let mockSetUsername = jest.fn()
-    let mockSetPassword = jest.fn()
-    let mockAuth = jest.fn()
+  //Mocks for setter and authenticate functions
+  let mockSetUsername = jest.fn()
+  let mockSetPassword = jest.fn()
+  let mockAuth = jest.fn()
 
-    describe("Tests for Rendering Login Form", () => {
-        test("component should have inputs and button", () => {
-            render(
-                <LoginForm
-                    username=""
-                    password=""
-                    setUsername={mockSetUsername}
-                    setPassword={mockSetPassword}
-                    authenticate={mockAuth}
-                    type="Login"
-                />
-            )
+  describe("Tests for Rendering Login Form", () => {
+    test("component should have inputs and button", () => {
+      render(
+        <LoginForm
+          username=""
+          password=""
+          setUsername={mockSetUsername}
+          setPassword={mockSetPassword}
+          authenticate={mockAuth}
+          type="Login"
+        />
+      )
 
-            const usernameInput = screen.getByPlaceholderText("Username")
-            const passwordInput = screen.getByPlaceholderText("Password")
-            const loginButton = screen.getByText("Login")
-
-            //Assertions
-            expect(usernameInput).toBeInTheDocument()
-            expect(passwordInput).toBeInTheDocument()
-            expect(loginButton).toBeInTheDocument()
-
-        })
-
+      const usernameInput = screen.getByPlaceholderText("Username")
+      const passwordInput = screen.getByPlaceholderText("Password")
+      const loginButton = screen.getByText("Login")
 
+      //Assertions
+      expect(usernameInput).toBeInTheDocument()
+      expect(passwordInput).toBeInTheDocument()
+      expect(loginButton).toBeInTheDocument()
     })
-
-    describe("Tests for LoginForm Interactions", () => {
-        //Render the loginform into container appended to document.body before each of the following tests
-        beforeEach(() => {
-            render(
-                <LoginForm
-                    username=""
-                    password=""
-                    setUsername={mockSetUsername}
-                    setPassword={mockSetPassword}
-                    authenticate={mockAuth}
-                    type="Login"
-                />
-            )
-        })
-
-        //Clear mocks after each test 
-        afterEach(() => {
-            jest.clearAllMocks()
-        })
-
-        test("should call authenticate function on click event", async () => {
-            const loginButton = screen.getByText("Login")
-            fireEvent.click(loginButton)
-
-            expect(mockAuth).toHaveBeenCalledTimes(1)
-        })
-
-        test("should call setUsername with value from username input", () => {
-            const usernameInput = screen.getByPlaceholderText("Username")
-            const testUserName = "Test_User"
-
-            fireEvent.change(usernameInput, {target: {value: testUserName}})
-
-            expect(mockSetUsername).toHaveBeenCalledTimes(1)
-            expect(mockSetUsername).toHaveBeenCalledWith(testUserName)
-        })
-
-        test("should call setPassword with value from password input", () => {
-            const passwordInput = screen.getByPlaceholderText("Password")
-            const testPassword = "Test_Password"
-
-            fireEvent.change(passwordInput, {target: {value: testPassword}})
-
-            expect(mockSetPassword).toHaveBeenCalledTimes(1)
-            expect(mockSetPassword).toHaveBeenCalledWith(testPassword)
-        })
+  })
 
+  describe("Tests for LoginForm Interactions", () => {
+    //Render the loginform into container appended to document.body before each of the following tests
+    beforeEach(() => {
+      render(
+        <LoginForm
+          username=""
+          password=""
+          setUsername={mockSetUsername}
+          setPassword={mockSetPassword}
+          authenticate={mockAuth}
+          type="Login"
+        />
+      )
     })
-
+
+    //Clear mocks after each test 
+    afterEach(() => {
+      jest.clearAllMocks()
+    })
+
+    test("should call authenticate function on click event", async () => {
+      const loginButton = screen.getByText("Login")
+      fireEvent.click(loginButton)
+
+      expect(mockAuth).toHaveBeenCalledTimes(1)
+    })
+
+    test("should call setUsername with value from username input", () => {
+      const usernameInput = screen.getByPlaceholderText("Username")
+      const testUserName = "Test_User"
+
+      fireEvent.change(usernameInput, { target: { value: testUserName } })
+
+      expect(mockSetUsername).toHaveBeenCalledTimes(1)
+      expect(mockSetUsername).toHaveBeenCalledWith(testUserName)
+    })
+
+    test("should call setPassword with value from password input", () => {
+      const passwordInput = screen.getByPlaceholderText("Password")
+      const testPassword = "Test_Password"
+
+      fireEvent.change(passwordInput, { target: { value: testPassword } })
+
+      expect(mockSetPassword).toHaveBeenCalledTimes(1)
+      expect(mockSetPassword).toHaveBeenCalledWith(testPassword)
+    })
+  })
 })
diff --git a/frontend/__tests__/SignUp.test.js b/frontend/__tests__/SignUp.test.js
@@ -47,6 +47,7 @@ describe('SignUp Component', () => {
     expect(loginLink).toHaveAttribute('href', '/login')
   })
 
+  // TEST #4
   test("wrong credentials result in failure", async () => {
 
     axios.post.mockResolvedValueOnce({ status: 400 })

diff --git a/frontend/__tests__/SignUpForm.test.js b/frontend/__tests__/SignUpForm.test.js
@@ -74,6 +74,7 @@ describe('SignUpForm component', () => {
     expect(mockAuthenticate).toHaveBeenCalledTimes(1)
   })
 
+  // TEST #5
   test('does not call authenticate if passwords do not match', () => {
     const mockAuthenticate = jest.fn()