diff --git a/frontend/src/__tests__/recommendations.test.ts b/frontend/src/__tests__/recommendations.test.ts index 3ecae87f1..9f208aede 100644 --- a/frontend/src/__tests__/recommendations.test.ts +++ b/frontend/src/__tests__/recommendations.test.ts @@ -3637,6 +3637,24 @@ describe('Issue #111 (iii): per-row Payment seed in openPurchaseModal', () => { // the integration of that mapping is exercised by app.ts' // existing handleExecutePurchase tests. }); + + test('(f) Issue #1402: Term select options display full labels "1 Year" / "3 Years", not abbreviated "1yr" / "3yr"', async () => { + const rec = { + id: 'rec-6', provider: 'aws' as const, cloud_account_id: 'test-account-a', + service: 'ec2', resource_type: 't3.medium', region: 'us-east-1', + count: 2, term: 1, payment: 'all-upfront', savings: 50, upfront_cost: 200, + }; + + await openPurchaseModal([rec]); + + const termSelect = document.querySelector('.purchase-row-term'); + expect(termSelect).not.toBeNull(); + const labels = Array.from(termSelect!.options).map((o) => o.text); + expect(labels).toContain('1 Year'); + expect(labels).toContain('3 Years'); + expect(labels).not.toContain('1yr'); + expect(labels).not.toContain('3yr'); + }); }); // Issue #132: pre-PR-#123 a 'savings-plans' Compute SP rec and a diff --git a/frontend/src/recommendations.ts b/frontend/src/recommendations.ts index 10c4fd749..a3a8f06ab 100644 --- a/frontend/src/recommendations.ts +++ b/frontend/src/recommendations.ts @@ -5306,7 +5306,7 @@ function renderPurchaseModalRow(idx: number, paymentSource: 'override' | 'rec' | for (const t of [1, 3]) { const opt = document.createElement('option'); opt.value = String(t); - opt.textContent = `${t}yr`; + opt.textContent = formatTerm(t); if (t === rec.term) opt.selected = true; termSelect.appendChild(opt); } diff --git a/frontend/src/styles/modals.css b/frontend/src/styles/modals.css index 2485d3734..ac40fa77d 100644 --- a/frontend/src/styles/modals.css +++ b/frontend/src/styles/modals.css @@ -199,6 +199,11 @@ font-size: 0.85em; } +/* Issue #1402: Term select wide enough for "1 Year" / "3 Years" labels. */ +.purchase-row-term { + min-width: 5.5rem; +} + /* ----------------------------------------------------------------------- * Archera Insurance CTA: unobtrusive small-text link shown in the * Purchase modal and Plan-creation modal.