@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Modal/Modal.svelte

@@ -1,158 +1,158 @@
-<script>
-  /**
-   * Modal Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   */
-  import { onDestroy } from "svelte";
-  import { fade, fly } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { portal } from "../../utils/portal.js";
-
-  /** @type {{
-    show?: boolean,
-    isProcessing?: boolean,
-    isSuccess?: boolean,
-    size?: 'default' | 'small' | 'large' | 'xlarge',
-    persistent?: boolean,
-    oncancel?: () => void,
-    header?: any,
-    body?: any,
-    footer?: any,
-    class?: string,
-    [key: string]: any
-  }} */
-  let {
-    show = $bindable(false),
-    isProcessing = false,
-    isSuccess = false,
-    size = "default",
-    persistent = false,
-    oncancel,
-    header,
-    body,
-    footer,
-    class: _className,
-    ...restProps
-  } = $props();
-
-  // Store scroll position for iOS scroll lock
-  let scrollY = $state(0);
-
-  // Handle escape key
-  function handleKeydown(event) {
-    if (event.key === "Escape" && show && !persistent) {
-      resetModal();
-    }
-  }
-
-  const resetModal = () => {
-    oncancel?.();
-    show = false;
-  };
-
-  // Size classes for desktop modal (Tailwind scale)
-  const sizeClasses = {
-    default: "max-w-md",
-    small: "max-w-sm",
-    large: "max-w-xl",
-    xlarge: "max-w-2xl"
-  };
-
-  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
-
-  // iOS-compatible scroll lock using position:fixed approach
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (show) {
-        scrollY = window.scrollY;
-        document.body.style.position = "fixed";
-        document.body.style.top = `-${scrollY}px`;
-        document.body.style.left = "0";
-        document.body.style.right = "0";
-        document.body.style.overflow = "hidden";
-      } else {
-        document.body.style.position = "";
-        document.body.style.top = "";
-        document.body.style.left = "";
-        document.body.style.right = "";
-        document.body.style.overflow = "";
-        window.scrollTo(0, scrollY);
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.position = "";
-      document.body.style.top = "";
-      document.body.style.left = "";
-      document.body.style.right = "";
-      document.body.style.overflow = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if show}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
-    onmousedown={(e) => {
-      // Only track direct clicks on backdrop, not drags that end on backdrop
-      if (e.target === e.currentTarget && !persistent) {
-        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
-      }
-    }}
-    onmouseup={(e) => {
-      // Only close if both mousedown and mouseup were on the backdrop
-      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
-        resetModal();
-      }
-      delete e.currentTarget.dataset.clickStartedOnBackdrop;
-    }}
-    transition:fade={{ duration: 300 }}
-    role="dialog"
-    aria-modal="true"
-    use:portal
-    {...restProps}
-  >
-    <!-- Mobile: Bottom sheet -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <!-- Handle bar -->
-      <div class="flex justify-center pt-3 pb-1 shrink-0">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
-      </div>
-
-      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
-        {#if header}{@render header()}{/if}
-        {#if body}{@render body()}{/if}
-        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
-          {#if footer}{@render footer()}{/if}
-        </div>
-      </div>
-    </div>
-
-    <!-- Desktop: Centered modal -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 20, duration: 200 }}
-    >
-      {#if header}{@render header()}{/if}
-      {#if body}{@render body()}{/if}
-      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
-        {#if footer}{@render footer()}{/if}
-      </div>
-    </div>
-  </div>
-{/if}
+<script>
+  /**
+   * Modal Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   */
+  import { onDestroy } from "svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../utils/portal.js";
+
+  /** @type {{
+    show?: boolean,
+    isProcessing?: boolean,
+    isSuccess?: boolean,
+    size?: 'default' | 'small' | 'large' | 'xlarge',
+    persistent?: boolean,
+    oncancel?: () => void,
+    header?: any,
+    body?: any,
+    footer?: any,
+    class?: string,
+    [key: string]: any
+  }} */
+  let {
+    show = $bindable(false),
+    isProcessing = false,
+    isSuccess = false,
+    size = "default",
+    persistent = false,
+    oncancel,
+    header,
+    body,
+    footer,
+    class: _className,
+    ...restProps
+  } = $props();
+
+  // Store scroll position for iOS scroll lock
+  let scrollY = $state(0);
+
+  // Handle escape key
+  function handleKeydown(event) {
+    if (event.key === "Escape" && show && !persistent) {
+      resetModal();
+    }
+  }
+
+  const resetModal = () => {
+    oncancel?.();
+    show = false;
+  };
+
+  // Size classes for desktop modal (Tailwind scale)
+  const sizeClasses = {
+    default: "max-w-md",
+    small: "max-w-sm",
+    large: "max-w-xl",
+    xlarge: "max-w-2xl"
+  };
+
+  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.default);
+
+  // iOS-compatible scroll lock using position:fixed approach
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (show) {
+        scrollY = window.scrollY;
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.left = "0";
+        document.body.style.right = "0";
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.left = "";
+        document.body.style.right = "";
+        document.body.style.overflow = "";
+        window.scrollTo(0, scrollY);
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.left = "";
+      document.body.style.right = "";
+      document.body.style.overflow = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if show}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
+    onmousedown={(e) => {
+      // Only track direct clicks on backdrop, not drags that end on backdrop
+      if (e.target === e.currentTarget && !persistent) {
+        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
+      }
+    }}
+    onmouseup={(e) => {
+      // Only close if both mousedown and mouseup were on the backdrop
+      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
+        resetModal();
+      }
+      delete e.currentTarget.dataset.clickStartedOnBackdrop;
+    }}
+    transition:fade={{ duration: 300 }}
+    role="dialog"
+    aria-modal="true"
+    use:portal
+    {...restProps}
+  >
+    <!-- Mobile: Bottom sheet -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar -->
+      <div class="flex justify-center pt-3 pb-1 shrink-0">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+      </div>
+
+      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
+        {#if header}{@render header()}{/if}
+        {#if body}{@render body()}{/if}
+        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
+          {#if footer}{@render footer()}{/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop: Centered modal -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 20, duration: 200 }}
+    >
+      {#if header}{@render header()}{/if}
+      {#if body}{@render body()}{/if}
+      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
+        {#if footer}{@render footer()}{/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/primitives/Modal/ModalTestWrapper.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Modal from "./Modal.svelte";
+  import Button from "../Button/Button.svelte";
+
+  interface Props {
+    /** Whether the modal is visible */
+    show?: boolean;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Warning text */
+    warningText?: string;
+    /** Callback when modal is cancelled */
+    oncancel?: () => void;
+    /** Custom header snippet */
+    customHeader?: Snippet;
+    /** Custom body snippet */
+    customBody?: Snippet;
+    /** Custom footer snippet */
+    customFooter?: Snippet;
+  }
+
+  let {
+    show = $bindable(false),
+    title = '',
+    description = '',
+    warningText = '',
+    oncancel,
+    customHeader,
+    customBody,
+    customFooter
+  }: Props = $props();
+</script>
+
+<Modal bind:show {oncancel}>
+  {#snippet header()}
+    {#if customHeader}
+      {@render customHeader()}
+    {:else}
+      {title}
+    {/if}
+  {/snippet}
+
+  {#snippet body()}
+    {#if customBody}
+      {@render customBody()}
+    {:else}
+      {description}
+      {#if warningText}
+        <br /> {warningText}
+      {/if}
+    {/if}
+  {/snippet}
+
+  {#snippet footer()}
+    {#if customFooter}
+      {@render customFooter()}
+    {:else}
+      <Button variant="alternative">Cancel</Button>
+      <Button variant="default">Confirm</Button>
+    {/if}
+  {/snippet}
+</Modal>

package/dist/primitives/Modal/ModalTestWrapper.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the modal is visible */
+    show?: boolean;
+    /** Modal title */
+    title?: string;
+    /** Modal description */
+    description?: string;
+    /** Warning text */
+    warningText?: string;
+    /** Callback when modal is cancelled */
+    oncancel?: () => void;
+    /** Custom header snippet */
+    customHeader?: Snippet;
+    /** Custom body snippet */
+    customBody?: Snippet;
+    /** Custom footer snippet */
+    customFooter?: Snippet;
+}
+declare const ModalTestWrapper: import("svelte").Component<Props, {}, "show">;
+type ModalTestWrapper = ReturnType<typeof ModalTestWrapper>;
+export default ModalTestWrapper;
+//# sourceMappingURL=ModalTestWrapper.svelte.d.ts.map

package/dist/primitives/Modal/ModalTestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/ModalTestWrapper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmDH,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/primitives/NumberInput/NumberInput.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NumberInput.spec.d.ts.map

package/dist/primitives/NumberInput/NumberInput.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/NumberInput/NumberInput.spec.js"],"names":[],"mappings":""}

package/dist/primitives/NumberInput/NumberInput.spec.js

@@ -0,0 +1,235 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import NumberInput from './NumberInput.svelte';
+
+describe('NumberInput Component', () => {
+  test('renders a container div', () => {
+    const { container } = render(NumberInput);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('renders increment and decrement buttons', () => {
+    const { container } = render(NumberInput);
+    expect(container.querySelector('[aria-label="Decrease quantity"]')).toBeInTheDocument();
+    expect(container.querySelector('[aria-label="Increase quantity"]')).toBeInTheDocument();
+  });
+
+  test('displays the current value', () => {
+    render(NumberInput, { props: { value: 5 } });
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(NumberInput, { props: { class: 'custom-number-input' } });
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('custom-number-input');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(NumberInput, { props: { 'data-testid': 'my-number-input' } });
+    expect(container.querySelector('[data-testid="my-number-input"]')).toBeInTheDocument();
+  });
+});
+
+describe('NumberInput Props', () => {
+  test('value defaults to 0', () => {
+    render(NumberInput);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  test('min defaults to 0', () => {
+    const { container } = render(NumberInput, { props: { value: 0 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toBeDisabled();
+  });
+
+  test('max defaults to Infinity', () => {
+    const { container } = render(NumberInput, { props: { value: 9999 } });
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).not.toBeDisabled();
+  });
+
+  test('disabled prop disables both buttons', () => {
+    const { container } = render(NumberInput, { props: { disabled: true, value: 5 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(decrementBtn).toBeDisabled();
+    expect(incrementBtn).toBeDisabled();
+  });
+});
+
+describe('NumberInput Increment/Decrement', () => {
+  test('clicking increment calls onchange with value + 1', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 5, onchange } });
+
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    await user.click(incrementBtn);
+    expect(onchange).toHaveBeenCalledWith(6);
+  });
+
+  test('clicking decrement calls onchange with value - 1', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 5, onchange } });
+
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    await user.click(decrementBtn);
+    expect(onchange).toHaveBeenCalledWith(4);
+  });
+
+  test('decrement is disabled at min value', () => {
+    const { container } = render(NumberInput, { props: { value: 0, min: 0 } });
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toBeDisabled();
+  });
+
+  test('increment is disabled at max value', () => {
+    const { container } = render(NumberInput, { props: { value: 10, max: 10 } });
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toBeDisabled();
+  });
+
+  test('does not increment past max', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 10, max: 10, onchange } });
+
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    await user.click(incrementBtn);
+    expect(onchange).not.toHaveBeenCalled();
+  });
+
+  test('does not decrement below min', async () => {
+    const user = userEvent.setup();
+    const onchange = vi.fn();
+    const { container } = render(NumberInput, { props: { value: 0, min: 0, onchange } });
+
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    await user.click(decrementBtn);
+    expect(onchange).not.toHaveBeenCalled();
+  });
+});
+
+describe('NumberInput Styling', () => {
+  test('container has inline-flex class', () => {
+    const { container } = render(NumberInput);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('inline-flex');
+  });
+
+  test('container has items-center class', () => {
+    const { container } = render(NumberInput);
+    const wrapper = container.querySelector('div');
+    expect(wrapper).toHaveClass('items-center');
+  });
+
+  test('buttons have type="button"', () => {
+    const { container } = render(NumberInput);
+    const buttons = container.querySelectorAll('button');
+    buttons.forEach(btn => {
+      expect(btn).toHaveAttribute('type', 'button');
+    });
+  });
+
+  test('decrement button has rounded-l-lg', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('rounded-l-lg');
+  });
+
+  test('increment button has rounded-r-lg', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toHaveClass('rounded-r-lg');
+  });
+
+  test('buttons have bg-gray-100 background', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('bg-gray-100');
+  });
+
+  test('buttons have border-gray-300 border', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('border-gray-300');
+  });
+
+  test('display has bg-gray-50 background', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('bg-gray-50');
+  });
+
+  test('display has text-gray-500 color', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('text-gray-500');
+  });
+});
+
+describe('NumberInput Dark Mode', () => {
+  test('buttons have dark mode background', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('dark:bg-gray-700');
+  });
+
+  test('buttons have dark mode border', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveClass('dark:border-gray-600');
+  });
+
+  test('display has dark mode background', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('dark:bg-gray-800');
+  });
+
+  test('display has dark mode text color', () => {
+    const { container } = render(NumberInput);
+    const display = container.querySelector('span');
+    expect(display).toHaveClass('dark:text-gray-400');
+  });
+});
+
+describe('NumberInput Icons', () => {
+  test('decrement button has minus icon', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('increment button has plus icon', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('icons have w-3 h-3 size', () => {
+    const { container } = render(NumberInput);
+    const svgs = container.querySelectorAll('svg');
+    svgs.forEach(svg => {
+      expect(svg).toHaveClass('w-3');
+      expect(svg).toHaveClass('h-3');
+    });
+  });
+});
+
+describe('NumberInput Accessibility', () => {
+  test('decrement button has aria-label', () => {
+    const { container } = render(NumberInput);
+    const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
+    expect(decrementBtn).toHaveAttribute('aria-label', 'Decrease quantity');
+  });
+
+  test('increment button has aria-label', () => {
+    const { container } = render(NumberInput);
+    const incrementBtn = container.querySelector('[aria-label="Increase quantity"]');
+    expect(incrementBtn).toHaveAttribute('aria-label', 'Increase quantity');
+  });
+});