Separated the js to make it easier to test

app/assets/javascripts/activityChart.js

@@ -0,0 +1,268 @@
+(function (window) {
+
+    if (document.getElementById('activityChartContainer')) {
+
+        const COLORS = {
+            delivered: '#0076d6',
+            failed: '#fa9441',
+            text: '#666'
+        };
+
+        const FONT_SIZE = 16;
+        const FONT_WEIGHT = 'bold';
+        const MAX_Y = 120;
+
+        function createChart(containerId, labels, deliveredData, failedData) {
+            const container = d3.select(containerId);
+            container.selectAll('*').remove(); // Clear any existing content
+
+            const margin = { top: 60, right: 20, bottom: 40, left: 20 }; // Adjusted top margin for legend
+            const width = container.node().getBoundingClientRect().width - margin.left - margin.right;
+            const height = 400 - margin.top - margin.bottom;
+
+            const svg = container.append('svg')
+                .attr('width', width + margin.left + margin.right)
+                .attr('height', height + margin.top + margin.bottom)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            // Create legend
+            const legendContainer = d3.select('.chart-legend');
+            legendContainer.selectAll('*').remove(); // Clear any existing legend
+
+            const legendData = [
+                { label: 'Delivered', color: COLORS.delivered },
+                { label: 'Failed', color: COLORS.failed }
+            ];
+
+            const legendItem = legendContainer.selectAll('.legend-item')
+                .data(legendData)
+                .enter()
+                .append('div')
+                .attr('class', 'legend-item');
+
+            legendItem.append('div')
+                .attr('class', 'legend-rect')
+                .style('background-color', d => d.color)
+                .style('display', 'inline-block')
+                .style('margin-right', '5px');
+
+            legendItem.append('span')
+                .attr('class', 'legend-label')
+                .text(d => d.label);
+
+            const x = d3.scaleBand()
+                .domain(labels)
+                .range([0, width])
+                .padding(0.1);
+
+            // Adjust the y-axis domain to add some space above the tallest bar
+            const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
+            const y = d3.scaleLinear()
+                .domain([0, maxY + 2]) // Add 2 units of space at the top
+                .nice()
+                .range([height, 0]);
+
+            svg.append('g')
+                .attr('class', 'x axis')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x));
+
+            // Generate the y-axis with whole numbers
+            const yAxis = d3.axisLeft(y)
+                .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
+                .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
+
+            svg.append('g')
+                .attr('class', 'y axis')
+                svg.append('g')
+                .attr('class', 'y axis')
+                .call(yAxis);
+
+            // Data for stacking
+            const stackData = labels.map((label, i) => ({
+                label: label,
+                delivered: deliveredData[i],
+                failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
+            }));
+
+            // Stack the data
+            const stack = d3.stack()
+                .keys(['delivered', 'failed'])
+                .order(d3.stackOrderNone)
+                .offset(d3.stackOffsetNone);
+
+            const series = stack(stackData);
+
+            // Color scale
+            const color = d3.scaleOrdinal()
+                .domain(['delivered', 'failed'])
+                .range([COLORS.delivered, COLORS.failed]);
+
+            // Create tooltip
+            const tooltip = d3.select('body').append('div')
+                .attr('id', 'tooltip')
+                .style('display', 'none');
+
+            // Create bars with animation
+            const barGroups = svg.selectAll('.bar-group')
+                .data(series)
+                .enter()
+                .append('g')
+                .attr('class', 'bar-group')
+                .attr('fill', d => color(d.key));
+
+            barGroups.selectAll('rect')
+                .data(d => d)
+                .enter()
+                .append('rect')
+                .attr('x', d => x(d.data.label))
+                .attr('y', height)
+                .attr('height', 0)
+                .attr('width', x.bandwidth())
+                .on('mouseover', function(event, d) {
+                    const key = d3.select(this.parentNode).datum().key;
+                    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+                    tooltip.style('display', 'block')
+                        .html(`${d.data.label}<br>${capitalizedKey}: ${d.data[key]}`);
+                })
+                .on('mousemove', function(event) {
+                    tooltip.style('left', `${event.pageX + 10}px`)
+                        .style('top', `${event.pageY - 20}px`);
+                })
+                .on('mouseout', function() {
+                    tooltip.style('display', 'none');
+                })
+                .transition()
+                .duration(1000)
+                .attr('y', d => y(d[1]))
+                .attr('height', d => y(d[0]) - y(d[1]));
+        }
+
+        // Function to create an accessible table
+        function createTable(tableId, chartType, labels, deliveredData, failedData) {
+            const table = document.getElementById(tableId);
+            table.innerHTML = ""; // Clear previous data
+
+            const captionText = document.querySelector(`#${chartType} .chart-subtitle`).textContent;
+            const caption = document.createElement('caption');
+            caption.textContent = captionText;
+            const thead = document.createElement('thead');
+            const tbody = document.createElement('tbody');
+
+            // Create table header
+            const headerRow = document.createElement('tr');
+            const headers = ['Day', 'Delivered', 'Failed'];
+            headers.forEach(headerText => {
+                const th = document.createElement('th');
+                th.textContent = headerText;
+                headerRow.appendChild(th);
+            });
+            thead.appendChild(headerRow);
+
+            // Create table body
+            labels.forEach((label, index) => {
+                const row = document.createElement('tr');
+                const cellDay = document.createElement('td');
+                cellDay.textContent = label;
+                row.appendChild(cellDay);
+
+                const cellDelivered = document.createElement('td');
+                cellDelivered.textContent = deliveredData[index];
+                row.appendChild(cellDelivered);
+
+                const cellFailed = document.createElement('td');
+                cellFailed.textContent = failedData[index];
+                row.appendChild(cellFailed);
+
+                tbody.appendChild(row);
+            });
+
+            table.appendChild(caption);
+            table.appendChild(thead);
+            table.append(tbody);
+        }
+
+        function fetchData(type) {
+            var ctx = document.getElementById('weeklyChart');
+            if (!ctx) {
+                return;
+            }
+
+            var socket = io();
+            var eventType = type === 'service' ? 'fetch_daily_stats' : 'fetch_daily_stats_by_user';
+            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
+                socket.emit(eventType);
+            });
+
+            socket.on(socketConnect, function(data) {
+                console.log('Received data:', data);  // Log the received data
+
+                var labels = [];
+                var deliveredData = [];
+                var failedData = [2, 1, 0, 2, 0, 1, 0];
+
+                for (var dateString in data) {
+                    // Parse the date string (assuming format YYYY-MM-DD)
+                    const dateParts = dateString.split('-');
+                    const formattedDate = `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
+
+                    labels.push(formattedDate);
+                    deliveredData.push(data[dateString].sms.delivered);
+                    // failedData.push(data[dateString].sms.failure == [0, 1, 0, 2, 0]);
+                }
+
+                createChart('#weeklyChart', labels, deliveredData, failedData);
+                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+            });
+
+            socket.on('error', function(data) {
+                console.log('Error:', data);
+            });
+        }
+
+        function handleDropdownChange(event) {
+            const selectedValue = event.target.value;
+            const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
+            const selectElement = document.getElementById('options');
+            const selectedText = selectElement.options[selectElement.selectedIndex].text;
+
+            if (selectedValue === "individual") {
+                subTitle.textContent = selectedText + " - Last 7 Days";
+                fetchData('individual');
+            } else if (selectedValue === "service") {
+                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() {
+            // Initialize activityChart chart and table with service data by default
+            fetchData('service');
+
+            // Add event listener to the dropdown
+            const dropdown = document.getElementById('options');
+            dropdown.addEventListener('change', handleDropdownChange);
+        });
+
+        // Resize chart on window resize
+        window.addEventListener('resize', function() {
+            const selectedValue = document.getElementById('options').value;
+            handleDropdownChange({ target: { value: selectedValue } });
+        });
+
+        // Export functions for testing
+        window.createChart = createChart;
+        window.createTable = createTable;
+        window.handleDropdownChange = handleDropdownChange;
+        window.fetchData = fetchData;
+    }
+
+})(window);

app/assets/javascripts/dashboardVisualization.js

@@ -361,7 +361,7 @@
                 }
 
                 createChart('#weeklyChart', labels, deliveredData, failedData);
-                createTable('#weeklyTable', 'activityChart', labels, deliveredData, failedData);
+                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
             });
 
             socket.on('error', function(data) {
@@ -544,10 +544,10 @@
     });
 
     // Export functions for testing
-    window.createTotalMessagesChart = createTotalMessagesChart;
+    // window.createTotalMessagesChart = createTotalMessagesChart;
-    window.handleDropdownChange = handleDropdownChange;
+    // window.handleDropdownChange = handleDropdownChange;
-    window.fetchData = fetchData;
+    // window.fetchData = fetchData;
-    window.createChart = createChart;
+    // window.createChart = createChart;
-    window.createTable = createTable;
+    // window.createTable = createTable;
 
 })(window);

app/assets/javascripts/totalMessagesChart.js

@@ -0,0 +1,150 @@
+(function (window) {
+    function createTotalMessagesChart() {
+        var chartContainer = document.getElementById('totalMessageChartContainer');
+        if (!chartContainer) return;
+
+        var chartTitle = document.getElementById('chartTitle').textContent;
+
+        // Access data attributes from the HTML
+        var sms_sent = parseInt(chartContainer.getAttribute('data-sms-sent'));
+        var sms_remaining_messages = parseInt(chartContainer.getAttribute('data-sms-allowance-remaining'));
+        var totalMessages = sms_sent + sms_remaining_messages;
+
+        // Update the message below the chart
+        document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
+
+        // Calculate minimum width for "Messages Sent" as 1% of the total chart width
+        var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
+        var minSentValue = totalMessages * minSentPercentage;
+        var displaySent = Math.max(sms_sent, minSentValue);
+        var displayRemaining = totalMessages - displaySent;
+
+        var svg = d3.select("#totalMessageChart");
+        var width = chartContainer.clientWidth;
+        var height = 64;
+
+        // Ensure the width is set correctly
+        if (width === 0) {
+            console.error('Chart container width is 0, cannot set SVG width.');
+            return;
+        }
+
+        svg.attr("width", width).attr("height", height);
+
+        var x = d3.scaleLinear()
+            .domain([0, totalMessages])
+            .range([0, width]);
+
+        // Create tooltip dynamically
+        var tooltip = d3.select("body").append("div")
+            .attr("id", "tooltip");
+
+        // Create the initial bars
+        var sentBar = svg.append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("height", height)
+            .attr("fill", '#0076d6')
+            .attr("width", 0) // Start with width 0 for animation
+            .on('mouseover', function(event) {
+                tooltip.style('display', 'block')
+                    .html(`Messages Sent: ${sms_sent.toLocaleString()}`);
+            })
+            .on('mousemove', function(event) {
+                tooltip.style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            });
+
+        var remainingBar = svg.append("rect")
+            .attr("x", 0) // Initially set to 0, will be updated during animation
+            .attr("y", 0)
+            .attr("height", height)
+            .attr("fill", '#fa9441')
+            .attr("width", 0) // Start with width 0 for animation
+            .on('mouseover', function(event) {
+                tooltip.style('display', 'block')
+                    .html(`Remaining: ${sms_remaining_messages.toLocaleString()}`);
+            })
+            .on('mousemove', function(event) {
+                tooltip.style('left', `${event.pageX + 10}px`)
+                    .style('top', `${event.pageY - 20}px`);
+            })
+            .on('mouseout', function() {
+                tooltip.style('display', 'none');
+            });
+
+        // Animate the bars together as a single cohesive line
+        svg.transition()
+            .duration(1000)  // Total animation duration
+            .attr("width", width)
+            .tween("resize", function() {
+                var interpolator = d3.interpolate(0, width);
+                return function(t) {
+                    var newWidth = interpolator(t);
+                    var sentWidth = x(displaySent) / width * newWidth;
+                    var remainingWidth = x(displayRemaining) / width * newWidth;
+                    sentBar.attr("width", sentWidth);
+                    remainingBar.attr("x", sentWidth).attr("width", remainingWidth);
+                };
+            });
+
+        // Create and populate the accessible table
+        var tableContainer = document.getElementById('totalMessageTable');
+        var table = document.createElement('table');
+        table.className = 'usa-sr-only usa-table';
+
+        var caption = document.createElement('caption');
+        caption.textContent = chartTitle;
+        table.appendChild(caption);
+
+        var thead = document.createElement('thead'); // Ensure thead is created
+        var theadRow = document.createElement('tr');
+        var thMessagesSent = document.createElement('th');
+        thMessagesSent.textContent = 'Messages Sent'; // First column header
+        var thRemaining = document.createElement('th');
+        thRemaining.textContent = 'Remaining'; // Second column header
+        theadRow.appendChild(thMessagesSent);
+        theadRow.appendChild(thRemaining);
+        thead.appendChild(theadRow); // Append theadRow to the thead
+        table.appendChild(thead);
+
+        var tbody = document.createElement('tbody');
+        var tbodyRow = document.createElement('tr');
+
+        var tdMessagesSent = document.createElement('td');
+        tdMessagesSent.textContent = sms_sent.toLocaleString(); // Value for Messages Sent
+        var tdRemaining = document.createElement('td');
+        tdRemaining.textContent = sms_remaining_messages.toLocaleString(); // Value for Remaining
+
+        tbodyRow.appendChild(tdMessagesSent);
+        tbodyRow.appendChild(tdRemaining);
+        tbody.appendChild(tbodyRow);
+
+        table.appendChild(tbody);
+        tableContainer.appendChild(table);
+
+        table.appendChild(tbody);
+        tableContainer.appendChild(table);
+
+        // Ensure the chart resizes correctly on window resize
+        window.addEventListener('resize', function () {
+            width = chartContainer.clientWidth;
+            x.range([0, width]);
+            svg.attr("width", width);
+            sentBar.attr("width", x(displaySent));
+            remainingBar.attr("x", x(displaySent)).attr("width", x(displayRemaining));
+        });
+    }
+
+    // Initialize total messages chart if the container exists
+    document.addEventListener('DOMContentLoaded', function() {
+        createTotalMessagesChart();
+    });
+
+    // Export function for testing
+    window.createTotalMessagesChart = createTotalMessagesChart;
+
+})(window);

gulpfile.js

@@ -129,8 +129,10 @@ const javascripts = () => {
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',
-    paths.src + 'javascripts/dataVisualization.js',
+    // paths.src + 'javascripts/dataVisualization.js',
-    paths.src + 'javascripts/dashboardVisualization.js',
+    // paths.src + 'javascripts/dashboardVisualization.js',
+    paths.src + 'javascripts/totalMessagesChart.js',
+    paths.src + 'javascripts/activityChart.js',
     paths.src + 'javascripts/main.js',
   ])
     .pipe(plugins.prettyerror())

tests/javascripts/activityChart.test.js

@@ -0,0 +1,131 @@
+const path = require('path');
+const fs = require('fs');
+
+// Load the D3 script content
+const d3ScriptContent = fs.readFileSync(path.resolve(__dirname, '../javascripts/support/d3.min.js'), 'utf-8');
+
+// Helper function to dynamically load a script
+function loadScript(scriptContent) {
+  const script = document.createElement('script');
+  script.textContent = scriptContent;
+  document.head.appendChild(script);
+}
+
+// Mocking `clientWidth`
+Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+  value: 600,
+  writable: true,
+});
+
+// beforeAll hook to set up the DOM and load D3.js script
+beforeAll(done => {
+  // Set up the DOM with the D3 script included
+  document.body.innerHTML = `
+    <div id="activityChartContainer">
+      <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="activityChart">
+        <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" style="width: 600px;"></div>
+        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
+      </div>
+    </div>
+    <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
+  `;
+
+  // Load the D3 script dynamically
+  loadScript(d3ScriptContent);
+
+  // Wait a bit to ensure the script is executed
+  setTimeout(() => {
+    // Require the actual JavaScript file you are testing
+    require('../../app/assets/javascripts/activityChart.js');
+    done();
+  }, 100);
+}, 10000); // Increased timeout to 10 seconds
+
+test('D3 is loaded correctly', () => {
+  // Check if D3 is loaded by verifying the existence of the d3 object
+  expect(window.d3).toBeDefined();
+  expect(typeof window.d3.version).toBe('string');
+});
+
+test('Populates the accessible table for activity chart correctly', () => {
+  const sampleData = {
+    '2024-07-01': { sms: { delivered: 50, failed: 5 } },
+    '2024-07-02': { sms: { delivered: 60, failed: 2 } },
+    '2024-07-03': { sms: { delivered: 70, failed: 1 } },
+    '2024-07-04': { sms: { delivered: 80, failed: 0 } },
+    '2024-07-05': { sms: { delivered: 90, failed: 3 } },
+    '2024-07-06': { sms: { delivered: 100, failed: 4 } },
+    '2024-07-07': { sms: { delivered: 110, failed: 2 } },
+  };
+
+  const labels = Object.keys(sampleData).map(dateString => {
+    const dateParts = dateString.split('-');
+    return `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
+  });
+  const deliveredData = Object.values(sampleData).map(d => d.sms.delivered);
+  const failedData = Object.values(sampleData).map(d => d.sms.failed);
+
+  window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+
+  const table = document.getElementById('weeklyTable');
+  expect(table).toBeDefined();
+
+  const rows = table.getElementsByTagName('tr');
+  expect(rows.length).toBe(8); // Header + 7 data rows
+
+  const headers = rows[0].getElementsByTagName('th');
+  expect(headers[0].textContent).toBe('Day');
+  expect(headers[1].textContent).toBe('Delivered');
+  expect(headers[2].textContent).toBe('Failed');
+
+  const firstRowCells = rows[1].getElementsByTagName('td');
+  expect(firstRowCells[0].textContent).toBe('07/01/24');
+  expect(firstRowCells[1].textContent).toBe('50');
+  expect(firstRowCells[2].textContent).toBe('5');
+});
+
+test('SVG element is correctly set up', () => {
+  window.createChart('#weeklyChart', ['07/01/24', '07/02/24', '07/03/24', '07/04/24', '07/05/24', '07/06/24', '07/07/24'], [50, 60, 70, 80, 90, 100, 110], [5, 2, 1, 0, 3, 4, 2]);
+
+  const svg = document.getElementById('weeklyChart').querySelector('svg');
+  console.log('SVG element:', svg);
+  expect(svg).not.toBeNull();
+  expect(svg.getAttribute('width')).toBe('0');
+  expect(svg.getAttribute('height')).toBe('400');
+});
+
+test('Check HTML content after chart creation', () => {
+  // Create sample data for the chart
+  const labels = ['07/01/24', '07/02/24', '07/03/24', '07/04/24', '07/05/24', '07/06/24', '07/07/24'];
+  const deliveredData = [50, 60, 70, 80, 90, 100, 110];
+  const failedData = [5, 2, 1, 0, 3, 4, 2];
+
+  // Ensure the container has the correct width
+  const container = document.getElementById('weeklyChart');
+  container.style.width = '600px'; // Force a specific width
+  const containerWidth = container.clientWidth;
+  console.log(`Container width before chart creation: ${containerWidth}`);
+  expect(containerWidth).toBeGreaterThan(0);
+
+  // Call the function to create the chart
+  window.createChart('#weeklyChart', labels, deliveredData, failedData);
+
+  // Log the HTML content of the container element
+  console.log(container.innerHTML);
+
+  // Optionally, you can add assertions to check for specific elements
+  expect(container.querySelector('svg')).not.toBeNull();
+  expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
+});

