From de67064c416aabb8d4bea428e6e508d84e7e825e Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Mon, 23 Jun 2025 17:52:54 -0700
Subject: [PATCH] jest test and css

---
 .../uswds/_uswds-theme-custom-styles.scss     |  7 ++
 .../javascripts/collapsibleCheckboxes.test.js | 80 +++++++++++++++++++
 2 files changed, 87 insertions(+)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 208a42f30..c795d98f8 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -316,6 +316,13 @@ td.table-empty-message {
 }
 
 .js-stick-at-bottom-when-scrolling {
+  position: sticky;
+  bottom: 0;
+  background: white;
+  border-top: 1px solid color('gray-cool-10');
+  padding: units(2);
+  margin-top: units(2);
+  z-index: 10;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js
index 00b2b7450..c75e25ff6 100644
--- a/tests/javascripts/collapsibleCheckboxes.test.js
+++ b/tests/javascripts/collapsibleCheckboxes.test.js
@@ -371,6 +371,86 @@ describe('Collapsible fieldset', () => {
 
   });
 
+  describe("check/uncheck all functionality", () => {
+
+    beforeEach(() => {
+      window.GOVUK.modules.start();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+    });
+
+    test("adds a 'Select all' button when checkboxes are shown", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      expect(toggleButton).not.toBeNull();
+      expect(toggleButton.textContent).toEqual('Select all');
+    });
+
+    test("clicking 'Select all' checks all checkboxes", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      expect(checkboxes[0].checked).toBe(false);
+      expect(checkboxes[9].checked).toBe(false);
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(checkboxes[0].checked).toBe(true);
+      expect(checkboxes[9].checked).toBe(true);
+    });
+
+    test("button changes to 'Deselect all' when all are checked", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(toggleButton.textContent).toEqual('Deselect all');
+    });
+
+    test("clicking 'Deselect all' unchecks all checkboxes", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+
+      helpers.triggerEvent(toggleButton, 'click');
+      expect(checkboxes[0].checked).toBe(true);
+
+      helpers.triggerEvent(toggleButton, 'click');
+
+      expect(checkboxes[0].checked).toBe(false);
+      expect(checkboxes[9].checked).toBe(false);
+    });
+
+    test("button is hidden when fieldset is collapsed", () => {
+      const toggleButton = document.querySelector('.usa-button--small');
+      const doneButton = formGroup.querySelector('.govuk-button');
+
+      expect(toggleButton.parentElement.style.display).not.toEqual('none');
+
+      helpers.triggerEvent(doneButton, 'click');
+
+      expect(toggleButton.parentElement.style.display).toEqual('none');
+    });
+
+  });
+
+  describe("toggle button visibility on re-expansion", () => {
+
+    test("shows toggle button again when fieldset is re-opened", () => {
+      window.GOVUK.modules.start();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      const toggleButton = document.querySelector('.usa-button--small');
+      expect(toggleButton).not.toBeNull();
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+
+      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+
+      const toggleButtonAfter = document.querySelector('.usa-button--small');
+      expect(toggleButtonAfter).not.toBeNull();
+      expect(toggleButtonAfter.parentElement.style.display).not.toEqual('none');
+    });
+
+  });
+
   describe("when the selection changes", () => {
 
     const showCheckboxes = () => {