From bd2472c344f9739b896d9a734eeea90a3ab75845 Mon Sep 17 00:00:00 2001
From: shoryataneja <shoryataneja5@gmail.com>
Date: Sat, 22 Nov 2025 14:43:13 +0530
Subject: [PATCH 1/2] docs: add example for testing <details> element

---
 README.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/README.md b/README.md
index 7e18d5dd..410cd380 100644
--- a/README.md
+++ b/README.md
@@ -187,6 +187,40 @@ function HiddenMessage({children}) {
     </div>
   )
 }
+### Testing <details> / <summary>
+
+HTML `<details>` uses `<summary>` as its toggle button.  
+When testing with React Testing Library, the `<summary>` element is exposed as a
+`button` role, so user interactions can be tested normally.
+
+```js
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+function DetailsExample() {
+  return (
+    <details>
+      <summary>More info</summary>
+      <p>Hidden content</p>
+    </details>
+  )
+}
+
+test("opens details when summary is clicked", async () => {
+  const user = userEvent.setup()
+  render(<DetailsExample />)
+
+  const summary = screen.getByRole("button", { name: /more info/i })
+
+  // initially closed
+  expect(screen.queryByText("Hidden content")).not.toBeInTheDocument()
+
+  await user.click(summary)
+
+  // after clicking, content appears
+  expect(screen.getByText("Hidden content")).toBeInTheDocument()
+})
+
 
 export default HiddenMessage
 ```

From d025227cc57d7c8fee9bb35c17cd25d5fa0ecf27 Mon Sep 17 00:00:00 2001
From: shoryataneja <shoryataneja5@gmail.com>
Date: Sat, 22 Nov 2025 15:02:01 +0530
Subject: [PATCH 2/2] fix: correct markdown formatting in README

---
 README.md | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index 410cd380..b800043f 100644
--- a/README.md
+++ b/README.md
@@ -187,15 +187,19 @@ function HiddenMessage({children}) {
     </div>
   )
 }
+
+export default HiddenMessage
+
+
+# MORE EXAMPLES
 ### Testing <details> / <summary>
 
 HTML `<details>` uses `<summary>` as its toggle button.  
-When testing with React Testing Library, the `<summary>` element is exposed as a
-`button` role, so user interactions can be tested normally.
+When testing with React Testing Library, the `<summary>` element is exposed as a `button` role.
 
 ```js
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 function DetailsExample() {
   return (
@@ -203,30 +207,22 @@ function DetailsExample() {
       <summary>More info</summary>
       <p>Hidden content</p>
     </details>
-  )
+  );
 }
 
 test("opens details when summary is clicked", async () => {
-  const user = userEvent.setup()
-  render(<DetailsExample />)
+  const user = userEvent.setup();
+  render(<DetailsExample />);
 
-  const summary = screen.getByRole("button", { name: /more info/i })
+  const summary = screen.getByRole("button", { name: /more info/i });
 
-  // initially closed
-  expect(screen.queryByText("Hidden content")).not.toBeInTheDocument()
+  expect(screen.queryByText("Hidden content")).not.toBeInTheDocument();
 
-  await user.click(summary)
+  await user.click(summary);
 
-  // after clicking, content appears
-  expect(screen.getByText("Hidden content")).toBeInTheDocument()
-})
+  expect(screen.getByText("Hidden content")).toBeInTheDocument();
+});
 
-
-export default HiddenMessage
-```
-
-```jsx
-// __tests__/hidden-message.js
 // these imports are something you'd normally configure Jest to import for you
 // automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup
 import '@testing-library/jest-dom'