feat/e2e-testing (#31)

Reviewed-on: #31
Co-authored-by: Max Richter <max@max-richter.dev>
Co-committed-by: Max Richter <max@max-richter.dev>

packages/ui/src/lib/Details.svelte.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import Details from './Details.svelte';
+
+describe('Details', () => {
+  it('should render summary element', async () => {
+    render(Details, { title: 'Click me' });
+
+    const summary = page.getByText('Click me');
+    await expect.element(summary).toBeInTheDocument();
+  });
+});

packages/ui/src/lib/ShortCut.svelte.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ShortCut from './ShortCut.svelte';
+
+describe('ShortCut', () => {
+  it('should render with key label', async () => {
+    render(ShortCut, { key: 'S' });
+
+    const shortcut = page.getByText('S');
+    await expect.element(shortcut).toBeInTheDocument();
+  });
+
+  it('should render ctrl modifier', async () => {
+    render(ShortCut, { ctrl: true, key: 'S' });
+
+    const shortcut = page.getByText(/Ctrl/);
+    await expect.element(shortcut).toBeInTheDocument();
+  });
+
+  it('should render alt modifier', async () => {
+    render(ShortCut, { alt: true, key: 'F4' });
+
+    const shortcut = page.getByText(/Alt/);
+    await expect.element(shortcut).toBeInTheDocument();
+  });
+
+  it('should render multiple modifiers', async () => {
+    render(ShortCut, { ctrl: true, alt: true, key: 'Delete' });
+
+    const shortcut = page.getByText(/Ctrl/);
+    await expect.element(shortcut).toBeInTheDocument();
+  });
+});

packages/ui/src/lib/helpers/getBoundingValue.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { getBoundingValue } from './getBoundingValue';
+
+describe('getBoundingValue', () => {
+  it('should return 1 for values between 0 and 1', () => {
+    expect(getBoundingValue(0)).toBe(1);
+    expect(getBoundingValue(0.5)).toBe(1);
+    expect(getBoundingValue(1)).toBe(1);
+  });
+
+  it('should return 2 for values between 1 and 2', () => {
+    expect(getBoundingValue(1.1)).toBe(2);
+    expect(getBoundingValue(1.5)).toBe(2);
+    expect(getBoundingValue(2)).toBe(2);
+  });
+
+  it('should return 4 for values between 2 and 4', () => {
+    expect(getBoundingValue(2.1)).toBe(4);
+    expect(getBoundingValue(3)).toBe(4);
+    expect(getBoundingValue(4)).toBe(4);
+  });
+
+  it('should return positive level for positive input', () => {
+    expect(getBoundingValue(5)).toBe(10);
+    expect(getBoundingValue(15)).toBe(20);
+    expect(getBoundingValue(50)).toBe(50);
+    expect(getBoundingValue(150)).toBe(200);
+  });
+
+  it('should return negative level for negative input', () => {
+    expect(getBoundingValue(-5)).toBe(-10);
+    expect(getBoundingValue(-15)).toBe(-20);
+    expect(getBoundingValue(-50)).toBe(-50);
+    expect(getBoundingValue(-150)).toBe(-200);
+  });
+
+  it('should return correct level for boundary values', () => {
+    expect(getBoundingValue(10)).toBe(10);
+    expect(getBoundingValue(20)).toBe(20);
+    expect(getBoundingValue(50)).toBe(50);
+    expect(getBoundingValue(100)).toBe(100);
+    expect(getBoundingValue(200)).toBe(200);
+  });
+
+  it('should handle large values', () => {
+    expect(getBoundingValue(1000)).toBe(1000);
+    expect(getBoundingValue(1500)).toBe(1000);
+    expect(getBoundingValue(-1000)).toBe(-1000);
+  });
+
+  it('should handle very small values', () => {
+    expect(getBoundingValue(0.001)).toBe(1);
+    expect(getBoundingValue(-0.001)).toBe(-1);
+  });
+});

packages/ui/src/lib/inputs/InputCheckbox.svelte.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import InputCheckbox from './InputCheckbox.svelte';
+
+describe('InputCheckbox', () => {
+  it('should render checkbox label', async () => {
+    render(InputCheckbox, { value: false });
+
+    const checkbox = page.getByRole('checkbox');
+    await expect.element(checkbox).toBeInTheDocument();
+  });
+
+  it('should be unchecked when value is false', async () => {
+    render(InputCheckbox, { value: false });
+
+    const input = page.getByRole('checkbox');
+    await expect.element(input).not.toBeChecked();
+  });
+
+  it('should be checked when value is true', async () => {
+    render(InputCheckbox, { value: true });
+
+    const input = page.getByRole('checkbox');
+    await expect.element(input).toBeChecked();
+  });
+});

packages/ui/src/lib/inputs/InputNumber.svelte.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import InputNumber from './InputNumber.svelte';
+
+describe('InputNumber', () => {
+  it('should render input element', async () => {
+    render(InputNumber, { value: 0.5 });
+
+    const input = page.getByRole('spinbutton');
+    await expect.element(input).toBeInTheDocument();
+  });
+
+  it('should render with step buttons when step is provided', async () => {
+    render(InputNumber, { value: 0.5, step: 0.1 });
+
+    const decrementBtn = page.getByRole('button', { name: 'step down' });
+    const incrementBtn = page.getByRole('button', { name: 'step up' });
+    await expect.element(decrementBtn).toBeInTheDocument();
+    await expect.element(incrementBtn).toBeInTheDocument();
+  });
+
+  it('should not render step buttons when step is undefined', async () => {
+    const screen = render(InputNumber, { value: 0.5 });
+
+    const buttons = screen.locator.getByRole('button');
+    const count = buttons.all().length;
+    expect(count).toBe(0);
+  });
+
+  it('should accept numeric value', async () => {
+    render(InputNumber, { value: 42 });
+
+    const input = page.getByRole('spinbutton');
+    await expect.element(input).toHaveValue(42);
+  });
+
+  it('should accept min and max bounds', async () => {
+    render(InputNumber, { value: 5, min: 0, max: 10 });
+
+    const input = page.getByRole('spinbutton');
+    await expect.element(input).toHaveAttribute('min', '0');
+    await expect.element(input).toHaveAttribute('max', '10');
+  });
+});

packages/ui/src/lib/inputs/InputSelect.svelte.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import InputSelect from './InputSelect.svelte';
+
+describe('InputSelect', () => {
+  it('should render select element', async () => {
+    render(InputSelect, { options: ['a', 'b', 'c'], value: 0 });
+
+    const select = page.getByRole('combobox');
+    await expect.element(select).toBeInTheDocument();
+  });
+
+  it('should render all options', async () => {
+    render(InputSelect, { options: ['apple', 'banana', 'cherry'], value: 0 });
+
+    const select = page.getByRole('combobox');
+    await expect.element(select).toHaveTextContent('applebananacherry');
+  });
+
+  it('should select correct option by index', async () => {
+    render(InputSelect, { options: ['first', 'second', 'third'], value: 1 });
+
+    const select = page.getByRole('combobox');
+    await expect.element(select).toHaveTextContent('second');
+  });
+});

packages/ui/src/lib/inputs/InputVec3.svelte.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import InputVec3 from './InputVec3.svelte';
+
+describe('InputVec3', () => {
+  it('should render with correct initial values', async () => {
+    const value = $state([1.5, 2.5, 3.5]);
+    render(InputVec3, { value });
+
+    const inputs = page.getByRole('spinbutton');
+    await expect.element(inputs.first()).toBeInTheDocument();
+
+    expect(inputs.nth(0)).toHaveValue(1.5);
+    expect(inputs.nth(1)).toHaveValue(2.5);
+    expect(inputs.nth(2)).toHaveValue(3.5);
+  });
+
+  it('should have step attribute', async () => {
+    const value = $state([0, 0, 0]);
+    render(InputVec3, { value });
+
+    const input = page.getByRole('spinbutton').first();
+    await expect.element(input).toHaveAttribute('step', '0.01');
+  });
+});