@getmicdrop/svelte-components 5.5.4 → 5.5.5

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/TestWrapper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { passwordStrength } from "check-password-strength";
+
+    interface Props {
+      password?: string;
+      children?: Snippet;
+    }
+
+    let {
+      password = "",
+      children,
+    }: Props = $props();
+
+    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;
+
+    // No debouncing - directly use password for testing
+    let strength = $derived(password
+        ? passwordStrength(password, customOptions as any)
+        : null);
+
+    // Compute score based on password length and strength
+    let score = $derived(password.length > 12 ? 3 : (strength?.id ?? -1));
+
+    let strengthColor = $derived(score <= 1 ? "bg-red-600" : "bg-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 password.length > 0}
+    <div 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}

package/dist/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    password?: string;
+    children?: Snippet;
+}
+declare const TestWrapper: import("svelte").Component<Props, {}, "">;
+type TestWrapper = ReturnType<typeof TestWrapper>;
+export default TestWrapper;
+//# sourceMappingURL=TestWrapper.svelte.d.ts.map

package/dist/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PasswordStrengthIndicator/TestWrapper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqEL,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}