mirror of
https://github.com/GSA/notifications-admin.git
synced 2025-12-09 14:45:00 -05:00
Separated the js to make it easier to test
This commit is contained in:
Jonathan Bobel
268
app/assets/javascripts/activityChart.js
Normal file
268
app/assets/javascripts/activityChart.js
Normal file
@@ -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);
|
||||
@@ -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.handleDropdownChange = handleDropdownChange;
|
||||
window.fetchData = fetchData;
|
||||
window.createChart = createChart;
|
||||
window.createTable = createTable;
|
||||
// window.createTotalMessagesChart = createTotalMessagesChart;
|
||||
// window.handleDropdownChange = handleDropdownChange;
|
||||
// window.fetchData = fetchData;
|
||||
// window.createChart = createChart;
|
||||
// window.createTable = createTable;
|
||||
|
||||
})(window);
|
||||
|
||||
150
app/assets/javascripts/totalMessagesChart.js
Normal file
150
app/assets/javascripts/totalMessagesChart.js
Normal file
@@ -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);
|
||||
@@ -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/dashboardVisualization.js',
|
||||
// paths.src + 'javascripts/dataVisualization.js',
|
||||
// paths.src + 'javascripts/dashboardVisualization.js',
|
||||
paths.src + 'javascripts/totalMessagesChart.js',
|
||||
paths.src + 'javascripts/activityChart.js',
|
||||
paths.src + 'javascripts/main.js',
|
||||
])
|
||||
.pipe(plugins.prettyerror())
|
||||
|
||||
131
tests/javascripts/activityChart.test.js
Normal file
131
tests/javascripts/activityChart.test.js
Normal file
@@ -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);
|
||||
});
|
||||
@@ -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
|
||||
});
|
||||
@@ -4,9 +4,9 @@ module.exports = {
|
||||
coverageThreshold: {
|
||||
global: {
|
||||
branches: 75,
|
||||
functions: 80,
|
||||
lines: 80,
|
||||
statements: 80,
|
||||
functions: 90,
|
||||
lines: 90,
|
||||
statements: 90,
|
||||
}
|
||||
},
|
||||
setupFiles: ['./support/setup.js', './support/jest.setup.js'],
|
||||
|
||||
197
tests/javascripts/totalMessagesChart.test.js
Normal file
197
tests/javascripts/totalMessagesChart.test.js
Normal file
@@ -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();
|
||||
});
|
||||
Reference in New Issue
Block a user