Updates to the tests, committing as they currently run but I need to work on the coverage

app/assets/javascripts/dashboardVisualization.js

@@ -182,7 +182,7 @@
     function fetchData(type) {
         var ctx = document.getElementById('weeklyChart');
         if (!ctx) {
-            return;
+          return;
         }
 
         var socket = io();
@@ -190,40 +190,40 @@
         var socketConnect = type === 'service' ? 'daily_stats_update' : 'daily_stats_by_user_update';
 
         socket.on('connect', function () {
-            const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
+          const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
-            console.log(`User ID: ${userId}`);
+          console.log(`User ID: ${userId}`);
-            socket.emit(eventType);
+          socket.emit(eventType);
         });
 
         socket.on(socketConnect, function(data) {
-            console.log('Received data:', data);  // Log the received data
+          console.log('Received data:', data);  // Log the received data
 
-            var labels = [];
+          var labels = [];
-            var deliveredData = [];
+          var deliveredData = [];
-            var failedData = [];
+          var failedData = [];
 
-            for (var dateString in data) {
+          for (var dateString in data) {
-                // Parse the date string (assuming format YYYY-MM-DD)
+            // Parse the date string (assuming format YYYY-MM-DD)
-                const dateParts = dateString.split('-');
+            const dateParts = dateString.split('-');
-                const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
+            const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
 
-                labels.push(formattedDate);
+            labels.push(formattedDate);
-                deliveredData.push(data[dateString].sms.delivered);
+            deliveredData.push(data[dateString].sms.delivered);
-                failedData.push(data[dateString].sms.failure !== undefined ? data[dateString].sms.failure : 0);
+            failedData.push(data[dateString].sms.failure !== undefined ? data[dateString].sms.failure : 0);
-            }
+          }
 
-            console.log('Formatted labels:', labels);  // Log the formatted labels
+          console.log('Formatted labels:', labels);  // Log the formatted labels
-            console.log('Delivered data:', deliveredData);  // Log the delivered data
+          console.log('Delivered data:', deliveredData);  // Log the delivered data
-            console.log('Failed data:', failedData);  // Log the failed data
+          console.log('Failed data:', failedData);  // Log the failed data
 
-            createChart('#weeklyChart', labels, deliveredData, failedData);
+          createChart('#weeklyChart', labels, deliveredData, failedData);
-            createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+          createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
         });
 
         socket.on('error', function(data) {
-            console.log('Error:', data);
+          console.log('Error:', data);
         });
-    }
+      }
 
     function handleDropdownChange(event) {
         const selectedValue = event.target.value;
@@ -238,6 +238,11 @@
             subTitle.textContent = selectedText + " - Last 7 Days";
             fetchData('service');
         }
+
+        // Update ARIA live region
+        const liveRegion = document.getElementById('aria-live-account');
+        liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
+
     }
 
     document.addEventListener('DOMContentLoaded', function() {
@@ -255,4 +260,6 @@
         handleDropdownChange({ target: { value: selectedValue } });
     });
 
+    module.exports = { createChart, createTable, handleDropdownChange, fetchData };
+
 })(window);

app/templates/views/dashboard/dashboard.html

@@ -49,13 +49,14 @@
       <div id="Weekly">
         <div class="chart-header">
           <div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
-          <div class="chart-legend"></div>
+          <div class="chart-legend" aria-label="Legend"></div>
         </div>
         <div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
-        <table id="weeklyTable" class="usa-sr-only"></table>
+        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
       </div>
     </div>
     <div id="message"></div>
+    <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
 
     <h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
     <div class="table-wrapper">

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env'],
+};

package.json

