sule12 test

cypress/e2e/login.cy.js

@@ -1,2 +1,45 @@
 describe('Login Component', () => {
+    beforeEach(() => {
+        cy.visit('/');
+      });
+
+      it('should render name and password inputs and login button', () => {
+        cy.get('input[name="name"]').should('exist');
+        cy.get('input[name="password"]').should('exist');
+        cy.get('button[type="submit"]').should('exist');
+
+
+    });
+    it('prevents submission when input fields are empty', () => {
+        cy.get('button[type="submit"]').click();
+        cy.get('input[name="name"]').then($input => {
+            expect($input[0].checkValidity()).to.be.false;
+          });
+
+        cy.get('input[name="password"]').then($input => {
+            expect($input[0].checkValidity()).to.be.false;
+          });
+
+    });
+
+    it('logs in successfully with valid credentials and redirects', () => {
+        cy.visit('/');
+
+        cy.get('input[name="name"]').type('suleiman');
+        cy.get('input[name="password"]').type('suleimanpassword');
+        cy.get('button[type="submit"]').click();
+
+        cy.contains('Welcome, suleiman!').should('exist');
+
+
+      });
+
+    it('shows error or blocks login with invalid credentials', () => {
+        cy.get('input[name="name"]').type('wronguser');
+        cy.get('input[name="password"]').type('wrongpass');
+        cy.get('button[type="submit"]').click();
+
+        cy.contains('Welcome').should('not.exist');
+    });
+
 }) 

src/App.js

@@ -9,8 +9,13 @@ function App() {
 
   const handleLogin = (formData) => {
     // In a real app, you would validate credentials here
-    setIsLoggedIn(true);
-    setUserName(formData.name);
+    if (formData.name === 'suleiman' && formData.password === 'suleimanpassword'){
+      setIsLoggedIn(true);
+      setUserName(formData.name);
+    } else {
+      alert('You have provided invalid credentials')
+    }
+
   };
 
   const handleLogout = () => {

src/components/LoginForm.js

@@ -15,9 +15,15 @@ function LoginForm({ onLogin }) {
     }));
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault(); 
+    onLogin(formData);  
+  };
+
+
   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>

submission_notes.md

@@ -0,0 +1,9 @@
+The redirect after login wasn’t working because the form in LoginForm.js didn’t have an onSubmit handler. As a result, the handleSubmit function never ran, and the onLogin function wasn’t triggered.
+
+I fixed the issue by adding onSubmit={handleSubmit} to the <form> tag, which ensures the login logic is executed and the app transitions to the welcome screen upon successful login.
+
+AI Usage
+prompt:
+I keep getting this "Cypress could not verify that this server is running:
+
+http://localhost:3000 even though the app is running".