mirror of
https://github.com/GSA/notifications-admin.git
synced 2025-12-16 18:13:54 -05:00
Test updates - still need more coverage
This commit is contained in:
Jonathan Bobel
@@ -12,6 +12,152 @@
|
|||||||
const FONT_WEIGHT = 'bold';
|
const FONT_WEIGHT = 'bold';
|
||||||
const MAX_Y = 120;
|
const MAX_Y = 120;
|
||||||
|
|
||||||
|
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
|
||||||
// Function to create a stacked bar chart with animation using D3.js
|
// Function to create a stacked bar chart with animation using D3.js
|
||||||
function createChart(containerId, labels, deliveredData, failedData) {
|
function createChart(containerId, labels, deliveredData, failedData) {
|
||||||
const container = d3.select(containerId);
|
const container = d3.select(containerId);
|
||||||
@@ -397,4 +543,11 @@
|
|||||||
createTotalMessagesChart();
|
createTotalMessagesChart();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Export functions for testing
|
||||||
|
window.createTotalMessagesChart = createTotalMessagesChart;
|
||||||
|
window.handleDropdownChange = handleDropdownChange;
|
||||||
|
window.fetchData = fetchData;
|
||||||
|
window.createChart = createChart;
|
||||||
|
window.createTable = createTable;
|
||||||
|
|
||||||
})(window);
|
})(window);
|
||||||
@@ -56,7 +56,6 @@
|
|||||||
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
|
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="message"></div>
|
|
||||||
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
||||||
|
|
||||||
{% if current_user.has_permissions('manage_service') %}{% endif %}
|
{% if current_user.has_permissions('manage_service') %}{% endif %}
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ const javascripts = () => {
|
|||||||
paths.src + 'javascripts/date.js',
|
paths.src + 'javascripts/date.js',
|
||||||
paths.src + 'javascripts/loginAlert.js',
|
paths.src + 'javascripts/loginAlert.js',
|
||||||
paths.src + 'javascripts/dataVisualization.js',
|
paths.src + 'javascripts/dataVisualization.js',
|
||||||
paths.src + 'javascripts/dashboardViz.js',
|
paths.src + 'javascripts/dashboardVisualization.js',
|
||||||
paths.src + 'javascripts/main.js',
|
paths.src + 'javascripts/main.js',
|
||||||
])
|
])
|
||||||
.pipe(plugins.prettyerror())
|
.pipe(plugins.prettyerror())
|
||||||
|
|||||||
@@ -1,100 +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);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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="chartContainer" 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>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 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/chartDashboard.js');
|
|
||||||
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(svg.parentElement.clientWidth.toString());
|
|
||||||
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(3); // Header + 2 data rows
|
|
||||||
|
|
||||||
const headers = rows[0].getElementsByTagName('th');
|
|
||||||
expect(headers[0].textContent).toBe('Label');
|
|
||||||
expect(headers[1].textContent).toBe('Value');
|
|
||||||
|
|
||||||
const firstRowCells = rows[1].getElementsByTagName('td');
|
|
||||||
expect(firstRowCells[0].textContent).toBe('Messages Sent');
|
|
||||||
expect(firstRowCells[1].textContent).toBe('100');
|
|
||||||
|
|
||||||
const secondRowCells = rows[2].getElementsByTagName('td');
|
|
||||||
expect(secondRowCells[0].textContent).toBe('Remaining');
|
|
||||||
expect(secondRowCells[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('Chart resizes correctly on window resize', done => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const svg = document.getElementById('totalMessageChart');
|
|
||||||
const chartContainer = document.getElementById('chartContainer');
|
|
||||||
|
|
||||||
// Initial check
|
|
||||||
expect(svg.getAttribute('width')).toBe(chartContainer.clientWidth.toString());
|
|
||||||
|
|
||||||
// Set new container width
|
|
||||||
chartContainer.style.width = '800px';
|
|
||||||
|
|
||||||
// Trigger resize event
|
|
||||||
window.dispatchEvent(new Event('resize'));
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
// Check if SVG width is updated
|
|
||||||
expect(svg.getAttribute('width')).toBe(chartContainer.clientWidth.toString());
|
|
||||||
done();
|
|
||||||
}, 500); // Adjust the timeout if necessary
|
|
||||||
}, 1000); // Initial wait for the chart to render
|
|
||||||
}, 10000); // Adjust the overall test timeout if necessary
|
|
||||||
@@ -1,200 +1,246 @@
|
|||||||
const { createTable, handleDropdownChange, fetchData, createChart } = require('../../app/assets/javascripts/dashboardVisualization.js');
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
// Mock functions
|
// Load the D3 script content
|
||||||
jest.mock('../../app/assets/javascripts/dashboardVisualization.js', () => ({
|
const d3ScriptContent = fs.readFileSync(path.resolve(__dirname, '../javascripts/support/d3.min.js'), 'utf-8');
|
||||||
createTable: jest.fn(),
|
|
||||||
handleDropdownChange: jest.fn(),
|
|
||||||
fetchData: jest.fn(),
|
|
||||||
createChart: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('Dashboard Visualization Module', () => {
|
// Helper function to dynamically load a script
|
||||||
test('should have createTable function', () => {
|
function loadScript(scriptContent) {
|
||||||
expect(typeof createTable).toBe('function');
|
const script = document.createElement('script');
|
||||||
});
|
script.textContent = scriptContent;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
test('should have handleDropdownChange function', () => {
|
// Mocking `clientWidth`
|
||||||
expect(typeof handleDropdownChange).toBe('function');
|
Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
|
||||||
});
|
value: 600,
|
||||||
|
writable: true,
|
||||||
test('should have fetchData function', () => {
|
|
||||||
expect(typeof fetchData).toBe('function');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Table Creation', () => {
|
// beforeAll hook to set up the DOM and load D3.js script
|
||||||
beforeEach(() => {
|
beforeAll(done => {
|
||||||
document.body.innerHTML = `
|
// Set up the DOM with the D3 script included
|
||||||
<div id="Weekly">
|
document.body.innerHTML = `
|
||||||
<div class="chart-header">
|
<div id="totalMessageChartContainer" data-sms-sent="100" data-sms-allowance-remaining="249900" style="width: 600px;">
|
||||||
<div class="chart-subtitle">Weekly</div>
|
<h1 id="chartTitle">Total Messages</h1>
|
||||||
</div>
|
<svg id="totalMessageChart"></svg>
|
||||||
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
|
</div>
|
||||||
</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>
|
||||||
|
`;
|
||||||
|
|
||||||
test('creates a table with the correct data', () => {
|
// Load the D3 script dynamically
|
||||||
const labels = ['Day 1', 'Day 2', 'Day 3'];
|
loadScript(d3ScriptContent);
|
||||||
const deliveredData = [10, 20, 30];
|
|
||||||
const failedData = [1, 2, 3];
|
|
||||||
|
|
||||||
createTable.mockImplementation((tableId, chartType, labels, deliveredData, failedData) => {
|
// Wait a bit to ensure the script is executed
|
||||||
const table = document.getElementById(tableId);
|
setTimeout(() => {
|
||||||
table.innerHTML = ""; // Clear previous data
|
|
||||||
|
|
||||||
const caption = document.createElement('caption');
|
// Require the actual JavaScript file you are testing
|
||||||
caption.textContent = 'Weekly';
|
require('../../app/assets/javascripts/dashboardVisualization.js');
|
||||||
const thead = document.createElement('thead');
|
|
||||||
const tbody = document.createElement('tbody');
|
|
||||||
|
|
||||||
// Create table header
|
// Call the function to create the chart
|
||||||
const headerRow = document.createElement('tr');
|
window.createTotalMessagesChart();
|
||||||
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
|
done();
|
||||||
labels.forEach((label, index) => {
|
}, 100);
|
||||||
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.appendChild(tbody);
|
|
||||||
});
|
|
||||||
|
|
||||||
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
|
|
||||||
|
|
||||||
const table = document.getElementById('weeklyTable');
|
|
||||||
expect(document.body.contains(table)).toBe(true);
|
|
||||||
expect(table.querySelectorAll('tbody tr').length).toBe(labels.length);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('Dropdown Change Handler', () => {
|
// Single test to check if D3 is loaded correctly
|
||||||
beforeEach(() => {
|
test('D3 is loaded correctly', () => {
|
||||||
document.body.innerHTML = `
|
// Check if D3 is loaded by verifying the existence of the d3 object
|
||||||
<div id="chartsArea">
|
expect(window.d3).toBeDefined();
|
||||||
<form class="usa-form">
|
expect(typeof window.d3.version).toBe('string');
|
||||||
<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>
|
|
||||||
`;
|
|
||||||
handleDropdownChange.mockClear();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('updates subtitle and aria-live region correctly for individual', () => {
|
|
||||||
const dropdown = document.getElementById('options');
|
|
||||||
dropdown.value = 'individual';
|
|
||||||
|
|
||||||
handleDropdownChange.mockImplementation(({ target }) => {
|
|
||||||
const selectedValue = target.value;
|
|
||||||
const subTitle = document.querySelector(`#chartsArea .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');
|
|
||||||
}
|
|
||||||
|
|
||||||
const liveRegion = document.getElementById('aria-live-account');
|
|
||||||
liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
|
|
||||||
});
|
|
||||||
|
|
||||||
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');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('updates subtitle and aria-live region correctly for service', () => {
|
|
||||||
const dropdown = document.getElementById('options');
|
|
||||||
dropdown.value = 'service';
|
|
||||||
|
|
||||||
handleDropdownChange.mockImplementation(({ target }) => {
|
|
||||||
const selectedValue = target.value;
|
|
||||||
const subTitle = document.querySelector(`#chartsArea .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');
|
|
||||||
}
|
|
||||||
|
|
||||||
const liveRegion = document.getElementById('aria-live-account');
|
|
||||||
liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
|
|
||||||
});
|
|
||||||
|
|
||||||
handleDropdownChange({ target: dropdown });
|
|
||||||
|
|
||||||
const subTitle = document.querySelector('.chart-subtitle');
|
|
||||||
expect(subTitle.textContent).toBe('Service Name - Last 7 Days');
|
|
||||||
|
|
||||||
const ariaLiveRegion = document.getElementById('aria-live-account');
|
|
||||||
expect(ariaLiveRegion.textContent).toBe('Data updated for Service Name - Last 7 Days');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('DOMContentLoaded event listener', () => {
|
// Test to check if the SVG element is correctly set up
|
||||||
beforeEach(() => {
|
test('SVG element is correctly set up', () => {
|
||||||
jest.clearAllMocks(); // Clear any previous mock calls
|
const svg = document.getElementById('totalMessageChart');
|
||||||
|
expect(svg).not.toBeNull();
|
||||||
// Set up the DOMContentLoaded listener again
|
expect(svg.getAttribute('width')).toBe('600');
|
||||||
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
expect(svg.getAttribute('height')).toBe('64');
|
||||||
document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
});
|
||||||
|
|
||||||
// Function to handle DOMContentLoaded
|
// Test to check if the table is created and populated correctly
|
||||||
function handleDOMContentLoaded() {
|
test('Populates the accessible table correctly', () => {
|
||||||
fetchData('service');
|
const table = document.getElementById('totalMessageTable').getElementsByTagName('table')[0];
|
||||||
}
|
expect(table).toBeDefined();
|
||||||
});
|
|
||||||
|
const rows = table.getElementsByTagName('tr');
|
||||||
test('calls fetchData with "service" on DOMContentLoaded', () => {
|
expect(rows.length).toBe(2); // Header + 1 data row
|
||||||
document.dispatchEvent(new Event('DOMContentLoaded'));
|
|
||||||
expect(fetchData).toHaveBeenCalledWith('service');
|
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
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -18,6 +18,6 @@ module.exports = {
|
|||||||
'^.+\\.js$': 'babel-jest',
|
'^.+\\.js$': 'babel-jest',
|
||||||
},
|
},
|
||||||
transformIgnorePatterns: [
|
transformIgnorePatterns: [
|
||||||
'/node_modules/' // Add any other folders you want Jest to ignore
|
'node_modules/(?!(d3|d3-array|d3-axis|d3-brush|d3-chord|d3-collection|d3-color|d3-contour|d3-dispatch|d3-drag|d3-dsv|d3-ease|d3-fetch|d3-force|d3-format|d3-geo|d3-hierarchy|d3-interpolate|d3-path|d3-polygon|d3-quadtree|d3-random|d3-scale|d3-scale-chromatic|d3-selection|d3-shape|d3-tile|d3-time|d3-time-format|d3-timer|d3-transition|d3-voronoi|d3-zoom)/)'
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,5 +7,11 @@ require('./polyfills.js');
|
|||||||
// Set up jQuery
|
// Set up jQuery
|
||||||
global.$ = global.jQuery = require('jquery');
|
global.$ = global.jQuery = require('jquery');
|
||||||
|
|
||||||
|
// tests/jest.setup.js
|
||||||
|
global.io = jest.fn().mockReturnValue({
|
||||||
|
on: jest.fn(),
|
||||||
|
emit: jest.fn()
|
||||||
|
});
|
||||||
|
|
||||||
// Load module code
|
// Load module code
|
||||||
require('govuk_frontend_toolkit/javascripts/govuk/modules.js');
|
require('govuk_frontend_toolkit/javascripts/govuk/modules.js');
|
||||||
|
|||||||
Reference in New Issue
Block a user