@@ -42,9 +42,10 @@
     "timeago": "1.6.7"
   },
   "devDependencies": {
-    "@babel/core": "7.19.6",
+    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "7.19.4",
+    "@babel/preset-env": "^7.24.7",
     "@uswds/compile": "^1.1.0",
+    "babel-jest": "^29.7.0",
     "better-npm-audit": "^3.7.3",
     "gulp": "^4.0.2",
     "gulp-add-src": "^1.0.0",
@@ -57,7 +58,7 @@
     "gulp-jshint": "2.1.0",
     "gulp-prettyerror": "2.0.0",
     "gulp-uglify": "3.0.2",
-    "jest": "29.2.2",
+    "jest": "^29.7.0",
     "jest-each": "^29.2.1",
     "jest-environment-jsdom": "^29.2.2",
     "jshint": "2.13.5",

poetry.lock

@@ -1344,9 +1344,13 @@ files = [
     {file = "lxml-5.2.2-cp36-cp36m-win_amd64.whl", hash = "sha256:edcfa83e03370032a489430215c1e7783128808fd3e2e0a3225deee278585196"},
     {file = "lxml-5.2.2-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:28bf95177400066596cdbcfc933312493799382879da504633d16cf60bba735b"},
     {file = "lxml-5.2.2-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3a745cc98d504d5bd2c19b10c79c61c7c3df9222629f1b6210c0368177589fb8"},
+    {file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1b590b39ef90c6b22ec0be925b211298e810b4856909c8ca60d27ffbca6c12e6"},
     {file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b336b0416828022bfd5a2e3083e7f5ba54b96242159f83c7e3eebaec752f1716"},
+    {file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_aarch64.whl", hash = "sha256:c2faf60c583af0d135e853c86ac2735ce178f0e338a3c7f9ae8f622fd2eb788c"},
     {file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:4bc6cb140a7a0ad1f7bc37e018d0ed690b7b6520ade518285dc3171f7a117905"},
+    {file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:7ff762670cada8e05b32bf1e4dc50b140790909caa8303cfddc4d702b71ea184"},
     {file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:57f0a0bbc9868e10ebe874e9f129d2917750adf008fe7b9c1598c0fbbfdde6a6"},
+    {file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_aarch64.whl", hash = "sha256:a6d2092797b388342c1bc932077ad232f914351932353e2e8706851c870bca1f"},
     {file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_x86_64.whl", hash = "sha256:60499fe961b21264e17a471ec296dcbf4365fbea611bf9e303ab69db7159ce61"},
     {file = "lxml-5.2.2-cp37-cp37m-win32.whl", hash = "sha256:d9b342c76003c6b9336a80efcc766748a333573abf9350f4094ee46b006ec18f"},
     {file = "lxml-5.2.2-cp37-cp37m-win_amd64.whl", hash = "sha256:b16db2770517b8799c79aa80f4053cd6f8b716f21f8aca962725a9565ce3ee40"},

tests/javascripts/dashboardVisualization.test.js

@@ -0,0 +1,133 @@
+const { createTable, handleDropdownChange, fetchData, createChart } = require('../../app/assets/javascripts/dashboardVisualization.js');
+
+// Mock d3 to avoid errors related to it
+jest.mock('d3', () => {
+    const selectAllMock = jest.fn().mockReturnValue({
+        remove: jest.fn(),
+    });
+
+    const appendMock = jest.fn().mockReturnValue({
+        attr: jest.fn().mockReturnThis(),
+        append: jest.fn().mockReturnThis(),
+        style: jest.fn().mockReturnThis(),
+        text: jest.fn(),
+    });
+
+    const selectMock = jest.fn().mockReturnValue({
+        selectAll: selectAllMock,
+        append: appendMock,
+        attr: jest.fn().mockReturnThis(),
+        style: jest.fn().mockReturnThis(),
+        text: jest.fn(),
+    });
+
+    const scaleBandMock = jest.fn().mockReturnValue({
+        domain: jest.fn().mockReturnThis(),
+        range: jest.fn().mockReturnThis(),
+        padding: jest.fn().mockReturnThis(),
+    });
+
+    const scaleLinearMock = jest.fn().mockReturnValue({
+        domain: jest.fn().mockReturnThis(),
+        nice: jest.fn().mockReturnThis(),
+        range: jest.fn().mockReturnThis(),
+    });
+
+    const axisMock = jest.fn().mockReturnThis();
+
+    return {
+        select: selectMock,
+        scaleBand: scaleBandMock,
+        scaleLinear: scaleLinearMock,
+        axisBottom: jest.fn(() => axisMock),
+        axisLeft: jest.fn(() => axisMock),
+        stack: jest.fn(() => jest.fn().mockReturnValue([])),
+        format: jest.fn(() => jest.fn()),
+    };
+});
+
+describe('Dashboard Visualization Module', () => {
+    test('should have createTable function', () => {
+        expect(typeof createTable).toBe('function');
+    });
+
+    test('should have handleDropdownChange function', () => {
+        expect(typeof handleDropdownChange).toBe('function');
+    });
+
+    test('should have fetchData function', () => {
+        expect(typeof fetchData).toBe('function');
+    });
+});
+
+describe('Table Creation', () => {
+    beforeAll(() => {
+        document.body.innerHTML = `
+            <div id="Weekly">
+                <div class="chart-header">
+                    <div class="chart-subtitle">Weekly</div>
+                </div>
+                <table id="weeklyTable" class="usa-sr-only usa-table"></table>
+            </div>
+        `;
+    });
+
+    test('creates a table with the correct data', () => {
+        const labels = ['Day 1', 'Day 2', 'Day 3'];
+        const deliveredData = [10, 20, 30];
+        const failedData = [1, 2, 3];
+
+        createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
+
+        const table = document.getElementById('weeklyTable');
+        console.log(table);
+        expect(document.body.contains(table)).toBe(true);
+        expect(table.querySelectorAll('tbody tr').length).toBe(labels.length);
+    });
+});
+
+describe('Dropdown Change Handler', () => {
+    beforeAll(() => {
+        document.body.innerHTML = `
+            <div id="chartsArea">
+                <form class="usa-form">
+                    <label class="usa-label" for="options">Account</label>
+                    <select class="usa-select margin-bottom-2" name="options" id="options">
+                        <option value>- Select -</option>
+                        <option value="service" selected>Service Name</option>
+                        <option value="individual">User Name</option>
+                    </select>
+                </form>
+                <div id="Weekly">
+                    <div class="chart-header">
+                        <div class="chart-subtitle">Service Name - Last 7 Days</div>
+                        <div class="chart-legend" aria-label="Legend"></div>
+                    </div>
+                    <div class="chart-container" id="weeklyChart" data-service-id="12345"></div>
+                    <table id="weeklyTable" class="usa-sr-only usa-table"></table>
+                </div>
+            </div>
+            <div id="message"></div>
+            <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
+        `;
+
+        // Mock Socket.IO
+        global.io = jest.fn().mockReturnValue({
+            on: jest.fn(),
+            emit: jest.fn(),
+        });
+    });
+
+    test('updates subtitle and aria-live region correctly', () => {
+        const dropdown = document.getElementById('options');
+        dropdown.value = 'individual';
+
+        handleDropdownChange({ target: dropdown });
+
+        const subTitle = document.querySelector('.chart-subtitle');
+        expect(subTitle.textContent).toBe('User Name - Last 7 Days');
+
+        const ariaLiveRegion = document.getElementById('aria-live-account');
+        expect(ariaLiveRegion.textContent).toBe('Data updated for User Name - Last 7 Days');
+    });
+});

tests/javascripts/jest.config.js

@@ -14,4 +14,10 @@ module.exports = {
   testEnvironmentOptions: {
     url: 'https://beta.notify.gov',
   },
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/'  // Add any other folders you want Jest to ignore
+  ],
 };