Testing

Ensure your theme works correctly before deployment.

Pre-Deployment Checklist

1. Visual Testing

• Test all pages (dashboard, servers, settings, etc.)

• Check all CRUD interfaces (create, read, update, delete)

• Verify email templates render correctly

• Test with different screen sizes (desktop, tablet, mobile)

• Check in different browsers (Chrome, Firefox, Safari, Edge)

2. Functionality Testing

• All links work correctly

• Forms submit properly

• JavaScript features function as expected

• AJAX requests complete successfully

• Notifications display correctly

3. Responsive Design

• Mobile navigation works

• Tables are scrollable on small screens

• Forms are usable on mobile

• Images scale appropriately

• Text remains readable

4. Performance

• CSS files are minified (for production)

• JavaScript files are minified (for production)

• Images are optimized

• No console errors

• Page load times are acceptable

5. Accessibility

• Sufficient color contrast

• Forms have proper labels

• Images have alt text

• Keyboard navigation works

• Screen reader compatible

Browser Testing

Test in major browsers:

• Chrome (latest)

• Firefox (latest)

• Safari (if applicable)

• Edge (latest)

Device Testing

Test on various devices:

• Desktop (1920x1080, 1366x768)

• Tablet (768x1024)

• Mobile (375x667, 414x896)

Testing Tools

Browser DevTools

• Responsive design mode - Test different screen sizes

• Console - Check for JavaScript errors

• Network tab - Monitor loading times

• Lighthouse - Performance and accessibility audit

Online Tools

• BrowserStack - Cross-browser testing

• Can I Use - Browser compatibility

• WebPageTest - Performance testing

• WAVE - Accessibility evaluation

Debug Mode

Enable Symfony debug toolbar (development environment):

# .env
APP_ENV=dev
APP_DEBUG=true

This shows:

• Which templates are being rendered

• Database queries

• Performance metrics

• Request/response information

Common Issues and Solutions

Templates Not Loading

Symptoms:

• Page displays incorrectly

• Template not found errors

• Default theme showing instead of your theme

Solutions:

1. Check file paths and naming

2. Clear Symfony cache: docker exec pteroca_web_dev php bin/console cache:clear

3. Verify template.json is valid JSON

4. Ensure theme is activated in Settings → Appearance

5. Check file permissions

Styles Not Applying

Symptoms:

• CSS changes not visible

• Default styles appearing

• Broken layout

Solutions:

1. Check CSS file paths in templates

2. Verify files are in correct public directory (public/assets/theme/my-theme/)

3. Clear browser cache (Ctrl+Shift+R)

4. Check for CSS syntax errors

5. Verify CSS is included in template using {% block head_stylesheets %}

6. Check browser console for 404 errors

JavaScript Errors

Symptoms:

• Features not working

• Console errors

• Page not interactive

Solutions:

1. Open browser console (F12)

2. Check for syntax errors

3. Verify script paths are correct

4. Ensure jQuery/Bootstrap is loaded (if using)

5. Check for conflicting scripts

6. Verify {% block body_javascript %} is used correctly

Responsive Issues

Symptoms:

• Layout broken on mobile

• Text too small or too large

• Elements overlapping

• Horizontal scrolling

Solutions:

1. Use browser responsive design mode to test

2. Test on actual devices when possible

3. Check media query breakpoints

4. Verify Bootstrap classes are correct

5. Test with different orientations (portrait/landscape)

6. Check viewport meta tag is present

Performance Issues

Symptoms:

• Slow page load times

• Laggy interactions

• High resource usage

Solutions:

1. Minify CSS and JavaScript files

2. Optimize and compress images

3. Use browser caching

4. Remove unused CSS/JS

5. Use Lighthouse audit to identify bottlenecks

6. Consider lazy loading for images

Testing Workflow

1. Development Testing

During development:

1. Use APP_ENV=dev for detailed error messages

2. Test changes immediately in browser

3. Check console for errors after each change

4. Use Symfony debug toolbar

2. Pre-Production Testing

Before going live:

1. Switch to APP_ENV=prod to test production mode

2. Clear all caches

3. Test all pages systematically

4. Check multiple browsers and devices

5. Run Lighthouse audit

6. Verify no console errors

3. User Acceptance Testing

Final validation:

1. Have real users test the theme

2. Gather feedback on usability

3. Check for edge cases

4. Verify all workflows work

5. Test with real data

Automated Testing

HTML Validation

# Validate HTML output
curl http://localhost:8080 | tidy -q -e 2>&1

CSS Validation

# Validate CSS syntax
npx stylelint "public/assets/theme/my-theme/css/**/*.css"

JavaScript Linting

# Lint JavaScript files
npx eslint "public/assets/theme/my-theme/js/**/*.js"

Debugging Tips

1. Template Not Found

# Check template paths
find themes/my-theme -name "*.twig"

Verify theme is active via Admin Panel (Settings → Appearance → Current theme).

2. Asset Not Loading

# Check asset exists
ls -la public/assets/theme/my-theme/css/main.css

# Check file permissions
chmod -R 755 public/assets/theme/my-theme/

3. JavaScript Not Working

// Add console.log to verify script loads
console.log('Theme script loaded');

// Check if Bootstrap is available
console.log(typeof bootstrap !== 'undefined' ? 'Bootstrap loaded' : 'Bootstrap not found');

4. CSS Not Applying

/* Add distinctive style to verify CSS loads */
body {
    border: 5px solid red !important;
}

Quality Assurance

Before Release

1. Code Review - Review all template and asset changes

2. Security Check - Ensure no XSS vulnerabilities

3. Performance Test - Verify acceptable load times

4. Browser Test - Check all target browsers

5. Mobile Test - Verify mobile experience

6. Documentation - Update theme documentation

7. Backup - Backup current theme before replacing

After Release

1. Monitor errors - Check logs for issues

2. Gather feedback - Collect user feedback

3. Fix bugs - Address reported issues promptly

4. Update docs - Document any issues and solutions

Related Guides

• Creating Themes - Theme creation workflow

• Overriding Templates - Customize templates

• Styling - CSS customization

• JavaScript - Add interactivity

External Resources

• Lighthouse - Audit tool

• BrowserStack - Cross-browser testing

• WAVE - Accessibility checker

• PageSpeed Insights - Performance analysis