From 6224278607e21d00efec0f4dd327ea746f0b8d5a Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 17 Jan 2022 17:21:16 -0500
Subject: [PATCH] Add upstream HeadlessUI Label tests

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

diff --git a/src/lib/components/label/label.test.ts b/src/lib/components/label/label.test.ts
new file mode 100644
index 0000000..dbfb1c8
--- /dev/null
+++ b/src/lib/components/label/label.test.ts
@@ -0,0 +1,66 @@
+import { render } from "@testing-library/svelte";
+import Label from "./Label.svelte";
+import LabelProvider from "./LabelProvider.svelte";
+import svelte from "svelte-inline-compile";
+
+let mockId = 0;
+jest.mock("../../hooks/use-id", () => {
+  return {
+    useId: jest.fn(() => ++mockId),
+  };
+});
+
+beforeEach(() => (mockId = 0));
+afterAll(() => jest.restoreAllMocks());
+
+it("should be possible to use a LabelProvider without using a Label", async () => {
+  let { container } = render(svelte`
+  <LabelProvider let:labelledby>
+    <div aria-labelledby={labelledby}>
+      No label
+    </div>
+  </LabelProvider>
+`);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div>
+      No label
+    </div>
+  `);
+});
+
+it("should be possible to use a LabelProvider and a single Label, and have them linked", async () => {
+  let { container } = render(svelte`
+  <LabelProvider let:labelledby>
+    <Label>I am a label</Label>
+    <div aria-labelledby={labelledby}>
+      <span>Contents</span>
+    </div>
+  </LabelProvider>
+`);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <label
+      id="headlessui-label-1"
+    >
+      I am a label
+    </label>
+  `);
+});
+
+it("should be possible to use a LabelProvider and multiple Label components, and have them linked", async () => {
+  let { container } = render(svelte`
+  <LabelProvider let:labelledby>
+    <Label>I am a label</Label>
+    <div aria-labelledby={labelledby}>
+      <span>Contents</span>
+    </div>
+    <Label>I am also a label</Label>
+  </LabelProvider>
+`);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <label
+      id="headlessui-label-1"
+    >
+      I am a label
+    </label>
+  `);
+});