Create FormInput component #111
Description
| Field | Value |
|---|---|
| ID | TC-022 |
| Title | Verify that the "FormInput" component correctly renders input field with label, placeholder, error state, and complies with the design |
| Preconditions | - FormInput component deployed in the LeetCode SPA project staging environment. - Design theme (theme tokens) configured via ThemeProvider with MUI. - Design available in Figma https://www.figma.com/design/Rh2fODqtUeQvC4mBfUp6YI/seminario-coding?node-id=4404-474&t=g3iM6xr83xMnu8t3-0 |
| Steps | 1. Open the staging page containing the "FormInput" component in a browser (Chrome desktop, 1920x1080). 2. Verify that the label and placeholder are rendered correctly. 3. Type into the input and confirm that the onChange callback is triggered.4. Provide an errorMessage prop and confirm that the error state is shown. 5. Test variations: outlined, filled, disabled. 6. Inspect accessibility attributes ( id, aria-label).7. Compare styles and layout with the Figma design. 8. Check responsiveness across breakpoints. |
| Test Data | - URL: https://ditmar.github.io/leetcode-spa/ - Props: label: "Mail Id" placeholder: "Enter your email" type: "email" value: "" errorMessage: "Invalid email format" disabled: false - Variants: outlined, filled - Breakpoints: Desktop (1920x1080), Tablet (768x1024), Mobile (375x667) - Figma: Link |
| Expected Result | - Label and placeholder are visible and match props. - Input accepts text and triggers onChange.- Error state appears when errorMessage is set.- Style: uses MUI TextField with custom sx or styled() and theme tokens.- Accessibility: id, aria-label are present.- Responsive: adapts layout across breakpoints. - data-testid="form-input" attribute is present. |
| Actual Result | (To be completed during execution) |
| Final Status | (Pass / Fail / Blocked) |