TDD Workshop - A simple calculator

This is a simple workshop in how to develop using TDD comprising of a starting point and a example implementation

Goal

Using TDD develop a simple react calculator that multiplies two numbers together and displays the result.

The base acceptance criteria(AC) )is:

• I must be able to input 2 numbers
• I must be able to see the product of those two numbers

Starting Point

A template of a simple react project is given in ./template

Before running anything else it will work you will need to run

npm install

To run tests use:

npm run test

to run the website:

npm run dev

Code can go in the main App.jsx component for simplicity.

Example

The example can be found in ./example. It is not the best implimentation but it is my example of how I do it.

Same commands as above for testing and running.

What tools does this use?

This uses the following tools:

• Vite
• React
• Vitetest
• @testing-libary/react

There are other requirments in order to set these up but these are what you'll be interacting with.

Recomended Extensions

These aren't essentail these are just tools I have used to write this so it may be usefull:

Name: Better Comments

Description: Improve your code commenting by annotating with alert, informational, TODOs, and more!

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Name: html tag wrapper

Description: wrap selected html tag by press ctrl+i, you can change the wrapper tag name simply too

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=hwencc.html-tag-wrapper