feat(web): coordinate input for asset location (#11291)

web/src/lib/components/shared-components/__test__/number-range-input.spec.ts

@@ -0,0 +1,50 @@
+import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
+import { act, render, type RenderResult } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+
+describe('NumberRangeInput component', () => {
+  const user = userEvent.setup();
+  let sut: RenderResult<NumberRangeInput>;
+  let input: HTMLInputElement;
+
+  beforeEach(() => {
+    sut = render(NumberRangeInput, { id: '', min: -90, max: 90, onInput: () => {} });
+    input = sut.getByRole('spinbutton') as HTMLInputElement;
+  });
+
+  it('updates value', async () => {
+    expect(input.value).toBe('');
+    await act(() => sut.component.$set({ value: 10 }));
+    expect(input.value).toBe('10');
+  });
+
+  it('restricts minimum value', async () => {
+    await user.type(input, '-91');
+    expect(input.value).toBe('-90');
+  });
+
+  it('restricts maximum value', async () => {
+    await user.type(input, '09990');
+    expect(input.value).toBe('90');
+  });
+
+  it('allows entering negative numbers', async () => {
+    await user.type(input, '-10');
+    expect(input.value).toBe('-10');
+  });
+
+  it('allows entering zero', async () => {
+    await user.type(input, '0');
+    expect(input.value).toBe('0');
+  });
+
+  it('allows entering decimal numbers', async () => {
+    await user.type(input, '-0.09001');
+    expect(input.value).toBe('-0.09001');
+  });
+
+  it('ignores text input', async () => {
+    await user.type(input, 'test');
+    expect(input.value).toBe('');
+  });
+});