pjgeronimo test

README.md

@@ -1,3 +1,33 @@
+# zipBoard Junior Developer Challenge Write-up
+
+Thank you for inviting me to complete this junior developer test challenge! My name is Paolo Jose Geronimo and below is a short write-up of how I fixed the bug and wrote a Cypress test to ensure the bug is fixed.
+
+## Short explanation of the bug
+
+The first thing I did after starting the development server was to try logging in. After confirming that the log in page does not redirect, I took a look at the code. I noticed that the form in LoginForm.js does nothing upon submit, so I added an onSubmit attribute to the form and wrote the handleSubmit function. App.js uses a "onLogin" prop which I called in the handleSubmit function.
+
+To write the Cypress test, I started by visiting the baseURL which was preconfigured in cypress.config.js. I then added "data-test" attributes to each element I wanted to test. The steps in the test are as follows:
+
+- Check if login form exists
+- Type "pjgeronimo" into the username field
+- Type "password" into the password field
+- Click login
+- Check if the welcome header exists
+
+I also created a custom command that shortens getting the data-test element and reduces repetitive code.
+
+Below is a screenshot of the completed and successful test:
+
+![test](test.png)
+
+## Example of AI tools used
+
+One interesting problem I faced during creating the test was that while the page redirected manually, it didn't redirect during the Cypress test. I explained my problem to ChatGPT and pasted in only the code I wrote. Below is the prompt and snippet of the response that solved my problem:
+
+![prompt](prompt.png)
+
+![response](response.png)
+
 # zipBoard Junior Position Test Project
 
 This is a test repository for the zipBoard junior position application process. This project demonstrates a simple React application with a login form and Cypress testing setup.
@@ -39,26 +69,34 @@ This project uses Cypress for end-to-end testing. To run the tests:
 2. In a new terminal, you can run Cypress in two ways:
 
    ### Open Cypress Test Runner (Interactive Mode)
+
    ```bash
    npm run cypress:open
    ```
+
    This will open the Cypress Test Runner UI where you can:
+
    - Choose your preferred browser
    - See all test files
    - Run tests interactively
    - Watch tests run in real-time
 
    ### Run Tests in Headless Mode
+
    ```bash
    npm run cypress:run
    ```
+
    This will run all tests in the terminal without opening the UI.
 
    ### Run Tests with Dev Server
+
    ```bash
    npm run test:e2e
    ```
+
    This command will:
+
    1. Start the development server
    2. Wait for it to be available
    3. Run all Cypress tests

cypress/e2e/login.cy.js

@@ -1,2 +1,12 @@
-describe('Login Component', () => {
-}) 
+describe("Login Component", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+  it("Login works and redirects", () => {
+    cy.getDataTest("login-form").should("exist");
+    cy.getDataTest("username").type("pjgeronimo");
+    cy.getDataTest("password").type("password");
+    cy.getDataTest("login-button").click();
+    cy.getDataTest("welcome").should("exist");
+  });
+});

cypress/support/commands.js

@@ -22,4 +22,8 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("getDataTest", (selector) => {
+  return cy.get(`[data-test="${selector}"]`);
+});

src/components/LoginForm.js

@@ -1,27 +1,37 @@
-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,
     }));
   };
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onLogin(formData);
+  };
+
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form
+        className="login-form"
+        onSubmit={handleSubmit}
+        data-test="login-form"
+      >
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>
           <input
+            data-test="username"
             type="text"
             id="name"
             name="name"
@@ -33,6 +43,7 @@ function LoginForm({ onLogin }) {
         <div className="form-group">
           <label htmlFor="password">Password:</label>
           <input
+            data-test="password"
             type="password"
             id="password"
             name="password"
@@ -41,12 +52,12 @@ function LoginForm({ onLogin }) {
             required
           />
         </div>
-        <button type="submit" className="login-button">
+        <button data-test="login-button" type="submit" className="login-button">
           Login
         </button>
       </form>
     </div>
   );
 }
 
-export default LoginForm; 
+export default LoginForm;

src/components/Welcome.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import './Welcome.css';
+import React from "react";
+import "./Welcome.css";
 
 function Welcome({ userName, onLogout }) {
   return (
     <div className="welcome-container">
       <div className="welcome-card">
-        <h1>Welcome, {userName}!</h1>
+        <h1 data-test="welcome">Welcome, {userName}!</h1>
         <p>You have successfully logged in.</p>
         <button onClick={onLogout} className="logout-button">
           Logout
@@ -15,4 +15,4 @@ function Welcome({ userName, onLogout }) {
   );
 }
 
-export default Welcome; 
+export default Welcome;