test(breakpoint): add unit tests

tests/Breakpoint.test.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import {
-    Breakpoint,
-    breakpointObserver,
-    breakpoints,
-  } from "carbon-components-svelte";
-  import type { BreakpointProps } from "carbon-components-svelte/Breakpoint/Breakpoint.svelte";
-
-  let size: BreakpointProps["size"];
-
-  const sizeObserver = breakpointObserver();
-  const smaller = sizeObserver.smallerThan("md");
-  const larger = sizeObserver.largerThan("md");
-</script>
-
-{smaller}
-{larger}
-{breakpoints.md}
-
-<Breakpoint
-  bind:size
-  let:size={currentSize}
-  on:change={(e) => {
-    console.log(e.detail);
-  }}
->
-  {currentSize}
-</Breakpoint>

tests/Breakpoint/Breakpoint.test.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Breakpoint } from "carbon-components-svelte";
+  import type { BreakpointSize } from "carbon-components-svelte/Breakpoint/breakpoints";
+
+  export let size: BreakpointSize | undefined = undefined;
+  export let sizes: Record<BreakpointSize, boolean> = {
+    sm: false,
+    md: false,
+    lg: false,
+    xlg: false,
+    max: false,
+  };
+</script>
+
+<Breakpoint
+  bind:size
+  bind:sizes
+  on:change
+  let:size={currentSize}
+  let:sizes={currentSizes}
+>
+  <div data-testid="current-size">{currentSize}</div>
+  <div data-testid="is-sm">{currentSizes.sm}</div>
+  <div data-testid="is-md">{currentSizes.md}</div>
+  <div data-testid="is-lg">{currentSizes.lg}</div>
+  <div data-testid="is-xlg">{currentSizes.xlg}</div>
+  <div data-testid="is-max">{currentSizes.max}</div>
+</Breakpoint>

tests/Breakpoint/Breakpoint.test.ts

@@ -0,0 +1,116 @@
+import { render, screen } from "@testing-library/svelte";
+import Breakpoint from "./Breakpoint.test.svelte";
+import BreakpointObserver from "./BreakpointObserver.test.svelte";
+import Breakpoints from "./Breakpoints.test.svelte";
+
+describe("Breakpoint", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
+  it("renders and detects breakpoint size", () => {
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query.includes("(min-width: 1056px) and (max-width: 1312px)"),
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    render(Breakpoint);
+
+    expect(screen.getByTestId("current-size").textContent).toBe("lg");
+    expect(screen.getByTestId("is-sm").textContent).toBe("false");
+    expect(screen.getByTestId("is-md").textContent).toBe("false");
+    expect(screen.getByTestId("is-lg").textContent).toBe("true");
+    expect(screen.getByTestId("is-xlg").textContent).toBe("false");
+    expect(screen.getByTestId("is-max").textContent).toBe("false");
+  });
+
+  it("updates when window size changes", async () => {
+    const mockChangeHandler = vi.fn();
+    const mediaQueryListeners = new Map();
+
+    vi.stubGlobal("matchMedia", (query: string) => {
+      const isLgQuery = query.includes(
+        "(min-width: 1056px) and (max-width: 1312px)",
+      );
+
+      return {
+        matches: isLgQuery,
+        media: query,
+        addEventListener: (event: string, listener: MediaQueryList) => {
+          if (!mediaQueryListeners.has(query)) {
+            mediaQueryListeners.set(query, []);
+          }
+          mediaQueryListeners.get(query).push({ event, listener });
+        },
+        removeEventListener: vi.fn(),
+      };
+    });
+
+    const { component } = render(Breakpoint);
+    component.$on("change", mockChangeHandler);
+
+    expect(screen.getByTestId("current-size").textContent).toBe("lg");
+    mockChangeHandler.mockClear();
+
+    for (const [query, listeners] of mediaQueryListeners.entries()) {
+      const isXlgQuery = query.includes(
+        "(min-width: 1312px) and (max-width: 1584px)",
+      );
+
+      for (const { event, listener } of listeners) {
+        if (event === "change") {
+          listener({ matches: isXlgQuery, media: query });
+        }
+      }
+    }
+
+    await vi.runOnlyPendingTimersAsync();
+
+    expect(mockChangeHandler).toHaveBeenCalled();
+
+    component.$set({
+      size: "xlg",
+      sizes: {
+        sm: false,
+        md: false,
+        lg: false,
+        xlg: true,
+        max: false,
+      },
+    });
+
+    expect(screen.getByTestId("current-size").textContent).toBe("xlg");
+    expect(screen.getByTestId("is-xlg").textContent).toBe("true");
+  });
+
+  it("provides breakpointObserver utilities", () => {
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query.includes("(min-width: 1056px) and (max-width: 1312px)"),
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+
+    render(BreakpointObserver);
+
+    expect(screen.getByTestId("smaller-than-md").textContent).toBe("false");
+    expect(screen.getByTestId("larger-than-md").textContent).toBe("true");
+  });
+
+  it("exposes breakpoint values", () => {
+    render(Breakpoints);
+
+    expect(screen.getByTestId("sm").textContent).toBe("320");
+    expect(screen.getByTestId("md").textContent).toBe("672");
+    expect(screen.getByTestId("lg").textContent).toBe("1056");
+    expect(screen.getByTestId("xlg").textContent).toBe("1312");
+    expect(screen.getByTestId("max").textContent).toBe("1584");
+  });
+});

tests/Breakpoint/BreakpointObserver.test.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { breakpointObserver } from "carbon-components-svelte";
+
+  export let smallerThanMd = false;
+  export let largerThanMd = false;
+
+  const observer = breakpointObserver();
+  const smallerThan = observer.smallerThan("md");
+  const largerThan = observer.largerThan("md");
+
+  smallerThan.subscribe((value) => {
+    smallerThanMd = value;
+  });
+
+  largerThan.subscribe((value) => {
+    largerThanMd = value;
+  });
+</script>
+
+<div data-testid="smaller-than-md">{smallerThanMd}</div>
+<div data-testid="larger-than-md">{largerThanMd}</div>

tests/Breakpoint/Breakpoints.test.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { breakpoints } from "carbon-components-svelte";
+</script>
+
+<div data-testid="sm">{breakpoints.sm}</div>
+<div data-testid="md">{breakpoints.md}</div>
+<div data-testid="lg">{breakpoints.lg}</div>
+<div data-testid="xlg">{breakpoints.xlg}</div>
+<div data-testid="max">{breakpoints.max}</div>