From 596ebddb95a2e6bfbb9e1d77aec8af76862964f1 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Tue, 23 Jun 2026 18:56:38 +0530
Subject: [PATCH] test(accordion): lazy mount and forceMount behavior

Add regression tests for collapsed content lazy mounting and forceMount
override on Accordion.Content.

Related to #1847
---
 .../tests/Accordion.lazyMount.test.tsx        | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/ui/Accordion/tests/Accordion.lazyMount.test.tsx

diff --git a/src/components/ui/Accordion/tests/Accordion.lazyMount.test.tsx b/src/components/ui/Accordion/tests/Accordion.lazyMount.test.tsx
new file mode 100644
index 000000000..3d4ef3cef
--- /dev/null
+++ b/src/components/ui/Accordion/tests/Accordion.lazyMount.test.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Accordion from '../Accordion';
+
+describe('Accordion lazy mount behavior', () => {
+    test('does not mount collapsed content by default', () => {
+        render(
+            <Accordion.Root type="single" defaultValue="">
+                <Accordion.Item value="one">
+                    <Accordion.Header>
+                        <Accordion.Trigger>Section one</Accordion.Trigger>
+                    </Accordion.Header>
+                    <Accordion.Content>Panel one</Accordion.Content>
+                </Accordion.Item>
+            </Accordion.Root>
+        );
+
+        expect(screen.getByText('Section one')).toBeInTheDocument();
+        expect(screen.queryByText('Panel one')).not.toBeInTheDocument();
+    });
+
+    test('mounts content after opening', async() => {
+        const user = userEvent.setup();
+
+        render(
+            <Accordion.Root type="single" collapsible>
+                <Accordion.Item value="one">
+                    <Accordion.Header>
+                        <Accordion.Trigger>Section one</Accordion.Trigger>
+                    </Accordion.Header>
+                    <Accordion.Content>Panel one</Accordion.Content>
+                </Accordion.Item>
+            </Accordion.Root>
+        );
+
+        expect(screen.queryByText('Panel one')).not.toBeInTheDocument();
+        await user.click(screen.getByText('Section one'));
+        expect(screen.getByText('Panel one')).toBeInTheDocument();
+    });
+
+    test('forceMount keeps content mounted while closed', () => {
+        render(
+            <Accordion.Root type="single" value="">
+                <Accordion.Item value="one">
+                    <Accordion.Header>
+                        <Accordion.Trigger>Section one</Accordion.Trigger>
+                    </Accordion.Header>
+                    <Accordion.Content forceMount>Mounted panel</Accordion.Content>
+                </Accordion.Item>
+            </Accordion.Root>
+        );
+
+        const panel = screen.getByText('Mounted panel');
+        expect(panel).toBeInTheDocument();
+        expect(panel.closest('[data-state="closed"]')).toBeTruthy();
+    });
+});