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

Updates to the tests, committing as they currently run but I need to work on the coverage

Browse Source
This commit is contained in:
Jonathan Bobel
2024-06-27 11:01:31 -04:00
parent 30eac798c2
commit 149c23b721
9 changed files with 955 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/javascripts/chart.min.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
app/assets/javascripts/dashboardVisualization.js
+30 -23
View File
@@ -182,7 +182,7 @@
function fetchData(type) {
var ctx = document.getElementById('weeklyChart');
if (!ctx) {
return;
return;
}
var socket = io();
@@ -190,40 +190,40 @@
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
console.log(`User ID: ${userId}`);
socket.emit(eventType);
const userId = ctx.getAttribute('data-service-id'); // Assuming user ID is the same as service ID
console.log(`User ID: ${userId}`);
socket.emit(eventType);
});
socket.on(socketConnect, function(data) {
console.log('Received data:', data); // Log the received data
console.log('Received data:', data); // Log the received data
var labels = [];
var deliveredData = [];
var failedData = [];
var labels = [];
var deliveredData = [];
var failedData = [];
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
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 !== undefined ? data[dateString].sms.failure : 0);
}
labels.push(formattedDate);
deliveredData.push(data[dateString].sms.delivered);
failedData.push(data[dateString].sms.failure !== undefined ? data[dateString].sms.failure : 0);
}
console.log('Formatted labels:', labels); // Log the formatted labels
console.log('Delivered data:', deliveredData); // Log the delivered data
console.log('Failed data:', failedData); // Log the failed data
console.log('Formatted labels:', labels); // Log the formatted labels
console.log('Delivered data:', deliveredData); // Log the delivered data
console.log('Failed data:', failedData); // Log the failed data
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
createChart('#weeklyChart', labels, deliveredData, failedData);
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
});
socket.on('error', function(data) {
console.log('Error:', data);
console.log('Error:', data);
});
}
}
function handleDropdownChange(event) {
const selectedValue = event.target.value;
@@ -238,6 +238,11 @@
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() {
@@ -255,4 +260,6 @@
handleDropdownChange({ target: { value: selectedValue } });
});
module.exports = { createChart, createTable, handleDropdownChange, fetchData };
})(window);
app/templates/views/dashboard/dashboard.html
+3 -2
View File
@@ -49,13 +49,14 @@
<div id="Weekly">
<div class="chart-header">
<div class="chart-subtitle">{{ current_service.name }} - Last 7 Days</div>
<div class="chart-legend"></div>
<div class="chart-legend" aria-label="Legend"></div>
</div>
<div class="chart-container" id="weeklyChart" data-service-id="{{ service_id }}"></div>
<table id="weeklyTable" class="usa-sr-only"></table>
<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>
<h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
<div class="table-wrapper">
babel.config.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
presets: ['@babel/preset-env'],
};
package-lock.json
Generated
+772 -741
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -3
View File
@@ -42,9 +42,10 @@
"timeago": "1.6.7"
},
"devDependencies": {
"@babel/core": "7.19.6",
"@babel/preset-env": "7.19.4",
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@uswds/compile": "^1.1.0",
"babel-jest": "^29.7.0",
"better-npm-audit": "^3.7.3",
"gulp": "^4.0.2",
"gulp-add-src": "^1.0.0",
@@ -57,7 +58,7 @@
"gulp-jshint": "2.1.0",
"gulp-prettyerror": "2.0.0",
"gulp-uglify": "3.0.2",
"jest": "29.2.2",
"jest": "^29.7.0",
"jest-each": "^29.2.1",
"jest-environment-jsdom": "^29.2.2",
"jshint": "2.13.5",
poetry.lock
Generated
+4
View File
@@ -1344,9 +1344,13 @@ files = [
{file = "lxml-5.2.2-cp36-cp36m-win_amd64.whl", hash = "sha256:edcfa83e03370032a489430215c1e7783128808fd3e2e0a3225deee278585196"},
{file = "lxml-5.2.2-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:28bf95177400066596cdbcfc933312493799382879da504633d16cf60bba735b"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3a745cc98d504d5bd2c19b10c79c61c7c3df9222629f1b6210c0368177589fb8"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1b590b39ef90c6b22ec0be925b211298e810b4856909c8ca60d27ffbca6c12e6"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b336b0416828022bfd5a2e3083e7f5ba54b96242159f83c7e3eebaec752f1716"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_aarch64.whl", hash = "sha256:c2faf60c583af0d135e853c86ac2735ce178f0e338a3c7f9ae8f622fd2eb788c"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:4bc6cb140a7a0ad1f7bc37e018d0ed690b7b6520ade518285dc3171f7a117905"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:7ff762670cada8e05b32bf1e4dc50b140790909caa8303cfddc4d702b71ea184"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:57f0a0bbc9868e10ebe874e9f129d2917750adf008fe7b9c1598c0fbbfdde6a6"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_aarch64.whl", hash = "sha256:a6d2092797b388342c1bc932077ad232f914351932353e2e8706851c870bca1f"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_x86_64.whl", hash = "sha256:60499fe961b21264e17a471ec296dcbf4365fbea611bf9e303ab69db7159ce61"},
{file = "lxml-5.2.2-cp37-cp37m-win32.whl", hash = "sha256:d9b342c76003c6b9336a80efcc766748a333573abf9350f4094ee46b006ec18f"},
{file = "lxml-5.2.2-cp37-cp37m-win_amd64.whl", hash = "sha256:b16db2770517b8799c79aa80f4053cd6f8b716f21f8aca962725a9565ce3ee40"},
tests/javascripts/dashboardVisualization.test.js
+133
View File
@@ -0,0 +1,133 @@
const { createTable, handleDropdownChange, fetchData, createChart } = require('../../app/assets/javascripts/dashboardVisualization.js');
// Mock d3 to avoid errors related to it
jest.mock('d3', () => {
const selectAllMock = jest.fn().mockReturnValue({
remove: jest.fn(),
});
const appendMock = jest.fn().mockReturnValue({
attr: jest.fn().mockReturnThis(),
append: jest.fn().mockReturnThis(),
style: jest.fn().mockReturnThis(),
text: jest.fn(),
});
const selectMock = jest.fn().mockReturnValue({
selectAll: selectAllMock,
append: appendMock,
attr: jest.fn().mockReturnThis(),
style: jest.fn().mockReturnThis(),
text: jest.fn(),
});
const scaleBandMock = jest.fn().mockReturnValue({
domain: jest.fn().mockReturnThis(),
range: jest.fn().mockReturnThis(),
padding: jest.fn().mockReturnThis(),
});
const scaleLinearMock = jest.fn().mockReturnValue({
domain: jest.fn().mockReturnThis(),
nice: jest.fn().mockReturnThis(),
range: jest.fn().mockReturnThis(),
});
const axisMock = jest.fn().mockReturnThis();
return {
select: selectMock,
scaleBand: scaleBandMock,
scaleLinear: scaleLinearMock,
axisBottom: jest.fn(() => axisMock),
axisLeft: jest.fn(() => axisMock),
stack: jest.fn(() => jest.fn().mockReturnValue([])),
format: jest.fn(() => jest.fn()),
};
});
describe('Dashboard Visualization Module', () => {
test('should have createTable function', () => {
expect(typeof createTable).toBe('function');
});
test('should have handleDropdownChange function', () => {
expect(typeof handleDropdownChange).toBe('function');
});
test('should have fetchData function', () => {
expect(typeof fetchData).toBe('function');
});
});
describe('Table Creation', () => {
beforeAll(() => {
document.body.innerHTML = `
<div id="Weekly">
<div class="chart-header">
<div class="chart-subtitle">Weekly</div>
</div>
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
</div>
`;
});
test('creates a table with the correct data', () => {
const labels = ['Day 1', 'Day 2', 'Day 3'];
const deliveredData = [10, 20, 30];
const failedData = [1, 2, 3];
createTable('weeklyTable', 'Weekly', labels, deliveredData, failedData);
const table = document.getElementById('weeklyTable');
console.log(table);
expect(document.body.contains(table)).toBe(true);
expect(table.querySelectorAll('tbody tr').length).toBe(labels.length);
});
});
describe('Dropdown Change Handler', () => {
beforeAll(() => {
document.body.innerHTML = `
<div id="chartsArea">
<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="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>
`;
// Mock Socket.IO
global.io = jest.fn().mockReturnValue({
on: jest.fn(),
emit: jest.fn(),
});
});
test('updates subtitle and aria-live region correctly', () => {
const dropdown = document.getElementById('options');
dropdown.value = 'individual';
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');
});
});
tests/javascripts/jest.config.js
+6
View File
@@ -14,4 +14,10 @@ module.exports = {
testEnvironmentOptions: {
url: 'https://beta.notify.gov',
},
transform: {
'^.+\\.js$': 'babel-jest',
},
transformIgnorePatterns: [
'/node_modules/' // Add any other folders you want Jest to ignore
],
};