jest fix

app/main/views/templates.py

@@ -698,7 +698,9 @@ def _get_content_count_error_and_message_for_template(template):
         # Check for blocked characters
         if contains_blocked_characters(template.content):
             warning = f"{s1}{s2}"
-            return False, Markup(warning)  # 🚨 ONLY show the warning, hiding "Will be charged..."
+            return False, Markup(
+                warning
+            )  # 🚨 ONLY show the warning, hiding "Will be charged..."
 
         # If message is too long, return the length error
         if template.is_message_too_long():

tests/app/main/views/test_templates.py

@@ -1748,7 +1748,12 @@ def test_can_create_email_template_with_emoji(
 @pytest.mark.parametrize(
     ("template_type", "expected_error"),
     [
-        ("sms", ("Please remove the unaccepted character 🍜 in your message, then save again")),
+        (
+            "sms",
+            (
+                "Please remove the unaccepted character 🍜 in your message, then save again"
+            ),
+        ),
     ],
 )
 def test_should_not_create_sms_template_with_emoji(
@@ -1773,14 +1778,21 @@ def test_should_not_create_sms_template_with_emoji(
         _expected_status=200,
     )
     # print(page.main.prettify())
-    assert expected_error in normalize_spaces(page.select_one("#template_content-error").text)
+    assert expected_error in normalize_spaces(
+        page.select_one("#template_content-error").text
+    )
     assert mock_create_service_template.called is False
 
 
 @pytest.mark.parametrize(
     ("template_type", "expected_error"),
     [
-        ("sms", ("Please remove the unaccepted character 🍔 in your message, then save again")),
+        (
+            "sms",
+            (
+                "Please remove the unaccepted character 🍔 in your message, then save again"
+            ),
+        ),
     ],
 )
 def test_should_not_update_sms_template_with_emoji(

tests/javascripts/validation.test.js

@@ -5,14 +5,14 @@ describe("Form Validation", () => {
 
   beforeEach(() => {
     document.body.innerHTML = `
-      <form class="send-one-off-form">
+      <form class="send-one-off-form" data-force-focus="True">
         <label for="test-input">Test Input</label>
         <input id="test-input" name="testInput" type="text" />
         <button type="submit">Submit</button>
       </form>
     `;
 
-    form = document.querySelector(".send-one-off-form");
+    form = document.querySelector('form[data-force-focus="True"]');
     input = document.getElementById("test-input");
     submitButton = form.querySelector("button");
 
@@ -59,4 +59,55 @@ describe("Form Validation", () => {
 
     expect(spy).toHaveBeenCalled();
   });
+
+  test("Displays error if no radio in group is selected", async () => {
+    document.body.innerHTML = `
+      <form class="send-one-off-form" data-force-focus="True">
+        <fieldset>
+          <legend>Pick one</legend>
+          <input type="radio" id="opt1" name="group" value="1" />
+          <label for="opt1">Option 1</label>
+          <input type="radio" id="opt2" name="group" value="2" />
+          <label for="opt2">Option 2</label>
+          <button type="submit">Submit</button>
+        </fieldset>
+      </form>
+    `;
+
+    form = document.querySelector('form[data-force-focus="True"]');
+    attachValidation();
+
+    form.dispatchEvent(new Event("submit", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 20));
+
+    const errorElement = document.getElementById("group-error");
+    expect(errorElement).not.toBeNull();
+    expect(errorElement.textContent).toBe("Error: A selection must be made.");
+  });
+
+  test("Removes radio group error when one is selected", async () => {
+    document.body.innerHTML = `
+      <form class="send-one-off-form" data-force-focus="True">
+        <input type="radio" id="radio1" name="group" value="1" />
+        <label for="radio1">Option 1</label>
+        <input type="radio" id="radio2" name="group" value="2" />
+        <label for="radio2">Option 2</label>
+        <button type="submit">Submit</button>
+      </form>
+    `;
+
+    form = document.querySelector('form[data-force-focus="True"]');
+    attachValidation();
+
+    form.dispatchEvent(new Event("submit", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 20));
+
+    const radioInput = document.getElementById("radio2");
+    radioInput.checked = true;
+    radioInput.dispatchEvent(new Event("change", { bubbles: true }));
+
+    const errorElement = document.getElementById("group-error");
+    expect(errorElement.style.display).toBe("none");
+  });
+
 });