Ilia Mashkov
725 lines
25 KiB
TypeScript
725 lines
25 KiB
TypeScript
/**
|
|
* @vitest-environment jsdom
|
|
*/
|
|
import {
|
|
DEFAULT_FONT_SIZE,
|
|
DEFAULT_FONT_WEIGHT,
|
|
DEFAULT_LETTER_SPACING,
|
|
DEFAULT_LINE_HEIGHT,
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
} from '$entities/Font';
|
|
import {
|
|
beforeEach,
|
|
describe,
|
|
expect,
|
|
it,
|
|
vi,
|
|
} from 'vitest';
|
|
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)
|
|
});
|
|
});
|
|
});
|