diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js
index 84e5e3d51..a714a3d0d 100644
--- a/app/assets/javascripts/activityChart.js
+++ b/app/assets/javascripts/activityChart.js
@@ -234,17 +234,28 @@
// Update ARIA live region
const liveRegion = document.getElementById('aria-live-account');
- liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
- };
+ liveRegion.textContent = `Data updated for ${selectedText} - Last 7 Days`;
- document.addEventListener('DOMContentLoaded', function() {
- // Initialize activityChart chart and table with service data by default
- fetchData('service');
-
- // Add event listener to the dropdown
- const dropdown = document.getElementById('options');
- dropdown.addEventListener('change', handleDropdownChange);
+ // Switch tables based on dropdown selection
+ const selectedTable = selectedValue === "individual" ? "table1" : "table2";
+ const tables = document.querySelectorAll('.table-overflow-x-auto');
+ tables.forEach(function(table) {
+ table.classList.add('hidden'); // Hide all tables by adding the hidden class
+ table.classList.remove('visible'); // Ensure they are not visible
});
+ const tableToShow = document.getElementById(selectedTable);
+ tableToShow.classList.remove('hidden'); // Remove hidden class
+ tableToShow.classList.add('visible'); // Add visible class
+ };
+
+ document.addEventListener('DOMContentLoaded', function() {
+ // Initialize activityChart chart and table with service data by default
+ fetchData('service');
+
+ // Add event listener to the dropdown
+ const dropdown = document.getElementById('options');
+ dropdown.addEventListener('change', handleDropdownChange);
+ });
// Resize chart on window resize
window.addEventListener('resize', function() {
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index e3ef2be5d..4b62e564d 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -332,6 +332,12 @@ td.table-empty-message {
bottom: 0;
}
+.table-overflow-x-auto {
+ &.hidden {
+ display: none;
+ }
+}
+
@media (max-width: units('desktop-lg')) {
.table-overflow-x-auto {
overflow-x: auto;
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index 1db058718..bcb942210 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -60,7 +60,7 @@
{{ ajax_block(partials, updates_url, 'template-statistics') }}
-
+
-
+
All Activity
diff --git a/tests/javascripts/activityChart.test.js b/tests/javascripts/activityChart.test.js
index a8b520aa7..4fea5748b 100644
--- a/tests/javascripts/activityChart.test.js
+++ b/tests/javascripts/activityChart.test.js
@@ -18,7 +18,7 @@ Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
});
// beforeAll hook to set up the DOM and load D3.js script
-beforeAll(done => {
+beforeEach(done => {
// Set up the DOM with the D3 script included
document.body.innerHTML = `
@@ -40,8 +40,14 @@ beforeAll(done => {
+
+
`;
+ // Re-bind event listeners in case they are lost between tests
+ const dropdown = document.getElementById('options');
+ dropdown.addEventListener('change', window.handleDropdownChange);
+
// Load the D3 script dynamically
loadScript(d3ScriptContent);
@@ -53,6 +59,11 @@ beforeAll(done => {
}, 100);
}, 10000); // Increased timeout to 10 seconds
+afterEach(() => {
+ // Clean up DOM or restore mocks if needed
+ jest.restoreAllMocks(); // Restores all mocks, including console logs
+});
+
test('D3 is loaded correctly', () => {
// Check if D3 is loaded by verifying the existence of the d3 object
expect(window.d3).toBeDefined();
@@ -124,3 +135,89 @@ test('Check HTML content after chart creation', () => {
expect(container.querySelector('svg')).not.toBeNull();
expect(container.querySelectorAll('rect').length).toBeGreaterThan(0);
});
+
+// Add toHaveTextContent matcher manually
+expect.extend({
+ toHaveTextContent(received, expected) {
+ const actualTextContent = received.textContent;
+ const pass = actualTextContent.includes(expected);
+ if (pass) {
+ return {
+ message: () =>
+ `expected element not to have text content '${expected}', but it was found`,
+ pass: true,
+ };
+ } else {
+ return {
+ message: () =>
+ `expected element to have text content '${expected}', but got '${actualTextContent}'`,
+ pass: false,
+ };
+ }
+ },
+});
+
+test('Initial dropdown state is correct', () => {
+ const dropdown = document.getElementById('options');
+
+ // Check the initial value of the dropdown
+ expect(dropdown.value).toBe('service');
+
+ // Check the initial subtitle
+ const subTitle = document.querySelector('.chart-subtitle');
+ expect(subTitle).toHaveTextContent('Service Name - Last 7 Days');
+
+ // Check the initial ARIA live region text
+ const liveRegion = document.getElementById('aria-live-account');
+ expect(liveRegion.textContent).toBe(''); // Assuming it starts empty
+});
+
+test('handleDropdownChange updates subtitle and fetches individual data', () => {
+ // Get the dropdown and set its value to 'individual'
+ const dropdown = document.getElementById('options');
+ dropdown.value = 'individual';
+
+ // Create and dispatch a change event
+ const changeEvent = new Event('change', { bubbles: true });
+ dropdown.dispatchEvent(changeEvent);
+
+ // Check if subtitle text content is updated correctly
+ const subTitle = document.querySelector('.chart-subtitle');
+ expect(subTitle).toHaveTextContent('User Name - Last 7 Days');
+});
+
+test('handleDropdownChange shows "My Activity" table and hides "All Activity" table', () => {
+ // Get the dropdown and set its value to 'individual'
+ const dropdown = document.getElementById('options');
+ dropdown.value = 'individual';
+
+ // Create and dispatch a change event
+ const changeEvent = new Event('change', { bubbles: true });
+ dropdown.dispatchEvent(changeEvent);
+
+ // Check visibility of the tables
+ const table1 = document.getElementById('table1');
+ const table2 = document.getElementById('table2');
+
+ // Expect table1 to be visible and table2 to be hidden
+ expect(table1.classList).not.toContain('hidden');
+ expect(table1.classList).toContain('visible');
+ expect(table2.classList).toContain('hidden');
+ expect(table2.classList).not.toContain('visible');
+});
+
+test('Dropdown change event triggers handleDropdownChange with logging', () => {
+ // Spy on console.log
+ const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+
+ // Get the dropdown and set its value
+ const dropdown = document.getElementById('options');
+ dropdown.value = 'individual';
+
+ // Create and dispatch a change event
+ const changeEvent = new Event('change', { bubbles: true });
+ dropdown.dispatchEvent(changeEvent);
+
+ // Restore the console method
+ consoleSpy.mockRestore();
+});