From 0666187a50ad731049beb2ed0b5ac5c48c401c5a Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Mon, 7 Oct 2024 14:04:40 +1100
Subject: [PATCH] Adjust tests

---
 .../Corner/ScrollAreaCorner.test.tsx          | 13 +++++----
 .../ScrollArea/Root/ScrollAreaRoot.test.tsx   | 29 ++++++++++++++++---
 .../Viewport/useScrollAreaViewport.tsx        |  4 ++-
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/packages/mui-base/src/ScrollArea/Corner/ScrollAreaCorner.test.tsx b/packages/mui-base/src/ScrollArea/Corner/ScrollAreaCorner.test.tsx
index a2a62c0dbc..1e243c3c8c 100644
--- a/packages/mui-base/src/ScrollArea/Corner/ScrollAreaCorner.test.tsx
+++ b/packages/mui-base/src/ScrollArea/Corner/ScrollAreaCorner.test.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as ScrollArea from '@base_ui/react/ScrollArea';
 import { expect } from 'chai';
+import { screen } from '@mui/internal-test-utils';
 import { createRenderer } from '#test-utils';
 import { describeConformance } from '../../../test/describeConformance';
 
@@ -21,17 +22,19 @@ describe('<ScrollArea.Corner />', () => {
       this.skip();
     }
 
-    const { getByTestId } = await render(
-      <ScrollArea.Root>
-        <ScrollArea.Viewport data-testid="viewport" />
+    await render(
+      <ScrollArea.Root type="inlay" style={{ width: 200, height: 200 }}>
+        <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }}>
+          <div style={{ width: 1000, height: 1000 }} />
+        </ScrollArea.Viewport>
         <ScrollArea.Scrollbar orientation="vertical" style={{ width: 10 }} />
         <ScrollArea.Scrollbar orientation="horizontal" style={{ height: 10 }} />
         <ScrollArea.Corner data-testid="corner" />
       </ScrollArea.Root>,
     );
 
-    const corner = getByTestId('corner');
-    const style = window.getComputedStyle(corner);
+    const corner = screen.getByTestId('corner');
+    const style = getComputedStyle(corner);
 
     expect(style.getPropertyValue('--scroll-area-corner-width')).to.equal('10px');
     expect(style.getPropertyValue('--scroll-area-corner-height')).to.equal('10px');
diff --git a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx
index 67ed2c2b8f..1bfe0441d9 100644
--- a/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx
+++ b/packages/mui-base/src/ScrollArea/Root/ScrollAreaRoot.test.tsx
@@ -15,6 +15,22 @@ const SCROLLBAR_HEIGHT = 15;
 describe('<ScrollArea.Root />', () => {
   const { render } = createRenderer();
 
+  beforeEach(() => {
+    const style = document.createElement('style');
+    style.innerHTML = `
+      *, 
+      *::before, 
+      *::after {
+        box-sizing: border-box;
+      }
+    `;
+    document.head.appendChild(style);
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
   describeConformance(<ScrollArea.Root />, () => ({
     refInstanceof: window.HTMLDivElement,
     render,
@@ -25,7 +41,7 @@ describe('<ScrollArea.Root />', () => {
       this.skip();
     }
 
-    const { getByTestId } = await render(
+    await render(
       <ScrollArea.Root style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}>
         <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }}>
           <div style={{ width: SCROLLABLE_CONTENT_SIZE, height: SCROLLABLE_CONTENT_SIZE }} />
@@ -39,8 +55,8 @@ describe('<ScrollArea.Root />', () => {
       </ScrollArea.Root>,
     );
 
-    const verticalThumb = getByTestId('vertical-thumb');
-    const horizontalThumb = getByTestId('horizontal-thumb');
+    const verticalThumb = screen.getByTestId('vertical-thumb');
+    const horizontalThumb = screen.getByTestId('horizontal-thumb');
 
     expect(getComputedStyle(verticalThumb).getPropertyValue('--scroll-area-thumb-height')).to.equal(
       `${(VIEWPORT_SIZE / SCROLLABLE_CONTENT_SIZE) * VIEWPORT_SIZE}px`,
@@ -151,6 +167,7 @@ describe('<ScrollArea.Root />', () => {
 
       await render(
         <ScrollArea.Root
+          type="inlay"
           gutter="both-edges"
           style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}
         >
@@ -180,7 +197,11 @@ describe('<ScrollArea.Root />', () => {
       }
 
       await render(
-        <ScrollArea.Root gutter="none" style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}>
+        <ScrollArea.Root
+          type="inlay"
+          gutter="none"
+          style={{ width: VIEWPORT_SIZE, height: VIEWPORT_SIZE }}
+        >
           <ScrollArea.Viewport data-testid="viewport" style={{ width: '100%', height: '100%' }} />
           <ScrollArea.Scrollbar
             orientation="vertical"
diff --git a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
index 497c6a22dd..7d837e957b 100644
--- a/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
+++ b/packages/mui-base/src/ScrollArea/Viewport/useScrollAreaViewport.tsx
@@ -114,7 +114,9 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
         setCornerSize({ width: 0, height: 0 });
       } else if (!scrollbarXHidden && !scrollbarYHidden) {
         cornerEl.removeAttribute('hidden');
-        setCornerSize({ width: cornerEl.offsetWidth, height: cornerEl.offsetHeight });
+        const width = scrollbarYRef.current?.offsetWidth || 0;
+        const height = scrollbarXRef.current?.offsetHeight || 0;
+        setCornerSize({ width, height });
       }
     }
   });