refactor(font): move test fixtures into a dedicated testing segment
Mock data lived in lib/ and was re-exported through the slice's production index.ts, advertising fixtures as part of the public API. Move it to a testing/ segment and drop it from index.ts; consumers now import explicitly via the $entities/Font/testing subpath. Repoints the four mock consumers (FontApplicator story, sizeResolver and fontCatalogStore specs, comparisonStore test) to the new subpath.
This commit is contained in:
Ilia Mashkov
@@ -1,49 +1,5 @@
|
||||
export { getFontUrl } from './getFontUrl/getFontUrl';
|
||||
|
||||
// Mock data helpers for Storybook and testing
|
||||
export {
|
||||
createCategoriesFilter,
|
||||
createErrorState,
|
||||
createGenericFilter,
|
||||
createLoadingState,
|
||||
createMockComparisonStore,
|
||||
// Filter mocks
|
||||
createMockFilter,
|
||||
createMockFontApiResponse,
|
||||
createMockFontStoreState,
|
||||
// Store mocks
|
||||
createMockQueryState,
|
||||
createMockReactiveState,
|
||||
createMockStore,
|
||||
createProvidersFilter,
|
||||
createSubsetsFilter,
|
||||
createSuccessState,
|
||||
generateMixedCategoryFonts,
|
||||
generateMockFonts,
|
||||
generatePaginatedFonts,
|
||||
generateSequentialFilter,
|
||||
GENERIC_FILTERS,
|
||||
getAllMockFonts,
|
||||
getFontsByCategory,
|
||||
getFontsByProvider,
|
||||
MOCK_FILTERS,
|
||||
MOCK_FILTERS_ALL_SELECTED,
|
||||
MOCK_FILTERS_EMPTY,
|
||||
MOCK_FILTERS_SELECTED,
|
||||
MOCK_FONT_STORE_STATES,
|
||||
MOCK_STORES,
|
||||
type MockFilterOptions,
|
||||
type MockFilters,
|
||||
type MockFontStoreState,
|
||||
// Font mocks
|
||||
// Types
|
||||
type MockQueryObserverResult,
|
||||
type MockQueryState,
|
||||
mockUnifiedFont,
|
||||
type MockUnifiedFontOptions,
|
||||
UNIFIED_FONTS,
|
||||
} from './mocks';
|
||||
|
||||
export {
|
||||
FontNetworkError,
|
||||
FontResponseError,
|
||||
|
||||
@@ -1,289 +0,0 @@
|
||||
import type {
|
||||
FontCategory,
|
||||
FontProvider,
|
||||
FontSubset,
|
||||
} from '$entities/Font/model/types';
|
||||
import type { Property } from '$shared/lib';
|
||||
import { createFilter } from '$shared/lib';
|
||||
|
||||
/**
|
||||
* Options for creating a mock filter
|
||||
*/
|
||||
export interface MockFilterOptions {
|
||||
/**
|
||||
* Initial set of properties for the mock filter
|
||||
*/
|
||||
properties: Property<string>[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset mock filters for font filtering
|
||||
*/
|
||||
export interface MockFilters {
|
||||
/**
|
||||
* Provider filter (Google, Fontshare)
|
||||
*/
|
||||
providers: ReturnType<typeof createFilter<'google' | 'fontshare'>>;
|
||||
/**
|
||||
* Category filter (sans-serif, serif, display, etc.)
|
||||
*/
|
||||
categories: ReturnType<typeof createFilter<FontCategory>>;
|
||||
/**
|
||||
* Subset filter (latin, latin-ext, cyrillic, etc.)
|
||||
*/
|
||||
subsets: ReturnType<typeof createFilter<FontSubset>>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unified categories (combines both providers)
|
||||
*/
|
||||
export const UNIFIED_CATEGORIES: Property<FontCategory>[] = [
|
||||
{ id: 'sans-serif', name: 'Sans Serif', value: 'sans-serif' },
|
||||
{ id: 'serif', name: 'Serif', value: 'serif' },
|
||||
{ id: 'display', name: 'Display', value: 'display' },
|
||||
{ id: 'handwriting', name: 'Handwriting', value: 'handwriting' },
|
||||
{ id: 'monospace', name: 'Monospace', value: 'monospace' },
|
||||
{ id: 'slab', name: 'Slab', value: 'slab' },
|
||||
{ id: 'script', name: 'Script', value: 'script' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Common font subsets
|
||||
*/
|
||||
export const FONT_SUBSETS: Property<FontSubset>[] = [
|
||||
{ id: 'latin', name: 'Latin', value: 'latin' },
|
||||
{ id: 'latin-ext', name: 'Latin Extended', value: 'latin-ext' },
|
||||
{ id: 'cyrillic', name: 'Cyrillic', value: 'cyrillic' },
|
||||
{ id: 'greek', name: 'Greek', value: 'greek' },
|
||||
{ id: 'arabic', name: 'Arabic', value: 'arabic' },
|
||||
{ id: 'devanagari', name: 'Devanagari', value: 'devanagari' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Font providers
|
||||
*/
|
||||
export const FONT_PROVIDERS: Property<FontProvider>[] = [
|
||||
{ id: 'google', name: 'Google Fonts', value: 'google' },
|
||||
{ id: 'fontshare', name: 'Fontshare', value: 'fontshare' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Create a mock filter from properties
|
||||
*/
|
||||
export function createMockFilter<TValue extends string>(
|
||||
options: MockFilterOptions & { properties: Property<TValue>[] },
|
||||
) {
|
||||
return createFilter<TValue>(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock filter for categories
|
||||
*/
|
||||
export function createCategoriesFilter(options?: { selected?: FontCategory[] }) {
|
||||
const properties = UNIFIED_CATEGORIES.map(cat => ({
|
||||
...cat,
|
||||
selected: options?.selected?.includes(cat.value) ?? false,
|
||||
}));
|
||||
return createFilter<FontCategory>({ properties });
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock filter for subsets
|
||||
*/
|
||||
export function createSubsetsFilter(options?: { selected?: FontSubset[] }) {
|
||||
const properties = FONT_SUBSETS.map(subset => ({
|
||||
...subset,
|
||||
selected: options?.selected?.includes(subset.value) ?? false,
|
||||
}));
|
||||
return createFilter<FontSubset>({ properties });
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock filter for providers
|
||||
*/
|
||||
export function createProvidersFilter(options?: { selected?: FontProvider[] }) {
|
||||
const properties = FONT_PROVIDERS.map(provider => ({
|
||||
...provider,
|
||||
selected: options?.selected?.includes(provider.value) ?? false,
|
||||
}));
|
||||
return createFilter<FontProvider>({ properties });
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset mock filters - use these directly in stories
|
||||
*/
|
||||
export const MOCK_FILTERS: MockFilters = {
|
||||
providers: createFilter({
|
||||
properties: FONT_PROVIDERS,
|
||||
}),
|
||||
categories: createFilter({
|
||||
properties: UNIFIED_CATEGORIES,
|
||||
}),
|
||||
subsets: createFilter({
|
||||
properties: FONT_SUBSETS,
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Preset filters with some items selected
|
||||
*/
|
||||
export const MOCK_FILTERS_SELECTED: MockFilters = {
|
||||
providers: createFilter({
|
||||
properties: [
|
||||
{ ...FONT_PROVIDERS[0], selected: true },
|
||||
{ ...FONT_PROVIDERS[1] },
|
||||
],
|
||||
}),
|
||||
categories: createFilter({
|
||||
properties: [
|
||||
{ ...UNIFIED_CATEGORIES[0], selected: true },
|
||||
{ ...UNIFIED_CATEGORIES[1], selected: true },
|
||||
{ ...UNIFIED_CATEGORIES[2] },
|
||||
{ ...UNIFIED_CATEGORIES[3] },
|
||||
{ ...UNIFIED_CATEGORIES[4] },
|
||||
],
|
||||
}),
|
||||
subsets: createFilter({
|
||||
properties: [
|
||||
{ ...FONT_SUBSETS[0], selected: true },
|
||||
{ ...FONT_SUBSETS[1] },
|
||||
{ ...FONT_SUBSETS[2] },
|
||||
{ ...FONT_SUBSETS[3] },
|
||||
{ ...FONT_SUBSETS[4] },
|
||||
],
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Empty filters (all properties, none selected)
|
||||
*/
|
||||
export const MOCK_FILTERS_EMPTY: MockFilters = {
|
||||
providers: createFilter({
|
||||
properties: FONT_PROVIDERS.map(p => ({ ...p, selected: false })),
|
||||
}),
|
||||
categories: createFilter({
|
||||
properties: UNIFIED_CATEGORIES.map(c => ({ ...c, selected: false })),
|
||||
}),
|
||||
subsets: createFilter({
|
||||
properties: FONT_SUBSETS.map(s => ({ ...s, selected: false })),
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* All selected filters
|
||||
*/
|
||||
export const MOCK_FILTERS_ALL_SELECTED: MockFilters = {
|
||||
providers: createFilter({
|
||||
properties: FONT_PROVIDERS.map(p => ({ ...p, selected: true })),
|
||||
}),
|
||||
categories: createFilter({
|
||||
properties: UNIFIED_CATEGORIES.map(c => ({ ...c, selected: true })),
|
||||
}),
|
||||
subsets: createFilter({
|
||||
properties: FONT_SUBSETS.map(s => ({ ...s, selected: true })),
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a mock filter with generic string properties
|
||||
* Useful for testing generic filter components
|
||||
*/
|
||||
export function createGenericFilter(
|
||||
items: Array<{ id: string; name: string; selected?: boolean }>,
|
||||
options?: { selected?: string[] },
|
||||
) {
|
||||
const properties = items.map(item => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
value: item.id,
|
||||
selected: options?.selected?.includes(item.id) ?? item.selected ?? false,
|
||||
}));
|
||||
return createFilter({ properties });
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset generic filters for testing
|
||||
*/
|
||||
export const GENERIC_FILTERS = {
|
||||
/**
|
||||
* Small filter with 3 items
|
||||
*/
|
||||
small: createFilter({
|
||||
properties: [
|
||||
{ id: 'option-1', name: 'Option 1', value: 'option-1' },
|
||||
{ id: 'option-2', name: 'Option 2', value: 'option-2' },
|
||||
{ id: 'option-3', name: 'Option 3', value: 'option-3' },
|
||||
],
|
||||
}),
|
||||
/**
|
||||
* Medium filter with 6 items
|
||||
*/
|
||||
medium: createFilter({
|
||||
properties: [
|
||||
{ id: 'alpha', name: 'Alpha', value: 'alpha' },
|
||||
{ id: 'beta', name: 'Beta', value: 'beta' },
|
||||
{ id: 'gamma', name: 'Gamma', value: 'gamma' },
|
||||
{ id: 'delta', name: 'Delta', value: 'delta' },
|
||||
{ id: 'epsilon', name: 'Epsilon', value: 'epsilon' },
|
||||
{ id: 'zeta', name: 'Zeta', value: 'zeta' },
|
||||
],
|
||||
}),
|
||||
/**
|
||||
* Large filter with 12 items
|
||||
*/
|
||||
large: createFilter({
|
||||
properties: [
|
||||
{ id: 'jan', name: 'January', value: 'jan' },
|
||||
{ id: 'feb', name: 'February', value: 'feb' },
|
||||
{ id: 'mar', name: 'March', value: 'mar' },
|
||||
{ id: 'apr', name: 'April', value: 'apr' },
|
||||
{ id: 'may', name: 'May', value: 'may' },
|
||||
{ id: 'jun', name: 'June', value: 'jun' },
|
||||
{ id: 'jul', name: 'July', value: 'jul' },
|
||||
{ id: 'aug', name: 'August', value: 'aug' },
|
||||
{ id: 'sep', name: 'September', value: 'sep' },
|
||||
{ id: 'oct', name: 'October', value: 'oct' },
|
||||
{ id: 'nov', name: 'November', value: 'nov' },
|
||||
{ id: 'dec', name: 'December', value: 'dec' },
|
||||
],
|
||||
}),
|
||||
/**
|
||||
* Filter with some pre-selected items
|
||||
*/
|
||||
partial: createFilter({
|
||||
properties: [
|
||||
{ id: 'red', name: 'Red', value: 'red', selected: true },
|
||||
{ id: 'blue', name: 'Blue', value: 'blue', selected: false },
|
||||
{ id: 'green', name: 'Green', value: 'green', selected: true },
|
||||
{ id: 'yellow', name: 'Yellow', value: 'yellow', selected: false },
|
||||
],
|
||||
}),
|
||||
/**
|
||||
* Filter with all items selected
|
||||
*/
|
||||
allSelected: createFilter({
|
||||
properties: [
|
||||
{ id: 'cat', name: 'Cat', value: 'cat', selected: true },
|
||||
{ id: 'dog', name: 'Dog', value: 'dog', selected: true },
|
||||
{ id: 'bird', name: 'Bird', value: 'bird', selected: true },
|
||||
],
|
||||
}),
|
||||
/**
|
||||
* Empty filter (no items)
|
||||
*/
|
||||
empty: createFilter({
|
||||
properties: [],
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate a filter with sequential items
|
||||
*/
|
||||
export function generateSequentialFilter(count: number, prefix = 'Item ') {
|
||||
const properties = Array.from({ length: count }, (_, i) => ({
|
||||
id: `item-${i + 1}`,
|
||||
name: `${prefix}${i + 1}`,
|
||||
value: `item-${i + 1}`,
|
||||
}));
|
||||
return createFilter({ properties });
|
||||
}
|
||||
@@ -1,292 +0,0 @@
|
||||
/**
|
||||
* ============================================================================
|
||||
* MOCK FONT DATA
|
||||
* ============================================================================
|
||||
*
|
||||
* Factory functions and preset mock data for fonts.
|
||||
* Used in Storybook stories, tests, and development.
|
||||
*
|
||||
* ## Usage
|
||||
*
|
||||
* ```ts
|
||||
* import {
|
||||
* mockGoogleFont,
|
||||
* mockFontshareFont,
|
||||
* mockUnifiedFont,
|
||||
* GOOGLE_FONTS,
|
||||
* FONTHARE_FONTS,
|
||||
* UNIFIED_FONTS,
|
||||
* } from '$entities/Font/lib/mocks';
|
||||
*
|
||||
* // Create a mock Google Font
|
||||
* const roboto = mockGoogleFont({ family: 'Roboto', category: 'sans-serif' });
|
||||
*
|
||||
* // Create a mock Fontshare font
|
||||
* const satoshi = mockFontshareFont({ name: 'Satoshi', slug: 'satoshi' });
|
||||
*
|
||||
* // Create a mock UnifiedFont
|
||||
* const font = mockUnifiedFont({ id: 'roboto', name: 'Roboto' });
|
||||
*
|
||||
* // Use preset fonts
|
||||
* import { UNIFIED_FONTS } from '$entities/Font/lib/mocks';
|
||||
* ```
|
||||
*/
|
||||
|
||||
import type {
|
||||
FontCategory,
|
||||
FontProvider,
|
||||
FontSubset,
|
||||
FontVariant,
|
||||
} from '$entities/Font/model/types';
|
||||
import type {
|
||||
FontFeatures,
|
||||
FontMetadata,
|
||||
FontStyleUrls,
|
||||
UnifiedFont,
|
||||
} from '$entities/Font/model/types';
|
||||
|
||||
// UNIFIED FONT MOCKS
|
||||
|
||||
/**
|
||||
* Options for creating a mock UnifiedFont
|
||||
*/
|
||||
export interface MockUnifiedFontOptions {
|
||||
/**
|
||||
* Unique identifier (default: derived from name)
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* Font display name (default: 'Mock Font')
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* Font provider (default: 'google')
|
||||
*/
|
||||
provider?: FontProvider;
|
||||
/**
|
||||
* Font category (default: 'sans-serif')
|
||||
*/
|
||||
category?: FontCategory;
|
||||
/**
|
||||
* Font subsets (default: ['latin'])
|
||||
*/
|
||||
subsets?: FontSubset[];
|
||||
/**
|
||||
* Font variants (default: ['regular', '700', 'italic', '700italic'])
|
||||
*/
|
||||
variants?: FontVariant[];
|
||||
/**
|
||||
* Style URLs (if not provided, mock URLs are generated)
|
||||
*/
|
||||
styles?: FontStyleUrls;
|
||||
/**
|
||||
* Metadata overrides
|
||||
*/
|
||||
metadata?: Partial<FontMetadata>;
|
||||
/**
|
||||
* Features overrides
|
||||
*/
|
||||
features?: Partial<FontFeatures>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default mock UnifiedFont
|
||||
*/
|
||||
export function mockUnifiedFont(options: MockUnifiedFontOptions = {}): UnifiedFont {
|
||||
const {
|
||||
id,
|
||||
name = 'Mock Font',
|
||||
provider = 'google',
|
||||
category = 'sans-serif',
|
||||
subsets = ['latin'],
|
||||
variants = ['regular', '700', 'italic', '700italic'],
|
||||
styles,
|
||||
metadata,
|
||||
features,
|
||||
} = options;
|
||||
|
||||
const fontId = id ?? name.toLowerCase().replace(/\s+/g, '');
|
||||
const baseUrl = provider === 'google'
|
||||
? `https://fonts.gstatic.com/s/${fontId}/v30`
|
||||
: `//cdn.fontshare.com/wf/${fontId}`;
|
||||
|
||||
return {
|
||||
id: fontId,
|
||||
name,
|
||||
provider,
|
||||
category,
|
||||
subsets,
|
||||
variants: variants as FontVariant[],
|
||||
styles: styles ?? {
|
||||
regular: `${baseUrl}/regular.woff2`,
|
||||
bold: `${baseUrl}/bold.woff2`,
|
||||
italic: `${baseUrl}/italic.woff2`,
|
||||
boldItalic: `${baseUrl}/bolditalic.woff2`,
|
||||
},
|
||||
metadata: {
|
||||
cachedAt: Date.now(),
|
||||
version: '1.0',
|
||||
lastModified: new Date().toISOString().split('T')[0],
|
||||
popularity: 1,
|
||||
...metadata,
|
||||
},
|
||||
features: {
|
||||
isVariable: false,
|
||||
...features,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset UnifiedFont mocks
|
||||
*/
|
||||
export const UNIFIED_FONTS: Record<string, UnifiedFont> = {
|
||||
roboto: mockUnifiedFont({
|
||||
id: 'roboto',
|
||||
name: 'Roboto',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin', 'latin-ext'],
|
||||
variants: ['100', '300', '400', '500', '700', '900'],
|
||||
metadata: { popularity: 1 },
|
||||
}),
|
||||
openSans: mockUnifiedFont({
|
||||
id: 'open-sans',
|
||||
name: 'Open Sans',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin', 'latin-ext'],
|
||||
variants: ['300', '400', '500', '600', '700', '800'],
|
||||
metadata: { popularity: 2 },
|
||||
}),
|
||||
lato: mockUnifiedFont({
|
||||
id: 'lato',
|
||||
name: 'Lato',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin', 'latin-ext'],
|
||||
variants: ['100', '300', '400', '700', '900'],
|
||||
metadata: { popularity: 3 },
|
||||
}),
|
||||
playfairDisplay: mockUnifiedFont({
|
||||
id: 'playfair-display',
|
||||
name: 'Playfair Display',
|
||||
provider: 'google',
|
||||
category: 'serif',
|
||||
subsets: ['latin'],
|
||||
variants: ['400', '700', '900'],
|
||||
metadata: { popularity: 10 },
|
||||
}),
|
||||
montserrat: mockUnifiedFont({
|
||||
id: 'montserrat',
|
||||
name: 'Montserrat',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin', 'latin-ext'],
|
||||
variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
|
||||
metadata: { popularity: 4 },
|
||||
}),
|
||||
satoshi: mockUnifiedFont({
|
||||
id: 'satoshi',
|
||||
name: 'Satoshi',
|
||||
provider: 'fontshare',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin'],
|
||||
variants: ['regular', 'bold', 'italic', 'bolditalic'] as FontVariant[],
|
||||
features: { isVariable: true, axes: [{ name: 'wght', property: 'wght', default: 400, min: 300, max: 700 }] },
|
||||
metadata: { popularity: 15000 },
|
||||
}),
|
||||
generalSans: mockUnifiedFont({
|
||||
id: 'general-sans',
|
||||
name: 'General Sans',
|
||||
provider: 'fontshare',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin'],
|
||||
variants: ['regular', 'bold', 'italic', 'bolditalic'] as FontVariant[],
|
||||
features: { isVariable: true },
|
||||
metadata: { popularity: 12000 },
|
||||
}),
|
||||
clashDisplay: mockUnifiedFont({
|
||||
id: 'clash-display',
|
||||
name: 'Clash Display',
|
||||
provider: 'fontshare',
|
||||
category: 'display',
|
||||
subsets: ['latin'],
|
||||
variants: ['regular', '500', '600', 'bold'] as FontVariant[],
|
||||
features: { tags: ['Headlines', 'Posters', 'Branding'] },
|
||||
metadata: { popularity: 8000 },
|
||||
}),
|
||||
oswald: mockUnifiedFont({
|
||||
id: 'oswald',
|
||||
name: 'Oswald',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin'],
|
||||
variants: ['200', '300', '400', '500', '600', '700'],
|
||||
metadata: { popularity: 6 },
|
||||
}),
|
||||
raleway: mockUnifiedFont({
|
||||
id: 'raleway',
|
||||
name: 'Raleway',
|
||||
provider: 'google',
|
||||
category: 'sans-serif',
|
||||
subsets: ['latin'],
|
||||
variants: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
|
||||
metadata: { popularity: 7 },
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Get an array of all preset UnifiedFonts
|
||||
*/
|
||||
export function getAllMockFonts(): UnifiedFont[] {
|
||||
return Object.values(UNIFIED_FONTS);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get fonts by provider
|
||||
*/
|
||||
export function getFontsByProvider(provider: FontProvider): UnifiedFont[] {
|
||||
return getAllMockFonts().filter(font => font.provider === provider);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get fonts by category
|
||||
*/
|
||||
export function getFontsByCategory(category: FontCategory): UnifiedFont[] {
|
||||
return getAllMockFonts().filter(font => font.category === category);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate an array of mock fonts with sequential naming
|
||||
*/
|
||||
export function generateMockFonts(count: number, options?: Omit<MockUnifiedFontOptions, 'id' | 'name'>): UnifiedFont[] {
|
||||
return Array.from({ length: count }, (_, i) =>
|
||||
mockUnifiedFont({
|
||||
...options,
|
||||
id: `mock-font-${i + 1}`,
|
||||
name: `Mock Font ${i + 1}`,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate an array of mock fonts with different categories
|
||||
*/
|
||||
export function generateMixedCategoryFonts(countPerCategory: number = 2): UnifiedFont[] {
|
||||
const categories: FontCategory[] = ['sans-serif', 'serif', 'display', 'handwriting', 'monospace'];
|
||||
const fonts: UnifiedFont[] = [];
|
||||
|
||||
categories.forEach(category => {
|
||||
for (let i = 0; i < countPerCategory; i++) {
|
||||
fonts.push(
|
||||
mockUnifiedFont({
|
||||
id: `${category}-${i + 1}`,
|
||||
name: `${category.replace('-', ' ')} ${i + 1}`,
|
||||
category,
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return fonts;
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
/**
|
||||
* ============================================================================
|
||||
* MOCK DATA HELPERS - MAIN EXPORT
|
||||
* ============================================================================
|
||||
*
|
||||
* Comprehensive mock data for Storybook stories, tests, and development.
|
||||
*
|
||||
* ## Quick Start
|
||||
*
|
||||
* ```ts
|
||||
* import {
|
||||
* mockUnifiedFont,
|
||||
* UNIFIED_FONTS,
|
||||
* MOCK_FILTERS,
|
||||
* createMockFontStoreState,
|
||||
* } from '$entities/Font/lib/mocks';
|
||||
*
|
||||
* // Use in stories
|
||||
* const font = mockUnifiedFont({ name: 'My Font', category: 'serif' });
|
||||
* const presets = UNIFIED_FONTS;
|
||||
* const filter = MOCK_FILTERS.categories;
|
||||
* ```
|
||||
*
|
||||
* @module
|
||||
*/
|
||||
|
||||
// Font mocks
|
||||
export {
|
||||
generateMixedCategoryFonts,
|
||||
generateMockFonts,
|
||||
getAllMockFonts,
|
||||
getFontsByCategory,
|
||||
getFontsByProvider,
|
||||
mockUnifiedFont,
|
||||
type MockUnifiedFontOptions,
|
||||
UNIFIED_FONTS,
|
||||
} from './fonts.mock';
|
||||
|
||||
// Filter mocks
|
||||
export {
|
||||
createCategoriesFilter,
|
||||
createGenericFilter,
|
||||
createMockFilter,
|
||||
createProvidersFilter,
|
||||
createSubsetsFilter,
|
||||
FONT_PROVIDERS,
|
||||
FONT_SUBSETS,
|
||||
generateSequentialFilter,
|
||||
GENERIC_FILTERS,
|
||||
MOCK_FILTERS,
|
||||
MOCK_FILTERS_ALL_SELECTED,
|
||||
MOCK_FILTERS_EMPTY,
|
||||
MOCK_FILTERS_SELECTED,
|
||||
type MockFilterOptions,
|
||||
type MockFilters,
|
||||
UNIFIED_CATEGORIES,
|
||||
} from './filters.mock';
|
||||
|
||||
// Store mocks
|
||||
export {
|
||||
createErrorState,
|
||||
createLoadingState,
|
||||
createMockComparisonStore,
|
||||
createMockFontApiResponse,
|
||||
createMockFontStoreState,
|
||||
createMockQueryState,
|
||||
createMockReactiveState,
|
||||
createMockStore,
|
||||
createSuccessState,
|
||||
generatePaginatedFonts,
|
||||
MOCK_FONT_STORE_STATES,
|
||||
MOCK_STORES,
|
||||
type MockFontStoreState,
|
||||
type MockQueryObserverResult,
|
||||
type MockQueryState,
|
||||
} from './stores.mock';
|
||||
@@ -1,965 +0,0 @@
|
||||
/**
|
||||
* Factory functions and preset mock data for TanStack Query stores and state management.
|
||||
* Used in Storybook stories for components that use reactive stores.
|
||||
*
|
||||
* ## Usage
|
||||
*
|
||||
* ```ts
|
||||
* import {
|
||||
* createMockQueryState,
|
||||
* MOCK_STORES,
|
||||
* } from '$entities/Font/lib/mocks';
|
||||
*
|
||||
* // Create a mock query state
|
||||
* const loadingState = createMockQueryState({ status: 'pending' });
|
||||
* const errorState = createMockQueryState({ status: 'error', error: 'Failed to load' });
|
||||
* const successState = createMockQueryState({ status: 'success', data: mockFonts });
|
||||
*
|
||||
* // Use preset stores
|
||||
* const mockFontStore = createMockFontStore();
|
||||
* ```
|
||||
*/
|
||||
|
||||
import type { UnifiedFont } from '$entities/Font/model/types';
|
||||
import type {
|
||||
QueryKey,
|
||||
QueryObserverResult,
|
||||
QueryStatus,
|
||||
} from '@tanstack/svelte-query';
|
||||
import {
|
||||
UNIFIED_FONTS,
|
||||
generateMockFonts,
|
||||
} from './fonts.mock';
|
||||
|
||||
/**
|
||||
* Mock TanStack Query state
|
||||
*/
|
||||
export interface MockQueryState<TData = unknown, TError = Error> {
|
||||
/**
|
||||
* Primary query status (pending, success, error)
|
||||
*/
|
||||
status: QueryStatus;
|
||||
/**
|
||||
* Payload data (present on success)
|
||||
*/
|
||||
data?: TData;
|
||||
/**
|
||||
* Caught error object (present on error)
|
||||
*/
|
||||
error?: TError;
|
||||
/**
|
||||
* True if initial load is in progress
|
||||
*/
|
||||
isLoading?: boolean;
|
||||
/**
|
||||
* True if background fetch is in progress
|
||||
*/
|
||||
isFetching?: boolean;
|
||||
/**
|
||||
* True if query resolved successfully
|
||||
*/
|
||||
isSuccess?: boolean;
|
||||
/**
|
||||
* True if query failed
|
||||
*/
|
||||
isError?: boolean;
|
||||
/**
|
||||
* True if query is waiting to be executed
|
||||
*/
|
||||
isPending?: boolean;
|
||||
/**
|
||||
* Timestamp of last successful data retrieval
|
||||
*/
|
||||
dataUpdatedAt?: number;
|
||||
/**
|
||||
* Timestamp of last recorded error
|
||||
*/
|
||||
errorUpdatedAt?: number;
|
||||
/**
|
||||
* Total number of consecutive failures
|
||||
*/
|
||||
failureCount?: number;
|
||||
/**
|
||||
* Detailed reason for the last failure
|
||||
*/
|
||||
failureReason?: TError;
|
||||
/**
|
||||
* Number of times an error has been caught
|
||||
*/
|
||||
errorUpdateCount?: number;
|
||||
/**
|
||||
* True if currently refetching in background
|
||||
*/
|
||||
isRefetching?: boolean;
|
||||
/**
|
||||
* True if refetch attempt failed
|
||||
*/
|
||||
isRefetchError?: boolean;
|
||||
/**
|
||||
* True if query is paused (e.g. offline)
|
||||
*/
|
||||
isPaused?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock TanStack Query observer result
|
||||
*/
|
||||
export interface MockQueryObserverResult<TData = unknown, TError = Error> {
|
||||
/**
|
||||
* Current observer status
|
||||
*/
|
||||
status?: QueryStatus;
|
||||
/**
|
||||
* Cached or active data payload
|
||||
*/
|
||||
data?: TData;
|
||||
/**
|
||||
* Caught error from the observer
|
||||
*/
|
||||
error?: TError;
|
||||
/**
|
||||
* Loading flag for the observer
|
||||
*/
|
||||
isLoading?: boolean;
|
||||
/**
|
||||
* Fetching flag for the observer
|
||||
*/
|
||||
isFetching?: boolean;
|
||||
/**
|
||||
* Success flag for the observer
|
||||
*/
|
||||
isSuccess?: boolean;
|
||||
/**
|
||||
* Error flag for the observer
|
||||
*/
|
||||
isError?: boolean;
|
||||
/**
|
||||
* Pending flag for the observer
|
||||
*/
|
||||
isPending?: boolean;
|
||||
/**
|
||||
* Last update time for data
|
||||
*/
|
||||
dataUpdatedAt?: number;
|
||||
/**
|
||||
* Last update time for error
|
||||
*/
|
||||
errorUpdatedAt?: number;
|
||||
/**
|
||||
* Consecutive failure count
|
||||
*/
|
||||
failureCount?: number;
|
||||
/**
|
||||
* Failure reason object
|
||||
*/
|
||||
failureReason?: TError;
|
||||
/**
|
||||
* Error count for the observer
|
||||
*/
|
||||
errorUpdateCount?: number;
|
||||
/**
|
||||
* Refetching flag
|
||||
*/
|
||||
isRefetching?: boolean;
|
||||
/**
|
||||
* Refetch error flag
|
||||
*/
|
||||
isRefetchError?: boolean;
|
||||
/**
|
||||
* Paused flag
|
||||
*/
|
||||
isPaused?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock query state for TanStack Query
|
||||
*/
|
||||
export function createMockQueryState<TData = unknown, TError = Error>(
|
||||
options: MockQueryState<TData, TError>,
|
||||
): MockQueryObserverResult<TData, TError> {
|
||||
const {
|
||||
status,
|
||||
data,
|
||||
error,
|
||||
} = options;
|
||||
|
||||
return {
|
||||
status: status ?? 'success',
|
||||
data,
|
||||
error,
|
||||
isLoading: status === 'pending' ? true : false,
|
||||
isFetching: status === 'pending' ? true : false,
|
||||
isSuccess: status === 'success',
|
||||
isError: status === 'error',
|
||||
isPending: status === 'pending',
|
||||
dataUpdatedAt: status === 'success' ? Date.now() : undefined,
|
||||
errorUpdatedAt: status === 'error' ? Date.now() : undefined,
|
||||
failureCount: status === 'error' ? 1 : 0,
|
||||
failureReason: status === 'error' ? error : undefined,
|
||||
errorUpdateCount: status === 'error' ? 1 : 0,
|
||||
isRefetching: false,
|
||||
isRefetchError: false,
|
||||
isPaused: false,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a loading query state
|
||||
*/
|
||||
export function createLoadingState<TData = unknown>(): MockQueryObserverResult<TData> {
|
||||
return createMockQueryState<TData>({ status: 'pending', data: undefined, error: undefined });
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an error query state
|
||||
*/
|
||||
export function createErrorState<TError = Error>(
|
||||
error: TError,
|
||||
): MockQueryObserverResult<unknown, TError> {
|
||||
return createMockQueryState<unknown, TError>({ status: 'error', data: undefined, error });
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a success query state
|
||||
*/
|
||||
export function createSuccessState<TData>(data: TData): MockQueryObserverResult<TData> {
|
||||
return createMockQueryState<TData>({ status: 'success', data, error: undefined });
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock UnifiedFontStore state
|
||||
*/
|
||||
export interface MockFontStoreState {
|
||||
/**
|
||||
* Map of mock fonts indexed by ID
|
||||
*/
|
||||
fonts: Record<string, UnifiedFont>;
|
||||
/**
|
||||
* Currently active page number
|
||||
*/
|
||||
page: number;
|
||||
/**
|
||||
* Total number of pages calculated from limit
|
||||
*/
|
||||
totalPages: number;
|
||||
/**
|
||||
* Number of items per page
|
||||
*/
|
||||
limit: number;
|
||||
/**
|
||||
* Total number of available fonts
|
||||
*/
|
||||
total: number;
|
||||
/**
|
||||
* Store-level loading status
|
||||
*/
|
||||
isLoading: boolean;
|
||||
/**
|
||||
* Caught error object
|
||||
*/
|
||||
error: Error | null;
|
||||
/**
|
||||
* Mock search filter string
|
||||
*/
|
||||
searchQuery: string;
|
||||
/**
|
||||
* Mock provider filter selection
|
||||
*/
|
||||
provider: 'google' | 'fontshare' | 'all';
|
||||
/**
|
||||
* Mock category filter selection
|
||||
*/
|
||||
category: string | null;
|
||||
/**
|
||||
* Mock subset filter selection
|
||||
*/
|
||||
subset: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a mock font store state
|
||||
*/
|
||||
export function createMockFontStoreState(
|
||||
options: Partial<MockFontStoreState> = {},
|
||||
): MockFontStoreState {
|
||||
const {
|
||||
page = 1,
|
||||
limit = 24,
|
||||
isLoading = false,
|
||||
error = null,
|
||||
searchQuery = '',
|
||||
provider = 'all',
|
||||
category = null,
|
||||
subset = null,
|
||||
} = options;
|
||||
|
||||
// Generate mock fonts if not provided
|
||||
const mockFonts = options.fonts ?? Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS).map(font => [font.id, font]),
|
||||
);
|
||||
|
||||
const fontArray = Object.values(mockFonts);
|
||||
const total = options.total ?? fontArray.length;
|
||||
const totalPages = options.totalPages ?? Math.ceil(total / limit);
|
||||
|
||||
return {
|
||||
fonts: mockFonts,
|
||||
page,
|
||||
totalPages,
|
||||
limit,
|
||||
total,
|
||||
isLoading,
|
||||
error,
|
||||
searchQuery,
|
||||
provider,
|
||||
category,
|
||||
subset,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset font store states for UI testing
|
||||
*/
|
||||
export const MOCK_FONT_STORE_STATES = {
|
||||
/**
|
||||
* Initial loading state with no data
|
||||
*/
|
||||
loading: createMockFontStoreState({
|
||||
isLoading: true,
|
||||
fonts: {},
|
||||
total: 0,
|
||||
page: 1,
|
||||
}),
|
||||
|
||||
/**
|
||||
* State with no fonts matching filters
|
||||
*/
|
||||
empty: createMockFontStoreState({
|
||||
fonts: {},
|
||||
total: 0,
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* First page of results (10 items)
|
||||
*/
|
||||
firstPage: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS).slice(0, 10).map(font => [font.id, font]),
|
||||
),
|
||||
total: 50,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
totalPages: 5,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Second page of results (10 items)
|
||||
*/
|
||||
secondPage: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS).slice(10, 20).map(font => [font.id, font]),
|
||||
),
|
||||
total: 50,
|
||||
page: 2,
|
||||
limit: 10,
|
||||
totalPages: 5,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Final page of results (5 items)
|
||||
*/
|
||||
lastPage: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS).slice(0, 5).map(font => [font.id, font]),
|
||||
),
|
||||
total: 25,
|
||||
page: 3,
|
||||
limit: 10,
|
||||
totalPages: 3,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Terminal failure state
|
||||
*/
|
||||
error: createMockFontStoreState({
|
||||
fonts: {},
|
||||
error: new Error('Failed to load fonts'),
|
||||
total: 0,
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* State with active search query
|
||||
*/
|
||||
withSearch: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS).slice(0, 3).map(font => [font.id, font]),
|
||||
),
|
||||
total: 3,
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
searchQuery: 'Roboto',
|
||||
}),
|
||||
|
||||
/**
|
||||
* State with active category filter
|
||||
*/
|
||||
filteredByCategory: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS)
|
||||
.filter(f => f.category === 'serif')
|
||||
.slice(0, 5)
|
||||
.map(font => [font.id, font]),
|
||||
),
|
||||
total: 5,
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
category: 'serif',
|
||||
}),
|
||||
|
||||
/**
|
||||
* State with active provider filter
|
||||
*/
|
||||
filteredByProvider: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
Object.values(UNIFIED_FONTS)
|
||||
.filter(f => f.provider === 'google')
|
||||
.slice(0, 5)
|
||||
.map(font => [font.id, font]),
|
||||
),
|
||||
total: 5,
|
||||
page: 1,
|
||||
isLoading: false,
|
||||
provider: 'google',
|
||||
}),
|
||||
|
||||
/**
|
||||
* Large collection for performance testing (50 items)
|
||||
*/
|
||||
largeDataset: createMockFontStoreState({
|
||||
fonts: Object.fromEntries(
|
||||
generateMockFonts(50).map(font => [font.id, font]),
|
||||
),
|
||||
total: 500,
|
||||
page: 1,
|
||||
limit: 50,
|
||||
totalPages: 10,
|
||||
isLoading: false,
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a mock store object that mimics TanStack Query behavior
|
||||
* Useful for components that subscribe to store properties
|
||||
*/
|
||||
export function createMockStore<T>(config: {
|
||||
/**
|
||||
* Reactive data payload
|
||||
*/
|
||||
data?: T;
|
||||
/**
|
||||
* Loading status flag
|
||||
*/
|
||||
isLoading?: boolean;
|
||||
/**
|
||||
* Error status flag
|
||||
*/
|
||||
isError?: boolean;
|
||||
/**
|
||||
* Catch-all error object
|
||||
*/
|
||||
error?: Error;
|
||||
/**
|
||||
* Background fetching flag
|
||||
*/
|
||||
isFetching?: boolean;
|
||||
}) {
|
||||
const {
|
||||
data,
|
||||
isLoading = false,
|
||||
isError = false,
|
||||
error,
|
||||
isFetching = false,
|
||||
} = config;
|
||||
|
||||
return {
|
||||
/**
|
||||
* Returns the active data payload
|
||||
*/
|
||||
get data() {
|
||||
return data;
|
||||
},
|
||||
/**
|
||||
* True if initially loading
|
||||
*/
|
||||
get isLoading() {
|
||||
return isLoading;
|
||||
},
|
||||
/**
|
||||
* True if last request failed
|
||||
*/
|
||||
get isError() {
|
||||
return isError;
|
||||
},
|
||||
/**
|
||||
* Returns the caught error object
|
||||
*/
|
||||
get error() {
|
||||
return error;
|
||||
},
|
||||
/**
|
||||
* True if fetching in background
|
||||
*/
|
||||
get isFetching() {
|
||||
return isFetching;
|
||||
},
|
||||
/**
|
||||
* True if query is stable and has data
|
||||
*/
|
||||
get isSuccess() {
|
||||
return !isLoading && !isError && data !== undefined;
|
||||
},
|
||||
/**
|
||||
* Returns semantic status string
|
||||
*/
|
||||
get status() {
|
||||
if (isLoading) {
|
||||
return 'pending';
|
||||
}
|
||||
if (isError) {
|
||||
return 'error';
|
||||
}
|
||||
return 'success';
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Preset mock stores for common UI states
|
||||
*/
|
||||
export const MOCK_STORES = {
|
||||
/**
|
||||
* Initial loading state
|
||||
*/
|
||||
loadingFontStore: createMockStore<UnifiedFont[]>({
|
||||
isLoading: true,
|
||||
data: undefined,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Successful data load state
|
||||
*/
|
||||
successFontStore: createMockStore<UnifiedFont[]>({
|
||||
data: Object.values(UNIFIED_FONTS),
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* API error state
|
||||
*/
|
||||
errorFontStore: createMockStore<UnifiedFont[]>({
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
isError: true,
|
||||
error: new Error('Failed to load fonts'),
|
||||
}),
|
||||
|
||||
/**
|
||||
* Empty result set state
|
||||
*/
|
||||
emptyFontStore: createMockStore<UnifiedFont[]>({
|
||||
data: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Create a mock UnifiedFontStore-like object
|
||||
* Note: This is a simplified mock for Storybook use
|
||||
*/
|
||||
unifiedFontStore: (state: Partial<MockFontStoreState> = {}) => {
|
||||
const mockState = createMockFontStoreState(state);
|
||||
return {
|
||||
// State properties
|
||||
/**
|
||||
* Collection of mock fonts
|
||||
*/
|
||||
get fonts() {
|
||||
return mockState.fonts;
|
||||
},
|
||||
/**
|
||||
* Current mock page
|
||||
*/
|
||||
get page() {
|
||||
return mockState.page;
|
||||
},
|
||||
/**
|
||||
* Total mock pages
|
||||
*/
|
||||
get totalPages() {
|
||||
return mockState.totalPages;
|
||||
},
|
||||
/**
|
||||
* Mock items per page
|
||||
*/
|
||||
get limit() {
|
||||
return mockState.limit;
|
||||
},
|
||||
/**
|
||||
* Total mock items
|
||||
*/
|
||||
get total() {
|
||||
return mockState.total;
|
||||
},
|
||||
/**
|
||||
* Mock loading status
|
||||
*/
|
||||
get isLoading() {
|
||||
return mockState.isLoading;
|
||||
},
|
||||
/**
|
||||
* Mock error status
|
||||
*/
|
||||
get error() {
|
||||
return mockState.error;
|
||||
},
|
||||
/**
|
||||
* Mock search string
|
||||
*/
|
||||
get searchQuery() {
|
||||
return mockState.searchQuery;
|
||||
},
|
||||
/**
|
||||
* Mock provider filter
|
||||
*/
|
||||
get provider() {
|
||||
return mockState.provider;
|
||||
},
|
||||
/**
|
||||
* Mock category filter
|
||||
*/
|
||||
get category() {
|
||||
return mockState.category;
|
||||
},
|
||||
/**
|
||||
* Mock subset filter
|
||||
*/
|
||||
get subset() {
|
||||
return mockState.subset;
|
||||
},
|
||||
// Methods (no-op for Storybook)
|
||||
nextPage: () => {},
|
||||
prevPage: () => {},
|
||||
goToPage: (_page: number) => {},
|
||||
setLimit: (_limit: number) => {},
|
||||
setProvider: (_provider: typeof mockState.provider) => {},
|
||||
setCategory: (_category: string | null) => {},
|
||||
setSubset: (_subset: string | null) => {},
|
||||
setSearch: (_query: string) => {},
|
||||
resetFilters: () => {},
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Create a mock FontCatalogStore object
|
||||
* Matches FontCatalogStore's public API for Storybook use
|
||||
*/
|
||||
fontCatalogStore: (config: {
|
||||
/**
|
||||
* Preset font list
|
||||
*/
|
||||
fonts?: UnifiedFont[];
|
||||
/**
|
||||
* Total item count
|
||||
*/
|
||||
total?: number;
|
||||
/**
|
||||
* Items per page
|
||||
*/
|
||||
limit?: number;
|
||||
/**
|
||||
* Pagination offset
|
||||
*/
|
||||
offset?: number;
|
||||
/**
|
||||
* Loading flag
|
||||
*/
|
||||
isLoading?: boolean;
|
||||
/**
|
||||
* Fetching flag
|
||||
*/
|
||||
isFetching?: boolean;
|
||||
/**
|
||||
* Error flag
|
||||
*/
|
||||
isError?: boolean;
|
||||
/**
|
||||
* Catch-all error object
|
||||
*/
|
||||
error?: Error | null;
|
||||
/**
|
||||
* Has more pages flag
|
||||
*/
|
||||
hasMore?: boolean;
|
||||
/**
|
||||
* Current page number
|
||||
*/
|
||||
page?: number;
|
||||
} = {}) => {
|
||||
const {
|
||||
fonts: mockFonts = Object.values(UNIFIED_FONTS).slice(0, 5),
|
||||
total: mockTotal = mockFonts.length,
|
||||
limit = 50,
|
||||
offset = 0,
|
||||
isLoading = false,
|
||||
isFetching = false,
|
||||
isError = false,
|
||||
error = null,
|
||||
hasMore = false,
|
||||
page = 1,
|
||||
} = config;
|
||||
|
||||
const totalPages = Math.ceil(mockTotal / limit);
|
||||
const state = {
|
||||
params: { limit },
|
||||
};
|
||||
|
||||
return {
|
||||
// State getters
|
||||
/**
|
||||
* Current mock parameters
|
||||
*/
|
||||
get params() {
|
||||
return state.params;
|
||||
},
|
||||
/**
|
||||
* Mock font list
|
||||
*/
|
||||
get fonts() {
|
||||
return mockFonts;
|
||||
},
|
||||
/**
|
||||
* Mock loading state
|
||||
*/
|
||||
get isLoading() {
|
||||
return isLoading;
|
||||
},
|
||||
/**
|
||||
* Mock fetching state
|
||||
*/
|
||||
get isFetching() {
|
||||
return isFetching;
|
||||
},
|
||||
/**
|
||||
* Mock error state
|
||||
*/
|
||||
get isError() {
|
||||
return isError;
|
||||
},
|
||||
/**
|
||||
* Mock error object
|
||||
*/
|
||||
get error() {
|
||||
return error;
|
||||
},
|
||||
/**
|
||||
* Mock empty state check
|
||||
*/
|
||||
get isEmpty() {
|
||||
return !isLoading && !isFetching && mockFonts.length === 0;
|
||||
},
|
||||
/**
|
||||
* Mock pagination metadata
|
||||
*/
|
||||
get pagination() {
|
||||
return {
|
||||
total: mockTotal,
|
||||
limit,
|
||||
offset,
|
||||
hasMore,
|
||||
page,
|
||||
totalPages,
|
||||
};
|
||||
},
|
||||
// Category getters
|
||||
/**
|
||||
* Derived sans-serif filter
|
||||
*/
|
||||
get sansSerifFonts() {
|
||||
return mockFonts.filter(f => f.category === 'sans-serif');
|
||||
},
|
||||
/**
|
||||
* Derived serif filter
|
||||
*/
|
||||
get serifFonts() {
|
||||
return mockFonts.filter(f => f.category === 'serif');
|
||||
},
|
||||
/**
|
||||
* Derived display filter
|
||||
*/
|
||||
get displayFonts() {
|
||||
return mockFonts.filter(f => f.category === 'display');
|
||||
},
|
||||
/**
|
||||
* Derived handwriting filter
|
||||
*/
|
||||
get handwritingFonts() {
|
||||
return mockFonts.filter(f => f.category === 'handwriting');
|
||||
},
|
||||
/**
|
||||
* Derived monospace filter
|
||||
*/
|
||||
get monospaceFonts() {
|
||||
return mockFonts.filter(f => f.category === 'monospace');
|
||||
},
|
||||
// Lifecycle
|
||||
destroy() {},
|
||||
// Param management
|
||||
setParams(_updates: Record<string, unknown>) {},
|
||||
invalidate() {},
|
||||
// Async operations (no-op for Storybook)
|
||||
refetch() {},
|
||||
prefetch() {},
|
||||
cancel() {},
|
||||
getCachedData() {
|
||||
return mockFonts.length > 0 ? mockFonts : undefined;
|
||||
},
|
||||
setQueryData() {},
|
||||
// Filter shortcuts
|
||||
setProviders() {},
|
||||
setCategories() {},
|
||||
setSubsets() {},
|
||||
setSearch() {},
|
||||
setSort() {},
|
||||
// Pagination navigation
|
||||
nextPage() {},
|
||||
prevPage() {},
|
||||
goToPage() {},
|
||||
setLimit(_limit: number) {
|
||||
state.params.limit = _limit;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
// REACTIVE STATE MOCKS
|
||||
|
||||
/**
|
||||
* Create a reactive state object using Svelte 5 runes pattern
|
||||
* Useful for stories that need reactive state
|
||||
*
|
||||
* Note: This uses plain JavaScript objects since Svelte runes
|
||||
* only work in .svelte files. For Storybook, this provides
|
||||
* a similar API for testing.
|
||||
*/
|
||||
export function createMockReactiveState<T>(initialValue: T) {
|
||||
let value = initialValue;
|
||||
|
||||
return {
|
||||
get value() {
|
||||
return value;
|
||||
},
|
||||
set value(newValue: T) {
|
||||
value = newValue;
|
||||
},
|
||||
update(fn: (current: T) => T) {
|
||||
value = fn(value);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock comparison store for ComparisonSlider component
|
||||
*/
|
||||
export function createMockComparisonStore(config: {
|
||||
fontA?: UnifiedFont;
|
||||
fontB?: UnifiedFont;
|
||||
text?: string;
|
||||
} = {}) {
|
||||
const { fontA, fontB, text = 'The quick brown fox jumps over the lazy dog.' } = config;
|
||||
|
||||
return {
|
||||
get fontA() {
|
||||
return fontA ?? UNIFIED_FONTS.roboto;
|
||||
},
|
||||
get fontB() {
|
||||
return fontB ?? UNIFIED_FONTS.openSans;
|
||||
},
|
||||
get text() {
|
||||
return text;
|
||||
},
|
||||
// Methods (no-op for Storybook)
|
||||
setFontA: (_font: UnifiedFont | undefined) => {},
|
||||
setFontB: (_font: UnifiedFont | undefined) => {},
|
||||
setText: (_text: string) => {},
|
||||
swapFonts: () => {},
|
||||
};
|
||||
}
|
||||
|
||||
// MOCK DATA GENERATORS
|
||||
|
||||
/**
|
||||
* Generate paginated font data
|
||||
*/
|
||||
export function generatePaginatedFonts(
|
||||
totalCount: number,
|
||||
page: number,
|
||||
limit: number,
|
||||
): {
|
||||
fonts: UnifiedFont[];
|
||||
page: number;
|
||||
totalPages: number;
|
||||
total: number;
|
||||
hasNextPage: boolean;
|
||||
hasPrevPage: boolean;
|
||||
} {
|
||||
const totalPages = Math.ceil(totalCount / limit);
|
||||
const startIndex = (page - 1) * limit;
|
||||
const endIndex = Math.min(startIndex + limit, totalCount);
|
||||
|
||||
return {
|
||||
fonts: generateMockFonts(endIndex - startIndex).map((font, i) => ({
|
||||
...font,
|
||||
id: `font-${startIndex + i + 1}`,
|
||||
name: `Font ${startIndex + i + 1}`,
|
||||
})),
|
||||
page,
|
||||
totalPages,
|
||||
total: totalCount,
|
||||
hasNextPage: page < totalPages,
|
||||
hasPrevPage: page > 1,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create mock API response for fonts
|
||||
*/
|
||||
export function createMockFontApiResponse(config: {
|
||||
fonts?: UnifiedFont[];
|
||||
total?: number;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
} = {}) {
|
||||
const fonts = config.fonts ?? Object.values(UNIFIED_FONTS);
|
||||
const total = config.total ?? fonts.length;
|
||||
const page = config.page ?? 1;
|
||||
const limit = config.limit ?? fonts.length;
|
||||
|
||||
return {
|
||||
data: fonts,
|
||||
meta: {
|
||||
total,
|
||||
page,
|
||||
limit,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
hasNextPage: page < Math.ceil(total / limit),
|
||||
hasPrevPage: page > 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -14,6 +14,7 @@ vi.mock('@chenglou/pretext', async () => {
|
||||
layout: vi.fn(actual.layout),
|
||||
};
|
||||
});
|
||||
import { mockUnifiedFont } from '$entities/Font/testing';
|
||||
import {
|
||||
beforeEach,
|
||||
describe,
|
||||
@@ -22,7 +23,6 @@ import {
|
||||
vi,
|
||||
} from 'vitest';
|
||||
import type { FontLoadStatus } from '../../model/types';
|
||||
import { mockUnifiedFont } from '../mocks';
|
||||
import { createFontRowSizeResolver } from './createFontRowSizeResolver';
|
||||
|
||||
// Fixed-width canvas mock: every character is 10px wide regardless of font.
|
||||
|
||||
Reference in New Issue
Block a user