chore: Mock getBoundingClientRect in mixed chart tests (#3894)

Author: jperals

pages/container-queries.page.tsx

@@ -21,7 +21,11 @@ function MeasureReporter(props: { id?: string; style?: React.CSSProperties; type
     [props.type]
   );
   if (value === null) {
-    return <div ref={ref}>Loading...</div>;
+    return (
+      <div ref={ref} style={{ ...boxStyles, ...props.style }}>
+        Loading...
+      </div>
+    );
   }
   return (
     <div id={props.id} ref={ref} style={{ ...boxStyles, ...props.style }}>
@@ -72,8 +76,15 @@ export default function ColumnLayoutPage() {
         type={measureType}
       />
 
+      <h2>Reports content-box dimensions when border is present</h2>
+      <MeasureReporter
+        id="test-border"
+        style={{ inlineSize: 300, blockSize: 50, border: '2px solid blue' }}
+        type={measureType}
+      />
+
       <h2>Adjusts as the element changes size (resize browser)</h2>
-      <MeasureReporter id="test-updates" style={{ blockSize: 50 }} type={measureType} />
+      <MeasureReporter id="test-updates" style={{ blockSize: 50, border: '2px solid blue' }} type={measureType} />
 
       <h2>Returns correct breakpoints</h2>
       <BreakpointReporter id="test-breakpoints" style={{ blockSize: 50 }} />

src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx

@@ -24,6 +24,12 @@ jest.mock('../../../lib/components/popover/utils/positions', () => {
   };
 });
 
+jest.mock('@cloudscape-design/component-toolkit', () => ({
+  ...jest.requireActual('@cloudscape-design/component-toolkit'),
+  // Mock the chart width with enough space to fit all expected elements (labels, x ticks, etc)
+  useContainerQuery: () => [900, null],
+}));
+
 jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
   getIsRtl: jest.fn().mockReturnValue(false),
@@ -113,7 +119,7 @@ const thresholdSeries: MixedLineBarChartProps.ThresholdSeries = {
 // Transformation to fallback colors for browsers that don't support them are covered by the `parseCssVariable` utility.
 const originalCSS = window.CSS;
 
-let originalGetComputedStyle: Window['getComputedStyle'];
+const originalGetComputedStyle = window.getComputedStyle;
 const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
   const result = originalGetComputedStyle(...args);
   result.borderWidth = '2px'; // Approximate mock value for the popover body' border width
@@ -124,9 +130,7 @@ const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
 
 beforeEach(() => {
   window.CSS.supports = () => true;
-  originalGetComputedStyle = window.getComputedStyle;
   window.getComputedStyle = fakeGetComputedStyle;
-
   jest.resetAllMocks();
 });
 afterEach(() => {