|
|
|
@@ -17,13 +17,13 @@ import {
|
|
|
|
|
} from 'vitest';
|
|
|
|
|
import {
|
|
|
|
|
type TypographySettings,
|
|
|
|
|
TypographySettingsManager,
|
|
|
|
|
} from './settingsManager.svelte';
|
|
|
|
|
TypographySettingsStore,
|
|
|
|
|
} from './typographySettingsStore.svelte';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Test Strategy for TypographySettingsManager
|
|
|
|
|
* Test Strategy for TypographySettingsStore
|
|
|
|
|
*
|
|
|
|
|
* This test suite validates the TypographySettingsManager state management logic.
|
|
|
|
|
* This test suite validates the TypographySettingsStore 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
|
|
|
|
@@ -46,7 +46,7 @@ async function flushEffects() {
|
|
|
|
|
await Promise.resolve();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
describe('TypographySettingsStore - Unit Tests', () => {
|
|
|
|
|
let mockStorage: TypographySettings;
|
|
|
|
|
let mockPersistentStore: {
|
|
|
|
|
value: TypographySettings;
|
|
|
|
@@ -86,7 +86,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Initialization', () => {
|
|
|
|
|
it('creates manager with default values from storage', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -106,7 +106,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
};
|
|
|
|
|
mockPersistentStore = createMockPersistentStore(mockStorage);
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -118,7 +118,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('initializes font size control with base size multiplied by current multiplier (1)', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -127,7 +127,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('returns all controls via controls getter', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -143,7 +143,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('returns individual controls via specific getters', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -161,7 +161,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('control instances have expected interface', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -180,7 +180,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Multiplier System', () => {
|
|
|
|
|
it('has default multiplier of 1', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -189,7 +189,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates multiplier when set', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -202,7 +202,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('does not update multiplier if set to same value', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -218,7 +218,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
|
|
|
|
|
mockPersistentStore = createMockPersistentStore(mockStorage);
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -242,7 +242,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates font size control display value when multiplier increases', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -263,7 +263,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Base Size Setter', () => {
|
|
|
|
|
it('updates baseSize when set directly', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -274,7 +274,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates size control value when baseSize is set', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -285,7 +285,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('applies multiplier to size control when baseSize is set', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -299,7 +299,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Rendered Size Calculation', () => {
|
|
|
|
|
it('calculates renderedSize as baseSize * multiplier', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -308,7 +308,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates renderedSize when multiplier changes', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -321,7 +321,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates renderedSize when baseSize changes', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -341,7 +341,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
// 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(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -356,7 +356,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('updates baseSize via direct setter (synchronous)', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -381,7 +381,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
};
|
|
|
|
|
mockPersistentStore = createMockPersistentStore(mockStorage);
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -394,7 +394,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('syncs to storage after effect flush (async)', async () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -410,7 +410,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('syncs control changes to storage after effect flush (async)', async () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -423,7 +423,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('syncs height control changes to storage after effect flush (async)', async () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -435,7 +435,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('syncs spacing control changes to storage after effect flush (async)', async () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -449,7 +449,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Control Value Getters', () => {
|
|
|
|
|
it('returns current weight value', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -461,7 +461,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('returns current height value', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -473,7 +473,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('returns current spacing value', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -486,7 +486,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
it('returns default value when control is not found', () => {
|
|
|
|
|
// Create a manager with empty configs (no controls)
|
|
|
|
|
const manager = new TypographySettingsManager([], mockPersistentStore);
|
|
|
|
|
const manager = new TypographySettingsStore([], mockPersistentStore);
|
|
|
|
|
|
|
|
|
|
expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
|
|
|
|
|
expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
|
|
|
|
@@ -504,7 +504,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
};
|
|
|
|
|
mockPersistentStore = createMockPersistentStore(mockStorage);
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -537,7 +537,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
clear: clearSpy,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -548,7 +548,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('respects multiplier when resetting font size control', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -566,7 +566,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
|
|
|
|
|
describe('Complex Scenarios', () => {
|
|
|
|
|
it('handles changing multiplier then modifying baseSize', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -587,7 +587,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('maintains correct renderedSize throughout changes', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -609,7 +609,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles multiple control changes in sequence', async () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -634,7 +634,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
|
|
|
|
|
mockPersistentStore = createMockPersistentStore(mockStorage);
|
|
|
|
|
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -646,7 +646,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles very small multiplier', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -659,7 +659,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles large base size with multiplier', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -672,7 +672,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles floating point precision in multiplier', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -691,7 +691,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles control methods (increase/decrease)', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|
|
|
|
@@ -705,7 +705,7 @@ describe('TypographySettingsManager - Unit Tests', () => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('handles control boundary conditions', () => {
|
|
|
|
|
const manager = new TypographySettingsManager(
|
|
|
|
|
const manager = new TypographySettingsStore(
|
|
|
|
|
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
|
|
|
|
|
mockPersistentStore,
|
|
|
|
|
);
|