Migrated initButtonSelects from core.js to own includes file

- removed initButtonSelects from core.js , migrate to Typescript & and wrote test for it
- Fixes #9494

CHANGELOG.txt

@@ -17,6 +17,7 @@ Changelog
  * Add documentation for `register_user_listing_buttons` hook (LB (Ben Johnston))
  * Clean up Prettier & Eslint usage for search promotions formset JS file (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
+ * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
  * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)

client/src/entrypoints/admin/core.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
-import { initTooltips } from '../../includes/initTooltips';
 import { escapeHtml } from '../../utils/text';
+import { initButtonSelects } from '../../includes/initButtonSelects';
+import { initTooltips } from '../../includes/initTooltips';
 
 /* generic function for adding a message to message area through JS alone */
 function addMessage(status, text) {
@@ -593,32 +594,6 @@ $(document).ready(initDropDowns);
 wagtail.ui.initDropDowns = initDropDowns;
 wagtail.ui.DropDownController = DropDownController;
 
-// Initialise button selectors
-function initButtonSelects() {
-  document.querySelectorAll('.button-select').forEach((element) => {
-    const inputElement = element.querySelector('input[type="hidden"]');
-
-    element
-      .querySelectorAll('.button-select__option')
-      .forEach((buttonElement) => {
-        buttonElement.addEventListener('click', (e) => {
-          e.preventDefault();
-          inputElement.value = buttonElement.value;
-
-          element
-            .querySelectorAll('.button-select__option--selected')
-            .forEach((selectedButtonElement) => {
-              selectedButtonElement.classList.remove(
-                'button-select__option--selected',
-              );
-            });
-
-          buttonElement.classList.add('button-select__option--selected');
-        });
-      });
-  });
-}
-
 $(document).ready(initButtonSelects);
 
 window.wagtail = wagtail;

client/src/includes/initButtonSelects.ts

@@ -0,0 +1,35 @@
+/**
+ * Initialise button selectors
+ */
+const initButtonSelects = () => {
+  document.querySelectorAll('.button-select').forEach((element) => {
+    const inputElement = element.querySelector(
+      'input[type="hidden"]',
+    ) as HTMLInputElement;
+
+    if (!inputElement) {
+      return;
+    }
+
+    element
+      .querySelectorAll('.button-select__option')
+      .forEach((buttonElement) => {
+        buttonElement.addEventListener('click', (event) => {
+          event.preventDefault();
+          inputElement.value = (buttonElement as HTMLButtonElement).value;
+
+          element
+            .querySelectorAll('.button-select__option--selected')
+            .forEach((selectedButtonElement) => {
+              selectedButtonElement.classList.remove(
+                'button-select__option--selected',
+              );
+            });
+
+          buttonElement.classList.add('button-select__option--selected');
+        });
+      });
+  });
+};
+
+export { initButtonSelects };

client/src/includes/messages.test.js

@@ -0,0 +1,77 @@
+import { initButtonSelects } from './initButtonSelects';
+
+// save our DOM elements to a variable
+const testElements = `
+<div class="button-select">
+  <input type="hidden"/>
+  <button class="button-select__option">
+    All
+  </button>
+  <button class="button-select__option" value="in_progress">
+    In Progress
+  </button>
+</div>
+`;
+
+describe('initButtonSelects', () => {
+  const spy = jest.spyOn(document, 'addEventListener');
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should do nothing if there is no button-select container', () => {
+    // Set up our document body
+    document.body.innerHTML = `
+    <div>
+      <input type="hidden" />
+      <button class="button-select__option" />
+    </div>`;
+    initButtonSelects();
+    // no event listeners registered
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  describe('there is a button-select container present', () => {
+    it('should add class of button-select__option--selected to button-select__option when clicked', () => {
+      document.body.innerHTML = testElements;
+      initButtonSelects();
+      document.querySelectorAll('.button-select__option').forEach((button) => {
+        button.click();
+        expect(button.classList.value).toContain(
+          'button-select__option--selected',
+        );
+      });
+    });
+
+    it('should remove the class button-select__option--selected when button is not clicked', () => {
+      document.body.innerHTML = testElements;
+      initButtonSelects();
+      document.querySelectorAll('.button-select__option').forEach((button) => {
+        button.click();
+        document
+          .querySelector('.button-select')
+          .querySelectorAll('.button-select__option--selected')
+          .forEach((selectedButtonElement) => {
+            selectedButtonElement.classList.remove(
+              'button-select__option--selected',
+            );
+          });
+        expect(button.classList.value).not.toContain(
+          'button-select__option--selected',
+        );
+      });
+    });
+    it('add the value of the button clicked to the input value', () => {
+      document.body.innerHTML = testElements;
+      initButtonSelects();
+      const inputElement = document.querySelector('input[type="hidden"]');
+      // Checking that the input ellement has no value
+      expect(inputElement.value).toBeFalsy();
+      document.querySelectorAll('.button-select__option').forEach((button) => {
+        button.click();
+        expect(inputElement.value).toEqual(button.value);
+      });
+    });
+  });
+});

docs/releases/4.2.md

@@ -26,6 +26,7 @@ depth: 1
  * Clean up duplicate JavaScript for the `escapeHtml` function (Jordan Rob)
  * Add documentation for [`register_user_listing_buttons`](register_user_listing_buttons) hook (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
+ * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
 
 ### Bug fixes