Testing¶

This guide covers testing procedures for OSGEO-Inject.

Test Server¶

Start the local test server:

npm run serve
# or
nix run .#test-server

Visit http://localhost:8080/test/demo.html

Manual Testing¶

Badge Display¶

Open demo page
Verify badge appears in correct position
Check logo loads correctly
Verify announcement text displays

Position Testing¶

Test all four positions:

data-position="top-right"
data-position="top-left"
data-position="bottom-right"
data-position="bottom-left"

Theme Testing¶

Auto: Change system theme, verify badge updates
Light: Force light mode
Dark: Force dark mode

Collapsed State¶

data-collapsed="true"

Verify badge starts collapsed and can be expanded.

Mobile Testing¶

Open demo in mobile viewport
Verify responsive layout
Check touch interactions

Accessibility Testing¶

Keyboard: Tab through badge, verify focus states
Screen Reader: Test with VoiceOver/NVDA
Reduced Motion: Enable preference, verify no animations

Automated Testing¶

Linting¶

npm run lint

Format Check¶

npm run format:check

Pre-commit Hooks¶

pre-commit run --all-files

CORS Testing¶

Test CORS from different origins:

# Should succeed (whitelisted)
curl -H "Origin: https://qgis.org" \
     -I https://affiliate.osgeo.org/js/osgeo-inject.min.js

# Should fail (not whitelisted)
curl -H "Origin: https://evil.com" \
     -I https://affiliate.osgeo.org/js/osgeo-inject.min.js

Performance Testing¶

Asset Size¶

npm run build
ls -la src/js/osgeo-inject.min.js  # Should be < 10KB
ls -la src/css/osgeo-inject.min.css  # Should be < 5KB

Network¶

Use browser DevTools: 1. Open Network tab 2. Load demo page 3. Verify all requests complete quickly 4. Check for caching headers

Browser Compatibility¶

Test in: - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) - Mobile Safari - Chrome Android