@diagramers/admin/SETUP_TESTING.md

Diagramers Admin Template - React starter for admin dashboards.

# Setup Feature Testing Guide

## Quick Test Commands

### 1. Test Setup Guard Functionality

```bash
# Clear any existing configuration
localStorage.removeItem('projectConfig');

# Start the development server
npm start

# Check browser console for SetupGuard logs
# You should see:
# SetupGuard: Checking setup status... { isSetupCompleted: false, currentPath: "/", isLogin: false }
# SetupGuard: Setup not completed, redirecting to /setup
```

### 2. Test Setup Page

1. Navigate to `http://localhost:3000`
2. You should be automatically redirected to `/setup`
3. Fill out the setup form:
   - Project Name: "Test Project"
   - Upload a logo (optional)
   - Select a theme
4. Click "Complete Setup"
5. You should be redirected to `/dashboards/default`

### 3. Test Project Settings

1. Navigate to `/pages/project-settings`
2. Modify any settings
3. Click "Update Settings"
4. Verify changes are applied

### 4. Test Configuration Reset

1. Go to Project Settings
2. Click "Reset Configuration"
3. Confirm in the modal
4. You should be redirected back to setup

## Manual Testing Steps

### Step 1: Fresh Installation Test

```bash
# 1. Create a new admin project
diagramers admin init test-setup-project

# 2. Navigate to project
cd test-setup-project

# 3. Start the server
npm start

# 4. Open browser and verify:
# - Automatic redirect to /setup
# - Setup form is displayed
# - Can upload logo, set name, choose theme
# - After completion, redirects to dashboard
```

### Step 2: Configuration Persistence Test

```bash
# 1. Complete setup with custom settings
# 2. Refresh the page
# 3. Verify settings persist
# 4. Check browser localStorage for projectConfig
```

### Step 3: Update Command Test

```bash
# 1. From the project directory
diagramers admin update

# 2. Verify update process works
# 3. Check that configuration is preserved
```

### Step 4: Export/Import Test

```bash
# 1. Go to Project Settings
# 2. Click "Export Configuration"
# 3. Verify JSON file is downloaded
# 4. Reset configuration
# 5. Import the exported file
# 6. Verify settings are restored
```

## Debug Information

### Console Logs to Look For

When the app starts, you should see these logs in the browser console:

```
SetupGuard: Checking setup status... { isSetupCompleted: false, currentPath: "/", isLogin: false }
SetupGuard: Setup not completed, redirecting to /setup
```

After completing setup:

```
SetupGuard: Checking setup status... { isSetupCompleted: true, currentPath: "/setup", isLogin: false }
SetupGuard: Setup completed, redirecting to dashboard
```

### Common Issues and Solutions

#### Issue: Setup page not loading
**Solution**: Check if the route is properly configured in `default-routes.js`

#### Issue: Setup guard not redirecting
**Solution**: Check browser console for SetupGuard logs and verify localStorage

#### Issue: Configuration not saving
**Solution**: Check browser console for errors and verify ConfigService is working

#### Issue: Theme not applying
**Solution**: Verify theme CSS files are loaded and theme constants are correct

### Testing Checklist

- [ ] Fresh project redirects to setup
- [ ] Setup form validates input correctly
- [ ] Logo upload works (PNG, JPG, SVG)
- [ ] Theme selection works
- [ ] Configuration saves to localStorage
- [ ] After setup, redirects to dashboard
- [ ] Project name appears in header
- [ ] Logo appears in header
- [ ] Theme is applied correctly
- [ ] Project settings page is accessible
- [ ] Settings can be modified
- [ ] Export/import works
- [ ] Reset functionality works
- [ ] Update command works

## Browser Testing

### Test in Different Browsers
- Chrome
- Firefox
- Safari
- Edge

### Test Responsive Design
- Desktop (1920x1080)
- Tablet (768x1024)
- Mobile (375x667)

### Test File Upload
- PNG files
- JPG files
- SVG files
- Files larger than 2MB (should be rejected)
- Non-image files (should be rejected)

## Performance Testing

### Load Time
- Initial page load
- Setup page load
- Dashboard load after setup

### Memory Usage
- Check for memory leaks during setup process
- Verify localStorage usage

### Network Requests
- Ensure no unnecessary API calls during setup
- Verify static assets load correctly