auto-claude: subtask-2-2 - Manual browser verification
Created comprehensive test page at src/app/test-localstorage/page.tsx to verify useLocalStorage hook functionality in the browser. Test Coverage: - String values (basic get/set) - Complex objects (nested properties) - Arrays (add/remove items) - Numbers (increment/decrement) - Remove functionality - State persistence across page refreshes - Real-time localStorage updates visible in DevTools Verification Guide: A detailed manual verification guide has been created at .auto-claude/specs/004-add-uselocalstorage-custom-hook/MANUAL_VERIFICATION.md with step-by-step instructions for browser testing. Manual Verification Checklist: - [ ] No hydration errors in console - [ ] localStorage updates visible in DevTools - [ ] State persists across page refresh - [ ] No TypeScript errors (verified with npx tsc --noEmit) TypeScript compilation verified with no errors. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 4.5
@@ -0,0 +1,186 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
interface UserSettings {
|
||||||
|
theme: 'light' | 'dark';
|
||||||
|
notifications: boolean;
|
||||||
|
language: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TestLocalStoragePage() {
|
||||||
|
// Test 1: Simple string value
|
||||||
|
const [name, setName, removeName] = useLocalStorage('test-name', 'Guest');
|
||||||
|
|
||||||
|
// Test 2: Complex object
|
||||||
|
const [settings, setSettings, removeSettings] = useLocalStorage<UserSettings>(
|
||||||
|
'test-settings',
|
||||||
|
{
|
||||||
|
theme: 'light',
|
||||||
|
notifications: true,
|
||||||
|
language: 'en',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Test 3: Array
|
||||||
|
const [items, setItems, removeItems] = useLocalStorage<string[]>('test-items', []);
|
||||||
|
|
||||||
|
// Test 4: Number
|
||||||
|
const [count, setCount, removeCount] = useLocalStorage('test-count', 0);
|
||||||
|
|
||||||
|
const [newItem, setNewItem] = useState('');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
|
||||||
|
<h1>useLocalStorage Hook Test Page</h1>
|
||||||
|
<p style={{ color: '#666', marginBottom: '2rem' }}>
|
||||||
|
Open DevTools (F12) → Application → Local Storage to see values update in real-time.
|
||||||
|
Refresh the page to verify persistence.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Test 1: String */}
|
||||||
|
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
|
<h2>Test 1: String Value</h2>
|
||||||
|
<p>Current Name: <strong>{name}</strong></p>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Enter your name"
|
||||||
|
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||||
|
/>
|
||||||
|
<button onClick={() => removeName()} style={{ padding: '0.5rem' }}>
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||||
|
localStorage key: <code>test-name</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Test 2: Complex Object */}
|
||||||
|
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
|
<h2>Test 2: Complex Object</h2>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<p>Theme: <strong>{settings.theme}</strong></p>
|
||||||
|
<button
|
||||||
|
onClick={() => setSettings((prev) => ({ ...prev, theme: prev.theme === 'light' ? 'dark' : 'light' }))}
|
||||||
|
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||||
|
>
|
||||||
|
Toggle Theme
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={settings.notifications}
|
||||||
|
onChange={(e) => setSettings((prev) => ({ ...prev, notifications: e.target.checked }))}
|
||||||
|
/>
|
||||||
|
{' '}Enable Notifications
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div style={{ marginBottom: '1rem' }}>
|
||||||
|
<label>Language: </label>
|
||||||
|
<select
|
||||||
|
value={settings.language}
|
||||||
|
onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
|
||||||
|
style={{ padding: '0.5rem' }}
|
||||||
|
>
|
||||||
|
<option value="en">English</option>
|
||||||
|
<option value="de">German</option>
|
||||||
|
<option value="es">Spanish</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => removeSettings()} style={{ padding: '0.5rem' }}>
|
||||||
|
Reset Settings
|
||||||
|
</button>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||||
|
localStorage key: <code>test-settings</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Test 3: Array */}
|
||||||
|
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
|
<h2>Test 3: Array Value</h2>
|
||||||
|
<p>Items ({items.length}):</p>
|
||||||
|
<ul style={{ minHeight: '60px' }}>
|
||||||
|
{items.map((item, index) => (
|
||||||
|
<li key={index}>
|
||||||
|
{item}{' '}
|
||||||
|
<button
|
||||||
|
onClick={() => setItems((prev) => prev.filter((_, i) => i !== index))}
|
||||||
|
style={{ padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}
|
||||||
|
>
|
||||||
|
Remove
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newItem}
|
||||||
|
onChange={(e) => setNewItem(e.target.value)}
|
||||||
|
onKeyPress={(e) => {
|
||||||
|
if (e.key === 'Enter' && newItem.trim()) {
|
||||||
|
setItems((prev) => [...prev, newItem.trim()]);
|
||||||
|
setNewItem('');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Add new item"
|
||||||
|
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
if (newItem.trim()) {
|
||||||
|
setItems((prev) => [...prev, newItem.trim()]);
|
||||||
|
setNewItem('');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
style={{ padding: '0.5rem', marginRight: '0.5rem' }}
|
||||||
|
>
|
||||||
|
Add Item
|
||||||
|
</button>
|
||||||
|
<button onClick={() => removeItems()} style={{ padding: '0.5rem' }}>
|
||||||
|
Clear All
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||||
|
localStorage key: <code>test-items</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Test 4: Number */}
|
||||||
|
<div style={{ marginBottom: '2rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||||
|
<h2>Test 4: Number Value</h2>
|
||||||
|
<p>Count: <strong>{count}</strong></p>
|
||||||
|
<button onClick={() => setCount((prev) => prev + 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||||
|
Increment
|
||||||
|
</button>
|
||||||
|
<button onClick={() => setCount((prev) => prev - 1)} style={{ padding: '0.5rem', marginRight: '0.5rem' }}>
|
||||||
|
Decrement
|
||||||
|
</button>
|
||||||
|
<button onClick={() => removeCount()} style={{ padding: '0.5rem' }}>
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
|
||||||
|
localStorage key: <code>test-count</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Instructions */}
|
||||||
|
<div style={{ marginTop: '2rem', padding: '1rem', backgroundColor: '#f0f9ff', borderRadius: '8px' }}>
|
||||||
|
<h3>Verification Checklist:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>✓ Open DevTools → Application → Local Storage → http://localhost:3000</li>
|
||||||
|
<li>✓ Interact with the controls above and watch localStorage update in real-time</li>
|
||||||
|
<li>✓ Refresh the page (F5) - all values should persist</li>
|
||||||
|
<li>✓ Check Console for hydration errors (there should be none)</li>
|
||||||
|
<li>✓ Check Console for any errors (there should be none)</li>
|
||||||
|
<li>✓ Verify TypeScript has no errors in your editor</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user