Entry Layoolar

cypress/e2e/login.cy.js

@@ -1,2 +1,5 @@
-describe('Login Component', () => {
-}) 
+describe('Login Flow with Component Switch', () => {
+  it('logs in and shows welcome message with username', () => {
+    cy.login('layoolar','password');
+  });
+});

cypress/support/commands.js

@@ -1,25 +1,8 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 
+Cypress.Commands.add('login', (name = 'testuser', password = 'anything') => {
+  cy.visit('http://localhost:3000');
+  cy.get('[data-testid="input-name"]').type(name);
+  cy.get('[data-testid="input-password"]').type(password);
+  cy.get('[data-testid="login-button"]').click();
+  cy.get('[data-testid="login-form"]').should('not.exist');
+  cy.contains(`Welcome, ${name}`).should('exist');
+});

src/components/LoginForm.js

@@ -15,9 +15,14 @@ function LoginForm({ onLogin }) {
     }));
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onLogin(formData); // or however you’re calling it
+  };
+
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form className="login-form" data-testid="login-form" onSubmit={handleSubmit}>
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>
@@ -28,6 +33,7 @@ function LoginForm({ onLogin }) {
             value={formData.name}
             onChange={handleChange}
             required
+            data-testid="input-name"
           />
         </div>
         <div className="form-group">
@@ -39,9 +45,10 @@ function LoginForm({ onLogin }) {
             value={formData.password}
             onChange={handleChange}
             required
+            data-testid="input-password"
           />
         </div>
-        <button type="submit" className="login-button">
+        <button type="submit" className="login-button" data-testid="login-button">
           Login
         </button>
       </form>