add component tests

siemens · Feb 26, 2025 · e108e52 · e108e52
1 parent 014dd7d
commit e108e52
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git 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
@@ -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);
+});