From 4c1ae0fe822f344ca0db3dc717b987f337bf1c15 Mon Sep 17 00:00:00 2001
From: toan-kunaico <122486240+toan-kunaico@users.noreply.github.com>
Date: Wed, 13 Aug 2025 10:58:57 -0700
Subject: [PATCH] v2 label vitest

---
 libs/components/src/label/label.browser.tsx | 42 +++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 libs/components/src/label/label.browser.tsx

diff --git a/libs/components/src/label/label.browser.tsx b/libs/components/src/label/label.browser.tsx
new file mode 100644
index 00000000..168fce50
--- /dev/null
+++ b/libs/components/src/label/label.browser.tsx
@@ -0,0 +1,42 @@
+import { component$ } from "@qwik.dev/core";
+import { page, userEvent } from "@vitest/browser/context";
+import { expect, test } from "vitest";
+import { render } from "vitest-browser-qwik";
+import { Label } from ".";
+
+// Top-level locator constants using data-testid
+const LabelEl = page.getByTestId("label");
+const InputEl = page.getByTestId("input");
+
+const Basic = component$(() => {
+  const inputId = "name-input";
+  return (
+    <div>
+      <Label data-testid="label" for={inputId}>
+        Name
+      </Label>
+      <input id={inputId} data-testid="input" />
+    </div>
+  );
+});
+
+test("label is visible", async () => {
+  render(<Basic />);
+
+  await expect.element(LabelEl).toBeVisible();
+});
+
+test("clicking label focuses the input", async () => {
+  render(<Basic />);
+
+  await userEvent.click(LabelEl);
+  await expect.element(InputEl).toHaveFocus();
+});
+
+test("double clicking label does not select text", async () => {
+  render(<Basic />);
+
+  await userEvent.dblClick(LabelEl);
+  const selection = window.getSelection()?.toString();
+  expect(selection).toBeFalsy();
+});