SimpleCalci

A modern React-based calculator application built to demonstrate robust testing practices. This project includes unit tests, test coverage reporting, and a clean UI with Tailwind CSS.

🚀 Live Project

Explore the live version of the calculator here: SimpleCalci
Experience the features and functionality directly in your browser.

---

Features

• Basic Arithmetic Operations: Perform addition, subtraction, multiplication, and division with ease.
• Error Handling: Handles edge cases like division by zero gracefully.
• Unit Testing: Comprehensive tests to ensure the reliability of the Calculator class.
• Test Coverage Reporting: Detailed coverage statistics to evaluate test completeness.
• React Frontend: Interactive UI for the calculator, built using React.
• Tailwind CSS: Utility-first CSS framework for a responsive and modern design.

---

Testing Features

This project showcases various testing concepts using Vitest:

1. Unit Testing: Test individual functions in the Calculator class.
2. Test Suites and Cases: Organized test scenarios for better maintainability.
3. Error Testing: Validate proper error handling (e.g., division by zero).
4. Edge Case Coverage: Ensure robustness for scenarios like negative numbers and large values.
5. Test Coverage Report: Analyze the coverage percentage of the codebase.

---

Technologies Used

• React: Modern UI library for building the frontend.
• Vitest: Lightning-fast unit testing framework.
• Tailwind CSS: Utility-first CSS framework for a clean and responsive design.
• Vite: Next-generation frontend tooling for fast development and builds.

---

Installation

Step 1: Clone the Repository

git clone https://github.com/sharryXheisenberg/FrontEnd_calculator_testing_project.git
cd react-calculator

Step 2: Install Dependencies

npm install

Step 3: Start the Development Server

npm run dev

Testing

Step 1: Unit testing

npm run test

step 2: Generating Test Coverage Report

npm run coverage

Scripts

Install Required Packages

1. Install the project dependencies:

npm install

2. Start the development server with the following command:

npm run dev

Open the app in your browser at http://localhost:5173.

3. Build the Project for Production

npm run build

4. Preview Production Build

npm run preview

5. Lint the Code

npm run lint

Contact

For any queries or suggestions, feel free to reach out via GitHub Issues.

License

This project is licensed under the MIT License.

Acknowledgements

• Vite
• React
• Tailwind CSS