Add unit tests for RadioSelect/BoundRadioSelect

client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`telepath: wagtail.widgets.RadioSelect it renders correctly 1`] = `
+"<ul id=\\"the-id\\">
+          <li>
+            <label for=\\"the-id_0\\">
+            <input type=\\"radio\\" name=\\"the-name\\" value=\\"tea\\" id=\\"the-id_0\\"> Tea</label>
+          </li>
+          <li>
+            <label for=\\"the-id_1\\">
+            <input type=\\"radio\\" name=\\"the-name\\" value=\\"coffee\\" id=\\"the-id_1\\"> Coffee</label>
+          </li>
+        </ul>"
+`;

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -45,3 +45,58 @@ describe('telepath: wagtail.widgets.Widget', () => {
     expect(document.activeElement).toBe(document.querySelector('input'));
   });
 });
+
+describe('telepath: wagtail.widgets.RadioSelect', () => {
+  let boundWidget;
+
+  beforeEach(() => {
+    // Create a placeholder to render the widget
+    document.body.innerHTML = '<div id="placeholder"></div>';
+
+    // Unpack and render a radio select widget
+    const widgetDef = window.telepath.unpack({
+      _type: 'wagtail.widgets.RadioSelect',
+      _args: [
+        `<ul id="__ID__">
+          <li>
+            <label for="__ID___0">
+            <input type="radio" name="__NAME__" value="tea" id="__ID___0"> Tea</label>
+          </li>
+          <li>
+            <label for="__ID___1">
+            <input type="radio" name="__NAME__" value="coffee" id="__ID___1"> Coffee</label>
+          </li>
+        </ul>`,
+        '__ID___0'
+      ]
+    });
+    boundWidget = widgetDef.render($('#placeholder'), 'the-name', 'the-id', 'tea');
+  });
+
+  test('it renders correctly', () => {
+    expect(document.body.innerHTML).toMatchSnapshot();
+    expect(document.querySelector('input[value="tea"]').checked).toBe(true);
+    expect(document.querySelector('input[value="coffee"]').checked).toBe(false);
+  });
+
+  test('getValue() returns the current value', () => {
+    expect(boundWidget.getValue()).toBe('tea');
+  });
+
+  test('getState() returns the current state', () => {
+    expect(boundWidget.getState()).toBe('tea');
+  });
+
+  test('setState() changes the current state', () => {
+    boundWidget.setState('coffee');
+    expect(document.querySelector('input[value="tea"]').checked).toBe(false);
+    expect(document.querySelector('input[value="coffee"]').checked).toBe(true);
+  });
+
+  test('focus() focuses the text input', () => {
+    boundWidget.focus();
+
+    // Note: This widget always focuses the last element
+    expect(document.activeElement).toBe(document.querySelector('input[value="coffee"]'));
+  });
+});