How to unit test a form submission when multiple forms on a route?

Question

I want to add unit tests to my flask app that tests form behavior on valid and invalid logins + signups. Currently, I have the signup form and a login form hosted on one page and route, and am using a hidden input field to identify which of the two forms is submitted / determine next actions.

My question is - how do I write a unit test that targets a specific form on a page? All the examples I've seen so far post data to a specific route, which is currently what I am doing. But that is failing because I need an added way to say "and we're submitting x form".

So is there a way to add "and we're submitting x form" in the post request?

** edited to add, here are the different ways I've tried to pass the hidden form data in the post data dict, with no success.

data = dict(username="[email protected]", password="test", login_form) 
data = dict(username="[email protected]", password="test", "login_form")
data = dict(username="[email protected]", password="test", login_form=True)

login unit test:

from app import app
import unittest

class FlaskTestCase(unittest.TestCase):

  #ensure that login works with correct credentials
  def test_correct_login(self):
    tester = app.test_client(self)
    response = tester.post(
      '/login',
      data = dict(username="[email protected]", password="test"),
      follow_redirects=True
      )
    self.assertIn(b'you are logged in', response.data)

login route in views.py:

@app.route('/login', methods=['POST', 'GET'])
def login():
  login_form = LoginForm()
  signup_form = SignupForm()
  error_login = ''
  error_signup = ''

  #login form
  if 'login_form' in request.form and login_form.validate():
   # do login form stuff

  #signup form 
  if 'signup_form' in request.form and signup_form.validate():
   # do signup form stuff

  return render_template('login.html', login_form=login_form, signup_form=signup_form, error=error)

login.html:

<div class="login-form form-400">
      <h3>Log In To Your Account</h3>
      <form action="" method="post">
      <input type="hidden" name="login_form">
      {% if error_login != '' %}
      <label class="error">
        {{ error_login }}
      </label>
      {% endif %}

      {% from "_formhelper.html" import render_field %}
      {{ login_form.hidden_tag() }}
      {{ render_field(login_form.email, placeholder="Your Email", class="form-item__full", type="email") }}
      {{ render_field(login_form.password, placeholder="Your Password", class="form-item__full") }}
      <input type="submit" value="Login" class="button button-blue">
    </form>
  </div>

  <p class="login-divider">or</p>

  <div class="signup-form form-400">
    <h3>Create a New Account</h3>
    <form action="" method="post">
      <input type="hidden" name="signup_form">
      {% if error_signup != '' %}
      <label class="error">
        {{ error_signup | safe}}
      </label>
      {% endif %}

      {% from "_formhelper.html" import render_field %}
      {{ signup_form.hidden_tag() }}
      {{ render_field(signup_form.username, placeholder="Pick a Username", class="form-item__full") }}
      {{ render_field(signup_form.email, placeholder="Your Email", class="form-item__full", type="email") }}
      {{ render_field(signup_form.password, placeholder="Create a Password", class="form-item__full") }}

      <input type="submit" value="Sign Up" class="button button-green">
    </form>
  </div>

Answer 1

Ok I figured it out. To pass the login_form info, I had to end up passing an empty string on the login_form like this:

def test_correct_login(self):
    tester = app.test_client(self)
    response = tester.post(
      '/login',
      data = dict(username="[email protected]", password="test", login_form=""),
      follow_redirects=True
      )
    self.assertIn(b'you are logged in', response.data)

I did this by throwing a print request.form in my views.py for this route and then saw the empty string.

It was still failing, but because the login_form.validate() was failing because of the csrf token added by the WTForms module. In the end, this discussion had the answer. Flask-WTF / WTForms with Unittest fails validation, but works without Unittest

Thanks @drdrez for your suggestions!

Answer 2

Update: Thanks for updating your question with what you've already tried! I have a few other ideas about what's causing the issue.

Let's continue to look at the HTML and try to understand the technologies your program is built on top of. In the server side login.html file, notice these lines:

      {% from "_formhelper.html" import render_field %}
      {{ login_form.hidden_tag() }}
      {{ render_field(login_form.email, placeholder="Your Email", class="form-item__full", type="email") }}
      {{ render_field(login_form.password, placeholder="Your Password", class="form-item__full") }}

It isn't HTML, and is probably being processed on the server side to produce HTML and serve to the client. The line that contains login_form.hidden_tag() looks interesting, so I would recommend loading this page in your browser and inspecting the HTML served to the client. Unfortunately, I haven't used Flask before, so I can't give any more direct help.

However, my advice is to continue digging into how Flask and the HTML Form works. The nice thing about Python is you have access to libraries' source code, which allows you to figure out how they work so you can learn how to use them and fix bugs in your application that uses them.

Sorry I can't give you more direct help, good luck!

---

Let's look at login.html. When you submit a form, how does the login route in views.py know which form was submitted? If you know HTML Forms, <input> elements nested in a form are used to, in this case, post data to your server/application.

Back to login.html, notice these two lines:

...
      <h3>Log In To Your Account</h3>
      <input type="hidden" name="login_form">
...
    <h3>Create a New Account</h3>
    <form action="" method="post">
      <input type="hidden" name="signup_form">
...

Those are <input> elements, with a type of "hidden", so they won't display, with names of "login_form" and "signup_form", which are included in the data that is submitted by the form.

Now in the login route in views.py, you'll notice there two lines:

  #login form
  if 'login_form' in request.form and login_form.validate():
   # do login form stuff

  #signup form 
  if 'signup_form' in request.form and signup_form.validate():
   # do signup form stuff

Those are testing to see if the phrase "login_form" or "signup_form" are in present in the list request.form. Back to your unit test now:

    response = tester.post(
      '/login',
      data = dict(username="[email protected]", password="test"),
      follow_redirects=True
      )

Notice the data you are passing in the dict, this is mimicking the form data, so you should probably include either "login_form" or "signup_form" to mimic the behavior of the HTML form correctly.

If you're unfamiliar with HTML Forms and HTTP Post, I would suggest searching for some tutorials, or just reading documentation on MDN or elsewhere. When building software on top of a technology (like HTTP and HTML), it can be helpful to understand how those technologies work when you run into bugs in your own software.

Hope this helps, let me know if I can clarify anything!

Answer 3

You might be experiencing a problem because you have not flagged the request as being of the form application content type. I note you are trying to access request.form, which requires that the data package is parsed in a certain way. You could try to do something like the following:

    response = tester.post(
  '/login',
  data = dict(username="[email protected]", password="test"),
  follow_redirects=True, 
  headers = {"Content-Type":"application/x-www-form-urlencoded"}
  )