Fix no. of column headers on breaking change page

The breaking change page wasn’t properly accounting for the fact that
letter recipients span multiple columns – it was assuming they’d only
take up one column like they do for email and SMS.

This commit fixes:
- the number of column headers (A, B, C, …) to be correct
- the count of columns (you will need X columns in your file) to be
  correct

It then parameterises the test to look at a case where a recipient is
in one column (email) and multiple columns (letter).

app/main/views/templates.py

@@ -287,13 +287,17 @@ def edit_service_template(service_id, template_id):
         }, current_service)
         template_change = get_template(template, current_service).compare_to(new_template)
         if template_change.has_different_placeholders and not request.form.get('confirm'):
+            example_column_headings = (
+                first_column_headings[new_template.template_type] +
+                list(new_template.placeholders)
+            )
             return render_template(
                 'views/templates/breaking-change.html',
                 template_change=template_change,
                 new_template=new_template,
-                column_headings=list(ascii_uppercase[:len(new_template.placeholders) + 1]),
+                column_headings=list(ascii_uppercase[:len(example_column_headings)]),
                 example_rows=[
-                    first_column_headings[new_template.template_type] + list(new_template.placeholders),
+                    example_column_headings,
                     get_example_csv_rows(new_template),
                     get_example_csv_rows(new_template)
                 ],

app/templates/views/templates/breaking-change.html

@@ -41,8 +41,8 @@
 
   <p>
     When you send messages using this template you’ll need
-    {{ new_template.placeholders|length + 1 }}
-    column{{ 's' if new_template.placeholders|length > 0 else '' }} of data:
+    {{ column_headings|length }}
+    column{{ 's' if column_headings|length > 1 else '' }} of data:
   </p>
 
   <div class="spreadsheet">