test: add component integration tests for Svelte 5 refactoring verification

Sets up @testing-library/svelte with happy-dom and vitest to test
behavioral contracts before applying the stashed runes migration.

- vitest.config.ts: browser resolve conditions to avoid Svelte SSR build
- test/setup.ts: localStorage mock, jest-dom matchers, transition mocks
- Bits.test.ts: bit pattern rendering, ArrowUp/Down keyboard, disabledBits
- Digit.test.ts: uses selected option role to avoid select-options false positives
- Toast.test.ts: visibility toggle and auto-hide via fake timers
- NumberControls.test.ts: button disabled states and boundary text
- OpacitySkeleton.test.ts: opacity-100 applied after onMount
- BitHex.test.ts: core bind:integer chain — bit flip propagates to hex digits
- tsconfig.json: move target into compilerOptions to fix Vite warning

Author: ryuheechul

package.json

@@ -26,6 +26,10 @@
     "@eslint/js": "^10.0.1",
     "@github/clipboard-copy-element": "^1.3.0",
     "@iconify-json/bi": "^1.2.7",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@typescript-eslint/eslint-plugin": "^8.61.0",
     "@typescript-eslint/parser": "^8.61.0",
@@ -42,6 +46,7 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-svelte": "^3.19.0",
     "globals": "^17.6.0",
+    "happy-dom": "^20.10.2",
     "husky": "^9.1.7",
     "lint-staged": "^17.0.7",
     "lodash-es": "^4.18.1",

pnpm-lock.yaml

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import BitHex from '@components/blend/BitHex.svelte';
+
+// BitHex is the critical integration test: it uses bind:integer with both Bits and Digits.
+// Flipping a bit in the Bits row must propagate through the bind: chain and update the Digits row.
+// This test specifically verifies the two-way binding chain is intact after refactoring.
+
+describe('BitHex', () => {
+  it('renders checkboxes (bits) and a select (hex digit)', () => {
+    render(BitHex, { props: { integer: 0 } });
+    expect(screen.getAllByRole('checkbox').length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('combobox').length).toBeGreaterThan(0);
+  });
+
+  it('hex select reflects initial integer value', () => {
+    render(BitHex, { props: { integer: 0 } });
+    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    const hexValue = selects.reduce((acc, s, i) => acc + Number(s.value) * Math.pow(16, selects.length - 1 - i), 0);
+    expect(hexValue).toBe(0);
+  });
+
+  it('shows 3 hex selects for integer 255 with values [0, F, F]', () => {
+    // extractBit(255) = [0,1,1,1,1,1,1,1,1] (9 bits including leading zero),
+    // padded to 12 bits → lengthOfBits=12 → Math.ceil(12/4)=3 hex digits.
+    // The leading-zero nibble gives a first select value of 0.
+    render(BitHex, { props: { integer: 255 } });
+    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    expect(selects).toHaveLength(3);
+    expect(Number(selects[0].value)).toBe(0);
+    expect(Number(selects[1].value)).toBe(15);
+    expect(Number(selects[2].value)).toBe(15);
+  });
+
+  it('shows 12 bit cells for integer 255, first 4 unchecked', () => {
+    // extractBit(255) = [0,1,...,1] (9 elements) → padded to 12 bits
+    // First 4 bits (the leading-zero nibble) are 0; last 8 bits are 1.
+    render(BitHex, { props: { integer: 255 } });
+    const cbs = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    expect(cbs).toHaveLength(12);
+    expect(cbs.slice(0, 4).every((cb) => !cb.checked)).toBe(true);
+    expect(cbs.slice(4).every((cb) => cb.checked)).toBe(true);
+  });
+
+  it('flipping LSB bit from 0 → 1 updates hex digit (bind: chain)', async () => {
+    // This is the core integration test:
+    // Bit flip → Bits.integer updates → bind:integer propagates to BitHex → Digits re-renders
+    const user = userEvent.setup();
+    render(BitHex, { props: { integer: 0 } });
+
+    const cbs = screen.getAllByRole('checkbox');
+    const selectsBefore = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    // All hex selects start at 0
+    expect(selectsBefore.every((s) => Number(s.value) === 0)).toBe(true);
+
+    // Flip the LSB
+    await user.click(cbs[cbs.length - 1]);
+
+    const selectsAfter = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    // The last hex select (LSB nibble) should now be 1
+    expect(Number(selectsAfter[selectsAfter.length - 1].value)).toBe(1);
+  });
+
+  it('flipping LSB bit from 1 → 0 updates hex digit back to 0', async () => {
+    const user = userEvent.setup();
+    render(BitHex, { props: { integer: 1 } });
+
+    const cbs = screen.getAllByRole('checkbox');
+    const lsb = cbs[cbs.length - 1];
+    expect(lsb).toBeChecked();
+
+    await user.click(lsb);
+
+    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    expect(selects.every((s) => Number(s.value) === 0)).toBe(true);
+  });
+
+  it('flipping the MSB of integer 0 checks that bit and makes the hex non-zero', async () => {
+    // Integer 0 → 4 bits, MSB at index 0 represents 2^3=8.
+    // After flip: integer=8, hex select shows 8.
+    const user = userEvent.setup();
+    render(BitHex, { props: { integer: 0 } });
+
+    const cbs = screen.getAllByRole('checkbox');
+    expect(cbs).toHaveLength(4);
+    const msb = cbs[0];
+    expect(msb).not.toBeChecked();
+
+    await user.click(msb);
+
+    // MSB is now checked
+    expect(msb).toBeChecked();
+
+    // integer became 8 = 0x8; hex selects now show non-zero
+    const selectsAfter = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    const hexValue = selectsAfter.reduce(
+      (acc, s, i) => acc + Number(s.value) * Math.pow(16, selectsAfter.length - 1 - i),
+      0
+    );
+    expect(hexValue).toBe(8);
+  });
+});

