From e108e526cba2301ffa945f71b9bc8ed4399023b1 Mon Sep 17 00:00:00 2001
From: Lukas Zeiml <lukas.zeiml@siemens.com>
Date: Wed, 26 Feb 2025 14:24:57 +0100
Subject: [PATCH] add component tests

---
 .../components/checkbox/tests/checkbox.ct.ts  | 32 +++++++++++++++++++
 .../src/components/radio/test/radio.ct.ts     | 32 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/packages/core/src/components/checkbox/tests/checkbox.ct.ts b/packages/core/src/components/checkbox/tests/checkbox.ct.ts
index 96d82c8618..b2180e0116 100644
--- a/packages/core/src/components/checkbox/tests/checkbox.ct.ts
+++ b/packages/core/src/components/checkbox/tests/checkbox.ct.ts
@@ -82,3 +82,35 @@ test('label', async ({ mount, page }) => {
   const checkboxElement = page.locator('ix-checkbox').locator('label');
   await expect(checkboxElement).toHaveText('some label');
 });
+
+test('Checkbox should not cause layout shift when checked', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+    <ix-checkbox label="test"></ix-checkbox>
+    <div id="element-below">This element should not move</div>
+  `);
+
+  await page.waitForSelector('ix-checkbox', { state: 'attached' });
+
+  const initialBounds = await page.$eval('#element-below', (el) => {
+    const rect = el.getBoundingClientRect();
+    return { top: rect.top, left: rect.left };
+  });
+
+  await page.click('ix-checkbox');
+
+  await page.waitForFunction(() => {
+    const checkbox = document.querySelector('ix-checkbox');
+    return checkbox?.getAttribute('aria-checked') === 'true';
+  });
+
+  const newBounds = await page.$eval('#element-below', (el) => {
+    const rect = el.getBoundingClientRect();
+    return { top: rect.top, left: rect.left };
+  });
+
+  expect(newBounds.top).toBeCloseTo(initialBounds.top, 0);
+  expect(newBounds.left).toBeCloseTo(initialBounds.left, 0);
+});
diff --git a/packages/core/src/components/radio/test/radio.ct.ts b/packages/core/src/components/radio/test/radio.ct.ts
index 8b76591e6d..07c56c14c3 100644
--- a/packages/core/src/components/radio/test/radio.ct.ts
+++ b/packages/core/src/components/radio/test/radio.ct.ts
@@ -72,3 +72,35 @@ test(`disabled = undefined`, async ({ mount, page }) => {
   const disableLabelColor = 'rgba(245, 252, 255, 0.93)';
   await expect(label).toHaveCSS('color', disableLabelColor);
 });
+
+test('Radio button should not cause layout shift when checked', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+    <ix-radio label="test"></ix-radio>
+    <div id="element-below">This element should not move</div>
+  `);
+
+  await page.waitForSelector('ix-radio', { state: 'attached' });
+
+  const initialBounds = await page.$eval('#element-below', (el) => {
+    const rect = el.getBoundingClientRect();
+    return { top: rect.top, left: rect.left };
+  });
+
+  await page.click('ix-radio');
+
+  await page.waitForFunction(() => {
+    const radio = document.querySelector('ix-radio');
+    return radio?.getAttribute('aria-checked') === 'true';
+  });
+
+  const newBounds = await page.$eval('#element-below', (el) => {
+    const rect = el.getBoundingClientRect();
+    return { top: rect.top, left: rect.left };
+  });
+
+  expect(newBounds.top).toBeCloseTo(initialBounds.top, 0);
+  expect(newBounds.left).toBeCloseTo(initialBounds.left, 0);
+});