From ac1f86ac156a94c86e81647c55d8bb56c035edc6 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 17 Jan 2022 22:13:05 -0500
Subject: [PATCH] Add Label fixes and tests

Fixes #33
---
 src/lib/components/label/Label.svelte  |  25 +++--
 src/lib/components/label/label.test.ts | 146 +++++++++++++++++++++++--
 2 files changed, 151 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/label/Label.svelte b/src/lib/components/label/Label.svelte
index 2723869..09d700a 100644
--- a/src/lib/components/label/Label.svelte
+++ b/src/lib/components/label/Label.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
   import { onMount } from "svelte";
+  import { get_current_component } from "svelte/internal";
   import { useLabelContext } from "./LabelProvider.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "label";
+  export let use: HTMLActionArray = [];
+
   const id = `headlessui-label-${useId()}`;
   export let passive = false;
   let contextStore = useLabelContext();
@@ -13,22 +22,20 @@
 
   onMount(() => $contextStore!.register(id));
 
-  let allProps = { ...$$restProps, ...$contextStore!.props, id } as any;
+  let allProps: any = {};
+  $: allProps = { ...$$restProps, ...$contextStore!.props, id };
   if (passive) delete allProps["onClick"];
 </script>
 
 <!-- svelte-ignore a11y-label-has-associated-control -->
-<label
+<Render
   {...allProps}
-  on:blur
-  on:click
-  on:focus
-  on:keyup
-  on:keydown
-  on:keypress
+  name={"Label"}
+  {as}
+  use={[...use, forwardEvents]}
   on:click={(event) => {
     if (!passive) allProps["onClick"]?.(event);
   }}
 >
   <slot />
-</label>
+</Render>
diff --git a/src/lib/components/label/label.test.ts b/src/lib/components/label/label.test.ts
index dbfb1c8..1229ca5 100644
--- a/src/lib/components/label/label.test.ts
+++ b/src/lib/components/label/label.test.ts
@@ -2,6 +2,9 @@ import { render } from "@testing-library/svelte";
 import Label from "./Label.svelte";
 import LabelProvider from "./LabelProvider.svelte";
 import svelte from "svelte-inline-compile";
+import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
+import { writable, type Writable } from "svelte/store";
+import { tick } from "svelte";
 
 let mockId = 0;
 jest.mock("../../hooks/use-id", () => {
@@ -13,6 +16,19 @@ jest.mock("../../hooks/use-id", () => {
 beforeEach(() => (mockId = 0));
 afterAll(() => jest.restoreAllMocks());
 
+beforeEach(() => {
+  document.body.innerHTML = "";
+});
+
+it(
+  "should error when we are using a <Label /> without a parent <LabelProvider />",
+  suppressConsoleLogs(async () => {
+    expect(() => render(Label)).toThrowError(
+      `You used a <Label /> component, but it is not inside a relevant parent.`
+    );
+  })
+);
+
 it("should be possible to use a LabelProvider without using a Label", async () => {
   let { container } = render(svelte`
   <LabelProvider let:labelledby>
@@ -31,36 +47,144 @@ it("should be possible to use a LabelProvider without using a Label", async () =
 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}>
+      <Label>I am a label</Label>
       <span>Contents</span>
     </div>
   </LabelProvider>
 `);
   expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
-    <label
-      id="headlessui-label-1"
+    <div
+      aria-labelledby="headlessui-label-1"
     >
-      I am a label
-    </label>
+      <label
+        id="headlessui-label-1"
+      >
+        I am a label
+      </label>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
   `);
 });
 
 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}>
+      <Label>I am a label</Label>
       <span>Contents</span>
+      <Label>I am also a label</Label>
     </div>
-    <Label>I am also a label</Label>
   </LabelProvider>
 `);
   expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
-    <label
-      id="headlessui-label-1"
+    <div
+      aria-labelledby="headlessui-label-1 headlessui-label-2"
     >
-      I am a label
-    </label>
+      <label
+        id="headlessui-label-1"
+      >
+        I am a label
+      </label>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+       
+      <label
+        id="headlessui-label-2"
+      >
+        I am also a label
+      </label>
+      
+      
+    </div>
+  `);
+});
+
+it("should be possible to render a Label with an `as` prop", async () => {
+  let { container } = render(svelte`
+  <LabelProvider let:labelledby>
+    <div aria-labelledby={labelledby}>
+      <Label as="p">I am a label</Label>
+      <span>Contents</span>
+    </div>
+  </LabelProvider>
+`);
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-labelledby="headlessui-label-1"
+    >
+      <p
+        id="headlessui-label-1"
+      >
+        I am a label
+      </p>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
+  `);
+});
+
+it("should be possible to change the props of a Label", async () => {
+  let classStore: Writable<string | null> = writable(null);
+  let { container } = render(svelte`
+  <LabelProvider let:labelledby>
+    <div aria-labelledby={labelledby}>
+      <Label class={$classStore}>I am a label</Label>
+      <span>Contents</span>
+    </div>
+  </LabelProvider>
+`);
+
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-labelledby="headlessui-label-1"
+    >
+      <label
+        id="headlessui-label-1"
+      >
+        I am a label
+      </label>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
+  `);
+
+  classStore.set("test-class");
+  await tick();
+
+  expect(container.firstChild?.firstChild).toMatchInlineSnapshot(`
+    <div
+      aria-labelledby="headlessui-label-1"
+    >
+      <label
+        class="test-class"
+        id="headlessui-label-1"
+      >
+        I am a label
+      </label>
+      
+      
+       
+      <span>
+        Contents
+      </span>
+    </div>
   `);
 });