This project contains my solution to a technical challenge involving the SearchField component. The challenge was to resolve specific issues affecting the functionality of the component, primarily focusing on input focus management and ngModel binding behavior.
- Focus Retention on Clear: Implemented a solution to ensure that the input field retains focus after the clear button is pressed.
- ngModel Binding Fix: Corrected the behavior of the input field to ensure proper functionality with or without
ngModelbinding.
I approached the challenge by carefully analyzing the existing code and identifying the root causes of the issues. After pinpointing the problematic areas, I implemented fixes that resolved these issues while ensuring that the original functionality of the component was maintained.
The fixes are thoroughly tested with unit tests added in search-field.component.cy.ts. These tests validate the correct behavior of the component post-fixes.
To review the solution and run the tests:
- Clone the repository to your local machine.
- Navigate to the project directory.
- Install the necessary dependencies.
- Run the Cypress tests to observe the resolved behavior.
- TypeScript
- Cypress for unit testing
This project showcases my problem-solving skills and understanding of TypeScript and testing with Cypress. The solution aligns with the provided acceptance criteria, ensuring that the SearchField component behaves as expected under various scenarios.
I welcome any feedback or suggestions for improvement. Feel free to open an issue or submit a pull request.
Thank you for reviewing my solution to this technical challenge!