@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.spec.js

@@ -1,173 +1,253 @@
-import { render, screen, waitFor } from "@testing-library/svelte";
-import { expect, describe, test, vi } from "vitest";
-import PasswordStrengthIndicator from "./PasswordStrengthIndicator.svelte";
-
-// Debounce delay + buffer
-const DEBOUNCE_WAIT = 500;
-
-function setupTest(args = {}) {
-  const { component, container } = render(PasswordStrengthIndicator, {
-    props: {
-      password: "",
-      ...args,
-    },
-  });
-  return { component, container };
-}
-
-describe("PasswordStrengthIndicator Component Tests", () => {
-  test("Does not render when password is empty", () => {
-    const { container } = setupTest({ password: "" });
-    const indicator = container.querySelector(".pt-2");
-    expect(indicator).not.toBeInTheDocument();
-  });
-
-  test("Renders after debounce when password has value", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const indicator = container.querySelector(".pt-2");
-        expect(indicator).toBeInTheDocument();
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has three strength bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for weak password", async () => {
-    const { container } = setupTest({ password: "ab" });
-    await waitFor(
-      () => {
-        // At least one bar should be filled with a color
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Shows filled bars for good password", async () => {
-    const { container } = setupTest({ password: "Abc12345" });
-    await waitFor(
-      () => {
-        // All 3 bars should be filled for a good password
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Exports score prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    // Score should be accessible
-    expect(component).toBeDefined();
-  });
-
-  test("Exports strengthText prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Exports textColor prop", () => {
-    const { component } = setupTest({ password: "test123" });
-    expect(component).toBeDefined();
-  });
-
-  test("Uses danger color for weak passwords", async () => {
-    const { container } = setupTest({ password: "weak" });
-    await waitFor(
-      () => {
-        const dangerBars = container.querySelectorAll(".bg-red-600");
-        expect(dangerBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Uses success color for good/strong passwords", async () => {
-    const { container } = setupTest({ password: "StrongP@ss123" });
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Has transition animation classes on bars", async () => {
-    const { container } = setupTest({ password: "test" });
-    await waitFor(
-      () => {
-        const bars = container.querySelectorAll(".h-1.flex-1.rounded-full");
-        expect(bars.length).toBe(3);
-        bars.forEach((bar) => {
-          expect(bar).toHaveClass("transition-colors");
-          expect(bar).toHaveClass("duration-300");
-        });
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Very long password shows strong indicator", async () => {
-    const { container } = setupTest({ password: "1234567890123" }); // 13 chars
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
-
-describe("Password Strength Scoring", () => {
-  test("Score 2+ (Good) shows 3 success bars - 8+ chars with 2 diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh" }); // Upper + lower
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Score 3 (Strong) - 10+ chars, multiple diversity", async () => {
-    const { container } = setupTest({ password: "Abcdefgh1!" }); // Upper, lower, number, symbol
-    await waitFor(
-      () => {
-        const successBars = container.querySelectorAll(".bg-green-600");
-        expect(successBars.length).toBe(3);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-
-  test("Weak password shows danger color bars", async () => {
-    const { container } = setupTest({ password: "abcdef" });
-    await waitFor(
-      () => {
-        const coloredBars = container.querySelectorAll(
-          ".bg-red-600, .bg-green-600"
-        );
-        expect(coloredBars.length).toBeGreaterThan(0);
-      },
-      { timeout: DEBOUNCE_WAIT }
-    );
-  });
-});
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import TestWrapper from './TestWrapper.svelte';
+
+describe('PasswordStrengthIndicator Component - Basic Rendering', () => {
+  test('does not render when password is empty', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: '' }
+    });
+    const indicator = container.querySelector('.pt-2.space-y-2');
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  test('renders with non-empty password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test' }
+    });
+    const indicator = container.querySelector('.pt-2.space-y-2');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  test('renders three strength bars', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test123' }
+    });
+    const bars = container.querySelectorAll('.h-1.flex-1.rounded-full');
+    expect(bars).toHaveLength(3);
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Strength Calculation', () => {
+  test('shows indicator for very short passwords', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'abc' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+
+  test('shows indicator for passwords with low diversity', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test12' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+
+  test('shows indicator for passwords with moderate strength', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test1234' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+
+  test('shows indicator for passwords over 12 characters', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'VeryStrongPass123!' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBeGreaterThan(0);
+  });
+
+  test('shows indicator for diverse passwords meeting minimum length', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test@123AB' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Visual Indicators', () => {
+  test('shows 1 filled bar for "Too weak" password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'ab' }
+    });
+    const filledBars = container.querySelectorAll('.bg-red-600');
+    expect(filledBars.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('shows filled bars for "Weak" password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test12' }
+    });
+    const indicator = container.querySelector('.pt-2.space-y-2');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  test('shows filled bars for "Good" password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test1234' }
+    });
+    const indicator = container.querySelector('.pt-2.space-y-2');
+    expect(indicator).toBeInTheDocument();
+  });
+
+  test('shows 3 filled bars for "Strong" password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'VeryStrongPass123!' }
+    });
+    const indicator = container.querySelector('.pt-2.space-y-2');
+    expect(indicator).toBeInTheDocument();
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBe(3);
+  });
+
+  test('unfilled bars have gray background', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'ab' }
+    });
+    const grayBars = container.querySelectorAll('.bg-gray-200');
+    expect(grayBars.length).toBeGreaterThan(0);
+  });
+
+  test('bars have rounded-full class', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test' }
+    });
+    const bars = container.querySelectorAll('.rounded-full');
+    expect(bars.length).toBeGreaterThanOrEqual(3);
+  });
+
+  test('bars have transition-colors class for smooth color changes', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test' }
+    });
+    const bars = container.querySelectorAll('.transition-colors');
+    expect(bars.length).toBeGreaterThanOrEqual(3);
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Color Coding', () => {
+  test('uses red color for weak passwords (score 0)', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'ab' }
+    });
+    const redBars = container.querySelectorAll('.bg-red-600');
+    expect(redBars.length).toBeGreaterThan(0);
+  });
+
+  test('uses red color for weak passwords (score 1)', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test12' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+    const redBars = container.querySelectorAll('.bg-red-600');
+    expect(redBars.length).toBeGreaterThan(0);
+  });
+
+  test('uses green color for good passwords (score 2)', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test1234' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBeGreaterThan(0);
+  });
+
+  test('uses green color for strong passwords (score 3)', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'VeryStrongPass123!' }
+    });
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBeGreaterThan(0);
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Empty Password', () => {
+  test('does not show indicator when password is empty', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: '' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).not.toBeInTheDocument();
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Edge Cases', () => {
+  test('handles very long passwords', () => {
+    const longPassword = 'A'.repeat(50) + '1@';
+    const { container } = render(TestWrapper, {
+      props: { password: longPassword }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBe(3);
+  });
+
+  test('handles passwords with special characters', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test@123!#$' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+
+  test('handles password exactly 13 characters (triggers >12 rule)', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'TestPass12345' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+    const greenBars = container.querySelectorAll('.bg-green-600');
+    expect(greenBars.length).toBe(3);
+  });
+
+  test('handles single character password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'a' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+
+  test('handles whitespace in password', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'test 123 abc' }
+    });
+    expect(container.querySelector('.pt-2.space-y-2')).toBeInTheDocument();
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Dark Mode Support', () => {
+  test('unfilled bars have dark mode class', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'abc' }
+    });
+    const bars = container.querySelectorAll('.dark\\:bg-gray-700');
+    expect(bars.length).toBeGreaterThan(0);
+  });
+});
+
+describe('PasswordStrengthIndicator Component - Bar Filling', () => {
+  test('fills appropriate number of bars based on strength', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'Test1234' }
+    });
+    const allBars = container.querySelectorAll('.h-1.flex-1.rounded-full');
+    expect(allBars).toHaveLength(3);
+
+    const filledBars = container.querySelectorAll('.bg-red-600, .bg-green-600');
+    expect(filledBars.length).toBeGreaterThan(0);
+  });
+
+  test('all bars are rendered with consistent styling', () => {
+    const { container } = render(TestWrapper, {
+      props: { password: 'TestPassword123' }
+    });
+    const bars = container.querySelectorAll('.h-1.flex-1.rounded-full.transition-colors');
+    expect(bars).toHaveLength(3);
+
+    bars.forEach(bar => {
+      expect(bar).toHaveClass('h-1');
+      expect(bar).toHaveClass('flex-1');
+      expect(bar).toHaveClass('rounded-full');
+      expect(bar).toHaveClass('transition-colors');
+    });
+  });
+});

