darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-11 09:28:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

jest test

Browse Source
This commit is contained in:
Beverly Nguyen
2025-01-14 13:10:48 -08:00
parent 82179c0ad8
commit 5e61fb831d
3 changed files with 418 additions and 1608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
tests/javascripts/activityChart.test.js
View File

@@ -61,13 +61,13 @@ test('D3 is loaded correctly', () => {
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 } },
'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 => {
@@ -76,8 +76,9 @@ test('Populates the accessible table for activity chart correctly', () => {
});
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);
window.createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
const table = document.getElementById('weeklyTable');
expect(table).toBeDefined();
@@ -89,6 +90,7 @@ test('Populates the accessible table for activity chart correctly', () => {
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');
@@ -97,58 +99,73 @@ test('Populates the accessible table for activity chart correctly', () => {
});
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]);
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.getAttribute('width')).toBe('0');
expect(svg.getAttribute('height')).toBe('400');
expect(svg.querySelectorAll('.bar-group').length).toBe(3);
});
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];
const pendingData = [10, 5, 8, 3, 6, 7, 4];
// Ensure the container has the correct width
const container = document.getElementById('weeklyChart');
container.style.width = '600px'; // Force a specific width
container.style.width = '600px';
const containerWidth = container.clientWidth;
expect(containerWidth).toBeGreaterThan(0);
// Call the function to create the chart
window.createChart('#weeklyChart', labels, deliveredData, failedData);
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
// Optionally, you can add assertions to check for specific elements
expect(container.querySelector('svg')).not.toBeNull();
expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
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 is visible when there are delivered or failed messages', () => {
// Example data with delivered and failed messages
test('Legend includes pending when data exists', () => {
const labels = ['Day 1', 'Day 2'];
const deliveredData = [10, 20]; // Mock delivered data
const failedData = [5, 0]; // Mock failed data
const deliveredData = [10, 20];
const failedData = [5, 0];
const pendingData = [3, 2];
// Call the createChart function
window.createChart('#weeklyChart', labels, deliveredData, failedData);
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
// Check if the legend is displayed using computed style
const legendContainer = document.querySelector('.chart-legend');
const legendDisplayStyle = window.getComputedStyle(legendContainer).display;
expect(legendDisplayStyle).toBe('flex');
expect(legendContainer.querySelectorAll('.legend-item').length).toBe(2); // Ensure two legend items
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 or failed messages', () => {
// Example data with no delivered and no failed messages
test('Legend is hidden when there are no delivered, failed, or pending messages', () => {
const labels = ['Day 1', 'Day 2'];
const deliveredData = [0, 0]; // No delivered messages
const failedData = [0, 0]; // No failed messages
const deliveredData = [0, 0];
const failedData = [0, 0];
const pendingData = [0, 0];
// Call the createChart function
window.createChart('#weeklyChart', labels, deliveredData, failedData);
window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
// Check if the legend is hidden using computed style
const legendContainer = document.querySelector('.chart-legend');
@@ -158,23 +175,43 @@ test('Legend is hidden when there are no delivered or failed messages', () => {
test('Fetches data and creates chart and table correctly', async () => {
const mockResponse = {
'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 } },
'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),
ok: true,
json: () => Promise.resolve(mockResponse),
})
);
);
const data = await fetchData('service');
const data = await fetchData('service');
expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json');
expect(data).toEqual(mockResponse);
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);
});