quick fix

app/templates/views/edit-sms-template.html

@@ -27,7 +27,7 @@
       {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
     {% endif %}
 
-    {% call form_wrapper(data_force_focus=True) %}
+    {% call form_wrapper() %}
       <div class="grid-container padding-0">
         <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
           {{ form.name(param_extensions={

tests/javascripts/job-socket.test.js

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// Mock socket.io-client BEFORE importing your script
+const onHandlers = {};
+
+jest.mock("socket.io-client", () => {
+  return jest.fn(() => ({
+    on: jest.fn((event, cb) => {
+      onHandlers[event] = cb;
+    }),
+    emit: jest.fn(),
+    connected: true,
+  }));
+});
+
+const io = require("socket.io-client");
+
+// Import script AFTER mocks
+require("../../app/assets/javascripts/socketio.js");
+
+describe("job-socket.js", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () =>
+          Promise.resolve({
+            status: "<p>Status Updated</p>",
+            counts: "<p>Counts Updated</p>",
+            notifications: "<p>Notifications Updated</p>",
+          }),
+      })
+    );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+    Object.keys(onHandlers).forEach((key) => delete onHandlers[key]);
+  });
+
+  it("should initialize socket and update DOM on job_updated if feature flag is ON", () => {
+    document.body.innerHTML = `
+      <div data-job-id="123" data-feature="true"></div>
+      <div data-socket-update="status" data-resource="/services/abc123/jobs/123.json"></div>
+      <div data-socket-update="counts"></div>
+      <div data-socket-update="notifications"></div>
+    `;
+    window.location.pathname = "/jobs/123";
+
+    // Trigger DOMContentLoaded (after DOM is ready)
+    document.dispatchEvent(new Event("DOMContentLoaded"));
+
+    // Trigger socket connect + job update
+    onHandlers.connect?.();
+    onHandlers.job_updated?.({ job_id: "123" });
+
+    // Flush debounce timer
+    jest.runAllTimers();
+
+    expect(global.fetch).toHaveBeenCalledWith("/services/abc123/jobs/123.json");
+    expect(
+      document.querySelector('[data-socket-update="status"]').innerHTML
+    ).toBe("<p>Status Updated</p>");
+    expect(
+      document.querySelector('[data-socket-update="counts"]').innerHTML
+    ).toBe("<p>Counts Updated</p>");
+    expect(
+      document.querySelector('[data-socket-update="notifications"]').innerHTML
+    ).toBe("<p>Notifications Updated</p>");
+  });
+
+  it("should not connect or update if feature flag is OFF", () => {
+    document.body.innerHTML = `
+      <div data-job-id="123" data-feature="false"></div>
+      <div data-socket-update="status" data-resource="/services/abc123/jobs/123.json"></div>
+    `;
+    window.location.pathname = "/jobs/123";
+
+    document.dispatchEvent(new Event("DOMContentLoaded"));
+
+    expect(global.fetch).not.toHaveBeenCalled();
+    expect(onHandlers.connect).toBeUndefined();
+  });
+
+  it("should not connect or update if job ID is missing", () => {
+    document.body.innerHTML = `
+      <div data-feature="true"></div>
+      <div data-socket-update="status" data-resource="/services/abc123/jobs/123.json"></div>
+    `;
+    window.location.pathname = "/jobs/123";
+
+    document.dispatchEvent(new Event("DOMContentLoaded"));
+
+    expect(global.fetch).not.toHaveBeenCalled();
+    expect(onHandlers.connect).toBeUndefined();
+  });
+});