Manual Testing Scenarios
Relevant source files
The following files were used as context for generating this wiki page:
- calculator.html
- README.md
- LICENSE
- .gitignore
- index.html (Identified as the primary application entry point)
Introduction
The Manual Testing Scenarios for the Calculator project encompass the validation of arithmetic logic, user interface responsiveness, state management, and accessibility features. The application is a client-side web tool built with HTML, CSS (using OKLCH color spaces), and vanilla JavaScript to provide a modern, high-precision calculation experience.
These scenarios ensure that the core computational engine—which handles basic operations like addition, subtraction, multiplication, and division—remains accurate across different input methods, including mouse clicks and keyboard shortcuts. The scope also includes testing the persistence of the calculation history and the visual integrity of the dark/light theme switching mechanism.
Core Functional Testing
Arithmetic Operations and Logic
The primary logic is handled by the compute function, which processes two operands and an operator. Manual tests must verify that the round function correctly applies a precision of 12 significant digits to avoid common floating-point errors.
The logic involves specific handling for division by zero, which must return an "Error" string instead of a numerical value.
Sources: calculator.html:500-515, calculator.html:520-522
Input Constraints and Formatting
The application limits numerical input to 14 characters to prevent overflow in the UI display. Formatting is handled by formatNum, which applies locale-specific separators and converts large or tiny numbers to exponential notation.
| Test Scenario | Expected Behavior | Source |
|---|---|---|
| Max Digit Entry | Input stops after 14 digits | calculator.html:484 |
| Thousand Separators | 1000 displays as 1,000 | calculator.html:470 |
| Scientific Notation | Numbers >= 1e12 use toExponential(4) | calculator.html:463-465 |
| Decimal Uniqueness | Only one decimal point allowed per number | calculator.html:489-491 |
UI and Theme Validation
State Management and Feedback
The calculator uses a shouldReset flag to determine if the next digit should overwrite the current display (e.g., after an equals operation or operator selection). Visual feedback is provided via a "pop" animation when calculations are completed.
Theme Consistency
Testing must verify the data-theme attribute on the <html> element. The theme toggle switches between light and dark modes, updating the CSS design tokens for surfaces, text, and primary colors.
Sources: calculator.html:17-100, calculator.html:610-624
Accessibility and Navigation
Keyboard Support
Manual testing must confirm that physical keyboard inputs map correctly to the internal logic. This includes:
- Numerical Keys: 0-9 for digits.
- Operators:
+,-,*,/(mapped to÷). - Control Keys:
Enterfor equals,Escapefor AC (All Clear), andBackspacefor character deletion.
Sources: calculator.html:594-608
History Management
The history section maintains a record of up to 20 previous calculations. Each history-item must be interactive.
- Click/Enter on History: Clicking a history record must restore that result as the
currentoperand. - Clear History: The "Clear" button must reset the
historyarray and display the "No calculations yet" placeholder.
Sources: calculator.html:554-577, calculator.html:585-588
Conclusion
Manual testing of the Calculator ensures that the technical implementation of the state machine—managing current, previous, and operator variables—is robust against edge cases like division by zero and extreme numerical ranges. By validating the integration of the UI animations, history persistence, and keyboard event listeners, developers can guarantee a seamless user experience across different interaction models.