User requirements: “As a user I want to be able to perform simple arithmetic functions in a web browser.”
The start code provided has a Calculator model with methods to add, subtract, divide, and multiply given numbers to a total (src/containers/Calculator.js
). The Calculator model has properties to keep track of calculations as it performs them. There is also a UI model to display the buttons and trigger click events (src/components/Keypad.js
)
The model is used in a web application, which allows a user to chain multiple operations one after the other, and then ask for the total.
Your task is to complete both unit and integration testing on the Calculator and KeyPad components and the UI. You will be using Enzyme to complete the tests on the Calculator component, and another testing framework - Cypress - to complete the UI tests.
- To install project dependencies:
npm install
- To run the server:
npm start
- To view application visit 'http://localhost:3000'
- To run the unit tests:
npm test
- To run the UI integration tests with Cypress:
- Leave the server running, and open a new tab in Terminal.
- Run
npm run test:e2e
to open Cypress test suite. - Run the
calculator.spec.js
file in Cypress to run the integration tests.
You need to test the Calculator model using the React testing library. Write your tests in src/tests/Calculator.test.js
. Test the following functions perform the following tasks:
calculator.add()
- add 1 to 4 and get 5calculator.subtract()
subtract 4 from 7 and get 3calculator.multiply()
- multiply 3 by 5 and get 15calculator.divide()
- divide 21 by 7 and get 3calculator.numberClick()
- concatenate multiple number button clickscalculator.operatorClick()
- chain multiple operations together
You need to write front-end integration tests to ensure the Calculator model and browser UI are working to meet the user requirements. The framework provided to do this is Cypress.. There is one sample test written in /cypress/integration/calculator.spec.js
and you should continue writing your tests in this file.
You should write tests to ensure the following requirements are met:
- Do the number buttons update the display of the running total?
- Do the arithmetical operations update the display with the result of the operation?
- Can multiple operations be chained together?
- Is the output as expected for a range of numbers (for example, positive, negative, decimals and very large numbers)?
- What does the code do in exceptional circumstances? Specifically, if you divide by zero, what is the effect? Write a test to describe what you'd prefer to happen, and then correct the code to make that test pass (you will need to modify the Calculator model to meet this requirement).