Removed all govuk css (#2814)

* Removed all govuk css

* Updated reference files

* Removing govuk js

* Fixed casing for modules, removed unused page

* Got more reference images

* Updated template page

* Removed govuk padding util

* Updated hint to uswds hint

* More govuk cleanup

* Commiting backstopjs ref files

* Fixed all unit tests that broke due to brittleness around govuk styling

* Added new ref images

* Final removal of govuk

* Officially removed all govuk references

* Updated reference file

* Updated link to button

* UI modernization

* Cleanup

* removed govuk escaping tests since they are no longer needed

* Fix CodeQL security issue in escapeElementName function

- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping

* Found more govuk removal. Fixed unit tests

* Add missing pipeline check to pre-commit

* updated test

* Updated e2e test

* More update to e2e test

* Fixed another e2e test

* Simple PR comments addressed

* More updates

* Updated backstop ref files

* Refactored folder selection for non-admins

* Updated redundant line

* Updated tests to include correct mocks

* Added more ref files

* Addressing carlos comments

* Addressing Carlo comments, cleanup of window initing

* More cleanup and addressing carlo comments

* Fixing a11 scan

* Fixed a few issues with javascript

* Fixed for pr

* Fixing e2e tests

* Tweaking e2e test

* Added more ref files and cleaned up urls.js

* Fixed bug with creating new template

* Removed brittle test - addressed code ql comment

* e2e race condition fix

* More e2e test fixes

* Updated e2e tests to not wait for text sent

* Updated test to not wait for button click response

* Made tear down more resilent if staging is down

* reverted e2e test to what was working before main merge

* Updated backstopRef images

* Updated gulp to include job-polling differently

tests/javascripts/totalMessagesChart.test.js

@@ -203,3 +203,78 @@ test('Handles zero width chart container', () => {
 
     expect(createTotalMessagesChartSpy).toHaveBeenCalled();
   });
+
+  test('Tooltip displays on hover for remaining bar', () => {
+    document.body.innerHTML = `
+      <div id="totalMessageChartContainer" data-messages-sent="100" data-messages-remaining="249900" style="width: 600px;">
+        <h1 id="chartTitle">Total Messages</h1>
+        <svg id="totalMessageChart"></svg>
+      </div>
+      <div id="totalMessageTable"></div>
+      <div id="message"></div>
+    `;
+
+    createTotalMessagesChart();
+
+    const svg = document.getElementById('totalMessageChart');
+    const remainingBar = svg.querySelector('rect[fill="#C7CACE"]');
+
+    const event = new Event('mouseover');
+    remainingBar.dispatchEvent(event);
+
+    const tooltip = document.getElementById('tooltip');
+    expect(tooltip.style.display).toBe('block');
+    expect(tooltip.innerHTML).toContain('Remaining: 249,900');
+
+    const mouseMoveEvent = new MouseEvent('mousemove', {
+      bubbles: true,
+      cancelable: true,
+      pageX: 100,
+      pageY: 100
+    });
+    remainingBar.dispatchEvent(mouseMoveEvent);
+    expect(tooltip.style.display).not.toBe('none');
+
+    const mouseOutEvent = new Event('mouseout');
+    remainingBar.dispatchEvent(mouseOutEvent);
+    expect(tooltip.style.display).toBe('none');
+  });
+
+  test('Chart handles edge case when messagesSent is 0', () => {
+    document.body.innerHTML = `
+      <div id="totalMessageChartContainer" data-messages-sent="0" data-messages-remaining="250000" style="width: 600px;">
+        <h1 id="chartTitle">Total Messages</h1>
+        <svg id="totalMessageChart"></svg>
+      </div>
+      <div id="totalMessageTable"></div>
+      <div id="message"></div>
+    `;
+
+    createTotalMessagesChart();
+
+    const svg = document.getElementById('totalMessageChart');
+    const sentBar = svg.querySelector('rect[fill="#0076d6"]');
+
+    setTimeout(() => {
+      expect(parseInt(sentBar.getAttribute('width'))).toBeGreaterThanOrEqual(0);
+    }, 1100);
+  });
+
+  test('Tests the function during animation', done => {
+    window.createTotalMessagesChart();
+
+    const svg = document.getElementById('totalMessageChart');
+    const sentBar = svg.querySelector('rect[fill="#0076d6"]');
+    const remainingBar = svg.querySelector('rect[fill="#C7CACE"]');
+
+    expect(sentBar.getAttribute('width')).toBe('0');
+    expect(remainingBar.getAttribute('width')).toBe('0');
+
+    setTimeout(() => {
+      const sentWidth = parseInt(sentBar.getAttribute('width'));
+      const remainingWidth = parseInt(remainingBar.getAttribute('width'));
+      expect(sentWidth).toBeGreaterThan(0);
+      expect(remainingWidth).toBeGreaterThan(0);
+      done();
+    }, 500);
+  });