From 802c3043ce58d4c99970ec2fd8421de4f3baca8f Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Mon, 24 Nov 2025 08:14:48 +1000
Subject: [PATCH] Add tests for NumericStepper interactions

---
 .../__tests__/NumericStepper.test.tsx         | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/__tests__/NumericStepper.test.tsx

diff --git a/src/components/__tests__/NumericStepper.test.tsx b/src/components/__tests__/NumericStepper.test.tsx
new file mode 100644
index 0000000..04e99e1
--- /dev/null
+++ b/src/components/__tests__/NumericStepper.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { useState } from 'react';
+import { NumericStepper } from '../NumericStepper';
+
+type NumericStepperWrapperProps = {
+  initial?: number;
+  min?: number;
+  label?: string;
+};
+
+const NumericStepperWrapper = ({ initial = 2, min = 0, label = 'Quantity' }: NumericStepperWrapperProps) => {
+  const [value, setValue] = useState(initial);
+
+  return <NumericStepper label={label} value={value} min={min} onChange={setValue} />;
+};
+
+describe('NumericStepper', () => {
+  it('does not decrease below the minimum value', async () => {
+    const user = userEvent.setup();
+    render(<NumericStepperWrapper initial={1} min={1} />);
+
+    const input = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.click(screen.getByRole('button', { name: /decrease quantity/i }));
+
+    expect(input).toHaveValue(1);
+  });
+
+  it('increments the value by one when increase is clicked', async () => {
+    const user = userEvent.setup();
+    render(<NumericStepperWrapper initial={2} min={1} />);
+
+    const input = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.click(screen.getByRole('button', { name: /increase quantity/i }));
+
+    expect(input).toHaveValue(3);
+  });
+
+  it('updates the value when a number is typed', async () => {
+    const user = userEvent.setup();
+    render(<NumericStepperWrapper initial={2} min={1} />);
+
+    const input = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.clear(input);
+    await user.type(input, '5');
+
+    expect(input).toHaveValue(5);
+  });
+
+  it('sets button aria-labels based on the provided label', () => {
+    render(<NumericStepperWrapper label="Items" />);
+
+    expect(screen.getByRole('button', { name: 'decrease Items' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'increase Items' })).toBeInTheDocument();
+  });
+});