update tests

src/lib/components/Field.svelte

@@ -1,21 +1,28 @@
 <div class="field label small" class:suffix>
   <slot>
-    <input type="text" bind:value on:change />
+    <input id={formId} type="text" bind:value on:change />
   </slot>
   {#if label}
-    <label class:active>{label}</label>
+    <label for={formId} class:active>{label}</label>
   {/if}
 </div>
 
 <script>
+  import { getContext } from "svelte";
+
   export let label = "";
   export let value = true;
   export let placeholder = label;
 
   export let suffix = false;
   export let activeLabel = undefined;
+  export let idPrefix = "formId";
 
   $: active = typeof activeLabel === "boolean" ? activeLabel : value;
+
+  const genUid = getContext("genUid") ?? (() => "genUid missing");
+
+  const formId = genUid(idPrefix);
 </script>
 
 <style>

src/lib/store/uids.js

@@ -0,0 +1,17 @@
+import { writable, get } from "svelte/store";
+
+export default () => {
+  const store = writable(0);
+
+  const genUid = (prefix = "") => {
+    store.update((x) => x + 1);
+    return prefix.length
+      ? [prefix, "" + get(store)].join("-")
+      : "" + get(store);
+  };
+
+  return {
+    store,
+    genUid,
+  };
+};

src/lib/store/uids.test.js

@@ -0,0 +1,8 @@
+import uids from "./uids";
+
+test("basic", () => {
+  const { genUid } = uids();
+
+  expect(genUid()).toEqual("1");
+  expect(genUid("potato")).toEqual("potato-2");
+});

src/routes/+layout.svelte

@@ -5,8 +5,10 @@
 <script>
   import { setContext } from "svelte";
 
-  import { createApi } from "$lib/store/api.ts";
+  import { createApi } from "$lib/store/api.js";
+  import uids from "$lib/store/uids.js";
   import Layout from "$lib/components/MainLayout.svelte";
 
   setContext("api", createApi());
+  setContext("genUid", uids());
 </script>

src/routes/page.test.js

@@ -17,9 +17,9 @@ test("we can pass a store", async () => {
 
   api.dispatch.updateIdentification({ shipClass: "Bonobo" });
 
-  const { getByPlaceholderText } = render(Page, { context });
+  const { getByLabelText } = render(Page, { context });
 
-  const classInput = getByPlaceholderText("ship class");
+  const classInput = getByLabelText("ship class");
   await fireEvent.input(classInput, { target: { value: "Tarzan" } });
   expect(classInput.value).toEqual("Tarzan");