Fixing tests, adding dynamic slug

app/__init__.py

@@ -616,6 +616,8 @@ def setup_event_handlers():
 
 
 def add_template_filters(application):
+    application.add_template_filter(slugify)
+
     for fn in [
         format_auth_type,
         format_billions,
@@ -673,3 +675,11 @@ def init_jinja(application):
     ]
     jinja_loader = jinja2.FileSystemLoader(template_folders)
     application.jinja_loader = jinja_loader
+
+import re
+
+def slugify(text):
+    """
+    Converts text to lowercase, replaces spaces with hyphens, and removes invalid characters.
+    """
+    return re.sub(r'[^a-z0-9-]', '', re.sub(r'\s+', '-', text.lower()))

app/templates/components/components/input/template.njk

@@ -39,7 +39,7 @@
 {% endif %}
   <input
     class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}"
-    id="{{ params.label.text | lower | replace(' ', '-') }}"
+    id="{{ params.label.text | default('unknown') | slugify }}"
     name="{{ params.name }}"
     type="{{ params.type | default('text') }}"
     {%- if params.value %} value="{{ params.value }}"{% endif %}

tests/app/main/views/service_settings/test_service_settings.py

@@ -2372,11 +2372,13 @@ def test_send_files_by_email_contact_details_prefills_the_form_with_the_existing
     page = client_request.get(
         "main.send_files_by_email_contact_details", service_id=SERVICE_ONE_ID
     )
+
     assert page.find(
         "input", attrs={"name": "contact_details_type", "value": contact_details_type}
     ).has_attr("checked")
+
     assert (
-        page.find("input", {"id": contact_details_type}).get("value")
+        page.find("input", {"name": contact_details_type}).get("value")
         == contact_details_value
     )