PinakeshwarVaishnav test

README.md

@@ -1,98 +1,11 @@
-# zipBoard Junior Position Test Project
+## Bug Fix: Login Redirection Issue
 
-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.
+### Problem
+The initial implementation of the `LoginForm` component did not automatically redirect the user upon successful login due to the default browser behavior of form submission. Without an `onSubmit` handler to prevent this default action, the page would reload, preventing the React state from updating and the `Welcome` component from rendering.
 
-## Important Note
+### Solution
+To fix this, an `onSubmit` handler (`handleFormSubmission`) was added to the `<form>` element in `LoginForm`. This handler calls `e.preventDefault()` to stop the default browser submission and then invokes the `onLogin` prop, passing the form data to the parent `App` component for state management and conditional rendering of the welcome page.
 
-This repository is for testing purposes only. Please fork this repository to your own account and do not modify this original repository. All your work should be done in your forked version.
 
-## Required Technologies
-
-To run this project locally, you need to have the following installed:
-
-- Node.js (version 18 or higher)
-- npm (comes with Node.js)
-- Git
-
-## Getting Started
-
-1. Fork this repository to your own account
-2. Clone your forked repository:
-   ```bash
-   git clone <your-forked-repo-url>
-   ```
-3. Install dependencies:
-   ```bash
-   npm install
-   ```
-4. Start the development server:
-   ```bash
-   npm start
-   ```
-   The application will be available at [http://localhost:3000](http://localhost:3000)
-
-## Testing with Cypress
-
-This project uses Cypress for end-to-end testing. To run the tests:
-
-1. Make sure the development server is running (`npm start`)
-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
-   4. Shut down the server when done
-
-## Project Structure
-
-```
-├── src/
-│   ├── components/
-│   │   ├── LoginForm.js
-│   │   ├── LoginForm.css
-│   │   ├── Welcome.js
-│   │   └── Welcome.css
-│   ├── App.js
-│   └── App.css
-├── cypress/
-│   ├── e2e/
-│   │   └── login.cy.js
-│   └── support/
-│       ├── commands.js
-│       └── e2e.js
-└── package.json
-```
-
-## Available Scripts
-
-- `npm start` - Runs the app in development mode
-- `npm test` - Runs the React testing suite
-- `npm run build` - Builds the app for production
-- `npm run cypress:open` - Opens Cypress Test Runner
-- `npm run cypress:run` - Runs Cypress tests in headless mode
-- `npm run test:e2e` - Runs Cypress tests with the dev server
-
-## License
-
-This project is for testing purposes only and is not licensed for public use.
+## AI Assistance (Optional)
+During debugging, an AI language model helped confirm the role of `onSubmit` and `e.preventDefault()` in preventing default form submission and enabling React's state management for redirection.

cypress/e2e/login.cy.js

@@ -1,2 +1,32 @@
-describe('Login Component', () => {
-}) 
+describe("Login Component", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("should display the login form elements", () => {
+    cy.get(".login-form").should("be.visible");
+    cy.get('input[name="name"]').should("be.visible");
+    cy.get('input[name="password"]').should("be.visible");
+    cy.get('button[type="submit"]')
+      .should("be.visible")
+      .and("contain", "Login");
+  });
+
+  it("should allow users to type in the username and password fields", () => {
+    cy.get('input[name="name"]')
+      .type("testuser")
+      .should("have.value", "testuser");
+    cy.get('input[name="password"]')
+      .type("password123")
+      .should("have.value", "password123");
+  });
+
+  it("should successfully log in and redirect to the welcome page", () => {
+    cy.get('input[name="name"]').type("test");
+    cy.get('input[name="password"]').type("password");
+    cy.get('button[type="submit"]').click();
+
+    cy.get(".welcome-container").should("be.visible");
+    cy.get("h1").should("contain", "Welcome, test!");
+  });
+});