From 2911102eead7e623f2e2f432f596b4cefcc99d88 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Thu, 30 Dec 2021 16:36:37 -1000
Subject: [PATCH] Add Description tests

---
 .../description/description.test.ts           | 106 ++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/lib/components/description/description.test.ts

diff --git a/src/lib/components/description/description.test.ts b/src/lib/components/description/description.test.ts
new file mode 100644
index 0000000..1fc58a9
--- /dev/null
+++ b/src/lib/components/description/description.test.ts
@@ -0,0 +1,106 @@
+import DescriptionProvider from "./DescriptionProvider.svelte";
+import Description from "./Description.svelte";
+import svelte from "svelte-inline-compile";
+import { render } from "@testing-library/svelte";
+
+let mockId = 0;
+jest.mock("../../hooks/use-id", () => {
+  return {
+    useId: jest.fn(() => ++mockId),
+  };
+});
+
+beforeEach(() => (mockId = 0));
+beforeAll(() => {
+  // jest.spyOn(window, 'requestAnimationFrame').mockImplementation(setImmediate as any)
+  // jest.spyOn(window, 'cancelAnimationFrame').mockImplementation(clearImmediate as any)
+});
+afterAll(() => jest.restoreAllMocks());
+
+it("should be possible to render a DescriptionProvider", () => {
+  render(DescriptionProvider, { name: "test" });
+  // This dumb line is to trick the TS compiler to not remove my imports
+  expect(DescriptionProvider).not.toBe(Description);
+});
+
+it("should be possible to use a DescriptionProvider without using a Description", async () => {
+  let { container } = render(svelte`
+      <DescriptionProvider name={"test"} let:describedby>
+        <div aria-describedby={describedby}>
+          No description
+        </div>
+      </DescriptionProvider>
+    `);
+
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div>
+      No description
+    </div>
+  `);
+});
+
+it("should be possible to use a DescriptionProvider and a single Description, and have them linked", async () => {
+  let { container } = render(svelte`
+    <DescriptionProvider name={"test"} let:describedby>
+      <div aria-describedby={describedby}>
+        <Description>I am a description</Description>
+        <span>Contents</span>
+      </div>
+    </DescriptionProvider>
+  `);
+
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-describedby="headlessui-description-1"
+    >
+      <p
+        id="headlessui-description-1"
+      >
+        I am a description
+      </p>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
+  `);
+});
+
+it("should be possible to use a DescriptionProvider and multiple Description components, and have them linked", async () => {
+  let { container } = render(svelte`
+    <DescriptionProvider name={"test"} let:describedby>
+      <div aria-describedby={describedby}>
+        <Description>I am a description</Description>
+        <span>Contents</span>
+        <Description>I am also a description</Description>
+      </div>
+    </DescriptionProvider>
+  `);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-describedby="headlessui-description-1 headlessui-description-2"
+    >
+      <p
+        id="headlessui-description-1"
+      >
+        I am a description
+      </p>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+       
+      <p
+        id="headlessui-description-2"
+      >
+        I am also a description
+      </p>
+      
+      
+    </div>
+  `);
+});