Files
roi-theme/wp-content/themes/apus-theme/inc/admin/TEST-CHECKLIST.md
FrankZamora 7ba9080f57 Agregar estructura completa del tema APUS con Bootstrap 5 y optimizaciones de rendimiento
Se implementa tema WordPress personalizado para Análisis de Precios Unitarios con funcionalidades avanzadas:
- Sistema de templates (front-page, single, archive, page, 404, search)
- Integración de Bootstrap 5.3.8 con estructura modular de assets
- Panel de opciones del tema con Customizer API
- Optimizaciones de rendimiento (Critical CSS, Image Optimization, Performance)
- Funcionalidades SEO y compatibilidad con Rank Math
- Sistema de posts relacionados y tabla de contenidos
- Badge de categorías y manejo de AdSense diferido
- Tipografías Google Fonts configurables
- Documentación completa del tema y guías de uso

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 09:31:47 -06:00

10 KiB

Theme Options Testing Checklist

Pre-Testing Setup

  • Activate the Apus Theme
  • Verify you're logged in as an administrator
  • Check PHP error_log for any warnings/errors
  • Open browser console (F12) to check for JavaScript errors

Admin Panel Access

  • Navigate to Appearance > Theme Options in WordPress admin
  • Verify the page loads without errors
  • Check that the page title shows "Apus Theme Options"
  • Verify the version number is displayed (v1.0.0)
  • Confirm all 5 tabs are visible (General, Content, Performance, Related Posts, Advanced)

General Tab Testing

Logo Upload

  • Click "Upload Logo" button
  • Verify WordPress media library opens
  • Upload an image (recommended: 200x60px)
  • Verify image preview appears
  • Click "Remove Logo" button
  • Verify preview disappears and hidden input is cleared
  • Re-upload logo for further testing

Favicon Upload

  • Click "Upload Favicon" button
  • Upload a favicon image (recommended: 32x32px)
  • Verify preview appears
  • Test remove functionality

Breadcrumbs

  • Toggle breadcrumbs enable/disable switch
  • Verify the switch animation works
  • Change breadcrumb separator (try: >, /, », →)
  • Save settings

Date/Time Format

  • Change date format (try: d/m/Y, m/d/Y, Y-m-d)
  • Change time format (try: H:i, g:i A)
  • Save settings
  • Edit copyright text
  • Try adding HTML (like <strong>, <a>)
  • Save and verify HTML is preserved (not stripped)
  • Add Facebook URL
  • Add Twitter URL
  • Add Instagram URL
  • Add LinkedIn URL
  • Add YouTube URL
  • Try invalid URLs (should show validation error)
  • Save valid URLs

Content Tab Testing

Excerpt Settings

  • Change excerpt length (try: 30, 55, 100)
  • Change excerpt more text (try: ..., [Read more], →)
  • Save settings

Layout Settings

  • Change default post layout (Right Sidebar, Left Sidebar, No Sidebar)
  • Change default page layout
  • Save settings

Archive Settings

  • Change archive posts per page (try: 10, 20, 0)
  • Save settings

Display Options

  • Toggle "Show Featured Image" on single posts
  • Toggle "Show Author Box"
  • Toggle "Enable Comments on Posts"
  • Toggle "Enable Comments on Pages"
  • Toggle "Show Post Meta"
  • Toggle "Show Post Tags"
  • Toggle "Show Post Categories"
  • Save settings

Performance Tab Testing

Performance Options

  • Toggle "Enable Lazy Loading"
  • Toggle "Remove Emoji Scripts"
  • Toggle "Remove Embeds"
  • Toggle "Remove Dashicons"
  • Toggle "Defer JavaScript"
  • Toggle "Minify HTML"
  • Toggle "Disable Gutenberg"
  • Save settings
  • Verify front-end reflects changes (check page source)
  • Toggle "Enable Related Posts"
  • Verify that when disabled, other fields become disabled/grayed out
  • Enable related posts
  • Change number of related posts (try: 1, 3, 6, 12)
  • Change taxonomy (Category, Tag, Both)
  • Change related posts title
  • Change columns (2, 3, 4)
  • Save settings

Advanced Tab Testing

