feat: add special birthday message in popover

- Show "É hoje!" / "It's today!" title when it's the birthday (0 days left)
- Display "🎈🎂 Parabéns para o Léo! 🎂🎈" message on birthday
- Keep default message "Quanto falta?" / "How many days?" when days > 0
- Support URL parameters (d1=YYYY-MM-DD&d2=YYYY-MM-DD) to simulate dates
- Fix daysUntilNextBirthdayGivenNow to return 0 on birthday instead of 365
- Add E2E tests to validate birthday popover behavior in both languages

Author: rogeriopradoj

src/js/main.js

@@ -1,15 +1,29 @@
 import dayjs from 'dayjs';
 import * as bootstrap from 'bootstrap';
-import { daysUntilNextBirthday } from './modules/days.js';
+import { daysUntilNextBirthdayGivenNow } from './modules/days.js';
 import { ver } from './modules/version.js';
 
 // Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     // Bootstrap modals are initialized automatically via data-attributes
     // No manual initialization needed for aria-hidden compatibility
-    const leoBirthday = new Date(document.getElementById('leo-birthday').dataset.leoBirthday);
-    const leoDaysUntilNextBirthday = daysUntilNextBirthday(leoBirthday);
-    const today = new Date();
+    
+    // Check for URL parameters to simulate dates
+    const params = new URLSearchParams(window.location.search);
+    let leoBirthday = new Date(document.getElementById('leo-birthday').dataset.leoBirthday);
+    let today = new Date();
+    
+    // If d1 and d2 are provided in URL, use them for simulation
+    if (params.has('d1') && params.has('d2')) {
+        const d1 = params.get('d1');
+        const d2 = params.get('d2');
+        if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(d1) && /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(d2)) {
+            leoBirthday = new Date(d1);
+            today = new Date(d2);
+        }
+    }
+    
+    const leoDaysUntilNextBirthday = daysUntilNextBirthdayGivenNow(leoBirthday, today);
 
     // Update version display
     const v = ver(leoBirthday, today);
@@ -39,7 +53,8 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     // Create popover content
-    const content = `
+    let popoverTitle = messageDaysUntil[languageDatepicker].title;
+    let popoverContent = `
         <div class="container">
             <div class="row text-center">
                 <p class="fs-6">${messageDaysUntil[languageDatepicker].content[0]}</p>
@@ -50,13 +65,18 @@ document.addEventListener('DOMContentLoaded', () => {
         </div>
     `;
 
+    if (leoDaysUntilNextBirthday === 0) {
+        popoverTitle = languageDatepicker === 'en' ? "It's today!" : "É hoje!";
+        popoverContent = `<div class="container"><div class="row text-center"><p class="fs-4">🎈🎂 Parabéns para o Léo! 🎂🎈</p></div></div>`;
+    }
+
     // Initialize all popovers
     const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
     [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {
         trigger: 'focus',
         html: true,
-        title: `<p class="text-center m-0">🎂🎈🎉${messageDaysUntil[languageDatepicker].title}🎂🎈🎉</p>`,
-        content: content,
+        title: `<p class="text-center m-0">🎂🎈🎉${popoverTitle}🎂🎈🎉</p>`,
+        content: popoverContent,
         placement: 'bottom',
         delay: { show: 200, hide: 0 }
     }));
@@ -121,8 +141,7 @@ document.addEventListener('DOMContentLoaded', () => {
         dateEnd.value = dayjs().format('YYYY-MM-DD');
     }
 
-    // Handle URL parameters
-    const params = new URLSearchParams(window.location.search);
+    // Handle URL parameters (already parsed at the top)
     if (params.has('d1')) {
         const d1 = params.get('d1');
         if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(d1)) {

src/js/modules/days.js

@@ -23,7 +23,13 @@ export function daysUntilNextBirthdayGivenNow(birthday, nowMoment) {
   const birthdayThisYear = dayjs(`${thisYear}-${b.format('MM')}-${b.format('DD')}`).startOf('day');
   const birthdayNextYear = birthdayThisYear.add(1, 'year').startOf('day');
 
-  const hadBirthdayThisYear = birthdayThisYear.isBefore(now) || birthdayThisYear.isSame(now);
+  // If today is the birthday, return 0
+  if (birthdayThisYear.isSame(now)) {
+    return 0;
+  }
+  
+  // If birthday already happened this year, calculate days until next year
+  const hadBirthdayThisYear = birthdayThisYear.isBefore(now);
   if (hadBirthdayThisYear) {
     return birthdayNextYear.diff(now, 'day');
   } else {

test/e2e/modal-birthday.spec.js

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+
+const leoBirthday = '2015-10-22';
+
+test.describe('Modal de dias para o aniversário', () => {
+  test('Exibe mensagem padrão quando faltam dias', async ({ page }) => {
+    await page.goto(`/?d1=${leoBirthday}&d2=2025-10-21`);
+    
+    // Abrir o modal primeiro
+    await page.click('button[data-bs-toggle="modal"]');
+    await page.waitForSelector('.modal.show', { state: 'visible' });
+    
+    // Clicar no botão do popover dentro do modal
+    await page.click('[data-bs-toggle="popover"]');
+    
+    const popover = await page.locator('.popover');
+    await expect(popover).toContainText('Quanto falta?');
+    await expect(popover).toContainText('Faltam');
+    await expect(popover).toContainText('dias');
+    await expect(popover).toContainText('pro niver do Léo!');
+    await expect(popover).not.toContainText('Parabéns para o Léo!');
+  });
+
+  test('Exibe mensagem especial no dia do aniversário', async ({ page }) => {
+    await page.goto(`/?d1=${leoBirthday}&d2=2025-10-22`);
+    
+    // Abrir o modal primeiro
+    await page.click('button[data-bs-toggle="modal"]');
+    await page.waitForSelector('.modal.show', { state: 'visible' });
+    
+    // Clicar no botão do popover dentro do modal
+    await page.click('[data-bs-toggle="popover"]');
+    
+    const popover = await page.locator('.popover');
+    await expect(popover).toContainText('É hoje!');
+    await expect(popover).toContainText('Parabéns para o Léo!');
+    await expect(popover).not.toContainText('Faltam');
+    await expect(popover).not.toContainText('dias');
+    await expect(popover).not.toContainText('pro niver do Léo!');
+  });
+
+  test('Exibe mensagem especial em inglês no dia do aniversário', async ({ page }) => {
+    await page.goto(`/index_en.html?d1=${leoBirthday}&d2=2025-10-22`);
+    
+    // Abrir o modal primeiro
+    await page.click('button[data-bs-toggle="modal"]');
+    await page.waitForSelector('.modal.show', { state: 'visible' });
+    
+    // Clicar no botão do popover dentro do modal
+    await page.click('[data-bs-toggle="popover"]');
+    
+    const popover = await page.locator('.popover');
+    await expect(popover).toContainText("It's today!");
+    await expect(popover).toContainText("Parabéns para o Léo!");
+    await expect(popover).not.toContainText('There are');
+    await expect(popover).not.toContainText('days');
+    await expect(popover).not.toContainText("until Léo's birthday!");
+  });
+});