bug fixed

bugDescription.md

@@ -0,0 +1,23 @@
+# Bug Fix Documentation
+
+## Problem Overview  
+The login functionality in the `LoginForm` component was not behaving as expected. When users clicked the "Login" button, the page would reload and no login logic was triggered. This was due to the absence of an `onSubmit` event handler on the form.
+
+## Root Cause  
+By default, HTML forms trigger a full page reload on submission unless prevented. In this case, the form had no `onSubmit` handler, and the login data (`formData`) wasn’t being processed or passed to the parent component via the `onLogin` prop.
+
+## Resolution Steps  
+To resolve the issue:
+1. A `handleSubmitBtn` function was introduced to manage the form submission event.
+2. The function calls `e.preventDefault()` to block the default form behavior.
+3. The form data is then passed to the `onLogin` function received via props.
+4. The form tag was updated to use this handler for the `onSubmit` event.
+
+## Code Changes  
+In `LoginForm.js`, the following function was added:
+
+```javascript
+const handleSubmitBtn = (e) => {
+  e.preventDefault();
+  onLogin(formData);
+};

cypress/e2e/login.cy.js

@@ -1,2 +1,46 @@
 describe('Login Component', () => {
-}) 
+  //created users object for testing
+    const users = {
+      main: { name: 'swarnil', password: 'password@123' },
+      secondary: { name: 'testUser', password: 'password@1234' },
+    };
+
+    //visited the login page before each test case
+    beforeEach(() => {
+      cy.visit('/');
+    });
+
+  //checked the login form visibility and required inputs and submit button
+    it('should display the login form with required inputs and a submit button', () => {
+      cy.get('.login-form').should('be.visible');
+      cy.get('input[name="name"]').should('be.visible');
+      cy.get('input[name="password"]').should('be.visible').and('have.attr', 'type', 'password');
+      cy.get('button[type="submit"]').should('exist').and('contain', 'Login');
+    });
+
+    //checked the login functionality
+    it('should login with valid credentials and display welcome page', () => {
+      const { name, password } = users.main;
+
+      cy.get('input[name="name"]').type(name);
+      cy.get('input[name="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+      cy.get('.welcome-container').should('be.visible');
+      cy.get('h1').should('contain.text', `Welcome, ${name}`);
+    });
+
+    it('should display logout button after login', () => {
+      const { name, password } = users.secondary;
+
+      cy.get('input[name="name"]').type(name);
+      cy.get('input[name="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+
+      cy.get('.logout-button').should('be.visible').and('contain.text', 'Logout');
+
+      cy.get('.logout-button').click();
+      cy.get('.login-form').should('be.visible');
+
+    });
+  });
+

src/components/LoginForm.js

@@ -15,9 +15,14 @@ function LoginForm({ onLogin }) {
     }));
   };
 
+  const handleSubmitBtn = (e) => {
+    e.preventDefault();
+    onLogin(formData);
+  };
+
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form className="login-form" onSubmit={handleSubmitBtn}>
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>