1

tests/options.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const mockStorage: Record<string, unknown> = {};
+const chromeMock = {
+  storage: {
+    local: {
+      get: vi.fn((keys: string[]) =>
+        Promise.resolve(
+          Object.fromEntries(keys.filter(k => k in mockStorage).map(k => [k, mockStorage[k]]))
+        )
+      ),
+      set: vi.fn((items: Record<string, unknown>) => {
+        Object.assign(mockStorage, items);
+        return Promise.resolve();
+      }),
+    },
+  },
+};
+vi.stubGlobal('chrome', chromeMock);
+
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import App from '../src/options/App';
+
+describe('Settings Page', () => {
+  beforeEach(() => {
+    Object.keys(mockStorage).forEach(k => delete mockStorage[k]);
+    vi.clearAllMocks();
+  });
+
+  it('renders provider dropdown with openai and anthropic options', () => {
+    render(<App />);
+    const select = screen.getByLabelText(/provider/i);
+    expect(select).toBeDefined();
+    const options = select.querySelectorAll('option');
+    const values = Array.from(options).map(o => o.value);
+    expect(values).toContain('openai');
+    expect(values).toContain('anthropic');
+  });
+
+  it('renders API key input with type password', () => {
+    render(<App />);
+    const input = screen.getByLabelText(/api key/i);
+    expect(input.getAttribute('type')).toBe('password');
+  });
+
+  it('saves API key and provider to chrome.storage.local', async () => {
+    render(<App />);
+    const input = screen.getByLabelText(/api key/i);
+    const select = screen.getByLabelText(/provider/i);
+    const button = screen.getByRole('button', { name: /save/i });
+
+    fireEvent.change(input, { target: { value: 'sk-test-key-123' } });
+    fireEvent.change(select, { target: { value: 'anthropic' } });
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(chromeMock.storage.local.set).toHaveBeenCalledWith({
+        aiApiKey: 'sk-test-key-123',
+        aiProvider: 'anthropic',
+      });
+    });
+  });
+
+  it('loads existing values on mount', async () => {
+    mockStorage.aiApiKey = 'existing-key';
+    mockStorage.aiProvider = 'anthropic';
+
+    render(<App />);
+
+    await waitFor(() => {
+      const input = screen.getByLabelText(/api key/i) as HTMLInputElement;
+      expect(input.value).toBe('existing-key');
+    });
+  });
+});