365devnet/TESTING.md

Testing & Pre-Deployment Checklist

This document outlines how to test your changes before deploying to production.

Development Workflow

1. Regular Development (Fast, no CSP)

npm run dev

• Uses Astro dev server
• Hot reload enabled
• No CSP enforcement
• Best for rapid development

2. Production-like Testing (Before Deployment)

npm run dev:prod

• Builds the production bundle
• Runs with server.js (same as production)
• Enables CSP (ENABLE_SSR_CSP=1)
• Tests all security headers
• Use this to catch production issues early!

3. Quick Production Test (After Build)

If you've already built:

npm run preview:prod

• Skips rebuild
• Runs existing build with CSP enabled
• Faster than dev:prod

Pre-Deployment Checklist

Before pushing to production, always test with CSP enabled:

• Run npm run dev:prod locally
• Test all interactive features:
  • Mobile menu toggle
  • Language selector
  • Theme switcher (dark/light mode)
  • Contact form
  • Smooth scrolling
  • Latest commits widget (if applicable)
  • RocketChat widget
• Check browser console for CSP violations
• Test on multiple browsers (Chrome, Firefox, Safari)
• Test on mobile devices
• Run npm run check (linting & type checking)

Common CSP Issues

Symptom: JavaScript not working in production

Error in console: "Refused to execute inline script because it violates CSP directive..."

Solution: Check that 'unsafe-inline' is in the script-src directive in server.js

Symptom: External resources blocked

Error in console: "Refused to load... because it violates CSP directive..."

Solution: Add the domain to the appropriate CSP directive:

• Images: Add to img-src
• Scripts: Add to script-src
• Styles: Add to style-src
• API calls: Add to connect-src

Environment Parity

Development and Production should match as closely as possible:

Environment	Dev Server	CSP Enabled	Use Case
npm run dev	Astro	❌ No	Fast development
npm run dev:prod	Express	✅ Yes	Pre-deployment testing
Docker (production)	Express	✅ Yes	Production

Docker Testing (Optional)

To test the exact Docker environment locally:

# Build the Docker image
docker build -t 365devnet-test .

# Run it locally
docker run -p 3000:3000 -e ENABLE_SSR_CSP=1 365devnet-test

# Visit http://localhost:3000

Continuous Integration (CI)

Consider adding these checks to your CI pipeline:

# .github/workflows/test.yml (example)
- name: Build
  run: npm run build

- name: Test with CSP
  run: |
    ENABLE_SSR_CSP=1 npm run start &
    sleep 5
    curl -f http://localhost:3000 || exit 1

Best Practices

1. Always test with dev:prod before deploying
2. Check browser console for errors
3. Test interactive features manually
4. Keep development and production environments in sync
5. Document any CSP changes in server.js
6. Update this checklist as new features are added

Troubleshooting

Q: CSP is too restrictive, breaking features A: Carefully add specific domains/directives instead of disabling CSP entirely

Q: Need to temporarily disable CSP for testing A: Run without ENABLE_SSR_CSP=1: npm run start

Q: CSP works locally but not in Docker A: Check docker-compose.yml - ensure ENABLE_SSR_CSP=1 is set

---

Remember: Security settings that don't work in production are useless. Test early, test often! 🛡️