chore(SetupFont): rename controlManager to typographySettingsStore for better semantic

2026-04-16 08:22:08 +03:00
parent 46d0d887b1
commit c1ac9b5bc4
7 changed files with 68 additions and 67 deletions
@@ -0,0 +1,723 @@
+/** @vitest-environment jsdom */
+import {
+    afterEach,
+    beforeEach,
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import {
+    DEFAULT_FONT_SIZE,
+    DEFAULT_FONT_WEIGHT,
+    DEFAULT_LETTER_SPACING,
+    DEFAULT_LINE_HEIGHT,
+    DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+} from '../../model';
+import {
+    type TypographySettings,
+    TypographySettingsManager,
+} from './settingsManager.svelte';
+
+/**
+ * Test Strategy for TypographySettingsManager
+ *
+ * This test suite validates the TypographySettingsManager state management logic.
+ * These are unit tests for the manager logic, separate from component rendering.
+ *
+ * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects
+ * after state changes to test reactive behavior. This is a limitation of unit
+ * testing Svelte 5 reactive code in Node.js.
+ *
+ * Test Coverage:
+ * 1. Initialization: Loading from storage, creating controls with correct values
+ * 2. Multiplier System: Changing multiplier updates font size display
+ * 3. Base Size Proxy: UI changes update #baseSize via the proxy effect
+ * 4. Storage Sync: Changes to controls sync to storage (via $effect)
+ * 5. Reset Functionality: Clearing storage resets all controls
+ * 6. Rendered Size: base * multiplier calculation
+ * 7. Control Getters: Return correct control instances
+ */
+
+// Helper to flush Svelte effects (they run in microtasks)
+async function flushEffects() {
+    await Promise.resolve();
+    await Promise.resolve();
+}
+
+describe('TypographySettingsManager - Unit Tests', () => {
+    let mockStorage: TypographySettings;
+    let mockPersistentStore: {
+        value: TypographySettings;
+        clear: () => void;
+    };
+
+    const createMockPersistentStore = (initialValue: TypographySettings) => {
+        let value = initialValue;
+        return {
+            get value() {
+                return value;
+            },
+            set value(v: TypographySettings) {
+                value = v;
+            },
+            clear() {
+                value = {
+                    fontSize: DEFAULT_FONT_SIZE,
+                    fontWeight: DEFAULT_FONT_WEIGHT,
+                    lineHeight: DEFAULT_LINE_HEIGHT,
+                    letterSpacing: DEFAULT_LETTER_SPACING,
+                };
+            },
+        };
+    };
+
+    beforeEach(() => {
+        // Reset mock storage with default values before each test
+        mockStorage = {
+            fontSize: DEFAULT_FONT_SIZE,
+            fontWeight: DEFAULT_FONT_WEIGHT,
+            lineHeight: DEFAULT_LINE_HEIGHT,
+            letterSpacing: DEFAULT_LETTER_SPACING,
+        };
+        mockPersistentStore = createMockPersistentStore(mockStorage);
+    });
+
+    describe('Initialization', () => {
+        it('creates manager with default values from storage', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.baseSize).toBe(DEFAULT_FONT_SIZE);
+            expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
+            expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
+            expect(manager.spacing).toBe(DEFAULT_LETTER_SPACING);
+        });
+
+        it('creates manager with saved values from storage', () => {
+            mockStorage = {
+                fontSize: 72,
+                fontWeight: 700,
+                lineHeight: 1.8,
+                letterSpacing: 0.05,
+            };
+            mockPersistentStore = createMockPersistentStore(mockStorage);
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.baseSize).toBe(72);
+            expect(manager.weight).toBe(700);
+            expect(manager.height).toBe(1.8);
+            expect(manager.spacing).toBe(0.05);
+        });
+
+        it('initializes font size control with base size multiplied by current multiplier (1)', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE);
+        });
+
+        it('returns all controls via controls getter', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const controls = manager.controls;
+            expect(controls).toHaveLength(4);
+            expect(controls.map(c => c.id)).toEqual([
+                'font_size',
+                'font_weight',
+                'line_height',
+                'letter_spacing',
+            ]);
+        });
+
+        it('returns individual controls via specific getters', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.sizeControl).toBeDefined();
+            expect(manager.weightControl).toBeDefined();
+            expect(manager.heightControl).toBeDefined();
+            expect(manager.spacingControl).toBeDefined();
+
+            // Control instances have value, min, max, step, isAtMax, isAtMin, increase, decrease
+            expect(manager.sizeControl).toHaveProperty('value');
+            expect(manager.weightControl).toHaveProperty('value');
+            expect(manager.heightControl).toHaveProperty('value');
+            expect(manager.spacingControl).toHaveProperty('value');
+        });
+
+        it('control instances have expected interface', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const ctrl = manager.sizeControl!;
+            expect(typeof ctrl.value).toBe('number');
+            expect(typeof ctrl.min).toBe('number');
+            expect(typeof ctrl.max).toBe('number');
+            expect(typeof ctrl.step).toBe('number');
+            expect(typeof ctrl.isAtMax).toBe('boolean');
+            expect(typeof ctrl.isAtMin).toBe('boolean');
+            expect(typeof ctrl.increase).toBe('function');
+            expect(typeof ctrl.decrease).toBe('function');
+        });
+    });
+
+    describe('Multiplier System', () => {
+        it('has default multiplier of 1', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.multiplier).toBe(1);
+        });
+
+        it('updates multiplier when set', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.multiplier = 0.75;
+            expect(manager.multiplier).toBe(0.75);
+
+            manager.multiplier = 0.5;
+            expect(manager.multiplier).toBe(0.5);
+        });
+
+        it('does not update multiplier if set to same value', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const originalSizeValue = manager.sizeControl?.value;
+
+            manager.multiplier = 1; // Same as default
+
+            expect(manager.sizeControl?.value).toBe(originalSizeValue);
+        });
+
+        it('updates font size control display value when multiplier changes', () => {
+            mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
+            mockPersistentStore = createMockPersistentStore(mockStorage);
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Initial state: base = 48, multiplier = 1, display = 48
+            expect(manager.baseSize).toBe(48);
+            expect(manager.sizeControl?.value).toBe(48);
+
+            // Change multiplier to 0.75
+            manager.multiplier = 0.75;
+            // Display should be 48 * 0.75 = 36
+            expect(manager.sizeControl?.value).toBe(36);
+
+            // Change multiplier to 0.5
+            manager.multiplier = 0.5;
+            // Display should be 48 * 0.5 = 24
+            expect(manager.sizeControl?.value).toBe(24);
+
+            // Base size should remain unchanged
+            expect(manager.baseSize).toBe(48);
+        });
+
+        it('updates font size control display value when multiplier increases', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Start with multiplier 0.5
+            manager.multiplier = 0.5;
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE * 0.5);
+
+            // Increase to 0.75
+            manager.multiplier = 0.75;
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE * 0.75);
+
+            // Increase to 1.0
+            manager.multiplier = 1;
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE);
+        });
+    });
+
+    describe('Base Size Setter', () => {
+        it('updates baseSize when set directly', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 72;
+
+            expect(manager.baseSize).toBe(72);
+        });
+
+        it('updates size control value when baseSize is set', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 60;
+
+            expect(manager.sizeControl?.value).toBe(60);
+        });
+
+        it('applies multiplier to size control when baseSize is set', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.multiplier = 0.5;
+            manager.baseSize = 60;
+
+            expect(manager.sizeControl?.value).toBe(30); // 60 * 0.5
+        });
+    });
+
+    describe('Rendered Size Calculation', () => {
+        it('calculates renderedSize as baseSize * multiplier', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.renderedSize).toBe(DEFAULT_FONT_SIZE * 1);
+        });
+
+        it('updates renderedSize when multiplier changes', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.multiplier = 0.5;
+            expect(manager.renderedSize).toBe(DEFAULT_FONT_SIZE * 0.5);
+
+            manager.multiplier = 0.75;
+            expect(manager.renderedSize).toBe(DEFAULT_FONT_SIZE * 0.75);
+        });
+
+        it('updates renderedSize when baseSize changes', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 72;
+            expect(manager.renderedSize).toBe(72);
+
+            manager.multiplier = 0.5;
+            expect(manager.renderedSize).toBe(36);
+        });
+    });
+
+    describe('Base Size Proxy Effect (UI -> baseSize)', () => {
+        // NOTE: The proxy effect that updates baseSize when the control value changes
+        // runs in a $effect, which is asynchronous in unit tests. We test the
+        // synchronous behavior here (baseSize setter) and note that the full
+        // proxy effect behavior should be tested in E2E tests.
+
+        it('does NOT immediately update baseSize from control change (effect is async)', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const originalBaseSize = manager.baseSize;
+
+            // Change the control value directly
+            manager.sizeControl!.value = 60;
+
+            // baseSize is NOT updated immediately because the effect runs in microtasks
+            expect(manager.baseSize).toBe(originalBaseSize);
+        });
+
+        it('updates baseSize via direct setter (synchronous)', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 60;
+
+            expect(manager.baseSize).toBe(60);
+            expect(manager.sizeControl?.value).toBe(60);
+        });
+    });
+
+    describe('Storage Sync (Controls -> Storage)', () => {
+        // NOTE: Storage sync happens via $effect which runs in microtasks.
+        // In unit tests, we verify the initial sync and test async behavior.
+
+        it('has initial values in storage from constructor', () => {
+            mockStorage = {
+                fontSize: 60,
+                fontWeight: 500,
+                lineHeight: 1.6,
+                letterSpacing: 0.02,
+            };
+            mockPersistentStore = createMockPersistentStore(mockStorage);
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Initial values are loaded from storage
+            expect(manager.baseSize).toBe(60);
+            expect(manager.weight).toBe(500);
+            expect(manager.height).toBe(1.6);
+            expect(manager.spacing).toBe(0.02);
+        });
+
+        it('syncs to storage after effect flush (async)', async () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 72;
+
+            // Storage is NOT updated immediately
+            expect(mockPersistentStore.value.fontSize).toBe(DEFAULT_FONT_SIZE);
+
+            // After flushing effects, storage should be updated
+            await flushEffects();
+            expect(mockPersistentStore.value.fontSize).toBe(72);
+        });
+
+        it('syncs control changes to storage after effect flush (async)', async () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.weightControl!.value = 700;
+
+            // After flushing effects
+            await flushEffects();
+            expect(mockPersistentStore.value.fontWeight).toBe(700);
+        });
+
+        it('syncs height control changes to storage after effect flush (async)', async () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.heightControl!.value = 1.8;
+
+            await flushEffects();
+            expect(mockPersistentStore.value.lineHeight).toBe(1.8);
+        });
+
+        it('syncs spacing control changes to storage after effect flush (async)', async () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.spacingControl!.value = 0.05;
+
+            await flushEffects();
+            expect(mockPersistentStore.value.letterSpacing).toBe(0.05);
+        });
+    });
+
+    describe('Control Value Getters', () => {
+        it('returns current weight value', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
+
+            manager.weightControl!.value = 700;
+            expect(manager.weight).toBe(700);
+        });
+
+        it('returns current height value', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
+
+            manager.heightControl!.value = 1.8;
+            expect(manager.height).toBe(1.8);
+        });
+
+        it('returns current spacing value', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            expect(manager.spacing).toBe(DEFAULT_LETTER_SPACING);
+
+            manager.spacingControl!.value = 0.05;
+            expect(manager.spacing).toBe(0.05);
+        });
+
+        it('returns default value when control is not found', () => {
+            // Create a manager with empty configs (no controls)
+            const manager = new TypographySettingsManager([], mockPersistentStore);
+
+            expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
+            expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
+            expect(manager.spacing).toBe(DEFAULT_LETTER_SPACING);
+        });
+    });
+
+    describe('Reset Functionality', () => {
+        it('resets all controls to default values', () => {
+            mockStorage = {
+                fontSize: 72,
+                fontWeight: 700,
+                lineHeight: 1.8,
+                letterSpacing: 0.05,
+            };
+            mockPersistentStore = createMockPersistentStore(mockStorage);
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Modify values
+            manager.baseSize = 80;
+            manager.weightControl!.value = 900;
+            manager.heightControl!.value = 2.0;
+            manager.spacingControl!.value = 0.1;
+
+            // Reset
+            manager.reset();
+
+            // Check all values are reset to defaults
+            expect(manager.baseSize).toBe(DEFAULT_FONT_SIZE);
+            expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
+            expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
+            expect(manager.spacing).toBe(DEFAULT_LETTER_SPACING);
+        });
+
+        it('calls storage.clear() on reset', () => {
+            const clearSpy = vi.fn();
+            mockPersistentStore = {
+                get value() {
+                    return mockStorage;
+                },
+                set value(v: TypographySettings) {
+                    mockStorage = v;
+                },
+                clear: clearSpy,
+            };
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.reset();
+
+            expect(clearSpy).toHaveBeenCalled();
+        });
+
+        it('respects multiplier when resetting font size control', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.multiplier = 0.5;
+            manager.baseSize = 80;
+
+            manager.reset();
+
+            // Font size control should show default * multiplier
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE * 0.5);
+            expect(manager.baseSize).toBe(DEFAULT_FONT_SIZE);
+        });
+    });
+
+    describe('Complex Scenarios', () => {
+        it('handles changing multiplier then modifying baseSize', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Change multiplier
+            manager.multiplier = 0.5;
+            expect(manager.sizeControl?.value).toBe(DEFAULT_FONT_SIZE * 0.5);
+
+            // Change baseSize
+            manager.baseSize = 60;
+            expect(manager.sizeControl?.value).toBe(30); // 60 * 0.5
+            expect(manager.baseSize).toBe(60);
+
+            // Change multiplier again
+            manager.multiplier = 1;
+            expect(manager.sizeControl?.value).toBe(60); // 60 * 1
+            expect(manager.baseSize).toBe(60);
+        });
+
+        it('maintains correct renderedSize throughout changes', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Initial: 48 * 1 = 48
+            expect(manager.renderedSize).toBe(48);
+
+            // Change baseSize: 60 * 1 = 60
+            manager.baseSize = 60;
+            expect(manager.renderedSize).toBe(60);
+
+            // Change multiplier: 60 * 0.5 = 30
+            manager.multiplier = 0.5;
+            expect(manager.renderedSize).toBe(30);
+
+            // Change baseSize again: 72 * 0.5 = 36
+            manager.baseSize = 72;
+            expect(manager.renderedSize).toBe(36);
+        });
+
+        it('handles multiple control changes in sequence', async () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            // Change multiple controls
+            manager.baseSize = 72;
+            manager.weightControl!.value = 700;
+            manager.heightControl!.value = 1.8;
+            manager.spacingControl!.value = 0.05;
+
+            // After flushing effects, verify all are synced to storage
+            await flushEffects();
+            expect(mockPersistentStore.value.fontSize).toBe(72);
+            expect(mockPersistentStore.value.fontWeight).toBe(700);
+            expect(mockPersistentStore.value.lineHeight).toBe(1.8);
+            expect(mockPersistentStore.value.letterSpacing).toBe(0.05);
+        });
+    });
+
+    describe('Edge Cases', () => {
+        it('handles multiplier of 1 (no change)', () => {
+            mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
+            mockPersistentStore = createMockPersistentStore(mockStorage);
+
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.multiplier = 1;
+
+            expect(manager.sizeControl?.value).toBe(48);
+            expect(manager.baseSize).toBe(48);
+        });
+
+        it('handles very small multiplier', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 100;
+            manager.multiplier = 0.1;
+
+            expect(manager.sizeControl?.value).toBe(10);
+            expect(manager.renderedSize).toBe(10);
+        });
+
+        it('handles large base size with multiplier', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 100;
+            manager.multiplier = 0.75;
+
+            expect(manager.sizeControl?.value).toBe(75);
+            expect(manager.renderedSize).toBe(75);
+        });
+
+        it('handles floating point precision in multiplier', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            manager.baseSize = 48;
+            manager.multiplier = 0.5;
+
+            // 48 * 0.5 = 24 (exact, no rounding needed)
+            expect(manager.sizeControl?.value).toBe(24);
+            expect(manager.renderedSize).toBe(24);
+
+            // 48 * 0.33 = 15.84 -> rounds to 16 (step precision is 1)
+            manager.multiplier = 0.33;
+            expect(manager.sizeControl?.value).toBe(16);
+            expect(manager.renderedSize).toBeCloseTo(15.84);
+        });
+
+        it('handles control methods (increase/decrease)', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const initialWeight = manager.weight;
+            manager.weightControl!.increase();
+            expect(manager.weight).toBe(initialWeight + 100);
+
+            manager.weightControl!.decrease();
+            expect(manager.weight).toBe(initialWeight);
+        });
+
+        it('handles control boundary conditions', () => {
+            const manager = new TypographySettingsManager(
+                DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
+                mockPersistentStore,
+            );
+
+            const sizeCtrl = manager.sizeControl!;
+
+            // Test min boundary
+            sizeCtrl.value = 5;
+            expect(sizeCtrl.value).toBe(sizeCtrl.min); // Should clamp to MIN_FONT_SIZE (8)
+
+            // Test max boundary
+            sizeCtrl.value = 200;
+            expect(sizeCtrl.value).toBe(sizeCtrl.max); // Should clamp to MAX_FONT_SIZE (100)
+        });
+    });
+});