Adding the ability to switch tables in the js

Updating css
Testing updated js

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() {

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;

app/templates/views/dashboard/dashboard.html

@@ -60,7 +60,7 @@
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
     <div class="table-container">
-      <div id="table1" class="table-overflow-x-auto">
+      <div id="table1" class="table-overflow-x-auto hidden">
         <h2 class="margin-top-4 margin-bottom-1">My Activity</h2>
         <table class="usa-table job-table">
           <thead class="table-field-headings">
@@ -109,7 +109,7 @@
         </table>
       </div>
 
-      <div id="table2" class="table-overflow-x-auto" style="display:none;">
+      <div id="table2" class="table-overflow-x-auto visible">
         <h2 class="margin-top-4 margin-bottom-1">All Activity</h2>
         <table class="usa-table job-table">
           <thead class="table-field-headings">

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 = `
     <div id="activityChartContainer">
@@ -40,8 +40,14 @@ beforeAll(done => {
       </div>
     </div>
     <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
+    <div id="table1" class="table-overflow-x-auto hidden"></div>
+    <div id="table2" class="table-overflow-x-auto visible"></div>
   `;
 
+  // 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();
+});