From 5566b5a1ffcfc37fa1a55bc75e0f7658fd64f06d Mon Sep 17 00:00:00 2001 From: VeloraOS Date: Sun, 18 May 2025 11:12:06 +0100 Subject: [PATCH 1/5] test: add data-testid to login form --- src/components/LoginForm.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 26c8cc3..dd3b7c7 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -17,7 +17,7 @@ function LoginForm({ onLogin }) { return (
-
+

Login

@@ -28,6 +28,7 @@ function LoginForm({ onLogin }) { value={formData.name} onChange={handleChange} required + data-testid="input-name" />
@@ -39,9 +40,10 @@ function LoginForm({ onLogin }) { value={formData.password} onChange={handleChange} required + data-testid="input-password" />
-
From 38e27f88a605b927d2b313fef6f0c2bf2d354706 Mon Sep 17 00:00:00 2001 From: VeloraOS Date: Sun, 18 May 2025 11:15:02 +0100 Subject: [PATCH 2/5] test: add cypress test for login form redirection --- cypress/e2e/login.cy.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js index c2fbb3a..cc325bb 100644 --- a/cypress/e2e/login.cy.js +++ b/cypress/e2e/login.cy.js @@ -1,2 +1,20 @@ -describe('Login Component', () => { -}) \ No newline at end of file +describe('Login Flow with Component Switch', () => { + beforeEach(() => { + cy.visit('http://localhost:3000'); + }); + + it('logs in and shows welcome message with username', () => { + // Type the name and password + cy.get('[data-testid="input-name"]').type('testuser'); + cy.get('[data-testid="input-password"]').type('anything'); + + // Submit the form + cy.get('[data-testid="login-button"]').click(); + + // Assert that the login form disappears + cy.get('[data-testid="login-form"]').should('not.exist'); + + // Assert that the welcome message with the username appears + cy.contains('Welcome, testuser').should('exist'); + }); +}); From f3a05dcbc0e804563f14010b853cfba85b6e5859 Mon Sep 17 00:00:00 2001 From: VeloraOS Date: Sun, 18 May 2025 11:28:44 +0100 Subject: [PATCH 3/5] fix: fixed login form redirection error --- src/components/LoginForm.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index dd3b7c7..02c15a0 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -15,9 +15,14 @@ function LoginForm({ onLogin }) { })); }; + const handleSubmit = (e) => { + e.preventDefault(); + onLogin(formData.name); // or however you’re calling it + }; + return (
-
+

Login

From dee6f0e8379d7265bc2c98d48cd5df0e316cd6e3 Mon Sep 17 00:00:00 2001 From: VeloraOS Date: Sun, 18 May 2025 11:49:56 +0100 Subject: [PATCH 4/5] test: make tests reusable --- cypress/e2e/login.cy.js | 17 +---------------- cypress/support/commands.js | 33 ++++++++------------------------- 2 files changed, 9 insertions(+), 41 deletions(-) diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js index cc325bb..5a5a50d 100644 --- a/cypress/e2e/login.cy.js +++ b/cypress/e2e/login.cy.js @@ -1,20 +1,5 @@ describe('Login Flow with Component Switch', () => { - beforeEach(() => { - cy.visit('http://localhost:3000'); - }); - it('logs in and shows welcome message with username', () => { - // Type the name and password - cy.get('[data-testid="input-name"]').type('testuser'); - cy.get('[data-testid="input-password"]').type('anything'); - - // Submit the form - cy.get('[data-testid="login-button"]').click(); - - // Assert that the login form disappears - cy.get('[data-testid="login-form"]').should('not.exist'); - - // Assert that the welcome message with the username appears - cy.contains('Welcome, testuser').should('exist'); + cy.login('layoolar','password'); }); }); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 9d3825e..201a275 100644 --- a/cypress/support/commands.js +++ b/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) => { ... }) \ No newline at end of file +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'); +}); From d032d645e405a4e13116f986881b2eaceb3fb1dc Mon Sep 17 00:00:00 2001 From: Olayiwola Ayoola <46034532+Layoolar@users.noreply.github.com> Date: Sun, 18 May 2025 11:05:00 +0000 Subject: [PATCH 5/5] fix: fix wrong parameter. Tests passing --- src/components/LoginForm.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 02c15a0..329b44d 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -17,7 +17,7 @@ function LoginForm({ onLogin }) { const handleSubmit = (e) => { e.preventDefault(); - onLogin(formData.name); // or however you’re calling it + onLogin(formData); // or however you’re calling it }; return (