docs: revamp AGENTS.md — canonical AI agent reference, purge obsolete TabataFit docs
This commit is contained in:
@@ -1,101 +0,0 @@
|
||||
# Authentication Setup Guide
|
||||
|
||||
## Overview
|
||||
This guide sets up full server-side authentication for the TabataFit Admin panel.
|
||||
|
||||
## Prerequisites
|
||||
- Supabase project running (local or hosted)
|
||||
- Admin-web Next.js app running
|
||||
- Database schema already applied
|
||||
|
||||
## Step 1: Configure Supabase Dashboard
|
||||
|
||||
1. Go to your Supabase Dashboard → Authentication → Providers
|
||||
2. **Enable Email Provider**
|
||||
3. **Disable "Confirm email"** (for easier testing, re-enable for production)
|
||||
4. Go to Authentication → URL Configuration
|
||||
5. Set **Site URL**: `http://localhost:3000` (or your production URL)
|
||||
6. Add **Redirect URLs**: `http://localhost:3000/**`
|
||||
|
||||
## Step 2: Create Admin User
|
||||
|
||||
### Option A: Via Supabase Dashboard (Easiest)
|
||||
1. Go to Supabase Dashboard → Authentication → Users
|
||||
2. Click "Add user" or "Invite user"
|
||||
3. Enter email: `admin@tabatafit.com`
|
||||
4. Set password: Your chosen password
|
||||
5. Click "Create user"
|
||||
6. Copy the user's UUID (click on the user to see details)
|
||||
|
||||
### Option B: Via Login Page
|
||||
1. Go to `http://localhost:3000/login`
|
||||
2. Click "Sign up" (if available) or use dashboard method above
|
||||
|
||||
## Step 3: Add User to Admin Table
|
||||
|
||||
**Important**: After creating the user, you MUST add them to the admin_users table.
|
||||
|
||||
Run this SQL in Supabase SQL Editor:
|
||||
|
||||
```sql
|
||||
-- Replace with your actual email or UUID
|
||||
INSERT INTO public.admin_users (id, email, role)
|
||||
SELECT id, email, 'admin'
|
||||
FROM auth.users
|
||||
WHERE email = 'admin@tabatafit.com'
|
||||
ON CONFLICT (id) DO NOTHING;
|
||||
```
|
||||
|
||||
Or if you have the UUID:
|
||||
```sql
|
||||
INSERT INTO public.admin_users (id, email, role)
|
||||
VALUES ('paste-uuid-here', 'admin@tabatafit.com', 'admin');
|
||||
```
|
||||
|
||||
## Step 4: Verify Setup
|
||||
|
||||
Run this to confirm:
|
||||
```sql
|
||||
SELECT au.id, au.email, au.role, u.email as auth_email
|
||||
FROM public.admin_users au
|
||||
JOIN auth.users u ON au.id = u.id;
|
||||
```
|
||||
|
||||
You should see your admin user listed.
|
||||
|
||||
## Step 5: Login
|
||||
|
||||
1. Go to `http://localhost:3000/login`
|
||||
2. Enter email: `admin@tabatafit.com`
|
||||
3. Enter password: (the one you set)
|
||||
4. You should be redirected to the dashboard
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Not authorized as admin" error
|
||||
- User exists in auth.users but not in admin_users table
|
||||
- Run Step 3 SQL to add them
|
||||
|
||||
### "Failed to fetch" errors
|
||||
- Check that EXPO_PUBLIC_SUPABASE_URL is set in .env.local
|
||||
- For admin-web, also add NEXT_PUBLIC_SUPABASE_URL with same value
|
||||
|
||||
### Still can't create workouts
|
||||
- Verify you're logged in (check browser cookies)
|
||||
- Check that admin_users table has your user
|
||||
- Check RLS policies are applied correctly
|
||||
|
||||
## Default Credentials (Example)
|
||||
|
||||
**Email**: `admin@tabatafit.com`
|
||||
**Password**: (You choose during setup)
|
||||
|
||||
**Note**: Change this to a secure password in production!
|
||||
|
||||
## Security Notes
|
||||
|
||||
1. **Production**: Enable email confirmations
|
||||
2. **Production**: Use strong passwords
|
||||
3. **Production**: Enable 2FA if available
|
||||
4. **Production**: Restrict CORS origins in Supabase
|
||||
5. **Production**: Use environment-specific admin credentials
|
||||
@@ -1,218 +0,0 @@
|
||||
# TabataFit Admin Dashboard - Test Implementation Summary
|
||||
|
||||
## ✅ Completed Implementation
|
||||
|
||||
### 1. Unit Tests
|
||||
|
||||
#### UI Components (100% Coverage)
|
||||
- **button.test.tsx** ✓ (already existed)
|
||||
- **select.test.tsx** ✓ (already existed)
|
||||
- **switch.test.tsx** ✓ (already existed)
|
||||
- **dialog.test.tsx** ✓ **NEW** - 8 test cases
|
||||
- Dialog rendering
|
||||
- Open/close behavior
|
||||
- Click outside to close
|
||||
- Escape key handling
|
||||
- Footer rendering
|
||||
- Custom styling
|
||||
- Accessibility features
|
||||
|
||||
#### Custom Components
|
||||
- **exercise-list.test.tsx** ✓ (already existed)
|
||||
- **media-upload.test.tsx** ✓ (42 tests, 90%+ coverage)
|
||||
- **tag-input.test.tsx** ✓ (already existed)
|
||||
- **sidebar.test.tsx** ✓ **NEW** - 11 test cases
|
||||
- Logo and navigation rendering
|
||||
- Active state highlighting
|
||||
- Navigation links
|
||||
- Logout functionality
|
||||
- Error handling
|
||||
- Icon rendering
|
||||
- Styling verification
|
||||
|
||||
### 2. Integration Tests
|
||||
|
||||
#### Page Tests
|
||||
- **login/page.test.tsx** ✓ **NEW** - 11 test cases
|
||||
- Form rendering
|
||||
- Input validation
|
||||
- Successful login
|
||||
- Invalid credentials
|
||||
- Non-admin user handling
|
||||
- Loading states
|
||||
- Network error handling
|
||||
|
||||
- **page.test.tsx** (Dashboard) ✓ **NEW** - 12 test cases
|
||||
- Header rendering
|
||||
- Stats cards display
|
||||
- Loading states
|
||||
- Quick actions section
|
||||
- Getting started section
|
||||
- Route links
|
||||
- Error handling
|
||||
- Icon verification
|
||||
- Color classes
|
||||
|
||||
### 3. E2E Tests
|
||||
|
||||
#### Playwright Configuration ✓ **NEW**
|
||||
- Installed @playwright/test
|
||||
- Configured for Chromium and Firefox
|
||||
- Automatic dev server startup
|
||||
- Screenshot on failure
|
||||
- HTML reporting
|
||||
|
||||
#### E2E Test Suite
|
||||
- **e2e/auth.spec.ts** ✓ **NEW**
|
||||
- Login form display
|
||||
- Validation errors
|
||||
- Route protection
|
||||
- Navigation between pages
|
||||
|
||||
### 4. Test Scripts Added
|
||||
|
||||
```json
|
||||
{
|
||||
"test:e2e": "playwright test",
|
||||
"test:e2e:ui": "playwright test --ui",
|
||||
"test:e2e:headed": "playwright test --headed",
|
||||
"test:all": "npm run test && npm run test:e2e"
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Current Test Coverage
|
||||
|
||||
| Metric | Before | After | Target |
|
||||
|--------|--------|-------|--------|
|
||||
| Lines | 88% | ~92% | 95% |
|
||||
| Functions | 92% | ~94% | 95% |
|
||||
| Branches | 78% | ~82% | 85% |
|
||||
| Statements | 85% | ~90% | 90% |
|
||||
|
||||
## 🧪 Test Files Created
|
||||
|
||||
### New Test Files (7 files)
|
||||
1. `components/ui/dialog.test.tsx`
|
||||
2. `components/sidebar.test.tsx`
|
||||
3. `app/login/page.test.tsx`
|
||||
4. `app/page.test.tsx`
|
||||
5. `e2e/auth.spec.ts`
|
||||
6. `playwright.config.ts`
|
||||
|
||||
### Modified Files
|
||||
- `package.json` - Added E2E test scripts
|
||||
|
||||
## 🎯 Test Categories
|
||||
|
||||
### Unit Tests
|
||||
- ✅ Component rendering
|
||||
- ✅ User interactions (clicks, input)
|
||||
- ✅ State changes
|
||||
- ✅ Props validation
|
||||
- ✅ Styling verification
|
||||
- ✅ Accessibility checks
|
||||
|
||||
### Integration Tests
|
||||
- ✅ Page routing
|
||||
- ✅ Data fetching
|
||||
- ✅ Form submissions
|
||||
- ✅ Error handling
|
||||
- ✅ Loading states
|
||||
|
||||
### E2E Tests
|
||||
- ✅ Authentication flows
|
||||
- ✅ Navigation
|
||||
- ✅ Route protection
|
||||
- ✅ Cross-browser testing
|
||||
|
||||
## 🚀 How to Run Tests
|
||||
|
||||
### Unit Tests
|
||||
```bash
|
||||
# Run all unit tests
|
||||
npm run test
|
||||
|
||||
# Run with coverage
|
||||
npm run test:coverage
|
||||
|
||||
# Watch mode
|
||||
npm run test:watch
|
||||
```
|
||||
|
||||
### E2E Tests
|
||||
```bash
|
||||
# Run E2E tests
|
||||
npm run test:e2e
|
||||
|
||||
# Run with UI
|
||||
npm run test:e2e:ui
|
||||
|
||||
# Run in headed mode (see browser)
|
||||
npm run test:e2e:headed
|
||||
```
|
||||
|
||||
### All Tests
|
||||
```bash
|
||||
# Run both unit and E2E tests
|
||||
npm run test:all
|
||||
```
|
||||
|
||||
## 📋 Remaining Work (Optional)
|
||||
|
||||
### High Priority
|
||||
- [ ] workouts/page.test.tsx - Full CRUD tests
|
||||
- [ ] trainers/page.test.tsx - Delete dialog tests
|
||||
- [ ] workout-form.tsx coverage improvement (currently 71%)
|
||||
|
||||
### Medium Priority
|
||||
- [ ] collections/page.test.tsx
|
||||
- [ ] media/page.test.tsx
|
||||
- [ ] Additional E2E tests for CRUD operations
|
||||
|
||||
### Low Priority
|
||||
- [ ] Visual regression tests with Storybook
|
||||
- [ ] Performance benchmarks
|
||||
- [ ] Accessibility audit with axe
|
||||
|
||||
## 🎉 Achievements
|
||||
|
||||
✅ **All Critical Paths Tested**
|
||||
- Authentication flow
|
||||
- Dashboard stats
|
||||
- Navigation
|
||||
- Sidebar functionality
|
||||
- UI component library
|
||||
|
||||
✅ **Test Infrastructure Complete**
|
||||
- Vitest configured
|
||||
- Playwright configured
|
||||
- Mock utilities ready
|
||||
- CI/CD scripts prepared
|
||||
|
||||
✅ **Coverage Improved**
|
||||
- Added 42+ new test cases
|
||||
- Improved dialog component to 100%
|
||||
- Added sidebar component tests
|
||||
- Added page integration tests
|
||||
|
||||
## 🔧 Testing Best Practices Implemented
|
||||
|
||||
1. **Mock External Dependencies** - Supabase, Next.js router
|
||||
2. **Test User Interactions** - Clicking, typing, navigation
|
||||
3. **Verify Error States** - Network errors, auth failures
|
||||
4. **Check Accessibility** - Roles, labels, ARIA attributes
|
||||
5. **Test Responsive Behavior** - Different viewports (E2E)
|
||||
6. **Isolate Tests** - Clean mocks between tests
|
||||
|
||||
## 📚 Documentation
|
||||
|
||||
- Each test file is self-documenting
|
||||
- Descriptive test names explain the behavior
|
||||
- Comments for complex mock setups
|
||||
- Type safety with TypeScript
|
||||
|
||||
---
|
||||
|
||||
**Status**: ✅ **Phase 1 Complete** - Core testing infrastructure implemented
|
||||
|
||||
**Next Steps**: Run `npm run test:all` to execute full test suite!
|
||||
Reference in New Issue
Block a user