mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 03:13:42 -05:00
218 lines
8.2 KiB
JavaScript
218 lines
8.2 KiB
JavaScript
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" role="region" 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, pending: 10 } },
|
|
'2024-07-02': { sms: { delivered: 60, failed: 2, pending: 5 } },
|
|
'2024-07-03': { sms: { delivered: 70, failed: 1, pending: 3 } },
|
|
'2024-07-04': { sms: { delivered: 80, failed: 0, pending: 0 } },
|
|
'2024-07-05': { sms: { delivered: 90, failed: 3, pending: 8 } },
|
|
'2024-07-06': { sms: { delivered: 100, failed: 4, pending: 7 } },
|
|
'2024-07-07': { sms: { delivered: 110, failed: 2, pending: 6 } },
|
|
};
|
|
|
|
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);
|
|
const pendingData = Object.values(sampleData).map(d => d.sms.pending);
|
|
|
|
window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
|
|
|
|
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');
|
|
expect(headers[3].textContent).toBe('Pending');
|
|
|
|
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],
|
|
[10, 5, 3, 0, 8, 7, 6]
|
|
);
|
|
|
|
const svg = document.getElementById('weeklyChart').querySelector('svg');
|
|
expect(svg).not.toBeNull();
|
|
expect(svg.querySelectorAll('.bar-group').length).toBe(3);
|
|
});
|
|
|
|
test('Check HTML content after chart creation', () => {
|
|
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];
|
|
const pendingData = [10, 5, 8, 3, 6, 7, 4];
|
|
|
|
const container = document.getElementById('weeklyChart');
|
|
container.style.width = '600px';
|
|
const containerWidth = container.clientWidth;
|
|
expect(containerWidth).toBeGreaterThan(0);
|
|
|
|
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
|
|
|
|
const svg = container.querySelector('svg');
|
|
expect(svg).not.toBeNull();
|
|
|
|
const bars = container.querySelectorAll('rect');
|
|
expect(bars.length).toBeGreaterThan(0);
|
|
|
|
const barGroups = svg.querySelectorAll('.bar-group');
|
|
expect(barGroups.length).toBe(3);
|
|
|
|
const pendingBars = Array.from(bars).filter(bar =>
|
|
bar.parentNode.getAttribute('fill') === '#808080'
|
|
);
|
|
expect(pendingBars.length).toBe(labels.length);
|
|
});
|
|
|
|
test('Legend includes pending when data exists', () => {
|
|
const labels = ['Day 1', 'Day 2'];
|
|
const deliveredData = [10, 20];
|
|
const failedData = [5, 0];
|
|
const pendingData = [3, 2];
|
|
|
|
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
|
|
|
|
const legendContainer = document.querySelector('.chart-legend');
|
|
const legendItems = legendContainer.querySelectorAll('.legend-item');
|
|
expect(legendItems.length).toBe(3);
|
|
|
|
const pendingLegend = Array.from(legendItems).find(item =>
|
|
item.textContent.includes('Pending')
|
|
);
|
|
expect(pendingLegend).not.toBeNull();
|
|
});
|
|
|
|
test('Legend is hidden when there are no delivered, failed, or pending messages', () => {
|
|
const labels = ['Day 1', 'Day 2'];
|
|
const deliveredData = [0, 0];
|
|
const failedData = [0, 0];
|
|
const pendingData = [0, 0];
|
|
|
|
// Call the createChart function
|
|
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
|
|
|
|
// Check if the legend is hidden using computed style
|
|
const legendContainer = document.querySelector('.chart-legend');
|
|
const legendDisplayStyle = window.getComputedStyle(legendContainer).display;
|
|
expect(legendDisplayStyle).toBe('none');
|
|
});
|
|
|
|
test('Fetches data and creates chart and table correctly', async () => {
|
|
const mockResponse = {
|
|
'2024-07-01': { sms: { delivered: 50, failed: 5, pending: 10 } },
|
|
'2024-07-02': { sms: { delivered: 60, failed: 2, pending: 8 } },
|
|
'2024-07-03': { sms: { delivered: 70, failed: 1, pending: 6 } },
|
|
'2024-07-04': { sms: { delivered: 80, failed: 0, pending: 4 } },
|
|
'2024-07-05': { sms: { delivered: 90, failed: 3, pending: 7 } },
|
|
'2024-07-06': { sms: { delivered: 100, failed: 4, pending: 5 } },
|
|
'2024-07-07': { sms: { delivered: 110, failed: 2, pending: 3 } },
|
|
};
|
|
|
|
global.fetch = jest.fn(() =>
|
|
Promise.resolve({
|
|
ok: true,
|
|
json: () => Promise.resolve(mockResponse),
|
|
})
|
|
);
|
|
|
|
const data = await fetchData('service');
|
|
|
|
expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json');
|
|
expect(data).toEqual(mockResponse);
|
|
|
|
const labels = Object.keys(mockResponse).map(dateString => {
|
|
const dateParts = dateString.split('-');
|
|
return `${dateParts[1]}/${dateParts[2]}/${dateParts[0].slice(2)}`;
|
|
});
|
|
const deliveredData = Object.values(mockResponse).map(d => d.sms.delivered);
|
|
const failedData = Object.values(mockResponse).map(d => d.sms.failed);
|
|
const pendingData = Object.values(mockResponse).map(d => d.sms.pending);
|
|
|
|
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
|
|
window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
|
|
|
|
const chart = document.getElementById('weeklyChart').querySelector('svg');
|
|
expect(chart).not.toBeNull();
|
|
|
|
const table = document.getElementById('weeklyTable');
|
|
expect(table).toBeDefined();
|
|
const rows = table.getElementsByTagName('tr');
|
|
expect(rows.length).toBe(8);
|
|
});
|