Front-End Engineer Coding Test

A live-coding test repository for evaluating senior front-end engineer candidates. The challenge involves building a simple counter application using React and TDD.

Objective

Build a simple counter application using React. The counter application should have the following functionalities:

1. Display a number (starts at 0).
2. Have an "Increment" button to increase the count by 1.
3. Have a "Decrement" button to decrease the count by 1.
4. Ensure the counter never goes below 0.

Requirements

1. TDD: Use Test-Driven Development to build this application. You can use libraries like Jest and React Testing Library.
2. Styling: The application should be styled, either with inline styles or CSS classes.
3. Real-time Updates: The counter should update in real-time when the buttons are clicked.
4. Code Quality: Pay attention to code quality, readability, and maintainability.

Bonus

1. Add a "Reset" button that resets the count to 0.
2. Make the application accessible (e.g., keyboard navigation, screen reader support).

Suggested Workflow

1. Setup: Initialize a new React application and install any necessary testing libraries.
2. Write Tests: Start by writing a test case for displaying the counter.
3. Implementation: Write the minimal code required to pass the test.
4. Refactoring: Refactor the code if necessary.
5. Repeat: Continue this process for the "Increment" and "Decrement" functionalities.
6. Styling: After the functionality is implemented and all tests pass, add styling to the application.
7. Bonus: If time permits, work on the bonus features.

Sample Test Cases

Consider these example test cases:

1. The application should render a counter display.
2. The application should render an "Increment" button.
3. The application should render a "Decrement" button.
4. Clicking "Increment" should increase the counter by 1.
5. Clicking "Decrement" should decrease the counter by 1.
6. The counter should not go below 0.

Feel free to add other test cases.