Almondsf test

cypress/e2e/login.cy.js

@@ -1,2 +1,47 @@
-describe('Login Component', () => {
-}) 
+// End to End Test for Login Flow
+// Confirm the login form and its elements are present
+// Confirm that it allows typing in name and password fields
+// Confirm that a successful login leads to a redirect
+// Confirm that a successfu logout leads to Login page
+const userName = "Oluwafemi Oloyede";
+const password = "Password123";
+
+describe("Login Flow", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("should render login form", () => {
+    cy.get("form.login-form").should("exist");
+    cy.get("input[name='name']").should("exist");
+    cy.get("input[name='password']").should("exist");
+    cy.get("button.login-button").should("contain", "Login");
+  });
+
+  it("should allow typing in name and password fields", () => {
+    cy.get("input[name='name']")
+      .type(`${userName}`)
+      .should("have.value", `${userName}`);
+    cy.get("input[name='password']")
+      .type(`${password}`)
+      .should("have.value", `${password}`);
+  });
+
+  it("should login successfully and redirect to welcome page", () => {
+    cy.login(userName, password);
+
+    cy.contains(`Welcome, ${userName}!`).should("be.visible");
+    cy.contains("You have successfully logged in.").should("be.visible");
+    cy.get("button.logout-button").should("exist");
+  });
+
+  it("should logout and return to login screen", () => {
+    cy.login(userName, password);
+
+    cy.get("button.logout-button").click();
+
+    // Confirm we're back on the login screen
+    cy.get("form.login-form").should("exist");
+    cy.contains("Login").should("exist");
+  });
+});

cypress/support/commands.js

@@ -1,25 +1,9 @@
-// ***********************************************
-// 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) => { ... }) 
+// Login command
+Cypress.Commands.add("login", (userName, password) => {
+  // Fill in the login form
+  cy.get("input[name='name']").type(userName);
+  cy.get("input[name='password']").type(password);
+
+  // Click the login button
+  cy.get("button.login-button").click();
+});

src/App.js

@@ -1,21 +1,26 @@
-import React, { useState } from 'react';
-import './App.css';
-import LoginForm from './components/LoginForm';
-import Welcome from './components/Welcome';
+import React, { useState } from "react";
+import "./App.css";
+import LoginForm from "./components/LoginForm";
+import Welcome from "./components/Welcome";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [userName, setUserName] = useState('');
+  const [userName, setUserName] = useState("");
 
+  // Handle Login and redirect to Welcome page
   const handleLogin = (formData) => {
-    // In a real app, you would validate credentials here
-    setIsLoggedIn(true);
-    setUserName(formData.name);
+    const { name, password } = formData;
+
+    // Sanity check: To be sure the user fills the form
+    if (name.length && password.length) {
+      setIsLoggedIn(true);
+      setUserName(name);
+    }
   };
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-    setUserName('');
+    setUserName("");
   };
 
   return (

src/components/LoginForm.js

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
-import './LoginForm.css';
+import React, { useState } from "react";
+import "./LoginForm.css";
 
 function LoginForm({ onLogin }) {
   const [formData, setFormData] = useState({
-    name: '',
-    password: ''
+    name: "",
+    password: "",
   });
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFormData(prevState => ({
+    setFormData((prevState) => ({
       ...prevState,
-      [name]: value
+      [name]: value,
     }));
   };
 
@@ -41,12 +41,19 @@ function LoginForm({ onLogin }) {
             required
           />
         </div>
-        <button type="submit" className="login-button">
+        <button
+          type="submit"
+          className="login-button"
+          onClick={(e) => {
+            e.preventDefault();
+            onLogin(formData);
+          }}
+        >
           Login
         </button>
       </form>
     </div>
   );
 }
 
-export default LoginForm; 
+export default LoginForm;