package/dist/recipes/inputs/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte

@@ -1,117 +1,117 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { passwordStrength } from "check-password-strength";
-    import { safeSlide } from "../../../utils/transitions.js";
-    import { cubicOut } from "svelte/easing";
-
-    interface Props {
-      password?: string;
-      strengthText?: string;
-      score?: number;
-      textColor?: string;
-      children?: Snippet;
-    }
-
-    let {
-      password = "",
-      strengthText = $bindable(""),
-      score = $bindable(-1),
-      textColor = $bindable(""),
-      children,
-    }: Props = $props();
-
-    let debouncedPassword = $state("");
-    let timer = $state<ReturnType<typeof setTimeout> | undefined>();
-
-    const customOptions = [
-        {
-            id: 0,
-            value: "Too weak",
-            minDiversity: 0,
-            minLength: 0,
-        },
-        {
-            id: 1,
-            value: "Weak",
-            minDiversity: 1,
-            minLength: 6,
-        },
-        {
-            id: 2,
-            value: "Good",
-            minDiversity: 2,
-            minLength: 8,
-        },
-        {
-            id: 3,
-            value: "Strong",
-            minDiversity: 3,
-            minLength: 10,
-        },
-    ] as const;
-
-    // Debounce password updates
-    $effect(() => {
-        clearTimeout(timer);
-        if (password.length === 0) {
-            debouncedPassword = "";
-        } else {
-            timer = setTimeout(() => {
-                debouncedPassword = password;
-            }, 400); // 400ms delay as requested
-        }
-        return () => clearTimeout(timer);
-    });
-
-    let strength = $derived(debouncedPassword
-        ? passwordStrength(debouncedPassword, customOptions as any)
-        : null);
-
-    // Compute score based on password length and strength
-    $effect(() => {
-        score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
-    });
-
-    // Map score to display text and color
-    $effect(() => {
-        strengthText =
-            score === 0
-                ? "Too weak"
-                : score === 1
-                  ? "Weak"
-                  : score === 2
-                    ? "Good"
-                    : score === 3
-                      ? "Strong"
-                      : "";
-    });
-
-    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
-
-    $effect(() => {
-        textColor = score <= 1 ? "text-red-600" : "text-green-600";
-    });
-
-    // Calculate how many bars to fill (1-3)
-    let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0);
-</script>
-
-{#if debouncedPassword.length > 0}
-    <div
-        transition:safeSlide={{ duration: 600, easing: cubicOut }}
-        class="pt-2 space-y-2"
-    >
-        <!-- 3 segment bars -->
-        <div class="flex gap-1.5">
-            {#each [0, 1, 2] as barIndex}
-                <div
-                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
-                    filledBars
-                        ? strengthColor
-                        : 'bg-gray-200 dark:bg-gray-700'}"
-                ></div>
-            {/each}
-        </div>
-        {@render children?.()}
-    </div>
-{/if}
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { passwordStrength } from "check-password-strength";
+    import { safeSlide } from "../../../utils/transitions.js";
+    import { cubicOut } from "svelte/easing";
+
+    interface Props {
+      password?: string;
+      strengthText?: string;
+      score?: number;
+      textColor?: string;
+      children?: Snippet;
+    }
+
+    let {
+      password = "",
+      strengthText = $bindable(""),
+      score = $bindable(-1),
+      textColor = $bindable(""),
+      children,
+    }: Props = $props();
+
+    let debouncedPassword = $state("");
+    let timer = $state<ReturnType<typeof setTimeout> | undefined>();
+
+    const customOptions = [
+        {
+            id: 0,
+            value: "Too weak",
+            minDiversity: 0,
+            minLength: 0,
+        },
+        {
+            id: 1,
+            value: "Weak",
+            minDiversity: 1,
+            minLength: 6,
+        },
+        {
+            id: 2,
+            value: "Good",
+            minDiversity: 2,
+            minLength: 8,
+        },
+        {
+            id: 3,
+            value: "Strong",
+            minDiversity: 3,
+            minLength: 10,
+        },
+    ] as const;
+
+    // Debounce password updates
+    $effect(() => {
+        clearTimeout(timer);
+        if (password.length === 0) {
+            debouncedPassword = "";
+        } else {
+            timer = setTimeout(() => {
+                debouncedPassword = password;
+            }, 400); // 400ms delay as requested
+        }
+        return () => clearTimeout(timer);
+    });
+
+    let strength = $derived(debouncedPassword
+        ? passwordStrength(debouncedPassword, customOptions as any)
+        : null);
+
+    // Compute score based on password length and strength
+    $effect(() => {
+        score = debouncedPassword.length > 12 ? 3 : (strength?.id ?? -1);
+    });
+
+    // Map score to display text and color
+    $effect(() => {
+        strengthText =
+            score === 0
+                ? "Too weak"
+                : score === 1
+                  ? "Weak"
+                  : score === 2
+                    ? "Good"
+                    : score === 3
+                      ? "Strong"
+                      : "";
+    });
+
+    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-green-600");
+
+    $effect(() => {
+        textColor = score <= 1 ? "text-red-600" : "text-green-600";
+    });
+
+    // Calculate how many bars to fill (1-3)
+    let filledBars = $derived(score === 0 ? 1 : score === 1 ? 2 : score >= 2 ? 3 : 0);
+</script>
+
+{#if debouncedPassword.length > 0}
+    <div
+        transition:safeSlide={{ duration: 600, easing: cubicOut }}
+        class="pt-2 space-y-2"
+    >
+        <!-- 3 segment bars -->
+        <div class="flex gap-1.5">
+            {#each [0, 1, 2] as barIndex}
+                <div
+                    class="h-1 flex-1 rounded-full transition-colors duration-300 {barIndex <
+                    filledBars
+                        ? strengthColor
+                        : 'bg-gray-200 dark:bg-gray-700'}"
+                ></div>
+            {/each}
+        </div>
+        {@render children?.()}
+    </div>
+{/if}