test/components/blend/BitHex.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { flushSync } from 'svelte';
+import Bits from '@components/parts/Bits.svelte';
+
+describe('Bits', () => {
+  it('renders 8 bit cells for integer 32', () => {
+    // Uses 32, not the default prop value (42), to ensure the integer prop is actually received.
+    // extractBit(32) = [0,1,0,0,0,0,0] → toBits(32,4) pads to 8 bits.
+    render(Bits, { props: { integer: 32 } });
+    expect(screen.getAllByRole('checkbox')).toHaveLength(8);
+  });
+
+  it('renders 4 bit cells for integer 0 (default multipleOf=4)', () => {
+    render(Bits, { props: { integer: 0 } });
+    expect(screen.getAllByRole('checkbox')).toHaveLength(4);
+  });
+
+  it('shows correct bit pattern for integer 32 (0b00100000)', () => {
+    // Uses 32, not the default prop value (42), to ensure the integer prop is actually received.
+    // extractBit(32) = [0,1,0,0,0,0,0] → padded to [0,0,1,0,0,0,0,0].
+    render(Bits, { props: { integer: 32 } });
+    const cbs = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    expect(cbs.map((cb) => cb.checked)).toEqual([
+      false, false, true, false, false, false, false, false,
+    ]);
+  });
+
+  it('shows integer 15 as 8 bits with leading zero (0b00001111)', () => {
+    // extractBit always adds a leading 0 from its base case, so 15 renders as
+    // [0,1,1,1,1] → padded to 8 bits: [0,0,0,0,1,1,1,1]
+    render(Bits, { props: { integer: 15 } });
+    const cbs = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    expect(cbs).toHaveLength(8);
+    expect(cbs.map((cb) => cb.checked)).toEqual([
+      false, false, false, false, true, true, true, true,
+    ]);
+  });
+
+  it('shows all unchecked for integer 0', () => {
+    render(Bits, { props: { integer: 0 } });
+    const cbs = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    expect(cbs.every((cb) => !cb.checked)).toBe(true);
+  });
+
+  it('ArrowUp on a bit sets it to 1', async () => {
+    const user = userEvent.setup();
+    render(Bits, { props: { integer: 0 } });
+    const cbs = screen.getAllByRole('checkbox');
+    const lsb = cbs[cbs.length - 1] as HTMLInputElement;
+    lsb.focus();
+    await user.keyboard('{ArrowUp}');
+    flushSync();
+    expect(lsb).toBeChecked();
+  });
+
+  it('ArrowDown on a bit sets it to 0', async () => {
+    const user = userEvent.setup();
+    render(Bits, { props: { integer: 1 } });
+    const cbs = screen.getAllByRole('checkbox');
+    const lsb = cbs[cbs.length - 1] as HTMLInputElement;
+    lsb.focus();
+    await user.keyboard('{ArrowDown}');
+    flushSync();
+    expect(lsb).not.toBeChecked();
+  });
+
+  it('disabledBits 0xFFFFFFFF disables all checkboxes', () => {
+    render(Bits, { props: { integer: 42, disabledBits: 0xffffffff } });
+    const cbs = screen.getAllByRole('checkbox');
+    for (const cb of cbs) {
+      expect(cb).toBeDisabled();
+    }
+  });
+
+  it('disabledBits 0 leaves all checkboxes enabled', () => {
+    render(Bits, { props: { integer: 42, disabledBits: 0 } });
+    const cbs = screen.getAllByRole('checkbox');
+    for (const cb of cbs) {
+      expect(cb).not.toBeDisabled();
+    }
+  });
+});

