Add tests

Author: fdodino

src/routes/csr/+page.svelte

@@ -8,14 +8,14 @@ let palabra = $state('')
 </div>
 
 <div class="row">
-  <input name="palabra" bind:value={palabra} placeholder="Escribí una palabra" required />
+  <input name="palabra" data-testid="palabra" bind:value={palabra} placeholder="Escribí una palabra" required />
 </div>
 <div class="row">
-  <a class="link" href="/">Volver</a>
+  <a class="link" data-testid="back-link" href="/">Volver</a>
 </div>
 
 {#if palabra}
   <div class="row">
-    <p>La palabra "{palabra}" tiene {palabra.length} letras.</p>
+    <p data-testid="resultado">La palabra "{palabra}" tiene {palabra.length} letras.</p>
   </div>
 {/if}

src/routes/csr/countLetters.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/svelte'
+import Counter from './+page.svelte'
+import userEvent from '@testing-library/user-event'
+
+describe('count letters', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should start with empty string and should show no result', () => {
+    render(Counter)
+
+    const text = screen.getByTestId('palabra') as HTMLInputElement
+    expect(text.value).to.equal('')
+    expect(screen.queryByTestId('resultado')).not.toBeTruthy()
+  })
+
+  it('should count the word length', async () => {
+    render(Counter)
+
+    const text = screen.getByTestId('palabra') as HTMLInputElement
+    await userEvent.type(text, 'hola mundo')
+
+    const resultado = screen.getByTestId('resultado') as HTMLInputElement
+    expect(resultado.innerHTML).to.equal('La palabra "hola mundo" tiene 10 letras.')
+  })
+
+  it('should navigate to the home page when link is clicked', async () => {
+    render(Counter)
+    const backLink = screen.getByTestId('back-link') as HTMLAnchorElement
+    await userEvent.click(backLink)
+    expect(window.location.pathname).toBe('/')
+  })
+})

src/routes/ssr/+page.server.ts

@@ -1,4 +1,4 @@
-import type { Actions } from "./$types"
+import type { Actions } from './$types'
 
 export const actions: Actions = {
   default: async ({ request }) => {

src/routes/ssr/+page.svelte

@@ -11,17 +11,17 @@
 
 <div class="row">
   <form method="POST" use:enhance>
-    <input name="palabra" placeholder="Escribí una palabra" required />
-    <button type="submit">Contar letras</button>
+    <input name="palabra" placeholder="Escribí una palabra" data-testid="palabra" required />
+    <button type="submit" data-testid="submit">Contar letras</button>
   </form>
 </div>
 
 {#if form?.palabra}
   <div class="row">
-    <p>La palabra "{form.palabra}" tiene {form.longitud} letras.</p>
+    <p data-testid="resultado">La palabra "{form.palabra}" tiene {form.longitud} letras.</p>
   </div>
 {/if}
 
 <div class="row">
-  <a class="link" href="/">Volver</a>
+  <a data-testid="back-link" class="link" href="/">Volver</a>
 </div>

src/routes/ssr/countLetters.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/svelte'
+import Counter from './+page.svelte'
+import userEvent from '@testing-library/user-event'
+
+describe('count letters', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should start with empty string and should show no result', () => {
+    render(Counter)
+
+    const text = screen.getByTestId('palabra') as HTMLInputElement
+    expect(text.value).to.equal('')
+    expect(screen.queryByTestId('resultado')).not.toBeTruthy()
+  })
+
+  it('should show the word length when a word is passed as props', async () => {
+    render(Counter, {
+      props: {
+        form: {
+          palabra: 'hola',
+          longitud: 4
+        }
+      }
+    })
+    const palabra = await screen.getByTestId('palabra') as HTMLInputElement
+    expect(palabra.value).to.equal('')
+    expect(screen.getByTestId('resultado').textContent).to.equal('La palabra "hola" tiene 4 letras.')
+  })
+
+  it('should navigate to the home page when link is clicked', async () => {
+    render(Counter)
+    const backLink = screen.getByTestId('back-link') as HTMLAnchorElement
+    await userEvent.click(backLink)
+    expect(window.location.pathname).toBe('/')
+  })
+
+  it('envía la palabra correctamente al hacer submit', async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        type: 'success',
+        data: { palabra: 'hola', longitud: 4 }
+      })
+    })
+
+    globalThis.fetch = mockFetch
+
+    render(Counter, { props: { form: null } })
+
+    const input = screen.getByTestId('palabra')
+    const submit = screen.getByTestId('submit')
+
+    await userEvent.type(input, 'hola')
+    await userEvent.click(submit)
+
+    // Verificar que se llamó fetch
+    expect(mockFetch).toHaveBeenCalled()
+
+    // Verificamos el FormData enviado
+    const fetchCall = mockFetch.mock.calls[0]
+    const requestInit = fetchCall[1] as RequestInit
+    expect(requestInit.body).toBeInstanceOf(URLSearchParams)
+    const params = new URLSearchParams(requestInit.body as string)
+    expect(params.get('palabra')).toBe('hola')
+  })
+
+
+})

src/routes/ssr/page.server.spec.ts

@@ -0,0 +1,23 @@
+// tests/page.server.test.ts
+import { describe, it, expect } from 'vitest'
+import { actions } from './+page.server'
+import type { RequestEvent } from '@sveltejs/kit'
+import type { RouteParams } from './$types'
+
+describe('actions.default', () => {
+  it('debería devolver palabra y longitud', async () => {
+    const mockRequest = {
+      formData: async () =>
+        new Map([['palabra', 'svelte']]) as unknown as FormData
+    }
+
+    // Simulamos el objeto RequestEvent mínimamente
+    const event = { request: mockRequest } as unknown as RequestEvent<RouteParams, '/ssr'>
+
+    const result = await actions.default(event)
+    expect(result).toEqual({
+      palabra: 'svelte',
+      longitud: 6
+    })
+  })
+})

vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
     include: ['src/**/*.{test,spec}.{js,ts}'],
     globals: true,
     environment: 'jsdom',
-    setupFiles: ['./vitest-setup.js'],
+    setupFiles: ['./vitest-setup.ts'],
     coverage: {
       include: ['src']
     }