Custom CSS

  • Add custom CSS code (e.g., body { background: #f0f0f0; })
  • Try adding <script> tags (should be removed on save)
  • Save settings
  • Check front-end page source for custom CSS in <head>

Custom JavaScript

  • Add custom JS in header (e.g., console.log('Header JS');)
  • Add custom JS in footer (e.g., console.log('Footer JS');)
  • Try adding <?php tags (should be removed)
  • Save settings
  • Check front-end page source for scripts
  • Check browser console for log messages

Form Validation Testing

Required Fields

  • Try saving with empty required fields
  • Verify error highlighting appears
  • Verify scroll to first error works

Number Fields

  • Try entering values below minimum
  • Try entering values above maximum
  • Try entering negative numbers where not allowed
  • Verify validation works

URL Fields

  • Try invalid URLs (e.g., "not a url")
  • Verify validation shows error
  • Enter valid URLs
  • Save successfully

Import/Export Testing

Export

  • Click "Export Options" button
  • Verify JSON file downloads
  • Open file and verify it contains valid JSON
  • Verify all settings are in the export

Import

  • Make some changes to settings
  • Click "Import Options" button
  • Verify modal opens
  • Paste invalid JSON (should show error)
  • Paste valid JSON from export
  • Click "Import" button
  • Verify success message appears
  • Verify page reloads
  • Confirm settings are restored

Reset to Defaults Testing

  • Make changes to various settings
  • Click "Reset to Defaults" button
  • Verify confirmation dialog appears
  • Cancel the dialog (settings should remain)
  • Click "Reset to Defaults" again
  • Confirm the reset
  • Verify success message
  • Verify page reloads
  • Confirm all settings are back to defaults

Tab Navigation Testing

Tab Switching

  • Click each tab and verify content switches
  • Verify active tab styling is correct
  • Check URL hash changes (e.g., #general, #content)
  • Refresh page with hash in URL
  • Verify correct tab loads on page load
  • Use browser back/forward buttons
  • Verify tabs respond to navigation

Save Settings Testing

  • Make changes in multiple tabs
  • Click "Save All Settings" button
  • Verify success message appears
  • Refresh page
  • Verify all changes persisted
  • Check database (wp_options table for apus_theme_options)

Helper Functions Testing

Create a test page template and test each helper function:

// Test in a template file
<?php
// Test logo
$logo = apus_get_logo_url();
echo $logo ? 'Logo URL: ' . $logo : 'No logo set';

// Test breadcrumbs
echo 'Breadcrumbs enabled: ' . (apus_show_breadcrumbs() ? 'Yes' : 'No');

// Test excerpt
echo 'Excerpt length: ' . apus_get_excerpt_length();

// Test related posts
echo 'Related posts enabled: ' . (apus_show_related_posts() ? 'Yes' : 'No');

// Test social links
$social = apus_get_social_links();
print_r($social);

// Test all options
$all = apus_get_all_options();
print_r($all);
?>
  • Test each helper function returns expected values
  • Test default values when options not set
  • Test boolean helper functions return true/false
  • Test get_option with custom defaults

Front-End Integration Testing

Logo Display

  • Visit front-end site
  • Verify logo appears in header (if set)
  • Verify favicon appears in browser tab

Breadcrumbs

  • Visit a single post
  • Verify breadcrumbs appear (if enabled)
  • Check separator is correct
  • Visit a category archive
  • Verify breadcrumbs work correctly
  • Visit a single post
  • Scroll to bottom
  • Verify related posts appear (if enabled)
  • Check count matches settings
  • Verify title matches settings
  • Check layout columns are correct

Comments

  • Visit a post (verify comments shown/hidden based on settings)
  • Visit a page (verify comments shown/hidden based on settings)

Performance

  • Check page source for removed scripts (emoji, embeds, dashicons)
  • Check if lazy loading is applied to images
  • Check if custom CSS appears in head
  • Check if custom JS appears in head/footer
  • Check footer for social links
  • Verify all entered links appear
  • Test links open in new tab
  • Check footer for copyright text
  • Verify HTML formatting is preserved

Responsive Testing

  • Test options page on desktop (1920px)
  • Test on tablet (768px)
  • Test on mobile (375px)
  • Verify tabs switch to mobile layout
  • Verify forms remain usable
  • Test all buttons work on mobile

Browser Compatibility Testing

  • Test in Chrome
  • Test in Firefox
  • Test in Safari
  • Test in Edge
  • Verify all features work in each browser

Accessibility Testing

  • Test keyboard navigation (Tab, Enter, Escape)
  • Test with screen reader (NVDA, JAWS, or VoiceOver)
  • Verify focus indicators are visible
  • Check color contrast meets WCAG standards
  • Verify all images have alt text
  • Check form labels are properly associated

Security Testing

  • Verify nonces are checked on all AJAX calls
  • Test capability checks (log out and try accessing page)
  • Try injecting <script> tags in text fields
  • Try injecting SQL in fields
  • Try injecting PHP code in custom CSS/JS
  • Verify all outputs are escaped
  • Check CSRF protection works

Performance Testing

  • Check page load time of options page
  • Verify no memory leaks in browser
  • Check network tab for unnecessary requests
  • Verify scripts/styles only load on options page
  • Test with large amounts of data in textareas

Error Handling Testing

  • Disconnect from internet and try saving (should show error)
  • Modify nonce and try saving (should fail)
  • Try uploading very large image (should handle gracefully)
  • Try importing corrupted JSON (should show error)
  • Fill textarea with 100,000 characters (should save)

Console Testing

Throughout all testing, monitor for:

  • JavaScript errors in console
  • PHP errors in server logs
  • WordPress debug.log errors
  • Network errors in Network tab
  • Deprecation warnings

Final Verification

  • All settings save correctly
  • All settings load correctly on page refresh
  • Front-end reflects all settings changes
  • No JavaScript errors anywhere
  • No PHP errors/warnings
  • No console errors
  • Page performance is acceptable
  • Mobile experience is good
  • Accessibility is maintained

Sign-Off

Tested by: _______________ Date: _______________ Version: 1.0.0 Browser(s): _______________ WordPress Version: _______________ PHP Version: _______________

All tests passed: [ ] Yes [ ] No

Issues found (if any):