test/components/parts/Bits.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Digit from '@components/parts/Digit.svelte';
+
+// Note on test strategy: Digit renders an overlay <div> with the current character AND a
+// <select> with ALL possible options for the base. Querying by text alone (getAllByText)
+// is a false positive because every option character is always in the DOM regardless of
+// which digit is selected. Tests here use getByRole('option', { selected: true }) to
+// assert the SELECTED option, which is the one that actually reflects the digit prop.
+
+describe('Digit', () => {
+  it('selected option shows decimal digit 5 as "5"', () => {
+    render(Digit, { props: { digit: 5, base: 10, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('5');
+  });
+
+  it('selected option shows hex digit 10 as "A"', () => {
+    render(Digit, { props: { digit: 10, base: 16, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('A');
+  });
+
+  it('selected option shows hex digit 15 as "F"', () => {
+    render(Digit, { props: { digit: 15, base: 16, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('F');
+  });
+
+  it('selected option shows hex digit 0 as "0"', () => {
+    render(Digit, { props: { digit: 0, base: 16, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('0');
+  });
+
+  it('select element value matches digit prop', () => {
+    render(Digit, { props: { digit: 7, base: 16, position: 0 } });
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(Number(select.value)).toBe(7);
+  });
+
+  it('select has base number of options', () => {
+    render(Digit, { props: { digit: 0, base: 16, position: 0 } });
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+    expect(select.options.length).toBe(16);
+  });
+
+  it('select has data-position attribute matching position prop', () => {
+    render(Digit, { props: { digit: 0, base: 16, position: 3 } });
+    const select = screen.getByRole('combobox');
+    expect(select).toHaveAttribute('data-position', '3');
+  });
+
+  it('selected option shows binary digit 0 as "0"', () => {
+    render(Digit, { props: { digit: 0, base: 2, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('0');
+  });
+
+  it('selected option shows binary digit 1 as "1"', () => {
+    render(Digit, { props: { digit: 1, base: 2, position: 0 } });
+    expect(screen.getByRole('option', { selected: true })).toHaveTextContent('1');
+  });
+});

test/components/parts/Digit.test.ts

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import NumberControls from '@components/parts/NumberControls.svelte';
+
+describe('NumberControls', () => {
+  it('renders 4 buttons', () => {
+    render(NumberControls, { props: { integer: 50, min: 0, max: 100 } });
+    expect(screen.getAllByRole('button')).toHaveLength(4);
+  });
+
+  it('setToMax button is disabled when integer equals max', () => {
+    render(NumberControls, { props: { integer: 100, min: 0, max: 100 } });
+    const [maxBtn] = screen.getAllByRole('button');
+    expect(maxBtn).toBeDisabled();
+    expect(maxBtn).toHaveTextContent('max');
+  });
+
+  it('setToMin button is disabled when integer equals min', () => {
+    render(NumberControls, { props: { integer: 0, min: 0, max: 100 } });
+    const [, minBtn] = screen.getAllByRole('button');
+    expect(minBtn).toBeDisabled();
+    expect(minBtn).toHaveTextContent('min');
+  });
+
+  it('both action buttons enabled in normal state', () => {
+    render(NumberControls, { props: { integer: 50, min: 0, max: 100 } });
+    const [maxBtn, minBtn] = screen.getAllByRole('button');
+    expect(maxBtn).not.toBeDisabled();
+    expect(minBtn).not.toBeDisabled();
+  });
+
+  it('increment button shows "+1" when not at max', () => {
+    render(NumberControls, { props: { integer: 50, min: 0, max: 100 } });
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[2]).toHaveTextContent('+1');
+  });
+
+  it('increment button shows "min" when at max', () => {
+    render(NumberControls, { props: { integer: 100, min: 0, max: 100 } });
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[2]).toHaveTextContent('min');
+  });
+
+  it('decrement button shows "-1" when not at min', () => {
+    render(NumberControls, { props: { integer: 50, min: 0, max: 100 } });
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[3]).toHaveTextContent('-1');
+  });
+
+  it('decrement button shows "max" when at min', () => {
+    render(NumberControls, { props: { integer: 0, min: 0, max: 100 } });
+    const buttons = screen.getAllByRole('button');
+    expect(buttons[3]).toHaveTextContent('max');
+  });
+
+  it('displays formatted max value', () => {
+    render(NumberControls, { props: { integer: 50, min: 0, max: 1000000 } });
+    expect(screen.getByText('1,000,000')).toBeInTheDocument();
+  });
+
+  it('displays formatted min value', () => {
+    render(NumberControls, { props: { integer: 50, min: 1000, max: 9999 } });
+    expect(screen.getByText('1,000')).toBeInTheDocument();
+  });
+});

test/components/parts/NumberControls.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import OpacitySkeleton from '@components/parts/OpacitySkeleton.svelte';
+
+describe('OpacitySkeleton', () => {
+  it('renders a wrapper div', () => {
+    const { container } = render(OpacitySkeleton);
+    expect(container.firstElementChild).toBeTruthy();
+  });
+
+  it('applies opacity-100 after mount (onMount fires)', () => {
+    const { container } = render(OpacitySkeleton);
+    const wrapper = container.firstElementChild as HTMLElement;
+    // Before stash: onMount sets mounted=true which adds opacity-100
+    // After stash: $effect replaces onMount — same behavior expected
+    expect(wrapper).toHaveClass('opacity-100');
+  });
+
+  it('has opacity-0 class initially (before transition)', () => {
+    // The div has opacity-0 as a static class in addition to the conditional opacity-100
+    const { container } = render(OpacitySkeleton);
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper).toHaveClass('opacity-0');
+  });
+});