diff --git a/README.md b/README.md index 20b4126..03e35ea 100644 --- a/README.md +++ b/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 diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js index c2fbb3a..6795845 100644 --- a/cypress/e2e/login.cy.js +++ b/cypress/e2e/login.cy.js @@ -1,2 +1,12 @@ -describe('Login Component', () => { -}) \ No newline at end of file +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"); + }); +}); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 9d3825e..8fede5b 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -22,4 +22,8 @@ // // // -- This will overwrite an existing command -- -// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) \ No newline at end of file +// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) + +Cypress.Commands.add("getDataTest", (selector) => { + return cy.get(`[data-test="${selector}"]`); +}); diff --git a/prompt.png b/prompt.png new file mode 100644 index 0000000..b54b6fd Binary files /dev/null and b/prompt.png differ diff --git a/response.png b/response.png new file mode 100644 index 0000000..c8bb6ca Binary files /dev/null and b/response.png differ diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 26c8cc3..ab2065a 100644 --- a/src/components/LoginForm.js +++ b/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 (
-
+

Login

-
@@ -49,4 +60,4 @@ function LoginForm({ onLogin }) { ); } -export default LoginForm; \ No newline at end of file +export default LoginForm; diff --git a/src/components/Welcome.js b/src/components/Welcome.js index 3c721b3..4c74f99 100644 --- a/src/components/Welcome.js +++ b/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 (
-

Welcome, {userName}!

+

Welcome, {userName}!

You have successfully logged in.