akhil298 test

cypress/e2e/login.cy.js

@@ -1,2 +1,43 @@
 describe('Login Component', () => {
-}) 
+  beforeEach(() => {
+    cy.visit('http://localhost:3000');
+  });
+
+  it('make sure that login page exits', () => {
+    cy.contains('Login').should('exist');
+    cy.get('input[name="name"]').should('exist');
+    cy.get('input[name="password"]').should('exist');
+  });
+
+  it('cheking empty submissions.', () => {
+    cy.get('button[type="submit"]').click();
+    cy.get('form.login-form').should('exist');
+    cy.contains('Welcome').should('not.exist');
+  });
+
+  const users = [
+    { name: 'Akhil', password: 'pass123' },
+    { name: 'Nikhil', password: '123@123' },
+    { name: 'TestNewCandidate', password: 'password@2211' }
+  ];
+
+  users.forEach(({ name, password }) => {
+    it(`must login for all the users: ${name}`, () => {
+      cy.get('input[name="name"]').type(name);
+      cy.get('input[name="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+
+      cy.contains(`Welcome, ${name}!`).should('exist');
+      cy.contains('Logout').should('exist').click();
+      cy.contains('Login').should('exist');
+    });
+  });
+
+  it('checking sucessfull logout and return to the login page', () => {
+    cy.get('input[name="name"]').type('Akhil');
+    cy.get('input[name="password"]').type('pass123');
+    cy.get('button[type="submit"]').click();
+    cy.contains('Logout').click();
+    cy.contains('Login').should('exist');
+  });
+});

src/components/LoginForm.js

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

src/components/Welcome.js

@@ -3,11 +3,11 @@ import './Welcome.css';
 
 function Welcome({ userName, onLogout }) {
   return (
-    <div className="welcome-container">
+    <div className="welcome-container" data-testid="welcome-container">
       <div className="welcome-card">
-        <h1>Welcome, {userName}!</h1>
+        <h1 data-testid="welcome-message">Welcome, {userName}!</h1>
         <p>You have successfully logged in.</p>
-        <button onClick={onLogout} className="logout-button">
+        <button onClick={onLogout} className="logout-button" data-testid="logout-button" >
           Logout
         </button>
       </div>