From 9773059cc2aee4ae3bcd20c885a6ae15ee5a1056 Mon Sep 17 00:00:00 2001
From: hoseinsedaqat <hoseinsedaqat6@gmail.com>
Date: Tue, 1 Jul 2025 16:31:52 +0330
Subject: [PATCH] test: add detailed <details><summary> interaction tests
 (closes #1405)

---
 src/__tests__/details-summary-interaction.js | 66 ++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/__tests__/details-summary-interaction.js

diff --git a/src/__tests__/details-summary-interaction.js b/src/__tests__/details-summary-interaction.js
new file mode 100644
index 00000000..8d7038a1
--- /dev/null
+++ b/src/__tests__/details-summary-interaction.js
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import {render, fireEvent} from '..'
+
+/**
+ * Test suite for native HTML <details> element with <summary>
+ *
+ * Demonstrates how to test user interactions (clicking <summary>)
+ * and verify <details> open/close behavior.
+ */
+describe('<details><summary> interaction', () => {
+  let handleSummaryClick
+
+  beforeEach(() => {
+    handleSummaryClick = jest.fn()
+  })
+
+  it('should toggle "open" attribute when <summary> is clicked', () => {
+    const {container} = render(
+      <>
+        <details name="requirements">
+          <summary onClick={handleSummaryClick}>
+            Graduation Requirements
+          </summary>
+          <p>
+            Requires 40 credits, including a passing grade in health, geography,
+            history, economics, and wood shop.
+          </p>
+        </details>
+        <details name="requirements">
+          <summary onClick={handleSummaryClick}>System Requirements</summary>
+          <p>
+            Requires a computer running an operating system. The computer must
+            have some memory and ideally some kind of long-term storage. An
+            input device as well as some form of output device is recommended.
+          </p>
+        </details>
+        <details name="requirements">
+          <summary onClick={handleSummaryClick}>Job Requirements</summary>
+          <p>
+            Requires knowledge of HTML, CSS, JavaScript, accessibility, web
+            performance, privacy, security, and internationalization, as well as
+            a dislike of broccoli.
+          </p>
+        </details>
+      </>,
+    )
+
+    const summaries = container.querySelectorAll('summary')
+    expect(summaries.length).toBe(3)
+
+    summaries.forEach((summary, index) => {
+      // Initially, details should NOT be open
+      const details = summary.closest('details')
+      expect(details).not.toHaveAttribute('open')
+
+      // Click the summary
+      fireEvent.click(summary)
+
+      // Expect the click handler to be called
+      expect(handleSummaryClick).toHaveBeenCalledTimes(index + 1)
+
+      // Details should now be open
+      expect(details).toHaveAttribute('open')
+    })
+  })
+})