feat: add smoke tests for Calculator Page and update InvestmentResult component with data-testid attributes

Author: marcelorodrigo

app/components/InvestmentResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-white/10 overflow-hidden border border-gray-100 dark:border-gray-700 hover:shadow-xl dark:hover:shadow-white/15 transition-shadow duration-300 not-prose">
+  <div data-testid="result-card" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-white/10 overflow-hidden border border-gray-100 dark:border-gray-700 hover:shadow-xl dark:hover:shadow-white/15 transition-shadow duration-300 not-prose">
     <!-- Header with gradient background -->
     <div
       class="px-6 py-4 bg-gradient-to-r"
@@ -24,7 +24,7 @@
               Valor Total Líquido
             </p>
           </div>
-          <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">
+          <p data-testid="result-total-amount" class="text-2xl font-bold text-gray-900 dark:text-gray-100">
             {{ totalAmountDisplay }}
           </p>
         </div>

test/nuxt/CalculatorPage.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { flushPromises } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import IndexPage from '~/pages/index.vue'
+import { useInvestmentStore } from '~/store/investment'
+
+function getResultCard(wrapper: VueWrapper, name: string) {
+  return wrapper
+    .findAll('[data-testid="result-card"]')
+    .find(card => card.find('h3').text() === name)!
+}
+
+function getTotalAmount(card: VueWrapper) {
+  return card.find('[data-testid="result-total-amount"]').text()
+}
+
+describe('Calculator Page — Smoke Tests', () => {
+  let wrapper: VueWrapper
+  let store: ReturnType<typeof useInvestmentStore>
+
+  beforeEach(async () => {
+    wrapper = await mountSuspended(IndexPage)
+    store = useInvestmentStore()
+    store.initializeStore()
+    await flushPromises()
+  })
+
+  describe('Page Load', () => {
+    it('renders all three result card headers', () => {
+      const cards = wrapper.findAll('[data-testid="result-card"]')
+      const headers = cards.map(card => card.find('h3').text())
+      expect(headers).toContain('Poupança')
+      expect(headers).toContain('CDB / RDB')
+      expect(headers).toContain('LCI / LCA')
+    })
+
+    it('displays a non-empty formatted total amount for Poupança', () => {
+      const total = getTotalAmount(getResultCard(wrapper, 'Poupança'))
+      expect(total).not.toBe('')
+      expect(total).toMatch(/R\$/)
+    })
+  })
+
+  describe('Amount Change', () => {
+    it('updates CDB result when amount changes', async () => {
+      const card = getResultCard(wrapper, 'CDB / RDB')
+      const before = getTotalAmount(card)
+
+      await wrapper.find('#amount-input').setValue(5000)
+      await flushPromises()
+
+      const after = getTotalAmount(getResultCard(wrapper, 'CDB / RDB'))
+      expect(after).not.toBe(before)
+      expect(after).not.toBe('')
+    })
+  })
+
+  describe('DI Rate Change', () => {
+    it('updates CDB result when DI rate changes', async () => {
+      const before = getTotalAmount(getResultCard(wrapper, 'CDB / RDB'))
+
+      store.setDi(10)
+      await flushPromises()
+
+      const after = getTotalAmount(getResultCard(wrapper, 'CDB / RDB'))
+      expect(after).not.toBe(before)
+      expect(after).not.toBe('')
+    })
+  })
+
+  describe('CDB Percentage Change', () => {
+    it('updates CDB result when CDB % changes', async () => {
+      const before = getTotalAmount(getResultCard(wrapper, 'CDB / RDB'))
+
+      await wrapper.find('#cdb-input').setValue(110)
+      await flushPromises()
+
+      const after = getTotalAmount(getResultCard(wrapper, 'CDB / RDB'))
+      expect(after).not.toBe(before)
+      expect(after).not.toBe('')
+    })
+  })
+
+  describe('LCI/LCA Percentage Change', () => {
+    it('updates LCI/LCA result when LCX % changes', async () => {
+      const before = getTotalAmount(getResultCard(wrapper, 'LCI / LCA'))
+
+      await wrapper.find('#lcx-input').setValue(90)
+      await flushPromises()
+
+      const after = getTotalAmount(getResultCard(wrapper, 'LCI / LCA'))
+      expect(after).not.toBe(before)
+      expect(after).not.toBe('')
+    })
+  })
+})