From cc2c25cf74aa33fc28ee80d2a8e84eb588032721 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Thu, 25 Sep 2025 10:26:27 +0200
Subject: [PATCH 1/2] chore: Mock getBoundingClientRect in mixed chart tests

---
 pages/container-queries.page.tsx                  | 15 +++++++++++++--
 .../__tests__/mixed-chart.test.tsx                | 11 +++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/pages/container-queries.page.tsx b/pages/container-queries.page.tsx
index 294b4c9efc..4698f92f55 100644
--- a/pages/container-queries.page.tsx
+++ b/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 }} />
diff --git a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
index ee4b698526..9decade3a7 100644
--- a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
+++ b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
@@ -113,7 +113,8 @@ 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 originalBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
 const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
   const result = originalGetComputedStyle(...args);
   result.borderWidth = '2px'; // Approximate mock value for the popover body' border width
@@ -124,14 +125,20 @@ const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
 
 beforeEach(() => {
   window.CSS.supports = () => true;
-  originalGetComputedStyle = window.getComputedStyle;
   window.getComputedStyle = fakeGetComputedStyle;
+  HTMLElement.prototype.getBoundingClientRect = function () {
+    const rect = originalBoundingClientRect.apply(this);
+    rect.width = 900;
+    rect.height = 300;
+    return rect;
+  };
 
   jest.resetAllMocks();
 });
 afterEach(() => {
   window.CSS = originalCSS;
   window.getComputedStyle = originalGetComputedStyle;
+  HTMLElement.prototype.getBoundingClientRect = originalBoundingClientRect;
 });
 
 describe('Series', () => {

From f905dda3fff99816b8383b99a828827d89141ca9 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Fri, 26 Sep 2025 10:06:16 +0200
Subject: [PATCH 2/2] Mock useContainerQuery instead of native HTML methods

---
 .../__tests__/mixed-chart.test.tsx                | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx b/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
index 9decade3a7..ea29688462 100644
--- a/src/mixed-line-bar-chart/__tests__/mixed-chart.test.tsx
+++ b/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),
@@ -114,7 +120,6 @@ const thresholdSeries: MixedLineBarChartProps.ThresholdSeries = {
 const originalCSS = window.CSS;
 
 const originalGetComputedStyle = window.getComputedStyle;
-const originalBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
 const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
   const result = originalGetComputedStyle(...args);
   result.borderWidth = '2px'; // Approximate mock value for the popover body' border width
@@ -126,19 +131,11 @@ const fakeGetComputedStyle: Window['getComputedStyle'] = (...args) => {
 beforeEach(() => {
   window.CSS.supports = () => true;
   window.getComputedStyle = fakeGetComputedStyle;
-  HTMLElement.prototype.getBoundingClientRect = function () {
-    const rect = originalBoundingClientRect.apply(this);
-    rect.width = 900;
-    rect.height = 300;
-    return rect;
-  };
-
   jest.resetAllMocks();
 });
 afterEach(() => {
   window.CSS = originalCSS;
   window.getComputedStyle = originalGetComputedStyle;
-  HTMLElement.prototype.getBoundingClientRect = originalBoundingClientRect;
 });
 
 describe('Series', () => {