[Tabs] Fix indicator tests (#379)

mui · May 29, 2024 · ef5d3c6 · ef5d3c6
1 parent bd5c7a0
commit ef5d3c6
Showing 1 changed file with 26 additions and 28 deletions.
diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx
@@ -4,18 +4,14 @@ import { createRenderer } from '@mui/internal-test-utils';
 import * as Tabs from '@base_ui/react/Tabs';
 import { describeConformance } from '../../../test/describeConformance';
 
-async function waitForNextEventCycle() {
+async function wait(timeout: number) {
   return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve();
-    });
+    }, timeout);
   });
 }
 
-function round(value: number) {
-  return Math.round(value * 100) * 0.01;
-}
-
 describe('<Tabs.Indicator />', () => {
   const { render } = createRenderer();
 
@@ -59,6 +55,11 @@ describe('<Tabs.Indicator />', () => {
       expect(queryByTestId('bubble')).to.equal(null);
     });
 
+    function assertSize(actual: string, expected: number) {
+      const actualNumber = parseFloat(actual);
+      expect(actualNumber).to.be.closeTo(expected, 0.01);
+    }
+
     function assertBubblePositionVariables(
       bubble: HTMLElement,
       tabList: HTMLElement,
@@ -78,26 +79,21 @@ describe('<Tabs.Indicator />', () => {
         bottom: tabBottom,
       } = activeTab.getBoundingClientRect();
 
-      const relativeLeft = round(tabLeft - listLeft);
-      const relativeRight = round(listRight - tabRight);
-      const relativeTop = round(tabTop - listTop);
-      const relativeBottom = round(listBottom - tabBottom);
-
-      expect(window.getComputedStyle(bubble).getPropertyValue('--active-tab-left')).to.equal(
-        `${relativeLeft}px`,
-      );
-
-      expect(window.getComputedStyle(bubble).getPropertyValue('--active-tab-right')).to.equal(
-        `${relativeRight}px`,
-      );
-
-      expect(window.getComputedStyle(bubble).getPropertyValue('--active-tab-top')).to.equal(
-        `${relativeTop}px`,
-      );
-
-      expect(window.getComputedStyle(bubble).getPropertyValue('--active-tab-bottom')).to.equal(
-        `${relativeBottom}px`,
-      );
+      const relativeLeft = tabLeft - listLeft;
+      const relativeRight = listRight - tabRight;
+      const relativeTop = tabTop - listTop;
+      const relativeBottom = listBottom - tabBottom;
+
+      const bubbleComputedStyle = window.getComputedStyle(bubble);
+      const actualLeft = bubbleComputedStyle.getPropertyValue('--active-tab-left');
+      const actualRight = bubbleComputedStyle.getPropertyValue('--active-tab-right');
+      const actualTop = bubbleComputedStyle.getPropertyValue('--active-tab-top');
+      const actualBottom = bubbleComputedStyle.getPropertyValue('--active-tab-bottom');
+
+      assertSize(actualLeft, relativeLeft);
+      assertSize(actualRight, relativeRight);
+      assertSize(actualTop, relativeTop);
+      assertSize(actualBottom, relativeBottom);
     }
 
     it('should set CSS variables corresponding to the active tab', () => {
@@ -172,8 +168,10 @@ describe('<Tabs.Indicator />', () => {
         style: { width: '800px' },
       });
 
-      // wait for the resize observer to trigger
-      await waitForNextEventCycle();
+      // Wait for the resize observer to trigger.
+      // Safari on BrowserStack needs a bit more time to update the layout.
+      await wait(50);
+
       assertBubblePositionVariables(bubble, tabList, activeTab);
     });
   });