how to make a calculator 9

I want to make a website for the calculator so that anyone can use it in their browser without installing Python or running code.

preview

These are the tests I have by the end of the chapter

import src.website
import tests.test_calculator
import unittest


class TestCalculatorWebsite(unittest.TestCase):

    def setUp(self):
        self.client = src.website.app.test_client()
        self.x = tests.test_calculator.a_random_number()

    def test_home_page(self):
        response = self.client.get('/')
        self.assertEqual(response.status_code, 200)
        self.assertIn(
            b'<h1>Calculator</h1>',
            response.data
        )

    def test_calculations(self):
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        for operation in operations:
            with self.subTest(operation=operation):
                response = self.client.post(
                    '/calculate',
                    data={
                        'first_input': self.x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(self.x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{self.x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

    def test_website_handling_zero_division_error(self):
        response = self.client.post(
            '/calculate',
            data={
                'first_input': self.x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            (
                f'<h2>{self.x} / 0.0 = '
                'brmph?! I cannot divide by 0. Try again...</h2>'
            )
        )


# Exceptions seen
# NameError
# ModuleNotFoundError
# AttributeError
# AssertionError
# jinja2.exceptions.TemplateNotFound
# SyntaxError

open the project

I change directory to the calculator folder
```
cd calculator
```
the terminal shows I am in the calculator folder
```
.../pumping_python/calculator
```
I make a new test file for the website
```
touch tests/test_calculator_website.py
```
I add Flask to the requirements.txt file
```
echo "flask" >> requirements.txt
```
Flask is a Python library that is used for making websites, it is not part of The Python Standard Library
I install the Python packages I gave in the requirements file
```
uv add --requirement requirements.txt
```
the terminal shows it installed the Python packages

I use pytest-watcher to run the tests

uv run pytest-watcher . --now

the terminal shows

rootdir: .../pumping_python/calculator
configfile: pyproject.toml
collected 5 items

tests/test_calculator.py .....                                [100%]

======================== 5 passed in X.YZs =========================

test_home_page

RED: make it fail

I open test_calculator_website.py from the tests folder in the editor

I add a test to test_calculator_website.py

import unittest

class TestCalculatorWebsite(unittest.TestCase):

    def test_home_page(self):
        client = src.website.app.test_client()

the terminal shows NameError

NameError: name 'src' is not defined

I add NameError to the list of Exceptions seen

class TestCalculatorWebsite(unittest.TestCase):

    def test_home_page(self):
        client = src.website.app.test_client()


# Exceptions seen
# NameError

GREEN: make it pass

I add an import statement for the website module

import src.website
import unittest

the terminal shows ModuleNotFoundError

ModuleNotFoundError: No module named 'src.website'

I add ModuleNotFoundError to the list of Exceptions seen

# Exceptions seen
# NameError
# ModuleNotFoundError

then I add website.py to the src folder and the terminal shows AttributeError
```
AttributeError: module 'src.website' has no attribute 'app'
```

I add AttributeError to the list of Exceptions seen

# Exceptions seen
# NameError
# ModuleNotFoundError
# AttributeError

I make the Flask app in website.py

import flask

app = flask.Flask(__name__)

the test passes

REFACTOR: make it better

I add an assertion to test_home_page in test_calculator_website.py

    def test_home_page(self):
        client = src.website.app.test_client()
        response = client.get('/')
        self.assertEqual(response.status_code, 'BOOM!!!')

the terminal shows AssertionError

AssertionError: 404 != 'BOOM!!!'

I add AssertionError to the list of Exceptions seen

# Exceptions seen
# NameError
# ModuleNotFoundError
# AttributeError
# AssertionError

I change the expectation in the assertion
```
10        self.assertEqual(response.status_code, 404)
```
the test passes.
- client = src.website.app.test_client() points the name client to the Flask app in website.py
- response = client.get('/') points the name response to the result of the call to the get method of the client object
- the get method calls the GET request method which is an HTTP request method to get information from a server
- client.get('/') returns a response object
- '/' is short for root or home in this case, the homepage of the website I am making also known as index.html
- response.status_code gets the status_code attribute or the response object
- the above can also be written as src.website.app.test_client().get('/').status_code
- 404 is HTTP status code, it is short for 404 Not Found which means the page cannot be found
- I want a 200 HTTP status code, it is short for 200 OK and means the request was successful

I change the expectation in the assertion

    def test_home_page(self):
        client = src.website.app.test_client()
        response = client.get('/')
        self.assertEqual(response.status_code, 200)

the terminal shows AssertionError

AssertionError: 404 != 200

I add a function for the homepage in website.py
```
1import flask
2
3
4app = flask.Flask(__name__)
5
6
7@app.route('/')
8def home():
9    return flask.render_template('index.html')
```
the terminal shows AssertionError
```
AssertionError: 500 != 200
```
it also shows jinja2.exceptions.TemplateNotFound
```
jinja2.exceptions.TemplateNotFound: index.html
```
I have to make a template file for index.html
- @app.route is a decorator function that routes the pages of the website to the function it wraps
- '/' is short for root or home in this case, the homepage of the website I am making also known as index.html

I add jinja2.exceptions.TemplateNotFound to the list of Exceptions seen

# Exceptions seen
# NameError
# ModuleNotFoundError
# AttributeError
# AssertionError
# jinja2.exceptions.TemplateNotFound

I add a new folder to the src folder named templates, the terminal still shows the same Exception
I add a new file in the templates folder named index.html, the terminal still shows the same Exception
I go back to test_calculator_website.py then use ctrl+s on the keyboard to save the file which makes pytest-watcher run the tests again, and the test passes

how to view the website

I want to see what I just made. I open a new terminal, then use uv to run the Flask server

uv run flask --app src/website run --debug

the terminal shows

 * Serving Flask app 'src/website'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: ABC-DEF-GHI

it might also show a dialog box like this, and I click on Open in Browser

or I use ctrl on the keyboard and click on http://127.0.0.1:5000 with the mouse to open the browser and it shows an empty page. Success!

I add another assertion for text from the website to test_home_page in test_calculator_website.py

    def test_home_page(self):
        client = src.website.app.test_client()
        response = client.get('/')
        self.assertEqual(response.status_code, 200)
        self.assertEqual(
            response.data,
            '<h1>Calculator</h1>'
        )

the terminal shows AssertionError

AssertionError: b'' != '<h1>Calculator</h1>'

there is nothing in src/templates/index.html
b'' is the empty bytes object

bytes objects are like strings , they have a b before the quotes, for example

b'single quote bytes'
b'''triple single quote bytes'''
b"double quote bytes"
b"""triple double quote bytes"""

I open index.html from the templates folder in the editor, then add some HTML
```
1<h1>Calculator</h1>
```
the terminal still shows AssertionError because pytest-watcher only checks my Python files, it does not run the tests when I change other files
- <></> are called tags, they are enclosures
- <h1>HEADING</h1> tells the computer to make HEADING a heading
I go back to test_calculator_website.py and use ctrl+s on the keyboard to run the test, the terminal shows AssertionError
```
AssertionError: b'<h1>Calculator</h1>' != '<h1>Calculator</h1>'
```

I make the expectation a bytes object

        self.assertEqual(
            response.data,
            b'<h1>Calculator</h1>'
        )

the test passes

I go back to the browser and click refresh, it shows Calculator

Yes! I know how to make a website with Python!!

test_calculations

RED: make it fail

I add a new test for doing calculations with the website

      def test_home_page(self):
          client = src.website.app.test_client()
          response = client.get('/')
          self.assertEqual(response.status_code, 200)
          self.assertEqual(
              response.data.decode(),
              '<h1>Calculator</h1>'
          )

      def test_calculation(self):
          client = src.website.app.test_client()
          response = client.post(
              '/calculate',
              data={
                  'first_input': 0,
                  'second_input': 1,
              }
          )
          self.assertEqual(response.status_code, 200)


  # Exceptions seen

the terminal shows AssertionError

AssertionError: 404 != 200

this is like AttributeError, the address for calculate does not exist yet.

client.post calls the post method
which calls the POST request method, an HTTP request method that sends information to a server. I am using it to test sending numbers to the website to do a calculation
the post method is called with 2 inputs in this case
- '/calculate' - the path to the function in website.py
- data - a dictionary with the inputs I want the function to process

GREEN: make it pass

I add a new function to website.py

  @app.route('/')
  def home():
      return flask.render_template('index.html')


  @app.route('/calculate', methods=['POST'])
  def calculate():
      first_input = flask.request.form.get('first_input')
      second_input = flask.request.form.get('second_input')

      result = calculator.add(first_input, second_input)
      return (
          f'<h2>{first_input} + {second_input} '
          f'= {result}</h2>'
      )

@app.route is a decorator function that routes the pages of the website to the function it wraps
'/calculate' is the route I want to point to the calculate function
['POST'] is a list of HTTP request methods that I can send, in this case I am using the POST request method to send information to the server
flask.request.form.get(NAME) uses the get method to get the value of the NAME key from the dictionary when the user makes a request
<h2>SMALLER HEADING</h2> tells the computer to make SMALLER HEADING a heading that is smaller than h1 headings

the terminal shows NameError

NameError: name 'calculator' is not defined. Did you mean: 'calculate'?

I add an import statement for the calculator module at the top of the file
```
1import calculator
2import flask
```
the terminal shows ModuleNotFoundError
```
ModuleNotFoundError: No module named 'calculator
```
because the test cannot find the calculator.py module
I change the import statement
```
1import src.calculator
2import flask
```
the test passes and the terminal for the website shows ModuleNotFoundError
```
ModuleNotFoundError: No module named 'src'
```
this is a problem
- website.py is in the src folder with calculator.py so import src.calculator will not work for the website
- test_calculator_website.py is in the tests folder so import calculator will not work for the tests
I need a way that allows both the tests and website to work

I change the import statement back

import calculator
import flask

the terminal shows ModuleNotFoundError

ModuleNotFoundError: No module named 'calculator'

I add an import statement for the sys module, it is part of The Python Standard Library
```
1import sys
2
3import calculator
4import flask
```
I can use sys to get variables that the computer uses without going to the terminal
I add another import statement
```
1import pathlib
2import sys
3
4import calculator
5import flask
```
- the pathlib module is also part of The Python Standard Library
- I can use it to get paths(addresses) for files and folders on the computer without going to the terminal
I use pathlib to add the path for calculator.py to the system path which is a list of strings where Python looks for modules when I write an import statement
```
1import pathlib
2import sys
3sys.path.insert(
4    0, str(pathlib.Path(__file__).resolve().parent)
5)
6
7import calculator
8import flask
```
the test passes and the terminal for the browser shows no errors
- the path to calculator.py is now correct for website.py and test_calculator.py
- sys.path.insert uses the insert method of lists to place the src folder as the first item in the list for Python to look for modules
- pathlib.Path(__file__).resolve().parent returns the parent of the current file - src in this case
- __file__ is a variable with the name of the file website.py in this case
- the route to /calculate now exists

REFACTOR: make it better

I add an assertion to make sure I get the right result back in test_calculator_website.py

    def test_calculations(self):
        client = src.website.app.test_client()
        response = client.post(
            '/calculate',
            data={
                'first_input': 0,
                'second_input': 1,
            }
        )
        self.assertEqual(response.status_code, 200)
        self.assertEqual(response.data, 'BOOM!!!')

the terminal shows AssertionError

AssertionError: b'<h2>0 + 1 = brmph?! Numbers only. Try again...</h2>' != 'BOOM!!!'

Ah! The calculator only works with numbers. The numbers I sent as values in the test 0 and 1 are getting converted to something the calculator does not like

I change first_input to a float in website.py

@app.route('/calculate', methods=['POST'])
def calculate():
    first_input = flask.request.form.get('first_input')
    first_input = float(first_input)
    second_input = flask.request.form.get('second_input')

the terminal shows TypeError

TypeError: unsupported operand type(s) for +: 'float' and 'str'

I change second_input to a float

@app.route('/calculate', methods=['POST'])
def calculate():
    first_input = flask.request.form.get('first_input')
    first_input = float(first_input)
    second_input = flask.request.form.get('second_input')
    second_input = float(second_input)

    result = calculator.add(first_input, second_input)
    return (
        f'<h2>{first_input} + {second_input} '
        f'= {result}</h2>'
    )

the terminal shows AssertionError

AssertionError: b'<h2>0.0 + 1.0 = 1.0</h2>' != 'BOOM!!!'

I copy the result from the terminal and paste it in test_calculator_website.py

    def test_calculations(self):
        client = src.website.app.test_client()
        response = client.post(
            '/calculate',
            data={
                'first_input': 0,
                'second_input': 1,
            }
        )
        self.assertEqual(response.status_code, 200)
        self.assertEqual(
            response.data,
            b'<h2>0.0 + 1.0 = 1.0</h2>'
        )

the test passes

I want to use random numbers in the test. I add an import statement for the test_calculator module
```
1import src.website
2import tests.test_calculator
3import unittest
```

I point a variable to the result of a call to the a_random_number function of test_calculator

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()

I use the new variable as the first input

        response = client.post(
            '/calculate',
            data={
                # 'first_input': 0,
                'first_input': x,
                'second_input': 1,
            }
        )

the terminal shows AssertionError

AssertionError: b'<h2>ABC.DEFGHIJKLMNOP + 1.0 = ABQ.DEFGHIJKLMNOP</h2>' != b'<h2>0.0 + 1.0 = 1.0</h2>'

good, the input gets to the website

I try an f-string so I can use the variable in the assertion

        self.assertEqual(
            response.data,
            fb'<h2>0.0 + 1.0 = 1.0</h2>'
        )

the terminal shows SyntaxError

SyntaxError: invalid syntax

I cannot make a bytes object an f-string

I add SyntaxError to the list of Exceptions seen

# Exceptions seen
# NameError
# ModuleNotFoundError
# AttributeError
# AssertionError
# jinja2.exceptions.TemplateNotFound
# SyntaxError

how to change a bytes object to a string

I change the bytes object to a string with bytes.decode

        self.assertEqual(
            response.data.decode(),
            f'<h2>0.0 + 1.0 = 1.0</h2>'
        )

the terminal shows AssertionError

AssertionError: '<h2>RS.TUVWXYZABCDEFG + 1.0 = RH.TUVWXYZABCDEFG</h2>' != '<h2>0.0 + 1.0 = 1.0</h2>'

response.data.decode() returns the result of calling the decode method of the data attribute of the response object
the decode method is part of the bytes data type, it converts bytes to strings

I add the variable to the expectation

        self.assertEqual(
            response.data.decode(),
            f'<h2>{x} + 1.0 = {x+1}</h2>'
        )

the test passes

I add another variable

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()

I use the variable for the second input

        response = client.post(
            '/calculate',
            data={
                # 'first_input': 0,
                'first_input': x,
                # 'second_input': 1,
                'second_input': y,
            }
        )

the terminal shows AssertionError

AssertionError: '<h2>HIJ.KLMNOPQRSTUVWX + YZA.BCDEFGHIJKLMNOP = QRS.TUVWXYZABCDEFG</h2>' != '<h2>-HIJ.KLMNOPQRSTUVWX + 1.0 = HIY.KLMNOPQRSTUVWX</h2>'

I add y to the f-string in the expectation

        self.assertEqual(
            response.data.decode(),
            f'<h2>{x} + {y} = {x+y}</h2>'
        )

the test passes

I remove the comments

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()
        response = client.post(
            '/calculate',
            data={
                'first_input': x,
                'second_input': y,
            }
        )
        self.assertEqual(response.status_code, 200)
        self.assertEqual(
            response.data.decode(),
            f'<h2>{x} + {y} = {x+y}</h2>'
        )

the test is still green

I want to test the other operations. I add a dictionary for the operations

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        client = src.website.app.test_client()

I add a for loop to the test

        client = src.website.app.test_client()

        for operation in operations:
            with self.subTest(operation=operation):
                response = client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                    }
                )
                self.assertEqual(response.status_code, 200)
                self.assertEqual(
                    response.data.decode(),
                    f'<h2>{x} + {y} = {x+y}</h2>'
                )


# Exceptions seen

I add a key to the data dictionary

                response = client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                        'operation': operation,
                    }
                )

I add a variable for the calculator function

                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                self.assertEqual(
                    response.data.decode(),
                    f'<h2>{x} + {y} = {x+y}</h2>'
                )

I add another variable for the expected result

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(x, y)
                self.assertEqual(
                    response.data.decode(),
                    f'<h2>{x} + {y} = {x+y}</h2>'
                )

I change the expectation in the assertion to use the new variables

                self.assertEqual(
                    response.data.decode(),
                    # f'<h2>{x} + {y} = {x+y}</h2>'
                    (
                        f'<h2>{x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

the terminal shows AssertionError

AssertionError: '<h2>YZA.BCDEFGHIJKLMNO + PQR.STUVWXYZABCDEFG = HIJ.KLMNOPQRSTUVWXY</h2>' != '<h2>YZA.BCDEFGHIJKLMNO * PQR.STUVWXYZABCDEFG = ZABCD.EFGHIJKLMNO</h2>'

the subtest for addition passes
the operation symbols for the other 3 functions and their results changed

I add a variable for value the test passes for the operation

@app.route('/calculate', methods=['POST'])
def calculate():
    first_input = flask.request.form.get('first_input')
    first_input = float(first_input)
    second_input = flask.request.form.get('second_input')
    second_input = float(second_input)
    operation = flask.request.form.get('operation')

    result = calculator.add(first_input, second_input)

the test still shows AssertionError for the 3 sub tests

I add a dictionary for the operations

    operation = flask.request.form.get('operation')

    operations = {
        'add': '+',
        'subtract': '-',
        'divide': '/',
        'multiply': '*',
    }

    result = calculator.add(first_input, second_input)

I use the __getattribute__ method for the result

    # result = calculator.add(first_input, second_input)
    result = calculator.__getattribute__(operation)(
        first_input, second_input
    )
    return (
        f'<h2>{first_input} + {second_input} '
        f'= {result}</h2>'
    )

I change the return statement

    return (
        # f'<h2>{first_input} + {second_input} '
        f'<h2>{first_input} {operations[operation]} {second_input} '
        f'= {result}</h2>'
    )

the test passes

I remove the commented lines

@app.route('/calculate', methods=['POST'])
def calculate():
    first_input = flask.request.form.get('first_input')
    first_input = float(first_input)
    second_input = flask.request.form.get('second_input')
    second_input = float(second_input)
    operation = flask.request.form.get('operation')

    operations = {
        'add': '+',
        'subtract': '-',
        'divide': '/',
        'multiply': '*',
    }

    result = calculator.__getattribute__(operation)(
        first_input, second_input
    )
    return (
        f'<h2>{first_input} {operations[operation]} {second_input} '
        f'= {result}</h2>'
    )

the test is still green

I remove the comments from test_calculations in test_calculator_website.py

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        client = src.website.app.test_client()

        for operation in operations:
            with self.subTest(operation=operation):
                response = client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )


# Exceptions seen

how to make a form

HTML Forms are the most popular thing we see with websites, we use them when we sign in or put any information on a website. I can add a form to the website for users to do calculations since the route now exists.

RED: make it fail

I add more HTML to index.html in the templates folder in the src folder
```
1  <h1>Calculator</h1>
2  <form method="post" action="/calculate">
3  </form>
```
- <form></form> is an HTML tag (enclosure) for making forms
- method="post" means the form will use the POST request method
- action="/calculate" means the form will send the data to the calculate function in website.py
I go to the website and click refresh, there is no change
I click on test_calculator_website.py and use ctrl+s on the keyboard to run the tests again, the terminal shows AssertionError
```
AssertionError: b'<h1>Calculator</h1>\n<form method="post" action="/calculate">\n</form>' != b'<h1>Calculator</h1>'
```
the change made test_home_page fail because there is now more HTML

GREEN: make it pass

I change the assertion to look for the title and not the entire page

    def test_home_page(self):
        client = src.website.app.test_client()
        response = client.get('/')
        self.assertEqual(response.status_code, 200)
        self.assertIn(
            b'<h1>Calculator</h1>',
            response.data
        )

    def test_calculations(self):

the test passes because the assertIn method of the unittest.TestCase class checks if the thing on the left is in the object on the right

REFACTOR: make it better

I add more HTML to index.html in the templates folder in the src folder

<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
</form>

I go to the browser and click refresh to see the change, the website has a place where I can put numbers or use the up and down arrows to change the numbers
I use ctrl+s on the keyboard in test_calculator_website.py to run the tests, still green

I add another input for the second number in index.html

<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
    <input type="number" name="second_input" required>
</form>

I go to the browser and click refresh to see the change, the website now has 2 places for me to put numbers
I use ctrl+s on the keyboard in test_calculator_website.py to run the tests, green

I add options for the operation in index.html

<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
    <input type="number" name="second_input" required>
    <select name="operation">
        <option value="add">+</option>
    </select>
</form>

I go to the browser and click refresh to see the change, the website now has a place for me to choose the operation, even though + is the only option
I use ctrl+s on the keyboard in website.py to run the tests, they are still green

I want the operation to show up between the 2 numbers, I change the order in index.html

<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
    <select name="operation">
        <option value="add">+</option>
    </select>
    <input type="number" name="second_input" required>
</form>

I go to the browser and click refresh to see the change, the operation is now between the 2 numbers
I use ctrl+s on the keyboard in website.py to run the tests. Green

I add the other operations to index.html

<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
    <select name="operation">
        <option value="add">+</option>
        <option value="subtract">-</option>
        <option value="divide">/</option>
        <option value="multiply">*</option>
    </select>
    <input type="number" name="second_input" required>
</form>

the browser shows all the options when I click refresh

I add a button to the form so the user can submit the numbers and operation for a calculation

<h1>Calculator</h1>
<form method="post" action="/calculate">
    <input type="number" name="first_input" required>
    <select name="operation">
        <option value="add">+</option>
        <option value="subtract">-</option>
        <option value="divide">/</option>
        <option value="multiply">*</option>
    </select>
    <input type="number" name="second_input" required>
    <button type="submit">calculate</button>
</form>

I go to the browser and click refresh to see the change
I enter 10000 as the first number and 20000 as the second number, with * as the operation

I click calculate and the browser shows

ugly and it works

fix handling ZeroDivisionError in division

I want to make sure the division function returns a message when the second number is 0

RED: make it fail

I add a new test

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        client = src.website.app.test_client()

        for operation in operations:
            with self.subTest(operation=operation):
                response = client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

    def test_website_handling_zero_division_error(self):
        x = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()

        response = client.post(
            '/calculate',
            data={
                'first_input': x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            'brmph?! I cannot divide by 0. Try again...'
        )


# Exceptions seen

the terminal shows AssertionError in short test summary info

AssertionError: '<!doctype html>\n<html lang=en>\n<title>5[225 chars]p>\n' != 'brmph?! I cannot divide by 0.

and in the traceback it shows the AssertionError was caused by ZeroDivisionError

ZeroDivisionError: float division by zero

good

GREEN: make it pass

I open calculator.py from the src folder

I add an exception handler to the divide function in calculator.py

@check_input
def divide(first_input, second_input):
    try:
        return first_input / second_input
    except ZeroDivisionError:
        return 'brmph?! I cannot divide by 0. Try again...'


@check_input
def multiply(first_input, second_input):

the terminal shows AssertionError

AssertionError: '<h2>PQ.RSTUVWXYZABCDEF / 0.0 = brmph?! I cannot divide by 0. Try again...</h2>' != 'brmph?! I cannot divide by 0. Try again...'

okay. It returns the right error message

I change the expectation of the assertion in test_calculator_website.py

    def test_website_handling_zero_division_error(self):
        x = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()

        response = client.post(
            '/calculate',
            data={
                'first_input': x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            (
                f'<h2>{x} / 0.0 = '
                'brmph?! I cannot divide by 0. Try again...</h2>'
            )
        )


# Exceptions seen

the test passes

REFACTOR: make it better

I made the same client in each test. I add a class attribute for it in the setUp method

class TestCalculatorWebsite(unittest.TestCase):

    def setUp(self):
        self.client = src.website.app.test_client()

    def test_home_page(self):

I use the new class attribute in test_home_page

    def test_home_page(self):
        # client = src.website.app.test_client()
        client = self.client
        response = client.get('/')

the test is still green

I use it directly in the response

        response = self.client.get('/')

still green

I remove the client variable and the commented line

    def test_home_page(self):
        response = self.client.get('/')
        self.assertEqual(response.status_code, 200)
        self.assertIn(
            b'<h1>Calculator</h1>',
            response.data
        )

    def test_calculations(self):

green

I use the class attribute in test_calculations

        for operation in operations:
            with self.subTest(operation=operation):
                # response = client.post(
                response = self.client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                        'operation': operation,
                    }
                )

still green

I remove the commented line and the client variable

    def test_calculations(self):
        x = tests.test_calculator.a_random_number()
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        for operation in operations:
            with self.subTest(operation=operation):
                response = self.client.post(
                    '/calculate',
                    data={
                        'first_input': x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

    def test_website_handling_zero_division_error(self):

the test is still green

I use the class attribute in test_website_handling_zero_division_error

    def test_website_handling_zero_division_error(self):
        x = tests.test_calculator.a_random_number()
        client = src.website.app.test_client()

        # response = client.post(
        response = self.client.post(
            '/calculate',
            data={
                'first_input': x,
                'second_input': 0,
                'operation': 'divide',
            }
        )

still green

I remove the commented line and client variable

    def test_website_handling_zero_division_error(self):
        x = tests.test_calculator.a_random_number()
        response = self.client.post(
            '/calculate',
            data={
                'first_input': x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            (
                f'<h2>{x} / 0.0 = '
                'brmph?! I cannot divide by 0. Try again...</h2>'
            )
        )


# Exceptions seen

green

I add class attributes for the random numbers to the setUp method

    def setUp(self):
        self.client = src.website.app.test_client()
        self.x = tests.test_calculator.a_random_number()

    def test_home_page(self):

I use it in test_calculations

    def test_calculations(self):
        # x = tests.test_calculator.a_random_number()
        x = self.x
        y = tests.test_calculator.a_random_number()

still green

I use the Rename Symbol to change x to self.x

    def test_calculations(self):
        # x = tests.test_calculator.a_random_number()
        self.x = self.x
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        for operation in operations:
            with self.subTest(operation=operation):
                response = self.client.post(
                    '/calculate',
                    data={
                        'first_input': self.x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(self.x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{self.x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

the test is still green

I remove the commented line and self.x = self.x

    def test_calculations(self):
        y = tests.test_calculator.a_random_number()

        operations = {
            'add': '+',
            'subtract': '-',
            'divide': '/',
            'multiply': '*',
        }

        for operation in operations:
            with self.subTest(operation=operation):
                response = self.client.post(
                    '/calculate',
                    data={
                        'first_input': self.x,
                        'second_input': y,
                        'operation': operation,
                    }
                )
                self.assertEqual(response.status_code, 200)

                function = src.calculator.__getattribute__(
                    operation
                )
                result = function(self.x, y)
                self.assertEqual(
                    response.data.decode(),
                    (
                        f'<h2>{self.x} {operations[operation]} {y} '
                        f'= {result}</h2>'
                    )
                )

    def test_website_handling_zero_division_error(self):

I use the Rename Symbol feature to change x to self.x in test_website_handling_zero_division_error

    def test_website_handling_zero_division_error(self):
        self.x = tests.test_calculator.a_random_number()
        response = self.client.post(
            '/calculate',
            data={
                'first_input': self.x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            (
                f'<h2>{self.x} / 0.0 = '
                'brmph?! I cannot divide by 0. Try again...</h2>'
            )
        )

still green

I remove self.x = tests.test_calculator.a_random_number()

    def test_website_handling_zero_division_error(self):
        response = self.client.post(
            '/calculate',
            data={
                'first_input': self.x,
                'second_input': 0,
                'operation': 'divide',
            }
        )
        self.assertEqual(
            response.data.decode(),
            (
                f'<h2>{self.x} / 0.0 = '
                'brmph?! I cannot divide by 0. Try again...</h2>'
            )
        )


# Exceptions seen

test_calculator_sends_message_when_inputs_are_not_numbers

time to fix the problem with the second input in test_calculator_sends_message_when_input_is_not_a_number

RED: make it fail

I open test_calculator.py from the tests folder

I add another assertion where the second input is not a number and the first input is a number

    def test_calculator_sends_message_when_input_is_not_a_number(self):
        for bad_input in (
            None,
            True, False,
            str(), 'text',
            tuple(), (0, 1, 2, 'n'),
            list(), [0, 1, 2, 'n'],
            set(), {0, 1, 2, 'n'},
            dict(), {'key': 'value'},
        ):
            for operation in self.calculator_tests:
                with self.subTest(
                    operation=operation,
                    bad_input=bad_input,
                ):
                    self.assertEqual(
                        src.calculator.__getattribute__(operation)(
                            bad_input, a_random_number()
                        ),
                        'brmph?! Numbers only. Try again...'
                    )
                    self.assertEqual(
                        src.calculator.__getattribute__(operation)(
                            a_random_number(), bad_input
                        ),
                        'brmph?! Numbers only. Try again...'
                    )

    def test_calculator_functions(self):

the terminal shows TypeError

TypeError: unsupported operand type(s) for /: 'float' and 'dict

for the 52 sub tests where the first input is a number and the second input is not a number

GREEN: make it pass

I add a condition to the if statement in the check_input decorator function in calculator.py

            list(), [0, 1, 2, 'n'],
            set(), {0, 1, 2, 'n'},
            dict(), {'key': 'value'},
        )
        for bad_input in (

the test is still green

I change the first for loop

        # for bad_input in (
        #     None,
        #     True, False,
        #     str(), 'text',
        #     tuple(), (0, 1, 2, 'n'),
        #     list(), [0, 1, 2, 'n'],
        #     set(), {0, 1, 2, 'n'},
        #     dict(), {'key': 'value'},
        # ):
        for bad_input in bad_inputs:

still green

I add another for loop and move everything after it to the right

        for bad_input in bad_inputs:
            for second_input in bad_inputs:
                for operation in self.calculator_tests:
                    with self.subTest(
                        operation=operation,
                        bad_input=bad_input,
                    ):
                        self.assertEqual(
                            src.calculator.__getattribute__(operation)(
                                bad_input, a_random_number()
                            ),
                            'brmph?! Numbers only. Try again...'
                        )

green

I add second_input to the subTest method

                    with self.subTest(
                        operation=operation,
                        bad_input=bad_input,
                        y=second_input,
                    ):

still green

I change the second input in the call to the calculator functions in the assertion

                        self.assertEqual(
                            src.calculator.__getattribute__(operation)(
                                # bad_input, a_random_number()
                                bad_input, second_input
                            ),
                            'brmph?! Numbers only. Try again...'
                        )

the test is still green

I change the expectation to make sure the test still works

                        self.assertEqual(
                            src.calculator.__getattribute__(operation)(
                                # bad_input, a_random_number()
                                bad_input, second_input
                            ),
                            # 'brmph?! Numbers only. Try again...'
                            'BOOM!!!'
                        )

the terminal shows AssertionError

AssertionError: 'brmph?! Numbers only. Try again...' != 'BOOM!!!'

for 676 failures that are all the ways the bad inputs can be sent with the operations, it works

I change the expectation back, and the test goes back to green
I remove the commented lines

I use the Rename Symbol feature to change bad_input to x and second_input to y

    def test_calculator_sends_message_when_input_is_not_a_number(self):
        bad_inputs = (
            None,
            True, False,
            str(), 'text',
            tuple(), (0, 1, 2, 'n'),
            list(), [0, 1, 2, 'n'],
            set(), {0, 1, 2, 'n'},
            dict(), {'key': 'value'},
        )
        for x in bad_inputs:
            for y in bad_inputs:
                for operation in self.calculator_tests:
                    with self.subTest(
                        operation=operation,
                        x=x, y=y,
                    ):
                        self.assertEqual(
                            src.calculator.__getattribute__(operation)(
                                x, y
                            ),
                            'brmph?! Numbers only. Try again...'
                        )

    def test_calculator_functions(self):

close the project

I close test_calculator.py, test_calculator_website.py, calculator.py, website.py and index.html in the editor
I click in the first terminal, then use q on the keyboard to leave the tests. The terminal goes back to the command line
I change directory to the parent of calculator
```
cd ..
```
the terminal shows
```
.../pumping_python
```
I am back in the pumping_python directory
I click in the second terminal, then use ctrl+c on the keyboard to close the web server. The terminal goes back to the command line

review

I ran tests to show that

I can use Flask with `Test Driven Developments`_
I can make routes, handle forms, and use the existing calculator
Error messages from the calculator appear in the browser

code from the chapter

Do you want to see all the CODE I typed in this chapter?

what is next?

you know

how to make a test driven development environment
how to build a full calculator with TDD
how to turn it into a website with Flask

rate pumping python

If this has been a 7 star experience for you, please CLICK HERE to leave a 5 star review of pumping python. It helps other people get into the book too

how to make a calculator

catalog of tests