Frenzy117 test

cypress/e2e/login.cy.js

@@ -1,2 +1,16 @@
 describe('Login Component', () => {
+    //changed this from "Logs in Succesfully" to add some light hearted humor hehe.
+    it("I'm getting the job lesgoo",() => {
+        cy.visit('http://localhost:3000/login')
+        cy.get('input[name="name"]')//get the name input field
+        cy.get('input[name="password"]')//get the password input field
+        cy.get('input[name="name"]').type('testuser')
+        cy.get('input[name="password"]').type('testpassword')// fill both up with user and pass
+        cy.get('button[type="submit"]').click()//click the login button
+        cy.get('.welcome-container').should('exist')//welcome page should be rendered, since this is the class of the main container
+        //didn't really go for getting the url since after doing heavy editting, I figured the URL doesn't change
+        //and that there's no explicit paths set for each of the pages
+
+        //this should be enough for the entire flow.
+    })
 }) 

src/App.js

@@ -10,15 +10,34 @@ function App() {
   const handleLogin = (formData) => {
     // In a real app, you would validate credentials here
     setIsLoggedIn(true);
-    setUserName(formData.name);
+    setUserName(formData.name);//this wont be called since onLogin is never called in the first place
   };
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-    setUserName('');
+    setUserName(''); //nothing to change or worry about here
   };
 
+  /*
+  The issue with this app was that the Login page, and the main page (<App/>) in which the login form is rendered, were not connected. 
+  So they were not really communicating. My first gaze went to how the parameter functions were being called. 
+  In this case, they were not being called at all. 
+  Then in the Login component/ file, I noticed that onLogin was never called. 
+  I tried playing around with how to call it and see what is its scope in the file. 
+  Secondly, the submit button and the form were not connected either, since there was no onSubmit as a param for the <form> component.
+  I added changes so that the form is properly submitted, after gaining insights from chatGPT about form submissions in React and digging up code from my past experience.
+
+  Github Copilot has been trying so hard to complete all my code, and as tempting as it was, I decided to not use it and actually learn Cypress.
+
+  Summary: 
+  Issue: <LoginForm/> and <App/> were not connected. onLogin in <LoginForm/> was not being called from <App/>, preventing navigation to the Welcome screen.
+  Solution: Added proper submission handling to the <form> in <LoginForm/>, while also ensuring onLogin, the main connecting function, is called.
+
+  References: Google Chrome DevTools, Gemini enabled debugging, and ChatGPT.
+  link: https://chatgpt.com/share/682bfd97-e688-8007-b54b-374a00786976
+  */
   return (
+
     <div className="App">
       {isLoggedIn ? (
         <Welcome userName={userName} onLogout={handleLogout} />

src/components/LoginForm.js

@@ -2,6 +2,12 @@ import React, { useState } from 'react';
 import './LoginForm.css';
 
 function LoginForm({ onLogin }) {
+
+  //Cypress put the inputs in correctly and clicjed the button. but nothing happened, even through the user information was passed correctly
+  //So far, onLogin is not being used or called.
+  //therefore, no connection between the main App, the Login Form, and the Welcome screens.
+  //<App/> doesn't know we have logged in. So state/ page doesn't change
+
   const [formData, setFormData] = useState({
     name: '',
     password: ''
@@ -14,13 +20,23 @@ function LoginForm({ onLogin }) {
       [name]: value
     }));
   };
+  //finally caling onLogin through the button. This SHOULD make the Login page talk to the App page. The button also has a function now.
+    const handleSubmit = (e) => {
+    e.preventDefault();
+    onLogin(formData);
+  };
+
 
   return (
     <div className="login-form-container">
-      <form className="login-form">
+
+      {/* Got the approach from chatGPT on how basic form submissions are handled*/}
+      {/* The form is supposed to be submitted, not the button. MAJOR red flag here. */}
+      <form className="login-form" onSubmit={handleSubmit}>
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>
+          {/* tried playing around with the name, 'id' fields to see if the Cypress script and handleChange is getting the values passed correctly */}
           <input
             type="text"
             id="name"
@@ -41,7 +57,7 @@ function LoginForm({ onLogin }) {
             required
           />
         </div>
-        <button type="submit" className="login-button">
+        <button type="submit" className="login-button">{/* no action when clicked??? How is the form submitted then?*/}
           Login
         </button>
       </form>