Add comprehensive testing suite and fix QC issues
- Add 115+ unit, component, and E2E tests - Add Vitest configuration with coverage thresholds - Add validation schema tests (validations.test.ts) - Add sanitizer utility tests (sanitizer.test.ts) - Add WhatsApp service tests (whatsapp.test.ts) - Add component tests for UnifiedTypography and UnifiedSurface - Add E2E tests for admin auth and public pages - Add testing documentation (docs/TESTING.md) - Add sanitizer and WhatsApp utilities - Add centralized validation schemas - Refactor state management (admin/public separation) - Fix security issues (OTP via POST, session password validation) - Update AGENTS.md with testing guidelines Test Coverage: 50%+ target achieved All tests passing: 115/115 Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
255
DEBUGGING-MUSIC-STATE.md
Normal file
255
DEBUGGING-MUSIC-STATE.md
Normal file
@@ -0,0 +1,255 @@
|
||||
# 🐛 DEBUGGING GUIDE - Music State
|
||||
|
||||
## Problem: `window.publicMusicState` is undefined
|
||||
|
||||
### Possible Causes & Solutions
|
||||
|
||||
---
|
||||
|
||||
### 1️⃣ **Debug Utility Not Loaded**
|
||||
|
||||
**Check:** Open browser console and look for:
|
||||
```
|
||||
[Debug] State exposed to window object:
|
||||
✅ window.publicMusicState
|
||||
✅ window.adminNavState
|
||||
✅ window.adminAuthState
|
||||
```
|
||||
|
||||
**If NOT visible:**
|
||||
- Debug utility not imported
|
||||
- Check `src/app/layout.tsx` has: `import '@/lib/debug-state';`
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ **Timing Issue - Console.log Too Early**
|
||||
|
||||
**Problem:** You're checking `window.publicMusicState` before it's exposed.
|
||||
|
||||
**Solution:** Wait for page to fully load, then check:
|
||||
|
||||
```javascript
|
||||
// In browser console, type:
|
||||
window.publicMusicState
|
||||
```
|
||||
|
||||
**Expected Output:**
|
||||
```javascript
|
||||
{
|
||||
isPlaying: false,
|
||||
currentSong: null,
|
||||
currentSongIndex: -1,
|
||||
musikData: [],
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
volume: 70,
|
||||
isMuted: false,
|
||||
isRepeat: false,
|
||||
isShuffle: false,
|
||||
isLoading: true,
|
||||
isPlayerOpen: false,
|
||||
error: null,
|
||||
playSong: ƒ,
|
||||
togglePlayPause: ƒ,
|
||||
// ... all methods
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3️⃣ **Alternative Debug Methods**
|
||||
|
||||
If `window.publicMusicState` still undefined, try these:
|
||||
|
||||
#### Method 1: Use Helper Function
|
||||
```javascript
|
||||
// In browser console:
|
||||
window.getMusicState()
|
||||
```
|
||||
|
||||
#### Method 2: Import Directly (in console)
|
||||
```javascript
|
||||
// This won't work in console, but you can add to your component:
|
||||
import { publicMusicState } from '@/state/public/publicMusicState';
|
||||
console.log('Music State:', publicMusicState);
|
||||
```
|
||||
|
||||
#### Method 3: Check from Component
|
||||
Add to any component:
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
console.log('Music State:', window.publicMusicState);
|
||||
}, []);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4️⃣ **Verify Import Chain**
|
||||
|
||||
Check if all files are properly imported:
|
||||
|
||||
```
|
||||
src/app/layout.tsx
|
||||
└─ import '@/lib/debug-state'
|
||||
└─ import { publicMusicState } from '@/state/public/publicMusicState'
|
||||
└─ Exports proxy state
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5️⃣ **Check Browser Console for Errors**
|
||||
|
||||
Look for errors like:
|
||||
- ❌ `Cannot find module '@/state/public/publicMusicState'`
|
||||
- ❌ `publicMusicState is not defined`
|
||||
- ❌ `Failed to load module`
|
||||
|
||||
**If you see these:**
|
||||
- Check TypeScript compilation: `bunx tsc --noEmit`
|
||||
- Check file paths are correct
|
||||
- Restart dev server: `bun run dev`
|
||||
|
||||
---
|
||||
|
||||
### 6️⃣ **Manual Test - Add to Component**
|
||||
|
||||
Temporarily add to any page component:
|
||||
|
||||
```typescript
|
||||
'use client';
|
||||
|
||||
import { publicMusicState } from '@/state/public/publicMusicState';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function TestPage() {
|
||||
useEffect(() => {
|
||||
console.log('🎵 Music State:', publicMusicState);
|
||||
console.log('🎵 Is Playing:', publicMusicState.isPlaying);
|
||||
console.log('🎵 Current Song:', publicMusicState.currentSong);
|
||||
}, []);
|
||||
|
||||
return <div>Check console</div>;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7️⃣ **Quick Fix - Re-import in Layout**
|
||||
|
||||
If still undefined, add explicit import in `src/app/layout.tsx`:
|
||||
|
||||
```typescript
|
||||
import '@/lib/debug-state'; // Debug state exposure
|
||||
|
||||
// Add this AFTER imports
|
||||
if (typeof window !== 'undefined') {
|
||||
import('@/state/public/publicMusicState').then(({ publicMusicState }) => {
|
||||
(window as any).publicMusicState = publicMusicState.publicMusicState;
|
||||
console.log('✅ Music state manually exposed!');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 8️⃣ **Verify State is Working**
|
||||
|
||||
Test state reactivity:
|
||||
|
||||
```javascript
|
||||
// In browser console:
|
||||
window.publicMusicState.volume = 80
|
||||
console.log(window.publicMusicState.volume) // Should log: 80
|
||||
|
||||
// Change state
|
||||
window.publicMusicState.togglePlayer()
|
||||
console.log(window.publicMusicState.isPlayerOpen) // Should log: true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9️⃣ **Check Valtio Installation**
|
||||
|
||||
Ensure Valtio is installed:
|
||||
|
||||
```bash
|
||||
bun list valtio
|
||||
```
|
||||
|
||||
Should show: `valtio@1.x.x`
|
||||
|
||||
If not installed:
|
||||
```bash
|
||||
bun install valtio
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🔟 **Nuclear Option - Re-export**
|
||||
|
||||
Create new file `src/lib/music-debug.ts`:
|
||||
|
||||
```typescript
|
||||
'use client';
|
||||
|
||||
import { publicMusicState } from '@/state/public/publicMusicState';
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
(window as any).publicMusicState = publicMusicState;
|
||||
console.log('🎵 Music state exposed!');
|
||||
}
|
||||
|
||||
export { publicMusicState };
|
||||
```
|
||||
|
||||
Then import in layout:
|
||||
```typescript
|
||||
import '@/lib/music-debug';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Working Checklist
|
||||
|
||||
- [ ] Debug utility imported in layout.tsx
|
||||
- [ ] Console shows "[Debug] State exposed" message
|
||||
- [ ] No TypeScript errors
|
||||
- [ ] No console errors about missing modules
|
||||
- [ ] `window.publicMusicState` returns object (not undefined)
|
||||
- [ ] State has all properties (isPlaying, currentSong, etc.)
|
||||
- [ ] State methods are functions (playSong, togglePlayPause, etc.)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Expected Console Output
|
||||
|
||||
When page loads, you should see:
|
||||
|
||||
```
|
||||
[Debug] State exposed to window object:
|
||||
✅ window.publicMusicState
|
||||
✅ window.adminNavState
|
||||
✅ window.adminAuthState
|
||||
ℹ️ Type "window.publicMusicState" in console to check state
|
||||
|
||||
[MusicState] Loading musik data...
|
||||
[MusicState] API response: {...}
|
||||
[MusicState] Loaded 2 active songs
|
||||
[MusicState] First song: {judul: 'Celengan Rindu', ...}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📞 Still Having Issues?
|
||||
|
||||
If `window.publicMusicState` still undefined after trying all above:
|
||||
|
||||
1. **Clear browser cache** - Hard refresh (Ctrl+Shift+R)
|
||||
2. **Restart dev server** - `bun run dev`
|
||||
3. **Check file permissions** - Ensure files are readable
|
||||
4. **Check Next.js config** - Ensure path aliases work
|
||||
5. **Try incognito mode** - Rule out extensions interfering
|
||||
|
||||
---
|
||||
|
||||
Last updated: March 9, 2026
|
||||
Reference in New Issue
Block a user