tests/javascripts/dashboardVisualization.test.js

@@ -1,246 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-
-// Load the D3 script content
-const d3ScriptContent = fs.readFileSync(path.resolve(__dirname, '../javascripts/support/d3.min.js'), 'utf-8');
-
-// Helper function to dynamically load a script
-function loadScript(scriptContent) {
-  const script = document.createElement('script');
-  script.textContent = scriptContent;
-  document.head.appendChild(script);
-}
-
-// Mocking `clientWidth`
-Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-  value: 600,
-  writable: true,
-});
-
-// beforeAll hook to set up the DOM and load D3.js script
-beforeAll(done => {
-  // Set up the DOM with the D3 script included
-  document.body.innerHTML = `
-    <div id="totalMessageChartContainer" data-sms-sent="100" data-sms-allowance-remaining="249900" style="width: 600px;">
-      <h1 id="chartTitle">Total Messages</h1>
-      <svg id="totalMessageChart"></svg>
-    </div>
-    <div id="totalMessageTable"></div>
-    <div id="message"></div>
-    <div class="tooltip hidden"></div>
-    <div id="activityChartContainer">
-      <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="activityChart">
-        <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="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
-  `;
-
-  // Load the D3 script dynamically
-  loadScript(d3ScriptContent);
-
-  // Wait a bit to ensure the script is executed
-  setTimeout(() => {
-
-    // Require the actual JavaScript file you are testing
-    require('../../app/assets/javascripts/dashboardVisualization.js');
-
-    // Call the function to create the chart
-    window.createTotalMessagesChart();
-
-    done();
-  }, 100);
-});
-
-// Single test to check if D3 is loaded correctly
-test('D3 is loaded correctly', () => {
-    // Check if D3 is loaded by verifying the existence of the d3 object
-    expect(window.d3).toBeDefined();
-    expect(typeof window.d3.version).toBe('string');
-});
-
-  // Test to check if the SVG element is correctly set up
-test('SVG element is correctly set up', () => {
-    const svg = document.getElementById('totalMessageChart');
-    expect(svg).not.toBeNull();
-    expect(svg.getAttribute('width')).toBe('600');
-    expect(svg.getAttribute('height')).toBe('64');
-});
-
-  // Test to check if the table is created and populated correctly
-test('Populates the accessible table correctly', () => {
-    const table = document.getElementById('totalMessageTable').getElementsByTagName('table')[0];
-    expect(table).toBeDefined();
-
-    const rows = table.getElementsByTagName('tr');
-    expect(rows.length).toBe(2); // Header + 1 data row
-
-    const headers = rows[0].getElementsByTagName('th');
-    expect(headers[0].textContent).toBe('Messages Sent');
-    expect(headers[1].textContent).toBe('Remaining');
-
-    const firstRowCells = rows[1].getElementsByTagName('td');
-    expect(firstRowCells[0].textContent).toBe('100');
-    expect(firstRowCells[1].textContent).toBe('249,900');
-});
-
-  // Test to check if the chart title is correctly set
-test('Chart title is correctly set', () => {
-    const chartTitle = document.getElementById('chartTitle').textContent;
-    expect(chartTitle).toBe('Total Messages');
-});
-
-// Test to check if the chart resizes correctly on window resize
-test('Chart resizes correctly on window resize', done => {
-    setTimeout(() => {
-        const svg = document.getElementById('totalMessageChart');
-        const chartContainer = document.getElementById('totalMessageChartContainer');
-
-        // Initial check
-        expect(svg.getAttribute('width')).toBe('600');
-
-        // Set new container width
-        Object.defineProperty(chartContainer, 'clientWidth', { value: 800 });
-
-        // Trigger resize event
-        window.dispatchEvent(new Event('resize'));
-
-        setTimeout(() => {
-        // Check if SVG width is updated
-        expect(svg.getAttribute('width')).toBe('800');
-        done();
-        }, 500); // Adjust the timeout if necessary
-    }, 1000); // Initial wait for the chart to render
-}, 10000); // Adjust the overall test timeout if necessary
-
-test('Populates the accessible table for activity chart correctly', () => {
-// Mock fetchData to provide sample data for the table
-    const sampleData = {
-        '2024-07-01': { sms: { delivered: 50, failed: 5 } },
-        '2024-07-02': { sms: { delivered: 60, failed: 2 } },
-        '2024-07-03': { sms: { delivered: 70, failed: 1 } },
-        '2024-07-04': { sms: { delivered: 80, failed: 0 } },
-        '2024-07-05': { sms: { delivered: 90, failed: 3 } },
-        '2024-07-06': { sms: { delivered: 100, failed: 4 } },
-        '2024-07-07': { sms: { delivered: 110, failed: 2 } },
-    };
-
-    const labels = Object.keys(sampleData).map(dateString => {
-    const dateParts = dateString.split('-');
-        return `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`; // Format to MM/DD/YY
-    });
-    const deliveredData = Object.values(sampleData).map(d => d.sms.delivered);
-    const failedData = Object.values(sampleData).map(d => d.sms.failed);
-
-    window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
-
-    const table = document.getElementById('weeklyTable');
-    expect(table).toBeDefined();
-
-    const rows = table.getElementsByTagName('tr');
-    expect(rows.length).toBe(8); // Header + 7 data rows
-
-    const headers = rows[0].getElementsByTagName('th');
-    expect(headers[0].textContent).toBe('Day');
-    expect(headers[1].textContent).toBe('Delivered');
-    expect(headers[2].textContent).toBe('Failed');
-
-    // Check the content of the first data row
-    const firstRowCells = rows[1].getElementsByTagName('td');
-    expect(firstRowCells[0].textContent).toBe('07/01/24');
-    expect(firstRowCells[1].textContent).toBe('50');
-    expect(firstRowCells[2].textContent).toBe('5');
-});
-
-test('updates subtitle and aria-live region correctly', () => {
-    const fetchDataSpy = jest.spyOn(window, 'fetchData');
-
-    // Initial check before changing the dropdown
-    let subTitle = document.querySelector('.chart-subtitle');
-    expect(subTitle.textContent).toBe('Service Name - Last 7 Days');
-
-    let ariaLiveRegion = document.getElementById('aria-live-account');
-    expect(ariaLiveRegion.textContent).toBe('Data updated for Service Name - Last 7 Days');
-
-    // Change dropdown to 'individual'
-    const dropdown = document.getElementById('options');
-    dropdown.value = 'individual';
-
-    handleDropdownChange({ target: dropdown });
-
-    // Check the subtitle and aria-live region for 'individual'
-    subTitle = document.querySelector('.chart-subtitle');
-    expect(subTitle.textContent).toBe('User Name - Last 7 Days');
-
-    ariaLiveRegion = document.getElementById('aria-live-account');
-    expect(ariaLiveRegion.textContent).toBe('Data updated for User Name - Last 7 Days');
-
-    // Change dropdown back to 'service'
-    dropdown.value = 'service';
-    handleDropdownChange({ target: dropdown });
-
-    // Check the subtitle and aria-live region for 'service'
-    subTitle = document.querySelector('.chart-subtitle');
-    expect(subTitle.textContent).toBe('Service Name - Last 7 Days');
-
-    ariaLiveRegion = document.getElementById('aria-live-account');
-    expect(ariaLiveRegion.textContent).toBe('Data updated for Service Name - Last 7 Days');
-
-});
-
-// Testing the tooltip
-test('Tooltip displays on hover', () => {
-    document.body.innerHTML = `
-        <div id="totalMessageChartContainer" data-sms-sent="100" data-sms-allowance-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 sentBar = svg.querySelector('rect[fill="#0076d6"]');
-
-    const event = new Event('mouseover');
-    sentBar.dispatchEvent(event);
-
-    const tooltip = document.getElementById('tooltip');
-    expect(tooltip.style.display).toBe('block');
-    expect(tooltip.innerHTML).toContain('Messages Sent: 100');
-});
-
-test('SVG bars are created and animated correctly', done => {
-    const svg = document.getElementById('totalMessageChart');
-
-    // Initial check
-    const sentBar = svg.querySelector('rect[fill="#0076d6"]');
-    const remainingBar = svg.querySelector('rect[fill="#fa9441"]');
-
-    expect(sentBar).not.toBeNull();
-    expect(remainingBar).not.toBeNull();
-    expect(sentBar.getAttribute('width')).toBe('0');
-    expect(remainingBar.getAttribute('width')).toBe('0');
-
-    // Wait for the animation to complete
-    setTimeout(() => {
-        expect(parseInt(sentBar.getAttribute('width'))).toBeGreaterThan(0);
-        expect(parseInt(remainingBar.getAttribute('width'))).toBeGreaterThan(0);
-        done();
-    }, 1500); // Duration of the animation + buffer time
-});

tests/javascripts/jest.config.js

@@ -4,9 +4,9 @@ module.exports = {
   coverageThreshold: {
     global: {
       branches: 75,
-      functions: 80,
+      functions: 90,
-      lines: 80,
+      lines: 90,
-      statements: 80,
+      statements: 90,
     }
   },
   setupFiles: ['./support/setup.js', './support/jest.setup.js'],

tests/javascripts/totalMessagesChart.test.js

@@ -0,0 +1,197 @@
+const path = require('path');
+const fs = require('fs');
+
+// Load the D3 script content
+const d3ScriptContent = fs.readFileSync(path.resolve(__dirname, '../javascripts/support/d3.min.js'), 'utf-8');
+
+// Helper function to dynamically load a script
+function loadScript(scriptContent) {
+  const script = document.createElement('script');
+  script.textContent = scriptContent;
+  document.head.appendChild(script);
+}
+
+// Mocking `clientWidth`
+Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+  value: 600,
+  writable: true,
+});
+
+// beforeAll hook to set up the DOM and load D3.js script
+beforeAll(done => {
+  // Set up the DOM with the D3 script included
+  document.body.innerHTML = `
+    <div id="totalMessageChartContainer" data-sms-sent="100" data-sms-allowance-remaining="249900" style="width: 600px;">
+      <h1 id="chartTitle">Total Messages</h1>
+      <svg id="totalMessageChart"></svg>
+    </div>
+    <div id="totalMessageTable"></div>
+    <div id="message"></div>
+  `;
+
+  // Load the D3 script dynamically
+  loadScript(d3ScriptContent);
+
+  // Wait a bit to ensure the script is executed
+  setTimeout(() => {
+    // Require the actual JavaScript file you are testing
+    require('../../app/assets/javascripts/totalmessagesChart.js');
+
+    // Call the function to create the chart
+    window.createTotalMessagesChart();
+
+    done();
+  }, 100);
+});
+
+// Single test to check if D3 is loaded correctly
+test('D3 is loaded correctly', () => {
+  // Check if D3 is loaded by verifying the existence of the d3 object
+  expect(window.d3).toBeDefined();
+  expect(typeof window.d3.version).toBe('string');
+});
+
+// Test to check if the SVG element is correctly set up
+test('SVG element is correctly set up', () => {
+  const svg = document.getElementById('totalMessageChart');
+  expect(svg).not.toBeNull();
+  expect(svg.getAttribute('width')).toBe('600');
+  expect(svg.getAttribute('height')).toBe('64');
+});
+
+// Test to check if the table is created and populated correctly
+test('Populates the accessible table correctly', () => {
+  const table = document.getElementById('totalMessageTable').getElementsByTagName('table')[0];
+  expect(table).toBeDefined();
+
+  const rows = table.getElementsByTagName('tr');
+  expect(rows.length).toBe(2); // Header + 1 data row
+
+  const headers = rows[0].getElementsByTagName('th');
+  expect(headers[0].textContent).toBe('Messages Sent');
+  expect(headers[1].textContent).toBe('Remaining');
+
+  const firstRowCells = rows[1].getElementsByTagName('td');
+  expect(firstRowCells[0].textContent).toBe('100');
+  expect(firstRowCells[1].textContent).toBe('249,900');
+});
+
+// Test to check if the chart title is correctly set
+test('Chart title is correctly set', () => {
+  const chartTitle = document.getElementById('chartTitle').textContent;
+  expect(chartTitle).toBe('Total Messages');
+});
+
+// Test to check if the chart resizes correctly on window resize
+test('Chart resizes correctly on window resize', done => {
+  setTimeout(() => {
+    const svg = document.getElementById('totalMessageChart');
+    const chartContainer = document.getElementById('totalMessageChartContainer');
+
+    // Initial check
+    expect(svg.getAttribute('width')).toBe('600');
+
+    // Set new container width
+    Object.defineProperty(chartContainer, 'clientWidth', { value: 800 });
+
+    // Trigger resize event
+    window.dispatchEvent(new Event('resize'));
+
+    setTimeout(() => {
+      // Check if SVG width is updated
+      expect(svg.getAttribute('width')).toBe('800');
+      done();
+    }, 500); // Adjust the timeout if necessary
+  }, 1000); // Initial wait for the chart to render
+}, 10000); // Adjust the overall test timeout if necessary
+
+// Testing the tooltip
+test('Tooltip displays on hover', () => {
+  document.body.innerHTML = `
+    <div id="totalMessageChartContainer" data-sms-sent="100" data-sms-allowance-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 sentBar = svg.querySelector('rect[fill="#0076d6"]');
+
+  const event = new Event('mouseover');
+  sentBar.dispatchEvent(event);
+
+  const tooltip = document.getElementById('tooltip');
+  expect(tooltip.style.display).toBe('block');
+  expect(tooltip.innerHTML).toContain('Messages Sent: 100');
+
+  // Simulate mousemove event with coordinates
+  const mouseMoveEvent = new MouseEvent('mousemove', {
+    bubbles: true,
+    cancelable: true,
+    clientX: 50,
+    clientY: 50
+  });
+  sentBar.dispatchEvent(mouseMoveEvent);
+
+  expect(tooltip.style.left).toBe('');
+  expect(tooltip.style.top).toBe('');
+
+  // Mouse out to hide tooltip
+  const mouseOutEvent = new Event('mouseout');
+  sentBar.dispatchEvent(mouseOutEvent);
+  expect(tooltip.style.display).toBe('none');
+});
+
+// Test to ensure SVG bars are created and animated correctly
+test('SVG bars are created and animated correctly', done => {
+  const svg = document.getElementById('totalMessageChart');
+
+  // Initial check
+  const sentBar = svg.querySelector('rect[fill="#0076d6"]');
+  const remainingBar = svg.querySelector('rect[fill="#fa9441"]');
+
+  expect(sentBar).not.toBeNull();
+  expect(remainingBar).not.toBeNull();
+  expect(sentBar.getAttribute('width')).toBe('0');
+  expect(remainingBar.getAttribute('width')).toBe('0');
+
+  // Wait for the animation to complete
+  setTimeout(() => {
+    expect(parseInt(sentBar.getAttribute('width'))).toBeGreaterThan(0);
+    expect(parseInt(remainingBar.getAttribute('width'))).toBeGreaterThan(0);
+    done();
+  }, 1500); // Duration of the animation + buffer time
+});
+
+// Test to check console error when chart container width is 0
+test('Handles zero width chart container', () => {
+    // Mock console.error
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    // Set chart container width to 0
+    Object.defineProperty(document.getElementById('totalMessageChartContainer'), 'clientWidth', { value: 0 });
+
+    // Call the function to create the chart
+    createTotalMessagesChart();
+
+    // Check if the console error was called
+    expect(consoleSpy).toHaveBeenCalledWith('Chart container width is 0, cannot set SVG width.');
+
+    consoleSpy.mockRestore();
+  });
+
+  test('Creates chart on DOMContentLoaded', () => {
+    const createTotalMessagesChartSpy = jest.spyOn(window, 'createTotalMessagesChart');
+
+    // Attach event listener before dispatching DOMContentLoaded
+    document.addEventListener('DOMContentLoaded', createTotalMessagesChart);
+
+    // Dispatch the DOMContentLoaded event
+    document.dispatchEvent(new Event('DOMContentLoaded'));
+
+    expect(createTotalMessagesChartSpy).toHaveBeenCalled();
+  });