emanabdeen test

README.md

@@ -96,3 +96,33 @@ This project uses Cypress for end-to-end testing. To run the tests:
 ## License
 
 This project is for testing purposes only and is not licensed for public use.
+
+---
+
+## Developer Notes
+
+**Name**: Eman Abdeen  
+**Challenge**: Junior Developer Challenge - Login Redirect Fix
+
+### Changes Implemented:
+1. **LoginForm.js**:
+   ```javascript
+   // Added form submission handler
+   const handleSubmit = (e) => {
+     e.preventDefault();
+     if (onLogin) onLogin(formData);
+     navigate('/welcome');
+   };
+   ```
+
+2. **App.js**:
+   ```javascript
+   // Wrapped app with Router
+   <Router>
+     <Routes>
+       {/* ... routes ... */}
+     </Routes>
+   </Router>
+   ```
+
+**Testing**: All Cypress tests now pass (redirect verification)

cypress/e2e/login.cy.js

@@ -1,2 +1,48 @@
 describe('Login Component', () => {
+
+    beforeEach(() => {
+        cy.visit('http://localhost:3000');
+
+        // Handle uncaught exceptions once for all tests
+        cy.once('uncaught:exception', () => false);
+    });
+
+    it('should have correct page title and heading', () => {
+        cy.title().should('eq', 'React App'); 
+        cy.get('h2').should('contain', 'Login'); 
+    });
+
+    it('should have correct login form structure', () => {
+        // Check form exists
+        cy.get('form.login-form').should('exist');
+
+        // Check name field
+        cy.get('#name').should('have.attr', 'type', 'text').and('have.attr', 'required');
+
+        // Check password field
+        cy.get('#password').should('have.attr', 'type', 'password').and('have.attr', 'required');
+
+        // Check submit button
+        cy.get('.login-button').should('contain', 'Login');
+
+    });
+
+    it('should allow login and redirect', () => {
+        // Fill and submit form
+        cy.get('#name').type('testuser');
+        cy.get('#password').type('password123');
+        cy.get('.login-button').click();
+
+        // Check redirect
+        cy.url().should('include', '/welcome');
+        cy.contains('Welcome, testuser!');
+
+        // Logout
+        cy.get('.logout-button').click();
+
+        // Verify back to login
+        cy.url().should('not.include', '/welcome');
+        cy.get('.login-form').should('exist');
+    });
+
 }) 

package.json

@@ -9,7 +9,8 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^7.6.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import './App.css';
 import LoginForm from './components/LoginForm';
 import Welcome from './components/Welcome';
@@ -19,13 +20,33 @@ function App() {
   };
 
   return (
-    <div className="App">
-      {isLoggedIn ? (
-        <Welcome userName={userName} onLogout={handleLogout} />
-      ) : (
-        <LoginForm onLogin={handleLogin} />
-      )}
-    </div>
+    <Router>  
+      <div className="App">
+        <Routes>  
+          <Route 
+            path="/" 
+            element={
+              !isLoggedIn ? (
+                <LoginForm onLogin={handleLogin} />
+              ) : (
+                <Welcome userName={userName} onLogout={handleLogout} />
+              )
+            } 
+          />
+          <Route 
+            path="/welcome" 
+            element={
+              isLoggedIn ? (
+                <Welcome userName={userName} onLogout={handleLogout} />
+              ) : (
+                <Navigate to="/" replace />  
+              )
+            } 
+          />
+        </Routes>
+      </div>
+    </Router>
+
   );
 }
 

src/components/LoginForm.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import './LoginForm.css';
 
 function LoginForm({ onLogin }) {
@@ -7,6 +8,8 @@ function LoginForm({ onLogin }) {
     password: ''
   });
 
+  const navigate = useNavigate();
+
   const handleChange = (e) => {
     const { name, value } = e.target;
     setFormData(prevState => ({
@@ -15,9 +18,15 @@ function LoginForm({ onLogin }) {
     }));
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onLogin) onLogin(formData);
+    navigate('/welcome');  // Redirect to welcome page
+  };
+
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form className="login-form" onSubmit={handleSubmit}>
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>