feat: style editor for blog

tests/renderer/components/StyleView.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { StyleView } from '../../../src/renderer/components/StyleView/StyleView';
+import { useAppStore } from '../../../src/renderer/store';
+
+describe('StyleView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    useAppStore.setState({
+      activeProject: {
+        id: 'project-1',
+        name: 'Test Project',
+        slug: 'test-project',
+        isActive: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+      picoTheme: 'slate',
+    } as any);
+
+    (window as any).electronAPI = {
+      ...(window as any).electronAPI,
+      meta: {
+        ...(window as any).electronAPI?.meta,
+        getProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'slate' }),
+        updateProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'blue' }),
+      },
+    };
+  });
+
+  it('lets users select a theme and apply it', async () => {
+    render(<StyleView />);
+
+    const blueButton = await screen.findByRole('button', { name: /blue/i });
+    fireEvent.click(blueButton);
+
+    const applyButton = screen.getByRole('button', { name: /apply theme/i });
+    fireEvent.click(applyButton);
+
+    expect((window as any).electronAPI.meta.updateProjectMetadata).toHaveBeenCalledWith(
+      expect.objectContaining({ picoTheme: 'blue' })
+    );
+  });
+
+  it('renders the style preview iframe for top posts with selected theme', async () => {
+    render(<StyleView />);
+
+    const iframe = await screen.findByTitle('Theme preview');
+    expect(iframe.getAttribute('src')).toContain('/__style-preview');
+    expect(iframe.getAttribute('src')).toContain('theme=slate');
+    expect(iframe.getAttribute('src')).toContain('mode=auto');
+  });
+
+  it('lets users force dark/light mode for preview iframe', async () => {
+    render(<StyleView />);
+
+    const modeSelect = await screen.findByLabelText(/preview mode/i);
+    fireEvent.change(modeSelect, { target: { value: 'dark' } });
+
+    const iframe = await screen.findByTitle('Theme preview');
+    expect(iframe.getAttribute('src')).toContain('mode=dark');
+  });
+
+  it('renders each theme swatch with accent, light, and dark tones', async () => {
+    const { container } = render(<StyleView />);
+
+    await screen.findByRole('button', { name: /blue/i });
+
+    const blueSwatch = container.querySelector('.style-theme-swatch-blue');
+    expect(blueSwatch).not.toBeNull();
+
+    const tones = blueSwatch?.querySelectorAll('.style-theme-tone') ?? [];
+    expect(tones.length).toBe(3);
+    expect(blueSwatch?.textContent).toContain('Blue');
+  });
+});