+ aria-live="polite"
+ aria-atomic="true">
+```
+
+### Screen Reader Behavior
+
+1. **Toast Appears**: Screen reader announces title + message
+2. **Toast Updates**: New content announced automatically
+3. **Toast Dismisses**: Silent (user already informed)
+
+### Keyboard Navigation
+
+- **Close Button**: Focusable with `Tab`
+- **Enter/Space**: Activate close button
+- **ESC**: Closes parent modal (which may trigger toast)
+
+### Reduced Motion
+
+Users with motion sensitivity get simplified animations:
+
+```css
+@media (prefers-reduced-motion: reduce) {
+ .success-toast,
+ .error-toast,
+ .toast {
+ animation: none;
+ opacity: 1;
+ }
+
+ .toast-progress-bar {
+ animation: none;
+ }
+}
+```
+
+**Effect:** Toast appears/disappears instantly without sliding/fading.
+
+---
+
+## Testing
+
+### Automated Test
+
+**File:** `tests/mjs/29-pdf-toast-notifications.test.mjs`
+
+**Coverage:**
+- ✅ Toast elements exist in DOM
+- ✅ Toast initially hidden
+- ✅ JavaScript functions available
+- ✅ Manual toast trigger works
+- ✅ Toast auto-hides after duration
+- ✅ PDF modal integration (Scenario A: Stay in modal)
+- ✅ PDF modal integration (Scenario B: Close modal early)
+- ✅ CSS animations defined
+- ✅ Icon/title/message updates
+- ✅ Progress bar animation
+
+**Run Test:**
+```bash
+bun tests/mjs/29-pdf-toast-notifications.test.mjs
+```
+
+### Manual Testing Checklist
+
+**Scenario 1: Modal Overlay Only**
+- [ ] Open PDF modal
+- [ ] Select Default CV
+- [ ] Click Download PDF
+- [ ] Wait in modal without closing
+- [ ] Verify overlay shows with spinner
+- [ ] Verify modal closes after ~4 seconds
+- [ ] Verify NO toast appears
+
+**Scenario 2: Toast After Modal Close**
+- [ ] Open PDF modal
+- [ ] Select Extended CV (9 pages)
+- [ ] Click Download PDF
+- [ ] Immediately press ESC to close modal
+- [ ] Verify toast appears bottom-right
+- [ ] Verify icon is 📥
+- [ ] Verify title says "Preparing PDF..."
+- [ ] Verify message includes format name and time
+- [ ] Verify progress bar animates (shrinks)
+- [ ] Wait ~8 seconds
+- [ ] Verify toast updates to ✅
+- [ ] Verify title says "PDF Ready!"
+- [ ] Verify toast auto-dismisses after ~3 seconds
+
+**Scenario 3: Close Button**
+- [ ] Trigger toast manually (browser console): `showPDFToast({icon: '🧪', title: 'Test', message: 'Test message'})`
+- [ ] Click × close button
+- [ ] Verify toast disappears immediately
+
+**Scenario 4: Mobile Responsive**
+- [ ] Resize browser to < 540px width
+- [ ] Trigger toast
+- [ ] Verify toast is full-width at bottom
+- [ ] Verify content is readable
+- [ ] Verify close button accessible
+
+---
+
+## Customization Guide
+
+### Adding a New Toast Variant
+
+**1. Define CSS Class** (`static/css/04-interactive/_toasts.css`):
+
+```css
+.custom-toast {
+ background: linear-gradient(135deg,
+ rgba(156, 39, 176, 0.95) 0%,
+ rgba(123, 31, 162, 0.95) 100%);
+ color: white;
+ border-left: 4px solid #fff;
+}
+```
+
+**2. Create HTML Template** (`templates/partials/widgets/custom-toast.html`):
+
+```html
+{{define "custom-toast"}}
+
+{{end}}
+```
+
+**3. Add JavaScript Function** (`static/js/main.js`):
+
+```javascript
+window.showCustomToast = function(options = {}) {
+ const toast = document.getElementById('custom-toast');
+ const icon = document.getElementById('custom-toast-icon');
+ const title = document.getElementById('custom-toast-title');
+ const message = document.getElementById('custom-toast-message');
+
+ if (options.icon) icon.textContent = options.icon;
+ if (options.title) title.textContent = options.title;
+ if (options.message) message.textContent = options.message;
+
+ toast.classList.remove('show');
+ void toast.offsetWidth;
+ toast.classList.add('show');
+
+ if (options.autoHide !== false) {
+ const duration = options.duration || 5000;
+ setTimeout(() => toast.classList.remove('show'), duration);
+ }
+};
+```
+
+**4. Include in Index** (`templates/index.html`):
+
+```html
+{{template "custom-toast" .}}
+```
+
+### Changing Animation Duration
+
+**CSS** (`_toasts.css`):
+
+```css
+/* Change lifecycle duration (default: 5s) */
+.toast.show {
+ animation: toastLifecycle 8s ease forwards; /* Now 8 seconds */
+}
+
+/* Change progress bar duration */
+.toast-progress-bar {
+ animation: progressShrink 8s linear forwards; /* Match lifecycle */
+}
+```
+
+**JavaScript** (when calling function):
+
+```javascript
+window.showPDFToast({
+ icon: '📥',
+ title: 'Preparing...',
+ message: 'This will take longer',
+ duration: 10000 // 10 seconds
+});
+```
+
+---
+
+## Troubleshooting
+
+### Toast Not Appearing
+
+**Symptom:** Calling `showPDFToast()` has no effect.
+
+**Checks:**
+1. Verify toast element exists: `document.getElementById('pdf-toast')`
+2. Check console for JavaScript errors
+3. Verify CSS is loaded: Inspect element and check for `.success-toast` styles
+4. Confirm `toasts.css` imported in `main.css`
+5. Check `index.html` includes `{{template "pdf-toast" .}}`
+
+**Solution:**
+```bash
+# Verify CSS import
+grep "toasts.css" static/css/main.css
+
+# Verify template inclusion
+grep "pdf-toast" templates/index.html
+
+# Check browser console
+# Should see no errors when calling showPDFToast()
+```
+
+---
+
+### Toast Not Auto-Dismissing
+
+**Symptom:** Toast appears but never disappears.
+
+**Checks:**
+1. Verify `autoHide` is not set to `false`
+2. Check CSS animation: `toastLifecycle` should be defined
+3. Inspect element: `animation` property should be set
+4. Check for `prefers-reduced-motion` (disables animations)
+
+**Solution:**
+```javascript
+// Explicitly set autoHide
+window.showPDFToast({
+ icon: '✅',
+ title: 'Test',
+ message: 'Should auto-hide',
+ duration: 3000,
+ autoHide: true // Explicitly enable
+});
+
+// Or manually hide
+setTimeout(() => window.hidePDFToast(), 3000);
+```
+
+---
+
+### Progress Bar Not Animating
+
+**Symptom:** Progress bar appears but doesn't shrink.
+
+**Checks:**
+1. Verify `progressShrink` animation is defined in CSS
+2. Check animation is applied: Inspect `#pdf-toast-progress`
+3. Confirm `prefers-reduced-motion` is not active
+4. Check `duration` parameter matches animation duration
+
+**Solution:**
+```javascript
+// Ensure progress bar animation resets
+const progressBar = document.getElementById('pdf-toast-progress');
+if (progressBar) {
+ progressBar.style.animation = 'none';
+ void progressBar.offsetWidth; // Trigger reflow
+ progressBar.style.animation = 'progressShrink 5000ms linear forwards';
+}
+```
+
+---
+
+### Toast Overlaps Content on Mobile
+
+**Symptom:** Toast covers important content on small screens.
+
+**Checks:**
+1. Verify responsive CSS is loaded
+2. Check viewport width: `< 540px` should trigger mobile styles
+3. Inspect `z-index` conflicts
+
+**Solution:**
+```css
+/* Adjust mobile positioning */
+@media (max-width: 540px) {
+ .toast {
+ bottom: 1rem; /* Lower if needed */
+ right: 1rem;
+ left: 1rem;
+ z-index: 10000; /* Ensure on top */
+ }
+}
+```
+
+---
+
+### Multiple Toasts Stacking
+
+**Symptom:** Calling `showPDFToast()` multiple times creates overlapping toasts.
+
+**Root Cause:** Current system uses single toast element, so multiple calls update the same toast.
+
+**Expected Behavior:** Later calls replace earlier toast content.
+
+**If You Need Multiple Toasts:**
+
+1. Clone toast element before showing:
+```javascript
+function showMultipleToasts(options) {
+ const original = document.getElementById('pdf-toast');
+ const clone = original.cloneNode(true);
+ clone.id = `toast-${Date.now()}`;
+ document.body.appendChild(clone);
+
+ // Update clone content and show
+ // ... similar logic to showPDFToast ...
+}
+```
+
+2. Or use a toast queue system (advanced).
+
+---
+
+## Related Documentation
+
+- [2. Modern Web Techniques](2-MODERN-WEB-TECHNIQUES.md) - HTMX patterns and hypermedia architecture
+- [12. CSS Architecture](12-CSS-ARCHITECTURE.md) - Modular CSS structure and ITCSS organization
+- [3. API Reference](3-API.md) - Backend API endpoints including PDF export
+- [11. PDF Export](11-PDF-EXPORT.md) - PDF generation with chromedp
+
+---
+
+**Last Updated**: 2025-11-20
+**Version**: 1.0
+**Status**: Production Ready
+**Test Coverage**: 29-pdf-toast-notifications.test.mjs (22 assertions)
diff --git a/doc/README.md b/doc/README.md
index f18f9eb..7022496 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -17,6 +17,7 @@
- [4. Hyperscript Rules](4-HYPERSCRIPT-RULES.md) - Hyperscript conventions and best practices
- [5. Zoom Implementation](5-ZOOM-IMPLEMENTATION.md) - Custom zoom feature technical details
- [12. CSS Architecture](12-CSS-ARCHITECTURE.md) - Modular CSS structure and ITCSS organization ⭐
+- [13. Toast Notifications](13-TOAST-NOTIFICATIONS.md) - Toast notification system for PDF downloads and user feedback
**Deployment & Operations**
- [8. Deployment Guide](8-DEPLOYMENT.md) - Production deployment instructions
@@ -44,6 +45,7 @@
| 4 | [HYPERSCRIPT-RULES.md](4-HYPERSCRIPT-RULES.md) | Hyperscript coding conventions | Frontend developers |
| 5 | [ZOOM_IMPLEMENTATION.md](5-ZOOM-IMPLEMENTATION.md) | Zoom feature implementation details | Feature developers |
| 12 | [CSS-ARCHITECTURE.md](12-CSS-ARCHITECTURE.md) | Modular CSS structure, ITCSS layers, HTMX integration | Frontend developers, designers |
+| 13 | [TOAST-NOTIFICATIONS.md](13-TOAST-NOTIFICATIONS.md) | Toast notification system, PDF download feedback, user notifications | Frontend developers, UX designers |
### User & Operations Documentation
@@ -139,4 +141,4 @@ All documentation in this project follows these standards:
**Last Updated**: 2025-11-20
**Documentation Status**: ✅ Clean, organized, zero redundancy
-**Total Active Docs**: 12 core documents + archive
+**Total Active Docs**: 13 core documents + archive
diff --git a/tests/README.md b/tests/README.md
index ea909c8..9f23713 100644
--- a/tests/README.md
+++ b/tests/README.md
@@ -295,6 +295,6 @@ Every time something breaks in production:
---
**Last Updated**: 2025-11-20
-**Test Count**: 27 active tests (0-28 numbered + migration tests)
+**Test Count**: 28 active tests (0-29 numbered + migration tests)
**Status**: Production specification
**Responsibility**: These tests define what "working" means
diff --git a/tests/TEST-SUMMARY.md b/tests/TEST-SUMMARY.md
index d38046b..f9dc40c 100644
--- a/tests/TEST-SUMMARY.md
+++ b/tests/TEST-SUMMARY.md
@@ -287,8 +287,8 @@ When adding tests:
---
**Last Updated**: 2025-11-20
-**Test Count**: 27 active tests - Comprehensive coverage
-**Coverage**: Complete (UI, keyboard, HTMX, i18n, modals, mobile, zoom, hover-sync, hyperscript, skeleton loaders, color themes, button positioning, PDF modal, icons, dark theme, course icons, references)
+**Test Count**: 28 active tests - Comprehensive coverage
+**Coverage**: Complete (UI, keyboard, HTMX, i18n, modals, mobile, zoom, hover-sync, hyperscript, skeleton loaders, color themes, button positioning, PDF modal, icons, dark theme, course icons, references, toast notifications)
**Status**: SINGLE SOURCE OF TRUTH - Production specification
**Philosophy**: Each test validates specific functionality and edge cases
diff --git a/tests/mjs/29-pdf-toast-notifications.test.mjs b/tests/mjs/29-pdf-toast-notifications.test.mjs
new file mode 100644
index 0000000..bfe5eb6
--- /dev/null
+++ b/tests/mjs/29-pdf-toast-notifications.test.mjs
@@ -0,0 +1,403 @@
+#!/usr/bin/env bun
+/**
+ * PDF TOAST NOTIFICATIONS TEST
+ * =============================
+ * Tests the toast notification system for PDF downloads
+ * Validates both modal overlay and toast notification flows
+ */
+
+import { chromium } from 'playwright';
+
+const URL = "http://localhost:1999";
+
+async function testPDFToastNotifications() {
+ console.log('🧪 PDF TOAST NOTIFICATIONS TEST\n');
+ console.log('='.repeat(70));
+
+ const browser = await chromium.launch({ headless: false });
+ const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+ const errors = [];
+ const testResults = [];
+
+ // Track console errors
+ page.on('console', msg => {
+ if (msg.type() === 'error') {
+ errors.push(msg.text());
+ console.log(`❌ CONSOLE ERROR: ${msg.text()}`);
+ }
+ });
+
+ try {
+ // =====================================================================
+ // SETUP: Navigate to page
+ // =====================================================================
+ console.log('\n📍 STEP 1: Navigate to CV page');
+ await page.goto(URL);
+ await page.waitForLoadState('networkidle');
+ console.log('✅ Page loaded successfully');
+
+ // =====================================================================
+ // TEST 1: Toast Elements Exist
+ // =====================================================================
+ console.log('\n📍 STEP 2: Verify toast elements exist in DOM');
+
+ const pdfToast = await page.locator('#pdf-toast');
+ const toastExists = await pdfToast.count() > 0;
+ testResults.push({
+ test: 'PDF toast element exists',
+ passed: toastExists
+ });
+ console.log(toastExists ? '✅ PDF toast element found' : '❌ PDF toast element not found');
+
+ const toastIcon = await page.locator('#pdf-toast-icon');
+ const iconExists = await toastIcon.count() > 0;
+ testResults.push({
+ test: 'Toast icon element exists',
+ passed: iconExists
+ });
+ console.log(iconExists ? '✅ Toast icon element found' : '❌ Toast icon not found');
+
+ const toastTitle = await page.locator('#pdf-toast-title');
+ const titleExists = await toastTitle.count() > 0;
+ testResults.push({
+ test: 'Toast title element exists',
+ passed: titleExists
+ });
+ console.log(titleExists ? '✅ Toast title element found' : '❌ Toast title not found');
+
+ const toastMessage = await page.locator('#pdf-toast-message');
+ const messageExists = await toastMessage.count() > 0;
+ testResults.push({
+ test: 'Toast message element exists',
+ passed: messageExists
+ });
+ console.log(messageExists ? '✅ Toast message element found' : '❌ Toast message not found');
+
+ const progressBar = await page.locator('#pdf-toast-progress');
+ const progressExists = await progressBar.count() > 0;
+ testResults.push({
+ test: 'Toast progress bar exists',
+ passed: progressExists
+ });
+ console.log(progressExists ? '✅ Toast progress bar found' : '❌ Progress bar not found');
+
+ // =====================================================================
+ // TEST 2: Toast Initially Hidden
+ // =====================================================================
+ console.log('\n📍 STEP 3: Verify toast is initially hidden');
+
+ const isInitiallyHidden = !(await pdfToast.evaluate(el => el.classList.contains('show')));
+ testResults.push({
+ test: 'Toast initially hidden',
+ passed: isInitiallyHidden
+ });
+ console.log(isInitiallyHidden ? '✅ Toast is hidden initially' : '❌ Toast is visible (should be hidden)');
+
+ // =====================================================================
+ // TEST 3: JavaScript Functions Available
+ // =====================================================================
+ console.log('\n📍 STEP 4: Verify JavaScript toast functions exist');
+
+ const showPDFToastExists = await page.evaluate(() => typeof window.showPDFToast === 'function');
+ testResults.push({
+ test: 'showPDFToast() function exists',
+ passed: showPDFToastExists
+ });
+ console.log(showPDFToastExists ? '✅ showPDFToast() function available' : '❌ showPDFToast() not found');
+
+ const hidePDFToastExists = await page.evaluate(() => typeof window.hidePDFToast === 'function');
+ testResults.push({
+ test: 'hidePDFToast() function exists',
+ passed: hidePDFToastExists
+ });
+ console.log(hidePDFToastExists ? '✅ hidePDFToast() function available' : '❌ hidePDFToast() not found');
+
+ // =====================================================================
+ // TEST 4: Manual Toast Trigger Test
+ // =====================================================================
+ console.log('\n📍 STEP 5: Test manual toast trigger');
+
+ await page.evaluate(() => {
+ window.showPDFToast({
+ icon: '🧪',
+ title: 'Test Toast',
+ message: 'This is a test notification',
+ duration: 3000
+ });
+ });
+
+ await page.waitForTimeout(500);
+
+ const isToastVisible = await pdfToast.evaluate(el => el.classList.contains('show'));
+ testResults.push({
+ test: 'Toast appears when showPDFToast() called',
+ passed: isToastVisible
+ });
+ console.log(isToastVisible ? '✅ Toast appears correctly' : '❌ Toast did not appear');
+
+ const toastIconText = await toastIcon.textContent();
+ const iconCorrect = toastIconText === '🧪';
+ testResults.push({
+ test: 'Toast icon updates correctly',
+ passed: iconCorrect
+ });
+ console.log(iconCorrect ? `✅ Toast icon: "${toastIconText}"` : `❌ Icon incorrect: "${toastIconText}"`);
+
+ const toastTitleText = await toastTitle.textContent();
+ const titleCorrect = toastTitleText === 'Test Toast';
+ testResults.push({
+ test: 'Toast title updates correctly',
+ passed: titleCorrect
+ });
+ console.log(titleCorrect ? `✅ Toast title: "${toastTitleText}"` : `❌ Title incorrect: "${toastTitleText}"`);
+
+ // Wait for auto-hide
+ console.log('⏳ Waiting 3.5 seconds for toast auto-hide...');
+ await page.waitForTimeout(3500);
+
+ const isToastHidden = !(await pdfToast.evaluate(el => el.classList.contains('show')));
+ testResults.push({
+ test: 'Toast auto-hides after duration',
+ passed: isToastHidden
+ });
+ console.log(isToastHidden ? '✅ Toast auto-hid correctly' : '❌ Toast still visible (should auto-hide)');
+
+ // =====================================================================
+ // TEST 5: PDF Modal Integration - Scenario A (Stay in Modal)
+ // =====================================================================
+ console.log('\n📍 STEP 6: Test PDF modal integration (Scenario A: Stay in Modal)');
+
+ // Open PDF modal
+ const pdfButton = await page.locator('button[onclick*="openPdfModal"], .download-btn').first();
+ await pdfButton.click();
+ await page.waitForTimeout(500);
+
+ const modal = await page.locator('#pdf-modal[open]');
+ const isModalOpen = await modal.count() > 0;
+ testResults.push({
+ test: 'PDF modal opens',
+ passed: isModalOpen
+ });
+ console.log(isModalOpen ? '✅ PDF modal opened' : '❌ PDF modal did not open');
+
+ // Select Default CV
+ const defaultCard = await page.locator('.pdf-option-card[data-cv-format="default"]');
+ await defaultCard.click();
+ await page.waitForTimeout(300);
+
+ // Click download but DON'T close modal
+ const downloadBtn = await page.locator('#pdf-download-btn');
+ await downloadBtn.click();
+ await page.waitForTimeout(300);
+
+ // Check overlay appears
+ const overlay = await page.locator('#pdf-loading-overlay');
+ const isOverlayActive = await overlay.evaluate(el => el.classList.contains('active'));
+ testResults.push({
+ test: 'Loading overlay appears on download',
+ passed: isOverlayActive
+ });
+ console.log(isOverlayActive ? '✅ Loading overlay is active' : '❌ Loading overlay did not activate');
+
+ // Toast should NOT appear yet (modal still open)
+ await page.waitForTimeout(500);
+ const toastShouldNotShow = !(await pdfToast.evaluate(el => el.classList.contains('show')));
+ testResults.push({
+ test: 'Toast does not appear when modal stays open',
+ passed: toastShouldNotShow
+ });
+ console.log(toastShouldNotShow ? '✅ Toast correctly hidden (modal open)' : '⚠️ Toast appeared (should wait for modal close)');
+
+ // Wait for modal to close automatically
+ console.log('⏳ Waiting 5 seconds for modal auto-close...');
+ await page.waitForTimeout(5000);
+
+ const isModalClosed = await page.locator('#pdf-modal[open]').count() === 0;
+ testResults.push({
+ test: 'Modal auto-closes after download',
+ passed: isModalClosed
+ });
+ console.log(isModalClosed ? '✅ Modal closed automatically' : '❌ Modal still open (should auto-close)');
+
+ // =====================================================================
+ // TEST 6: PDF Modal Integration - Scenario B (Close Modal Early)
+ // =====================================================================
+ console.log('\n📍 STEP 7: Test PDF modal integration (Scenario B: Close Modal Early)');
+
+ // Re-open PDF modal
+ await pdfButton.click();
+ await page.waitForTimeout(500);
+
+ // Select Short CV (faster for testing)
+ const shortCard = await page.locator('.pdf-option-card[data-cv-format="short"]');
+ await shortCard.click();
+ await page.waitForTimeout(300);
+
+ // Click download
+ await downloadBtn.click();
+ await page.waitForTimeout(300);
+
+ // Immediately close modal (ESC key)
+ await page.keyboard.press('Escape');
+ await page.waitForTimeout(500);
+
+ // Toast SHOULD appear now
+ const toastAppearsOnClose = await pdfToast.evaluate(el => el.classList.contains('show'));
+ testResults.push({
+ test: 'Toast appears when modal closed early',
+ passed: toastAppearsOnClose
+ });
+ console.log(toastAppearsOnClose ? '✅ Toast appeared after modal close' : '❌ Toast did not appear');
+
+ if (toastAppearsOnClose) {
+ // Check toast content
+ const currentIcon = await toastIcon.textContent();
+ const iconIsPreparing = currentIcon === '📥';
+ testResults.push({
+ test: 'Toast shows preparing icon (📥)',
+ passed: iconIsPreparing
+ });
+ console.log(iconIsPreparing ? `✅ Toast icon: "${currentIcon}"` : `⚠️ Unexpected icon: "${currentIcon}"`);
+
+ const currentTitle = await toastTitle.textContent();
+ const titleIsPreparing = currentTitle.includes('Preparing') || currentTitle.includes('Preparando');
+ testResults.push({
+ test: 'Toast shows preparing title',
+ passed: titleIsPreparing
+ });
+ console.log(titleIsPreparing ? `✅ Toast title: "${currentTitle}"` : `⚠️ Title: "${currentTitle}"`);
+
+ // Check progress bar animation
+ const hasProgressAnimation = await page.evaluate(() => {
+ const bar = document.getElementById('pdf-toast-progress');
+ const style = window.getComputedStyle(bar);
+ return style.animation && style.animation !== 'none';
+ });
+ testResults.push({
+ test: 'Progress bar animates',
+ passed: hasProgressAnimation
+ });
+ console.log(hasProgressAnimation ? '✅ Progress bar is animating' : '❌ Progress bar not animated');
+
+ // Wait for toast to update to success
+ console.log('⏳ Waiting 4 seconds for toast to update to success...');
+ await page.waitForTimeout(4000);
+
+ const finalIcon = await toastIcon.textContent();
+ const iconIsSuccess = finalIcon === '✅';
+ testResults.push({
+ test: 'Toast updates to success icon (✅)',
+ passed: iconIsSuccess
+ });
+ console.log(iconIsSuccess ? `✅ Toast updated: "${finalIcon}"` : `⚠️ Final icon: "${finalIcon}"`);
+
+ const finalTitle = await toastTitle.textContent();
+ const titleIsReady = finalTitle.includes('Ready') || finalTitle.includes('Listo');
+ testResults.push({
+ test: 'Toast shows ready title',
+ passed: titleIsReady
+ });
+ console.log(titleIsReady ? `✅ Toast title: "${finalTitle}"` : `⚠️ Title: "${finalTitle}"`);
+
+ // Wait for final auto-dismiss
+ console.log('⏳ Waiting 4 seconds for final toast auto-dismiss...');
+ await page.waitForTimeout(4000);
+
+ const finallyHidden = !(await pdfToast.evaluate(el => el.classList.contains('show')));
+ testResults.push({
+ test: 'Toast auto-dismisses after success',
+ passed: finallyHidden
+ });
+ console.log(finallyHidden ? '✅ Toast dismissed successfully' : '⚠️ Toast still visible');
+ }
+
+ // =====================================================================
+ // TEST 7: CSS Animations
+ // =====================================================================
+ console.log('\n📍 STEP 8: Verify CSS animations are defined');
+
+ const hasSlideInAnimation = await page.evaluate(() => {
+ const sheet = Array.from(document.styleSheets).find(s => s.href?.includes('toasts.css'));
+ if (!sheet) return false;
+ const rules = Array.from(sheet.cssRules || []);
+ return rules.some(r => r.name === 'toastSlideIn');
+ });
+ testResults.push({
+ test: 'toastSlideIn animation defined',
+ passed: hasSlideInAnimation
+ });
+ console.log(hasSlideInAnimation ? '✅ toastSlideIn animation exists' : '❌ Animation not found');
+
+ const hasLifecycleAnimation = await page.evaluate(() => {
+ const sheet = Array.from(document.styleSheets).find(s => s.href?.includes('toasts.css'));
+ if (!sheet) return false;
+ const rules = Array.from(sheet.cssRules || []);
+ return rules.some(r => r.name === 'toastLifecycle');
+ });
+ testResults.push({
+ test: 'toastLifecycle animation defined',
+ passed: hasLifecycleAnimation
+ });
+ console.log(hasLifecycleAnimation ? '✅ toastLifecycle animation exists' : '❌ Animation not found');
+
+ const hasProgressAnimation = await page.evaluate(() => {
+ const sheet = Array.from(document.styleSheets).find(s => s.href?.includes('toasts.css'));
+ if (!sheet) return false;
+ const rules = Array.from(sheet.cssRules || []);
+ return rules.some(r => r.name === 'progressShrink');
+ });
+ testResults.push({
+ test: 'progressShrink animation defined',
+ passed: hasProgressAnimation
+ });
+ console.log(hasProgressAnimation ? '✅ progressShrink animation exists' : '❌ Animation not found');
+
+ } catch (error) {
+ console.error('\n❌ Test execution error:', error.message);
+ errors.push(error.message);
+ }
+
+ // =====================================================================
+ // SUMMARY
+ // =====================================================================
+ console.log("\n" + "=".repeat(70));
+ console.log("📊 TEST SUMMARY\n");
+
+ const passedTests = testResults.filter(t => t.passed).length;
+ const totalTests = testResults.length;
+
+ testResults.forEach(result => {
+ const icon = result.passed ? '✅' : '❌';
+ console.log(`${icon} ${result.test}`);
+ });
+
+ console.log(`\n📈 Results: ${passedTests}/${totalTests} tests passed`);
+
+ if (errors.length > 0) {
+ console.log(`\n⚠️ ${errors.length} console errors detected`);
+ errors.forEach(err => console.log(` - ${err}`));
+ }
+
+ if (passedTests === totalTests && errors.length === 0) {
+ console.log('\n🎉 ALL TESTS PASSED! Toast notification system works perfectly!');
+ } else if (passedTests >= totalTests * 0.9) {
+ console.log('\n✅ MOST TESTS PASSED! Minor issues detected.');
+ } else {
+ console.log('\n⚠️ SOME TESTS FAILED - Review needed');
+ }
+
+ console.log("\n" + "=".repeat(70));
+ console.log("\n💡 Browser will stay open for manual inspection.");
+ console.log(" You can:");
+ console.log(" 1. Test both scenarios manually");
+ console.log(" 2. Try different PDF formats (Short, Default, Long)");
+ console.log(" 3. Test close button on toast");
+ console.log(" 4. Check responsive behavior (resize window)");
+ console.log(" 5. Verify progress bar animations");
+ console.log("\nPress Ctrl+C when done.\n");
+
+ await new Promise(() => {}); // Keep browser open
+}
+
+await testPDFToastNotifications();
diff --git a/tests/mjs/README.md b/tests/mjs/README.md
index e86274f..5671684 100644
--- a/tests/mjs/README.md
+++ b/tests/mjs/README.md
@@ -1,6 +1,6 @@
# CV Project Test Suite (Active Tests)
-**27 comprehensive tests** covering all functionality from UI interactions to PDF generation.
+**28 comprehensive tests** covering all functionality from UI interactions to PDF generation.
## Quick Start
@@ -92,6 +92,17 @@ Final course icon validation
### 28-references-pdf-download.test.mjs
References section PDF download button
+### 29-pdf-toast-notifications.test.mjs
+Toast notification system for PDF downloads
+- Toast elements exist in DOM
+- JavaScript functions available (showPDFToast, hidePDFToast)
+- Manual toast trigger and auto-hide
+- PDF modal integration - Scenario A (Stay in modal)
+- PDF modal integration - Scenario B (Close modal early, toast appears)
+- Toast content updates (preparing → success)
+- Progress bar animation
+- CSS animations defined (toastSlideIn, toastLifecycle, progressShrink)
+
## Migration Tests
### test-preference-migration.test.mjs
@@ -139,6 +150,6 @@ bun tests/mjs/28-references-pdf-download.test.mjs
---
**Last Updated**: 2025-11-20
-**Test Count**: 27 active tests
-**Coverage**: Complete functionality coverage
+**Test Count**: 28 active tests
+**Coverage**: Complete functionality coverage including toast notifications
**Status**: Production specification