completed performance tests

Author: garrettlchow

src/app/__tests__/Performance.test.tsx

@@ -121,7 +121,18 @@ const mockBarGraphProps = {
   comparison: [],
   setRoute: jest.fn(),
   allRoutes: ['/home', '/about'],
-  filteredSnapshots: [],
+  filteredSnapshots: [
+    {
+      snapshotId: 'snapshot1',
+      'Component-1': 100,
+      'Component-2': 150,
+    },
+    {
+      snapshotId: 'snapshot2',
+      'Component-1': 120,
+      'Component-2': 140,
+    },
+  ],
   setSnapshot: jest.fn(),
   snapshot: 'All Snapshots',
 };
@@ -172,6 +183,9 @@ describe('Performance Components', () => {
     store = mockStore(mockReduxState);
     Storage.prototype.getItem = jest.fn(() => null);
     Storage.prototype.setItem = jest.fn();
+    // Clear mock calls before each test
+    mockBarGraphProps.setSnapshot.mockClear();
+    mockBarGraphProps.setRoute.mockClear();
   });
 
   describe('BarGraph Component', () => {
@@ -209,6 +223,7 @@ describe('Performance Components', () => {
       const snapshotSelect = screen.getByLabelText('Snapshot:');
       fireEvent.change(snapshotSelect, { target: { value: 'snapshot1' } });
       expect(mockBarGraphProps.setSnapshot).toHaveBeenCalledWith('snapshot1');
+      expect(mockBarGraphProps.setSnapshot).toHaveBeenCalledTimes(1);
     });
 
     it('renders correct number of bars', () => {

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -124,7 +124,9 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
     <div className='bargraph-position'>
       <div className='saveSeriesContainer'>
         <form className='routesForm' id='routes-formcontrol'>
-          <label id='routes-dropdown'>Route: </label>
+          <label id='routes-dropdown' htmlFor='routes-select'>
+            Route:{' '}
+          </label>
           <select
             className='performance-dropdown'
             labelid='demo-simple-select-label'
@@ -145,11 +147,17 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
           </select>
         </form>
         <form className='routesForm' id='routes-formcontrol'>
-          <label id='routes-dropdown'>Snapshot: </label>
+          <label id='routes-dropdown' htmlFor='snapshot-select'>
+            Snapshot:{' '}
+          </label>
           <select
             labelid='demo-simple-select-label'
             id='snapshot-select'
-            onChange={(e) => setSnapshot(e.target.value)}
+            value={snapshot}
+            onChange={(e) => {
+              e.preventDefault();
+              setSnapshot(e.target.value);
+            }}
           >
             <option value='All Snapshots'>All Snapshots</option>
             {filteredSnapshots.map((route) => (