darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -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

1893
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -61,7 +61,7 @@
"gulp-jshint": "2.1.0", "gulp-jshint": "2.1.0",
"gulp-prettyerror": "2.0.0", "gulp-prettyerror": "2.0.0",
"gulp-uglify": "3.0.2", "gulp-uglify": "3.0.2",
"jest": "29.7.0", "jest": "^29.7.0",
"jest-each": "^29.2.1", "jest-each": "^29.2.1",
"jest-environment-jsdom": "^29.2.2", "jest-environment-jsdom": "^29.2.2",
"jshint": "2.13.6", "jshint": "2.13.6",

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', () => { test('Populates the accessible table for activity chart correctly', () => {
const sampleData = { const sampleData = {
'2024-07-01': { sms: { delivered: 50, failed: 5 } }, '2024-07-01': { sms: { delivered: 50, failed: 5, pending: 10 } },
'2024-07-02': { sms: { delivered: 60, failed: 2 } }, '2024-07-02': { sms: { delivered: 60, failed: 2, pending: 5 } },
'2024-07-03': { sms: { delivered: 70, failed: 1 } }, '2024-07-03': { sms: { delivered: 70, failed: 1, pending: 3 } },
'2024-07-04': { sms: { delivered: 80, failed: 0 } }, '2024-07-04': { sms: { delivered: 80, failed: 0, pending: 0 } },
'2024-07-05': { sms: { delivered: 90, failed: 3 } }, '2024-07-05': { sms: { delivered: 90, failed: 3, pending: 8 } },
'2024-07-06': { sms: { delivered: 100, failed: 4 } }, '2024-07-06': { sms: { delivered: 100, failed: 4, pending: 7 } },
'2024-07-07': { sms: { delivered: 110, failed: 2 } }, '2024-07-07': { sms: { delivered: 110, failed: 2, pending: 6 } },
}; };
const labels = Object.keys(sampleData).map(dateString => { 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 deliveredData = Object.values(sampleData).map(d => d.sms.delivered);
const failedData = Object.values(sampleData).map(d => d.sms.failed); 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'); const table = document.getElementById('weeklyTable');
expect(table).toBeDefined(); expect(table).toBeDefined();
@@ -89,6 +90,7 @@ test('Populates the accessible table for activity chart correctly', () => {
expect(headers[0].textContent).toBe('Day'); expect(headers[0].textContent).toBe('Day');
expect(headers[1].textContent).toBe('Delivered'); expect(headers[1].textContent).toBe('Delivered');
expect(headers[2].textContent).toBe('Failed'); expect(headers[2].textContent).toBe('Failed');
expect(headers[3].textContent).toBe('Pending');
const firstRowCells = rows[1].getElementsByTagName('td'); const firstRowCells = rows[1].getElementsByTagName('td');
expect(firstRowCells[0].textContent).toBe('07/01/24'); 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', () => { 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'); const svg = document.getElementById('weeklyChart').querySelector('svg');
expect(svg).not.toBeNull(); expect(svg).not.toBeNull();
expect(svg.getAttribute('width')).toBe('0'); expect(svg.querySelectorAll('.bar-group').length).toBe(3);
expect(svg.getAttribute('height')).toBe('400');
}); });
test('Check HTML content after chart creation', () => { 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 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 deliveredData = [50, 60, 70, 80, 90, 100, 110];
const failedData = [5, 2, 1, 0, 3, 4, 2]; 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'); const container = document.getElementById('weeklyChart');
container.style.width = '600px'; // Force a specific width container.style.width = '600px';
const containerWidth = container.clientWidth; const containerWidth = container.clientWidth;
expect(containerWidth).toBeGreaterThan(0); expect(containerWidth).toBeGreaterThan(0);
// Call the function to create the chart window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
window.createChart('#weeklyChart', labels, deliveredData, failedData);
// Optionally, you can add assertions to check for specific elements const svg = container.querySelector('svg');
expect(container.querySelector('svg')).not.toBeNull(); expect(svg).not.toBeNull();
expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
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', () => { test('Legend includes pending when data exists', () => {
// Example data with delivered and failed messages
const labels = ['Day 1', 'Day 2']; const labels = ['Day 1', 'Day 2'];
const deliveredData = [10, 20]; // Mock delivered data const deliveredData = [10, 20];
const failedData = [5, 0]; // Mock failed data const failedData = [5, 0];
const pendingData = [3, 2];
// Call the createChart function window.createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
window.createChart('#weeklyChart', labels, deliveredData, failedData);
// Check if the legend is displayed using computed style
const legendContainer = document.querySelector('.chart-legend'); const legendContainer = document.querySelector('.chart-legend');
const legendDisplayStyle = window.getComputedStyle(legendContainer).display; const legendItems = legendContainer.querySelectorAll('.legend-item');
expect(legendDisplayStyle).toBe('flex'); expect(legendItems.length).toBe(3);
expect(legendContainer.querySelectorAll('.legend-item').length).toBe(2); // Ensure two legend items
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', () => { test('Legend is hidden when there are no delivered, failed, or pending messages', () => {
// Example data with no delivered and no failed messages
const labels = ['Day 1', 'Day 2']; const labels = ['Day 1', 'Day 2'];
const deliveredData = [0, 0]; // No delivered messages const deliveredData = [0, 0];
const failedData = [0, 0]; // No failed messages const failedData = [0, 0];
const pendingData = [0, 0];
// Call the createChart function // 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 // Check if the legend is hidden using computed style
const legendContainer = document.querySelector('.chart-legend'); 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 () => { test('Fetches data and creates chart and table correctly', async () => {
const mockResponse = { const mockResponse = {
'2024-07-01': { sms: { delivered: 50, failed: 5 } }, '2024-07-01': { sms: { delivered: 50, failed: 5, pending: 10 } },
'2024-07-02': { sms: { delivered: 60, failed: 2 } }, '2024-07-02': { sms: { delivered: 60, failed: 2, pending: 8 } },
'2024-07-03': { sms: { delivered: 70, failed: 1 } }, '2024-07-03': { sms: { delivered: 70, failed: 1, pending: 6 } },
'2024-07-04': { sms: { delivered: 80, failed: 0 } }, '2024-07-04': { sms: { delivered: 80, failed: 0, pending: 4 } },
'2024-07-05': { sms: { delivered: 90, failed: 3 } }, '2024-07-05': { sms: { delivered: 90, failed: 3, pending: 7 } },
'2024-07-06': { sms: { delivered: 100, failed: 4 } }, '2024-07-06': { sms: { delivered: 100, failed: 4, pending: 5 } },
'2024-07-07': { sms: { delivered: 110, failed: 2 } }, '2024-07-07': { sms: { delivered: 110, failed: 2, pending: 3 } },
}; };
global.fetch = jest.fn(() => global.fetch = jest.fn(() =>
Promise.resolve({ Promise.resolve({
ok: true, ok: true,
json: () => Promise.resolve(mockResponse), json: () => Promise.resolve(mockResponse),
}) })
); );
const data = await fetchData('service'); const data = await fetchData('service');
expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json'); expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json');
expect(data).toEqual(mockResponse); 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);
}); });