test case improved

mui · Mar 3, 2024 · b7122a7 · b7122a7
1 parent 71aa9bf
commit b7122a7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 46 deletions.
diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx
@@ -573,34 +573,40 @@ describe('<DateRangeCalendar />', () => {
         // Render the component with initial timezone prop
         const { rerender } = render(<DateRangeCalendar timezone="UTC" />);
 
-        // Get all button elements with role 'gridcell'
-        const initialButtons = screen
-          .getAllByRole('gridcell')
-          .filter((element) => element.tagName.toLowerCase() === 'button');
-
-        // Extract timestamps from initial render
-        const initialTimestamps = initialButtons.map((button) =>
-          parseInt(button.getAttribute('data-timestamp')!, 10),
-        );
+        // Create a map of buttons with their indices for the initial render
+        const renderButtonsMap = {};
+        Object.keys(screen.getAllByRole('gridcell')).forEach((key, index) => {
+          const element = screen.getByRole('gridcell', { name: key });
+          if (element.tagName.toLowerCase() === 'button') {
+            // Extract the number from the inner text
+            if (element && element.textContent) {
+              const number = parseInt(element.textContent.trim(), 10);
+              renderButtonsMap[index] = number;
+            }
+          }
+        });
 
         // Rerender the component with a different timezone prop
         rerender(<DateRangeCalendar timezone={timezone} />);
 
-        // Get all button elements with role 'gridcell' after rerender
-        const rerenderedButtons = screen
-          .getAllByRole('gridcell')
-          .filter((element) => element.tagName.toLowerCase() === 'button');
-
-        // Extract timestamps from rerender
-        const rerenderedTimestamps = rerenderedButtons.map((button) =>
-          parseInt(button.getAttribute('data-timestamp')!, 10),
-        );
-
-        // Ensure the number of buttons is consistent
-        expect(rerenderedButtons.length).equals(initialButtons.length);
+        // Create a map of buttons with their indices for the rerender
+        const reRenderButtonsMap = {};
+        Object.keys(screen.getAllByRole('gridcell')).forEach((key, index) => {
+          const element = screen.getByRole('gridcell', { name: key });
+          if (element.tagName.toLowerCase() === 'button') {
+            // Extract the number from the inner text
+            if (element && element.textContent) {
+              const number = parseInt(element.textContent.trim(), 10);
+              reRenderButtonsMap[index] = number;
+            }
+          }
+        });
 
-        // Compare timestamps
-        expect(rerenderedTimestamps).equals(initialTimestamps);
+        // Ensure the number of buttons and their numbers are consistent
+        expect(Object.keys(reRenderButtonsMap).length).equals(Object.keys(renderButtonsMap).length);
+        Object.keys(renderButtonsMap).forEach((index) => {
+          expect(reRenderButtonsMap[index]).equals(renderButtonsMap[index]);
+        });
       });
 
       it('should select the range from the next month', () => {

diff --git a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx
@@ -65,34 +65,42 @@ describe('<DateCalendar /> - Timezone', () => {
           // Render the component with initial timezone prop
           const { rerender } = render(<DateCalendar timezone="UTC" />);
 
-          // Get all button elements with role 'gridcell'
-          const initialButtons = screen
-            .getAllByRole('gridcell')
-            .filter((element) => element.tagName.toLowerCase() === 'button');
-
-          // Extract timestamps from initial render
-          const initialTimestamps = initialButtons.map((button) =>
-            parseInt(button.getAttribute('data-timestamp')!, 10),
-          );
+          // Create a map of buttons with their indices for the initial render
+          const renderButtonsMap = {};
+          Object.keys(screen.getAllByRole('gridcell')).forEach((key, index) => {
+            const element = screen.getByRole('gridcell', { name: key });
+            if (element.tagName.toLowerCase() === 'button') {
+              // Extract the number from the inner text
+              if (element && element.textContent) {
+                const number = parseInt(element.textContent.trim(), 10);
+                renderButtonsMap[index] = number;
+              }
+            }
+          });
 
           // Rerender the component with a different timezone prop
           rerender(<DateCalendar timezone={timezone} />);
 
-          // Get all button elements with role 'gridcell' after rerender
-          const rerenderedButtons = screen
-            .getAllByRole('gridcell')
-            .filter((element) => element.tagName.toLowerCase() === 'button');
-
-          // Extract timestamps from rerender
-          const rerenderedTimestamps = rerenderedButtons.map((button) =>
-            parseInt(button.getAttribute('data-timestamp')!, 10),
+          // Create a map of buttons with their indices for the rerender
+          const reRenderButtonsMap = {};
+          Object.keys(screen.getAllByRole('gridcell')).forEach((key, index) => {
+            const element = screen.getByRole('gridcell', { name: key });
+            if (element.tagName.toLowerCase() === 'button') {
+              // Extract the number from the inner text
+              if (element && element.textContent) {
+                const number = parseInt(element.textContent.trim(), 10);
+                reRenderButtonsMap[index] = number;
+              }
+            }
+          });
+
+          // Ensure the number of buttons and their numbers are consistent
+          expect(Object.keys(reRenderButtonsMap).length).equals(
+            Object.keys(renderButtonsMap).length,
           );
-
-          // Ensure the number of buttons is consistent
-          expect(rerenderedButtons.length).equals(initialButtons.length);
-
-          // Compare timestamps
-          expect(rerenderedTimestamps).equals(initialTimestamps);
+          Object.keys(renderButtonsMap).forEach((index) => {
+            expect(reRenderButtonsMap[index]).equals(renderButtonsMap[index]);
+          });
         });
 
         it('on timezone change the difference between the selected date change should be at max 1', () => {