Add tests over toast store and fix README

Author: fdodino

README.md

@@ -107,7 +107,10 @@ const cumplir = async (tarea: Tarea) => {
 }
 ```
 
-`showError` está definido en `errorHandler` y es una función que le aplica estilos al mensaje de error. Pueden ver su implementación.
+`showError` está definido en `errorHandler` y es una función que le aplica estilos al mensaje de error. Pueden ver su implementación, así como el toast interno que tiene
+
+- un estado global llamado **store**, que almacena una colección de toasts que se van eliminando después de un cierto tiempo (por defecto duran 3 segundos)
+- y un **ToastContainer**, componente de Svelte que itera sobre los toasts del store y los muestra en la parte superior derecha de la página
 
 ## Validación de errores
 

src/lib/components/toast/ToastContainer.spec.ts

@@ -1,7 +1,19 @@
 import { render } from '@testing-library/svelte'
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi } from 'vitest'
 import { toasts } from './toastStore'
 import ToastContainer from '$lib/components/toast/ToastContainer.svelte'
+import { tick } from 'svelte'
+
+// Mockeamos la transición para que no afecte a los tests, en especial el último
+vi.mock('svelte/transition', () => {
+  return {
+    fade: () => ({
+      delay: 0,
+      duration: 0,
+      css: () => ''
+    })
+  }
+})
 
 describe('ToastContainer', () => {
   it('renders no toasts when store is empty', () => {
@@ -32,4 +44,14 @@ describe('ToastContainer', () => {
     expect(container.querySelector('.toast.error')).toBeTruthy()
     expect(container.querySelector('.toast.info')).toBeTruthy()
   })
+
+  it('is removed after a period of time', async () => {
+    vi.useFakeTimers()
+    toasts.push('Disappearing toast', { type: 'success', duration: 100 })
+    const { queryByText } = render(ToastContainer)
+    await vi.advanceTimersByTimeAsync(100)
+    await tick()
+    expect(queryByText('Disappearing toast')).toBeNull()
+    vi.useRealTimers()
+  })
 })