Show one field at a time on send yourself a test

The send yourself a test feature is useful for two things:
- constructing an email/text message/letter without uploading a CSV file
- seeing what the thing your going to send will look like (either by
  getting it in your inbox or downloading the PDF)
- learning the concept of placeholders, ie understanding they’re thing
  that gets populated with _stuff_

The problem we’re seeing is that the current UI breaks when a template
has a lot of placeholders. This is especially apparent with letter
templates, which have a minimum of 7 placeholders by virtue of the
address.

The idea behind having the form fields side-by-side was to help people
understand the relationship between their spreadsheet columns and the
placeholders. But this means that the page was doing a lot of work,
trying to teach:
- replacement of placeholders
- link between placeholders and spreadsheet columns

The latter is better explained by the example spreadsheet shown on the
upload page. So it can safely be removed from the send yourself a test
page – in other words the fields don’t need to be shown side by side.

Showing them one-at-a-time works well because:
- it’s really obvious, even on first use, what the page is asking you to
  do
- as your step through each placeholder, you see the message build up
  with the data you’ve entered – you’re learning how replacement of
  placeholders works by repetition

This also means adding a matching endpoint for viewing each step of
making the test letter as a PDF/PNG because we can’t reuse the view of
the template without any placeholders filled any more.

tests/app/test_utils.py

@@ -4,6 +4,8 @@ from csv import DictReader
 
 import pytest
 
+from collections import OrderedDict
+
 from app.utils import (
     email_safe,
     generate_notifications_csv,
@@ -105,6 +107,20 @@ def test_can_create_spreadsheet_from_large_excel_file():
     assert ret.as_csv_data
 
 
+def test_can_create_spreadsheet_from_dict():
+    assert Spreadsheet.from_dict(OrderedDict(
+        foo='bar',
+        name='Jane',
+    )).as_csv_data == (
+        "foo,name\r\n"
+        "bar,Jane\r\n"
+    )
+
+
+def test_can_create_spreadsheet_from_dict_with_filename():
+    assert Spreadsheet.from_dict({}, filename='empty.csv').as_dict['file_name'] == "empty.csv"
+
+
 def test_generate_notifications_csv_returns_correct_csv_file(_get_notifications_csv_mock):
     csv_content = generate_notifications_csv(service_id='1234')
     csv_file = DictReader(StringIO('\n'.join(csv_content)))