Añadir funcionalidad para eliminar recetas y actualizar las instrucciones de estilo y CSS

infoalexispc · infoalexispc · commit 4afddc02c33e · 2025-12-03T15:13:54.000Z
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,121 @@
+# Instrucciones para GitHub Copilot
+
+## Contexto del Proyecto
+
+Esta es una aplicación de recetas construida con **Node.js**, **Express**, **Handlebars** y **SQLite**. La aplicación permite crear, listar, editar y eliminar recetas.
+
+## Stack Tecnológico
+
+- **Backend**: Node.js con Express 5.x
+- **Vistas**: Handlebars (express-handlebars)
+- **Base de Datos**: SQLite3 con el módulo sqlite
+- **Pruebas**: Jest y Supertest
+- **Desarrollo**: Nodemon para recarga automática
+
+## Estructura del Proyecto
+
+```
+/workspaces/node-recipe-app/
+├── src/
+│   ├── routes.js          # Manejadores de rutas Express
+│   └── database/
+│       ├── connection.js  # Configuración de conexión a SQLite
+│       ├── index.js       # Exportaciones de módulos de BD
+│       ├── schema.js      # Definición de tablas
+│       └── seedData.js    # Datos iniciales
+├── views/                 # Plantillas Handlebars
+├── __tests__/            # Pruebas con Jest
+└── public/               # Archivos estáticos (CSS)
+```
+
+## Convenciones de Código
+
+### JavaScript
+- Usar **async/await** para operaciones asíncronas
+- Usar **const** para declaraciones que no se reasignan
+- Usar **tabs** para indentación (configuración actual del proyecto)
+- Nombres descriptivos para variables y funciones
+
+### Rutas Express
+- Usar verbos HTTP apropiados: GET para leer, POST para crear/modificar/eliminar
+- Redirigir después de operaciones POST: `res.redirect('/ruta')`
+- Renderizar vistas con `res.render('nombre-vista', { datos })`
+
+### Base de Datos
+- Usar **queries parametrizadas** para prevenir inyección SQL
+- Ejemplo: `db.run('DELETE FROM recipes WHERE id = ?', [recipeId])`
+- Siempre obtener la conexión con `await getDbConnection()`
+
+### Handlebars
+- Usar helpers personalizados cuando sea necesario (ej: `split`, `newline`)
+- Mantener la lógica fuera de las vistas
+- Usar formularios HTML con `method="POST"` para operaciones de escritura
+
+## Patrones de Testing
+
+### Configuración de Pruebas
+- Usar base de datos de prueba separada (test-database.js)
+- Mockear el módulo de base de datos en pruebas
+- Inicializar y cerrar la BD en `beforeEach` y `afterEach`
+
+### Estructura de Tests
+```javascript
+test('descripción del test', async () => {
+  // Arrange: preparar datos
+  // Act: ejecutar acción
+  // Assert: verificar resultado
+});
+```
+
+### Verificaciones
+- Verificar códigos de estado HTTP (200, 302 para redirects)
+- Verificar que los datos se persisten en la base de datos
+- Incluir casos edge (IDs inexistentes, valores inválidos)
+
+## Buenas Prácticas
+
+1. **Confirmaciones de Usuario**: Usar `confirm()` JavaScript para acciones destructivas (eliminar)
+2. **Validación**: Requerir campos obligatorios en formularios con `required`
+3. **Seguridad**: Nunca interpolar directamente valores de usuario en queries SQL
+4. **Accesibilidad**: Usar labels apropiados en formularios
+5. **Separación de Responsabilidades**: 
+   - Rutas: lógica de negocio
+   - Vistas: presentación
+   - Base de datos: persistencia
+
+## Scripts Disponibles
+
+- `npm start`: Iniciar aplicación en producción
+- `npm run dev`: Iniciar con nodemon (recarga automática)
+- `npm test`: Ejecutar todas las pruebas
+- `npm run test:watch`: Ejecutar pruebas en modo watch
+
+## Datos de Ejemplo
+
+La aplicación incluye 3 recetas de ejemplo:
+- Spaghetti Carbonara
+- Chocolate Chip Cookies
+- Caesar Salad
+
+Los ingredientes y métodos usan `\n` para separar líneas.
+
+## Consideraciones Especiales
+
+- La aplicación crea la base de datos automáticamente en el primer inicio
+- Los seed data incluyen lógica de migración para formatear datos antiguos
+- El puerto por defecto es 3000
+- Las vistas usan un layout principal en `views/layouts/main.hbs`
+
+## Cuando Agregues Nuevas Funcionalidades
+
+1. ✅ Implementar la ruta en `src/routes.js`
+2. ✅ Actualizar/crear las vistas necesarias en `views/`
+3. ✅ Agregar pruebas en `__tests__/routes.test.js`
+4. ✅ Ejecutar `npm test` para verificar que todo funciona
+5. ✅ Considerar actualizaciones del schema si afecta la BD
+
+## Idioma
+
+- Mensajes al usuario: **Español**
+- Código y comentarios: **Inglés** (convención del proyecto)
+- Documentación: **Español** (para este archivo)
diff --git a/.github/instructions/styling.instructions.md b/.github/instructions/styling.instructions.md
@@ -0,0 +1,208 @@
+# Instrucciones de Estilo y CSS
+
+## Paleta de Colores del Proyecto
+
+### Colores Principales
+- **Azul primario**: `#3498db` - Botones principales, elementos interactivos
+- **Azul oscuro**: `#2c3e50` - Header, footer, títulos
+- **Azul hover**: `#2980b9` - Estado hover de botones primarios
+- **Gris secundario**: `#95a5a6` - Botones secundarios
+- **Gris texto**: `#7f8c8d` - Texto secundario, descripciones
+- **Rojo peligro**: `#e74c3c` - Botones de eliminar, mensajes de error
+- **Fondo claro**: `#f8f9fa` - Fondo de la página
+- **Blanco**: `#ffffff` - Tarjetas, formularios, contenido
+
+### Colores de Soporte
+- **Gris borde**: `#ddd` - Bordes de inputs
+- **Gris claro**: `#ecf0f1` - Separadores, bordes sutiles
+- **Hover secundario**: `#7f8c8d` - Hover de botones secundarios
+- **Hover peligro**: `#c0392b` - Hover de botones de eliminar
+- **Hover navegación**: `#34495e` - Hover de links en navegación
+
+## Estructura de Layout
+
+### Contenedor Principal
+- Ancho máximo: `1200px`
+- Centrado con `margin: 0 auto`
+- Padding lateral: `2rem` (1rem en móvil)
+
+### Espaciado
+- Margen entre secciones: `2rem`
+- Padding de tarjetas: `2rem` (1.5rem en cards pequeños)
+- Gap entre elementos flex/grid: `1rem` - `2rem`
+
+## Componentes de UI
+
+### Botones (`.btn`)
+```css
+padding: 0.5rem 1rem
+border-radius: 4px
+font-size: 1rem
+transition: background-color 0.3s
+```
+
+**Variantes disponibles:**
+- `.btn-primary` - Azul (`#3498db`)
+- `.btn-secondary` - Gris (`#95a5a6`)
+- `.btn-danger` - Rojo (`#e74c3c`)
+- `.btn-sm` - Versión pequeña con padding reducido
+
+### Tarjetas (`.recipe-card`)
+```css
+background: white
+padding: 1.5rem
+border-radius: 8px
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
+transition: transform 0.2s
+```
+
+- Hover: `transform: translateY(-2px)`
+
+### Formularios
+
+**Grupos de formulario (`.form-group`):**
+- Margen inferior: `1rem`
+- Labels en negrita, color `#2c3e50`
+- Inputs con border `1px solid #ddd`
+- Border radius: `4px`
+- Padding: `0.5rem`
+
+**Acciones de formulario (`.form-actions`):**
+- Display flex con gap de `1rem`
+- Se usa para agrupar botones de envío y cancelación
+
+### Navegación
+
+**Header:**
+- Background: `#2c3e50`
+- Color texto: `white`
+- Box shadow: `0 2px 4px rgba(0, 0, 0, 0.1)`
+- Padding vertical: `1rem`
+
+**Links de navegación:**
+- Color: `white`
+- Hover: background `#34495e`
+- Padding: `0.5rem 1rem`
+- Border radius: `4px`
+
+## Sistema de Grid
+
+### Grid de Recetas (`.recipes-grid`)
+```css
+display: grid
+grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
+gap: 1.5rem
+```
+
+### Grid de Features (`.home-features`)
+```css
+display: grid
+grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
+gap: 2rem
+```
+
+## Elementos Específicos
+
+### Pasos de Instrucciones (`.instruction-step`)
+- Display flex con step number circular
+- Step number: círculo azul (`#3498db`) de `1.5rem`
+- Margen derecho del número: `1rem`
+
+### Ingredientes (`.ingredient`)
+- Padding vertical: `0.5rem`
+- Border bottom: `1px solid #ecf0f1`
+- Último elemento sin borde
+
+### Secciones de Receta (`.recipe-section`)
+- Margen inferior: `2rem`
+- Títulos h2 con borde inferior de `2px solid #ecf0f1`
+
+## Responsive Design
+
+### Breakpoint Principal: `768px`
+
+**Cambios en móvil:**
+- Navegación: `flex-direction: column`
+- Header de receta: elementos en columna
+- Padding principal: `0 1rem` (reducido)
+- Título home: `2rem` (reducido de 3rem)
+
+## Tipografía
+
+### Fuente Principal
+```css
+font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+line-height: 1.6
+```
+
+### Tamaños de Fuente
+- Título principal (home): `3rem` (2rem en móvil)
+- H1: heredado con color `#2c3e50`
+- Navegación título: `1.5rem`
+- Texto descripción: `1.2rem`
+- Texto normal: `1rem`
+- Texto pequeño (preview): `0.9rem`
+- Step number: `0.8rem`
+
+## Efectos y Transiciones
+
+### Transiciones Estándar
+- Botones: `background-color 0.3s`
+- Tarjetas: `transform 0.2s`
+
+### Sombras
+- Tarjetas/contenido: `0 2px 4px rgba(0, 0, 0, 0.1)`
+- Header: `0 2px 4px rgba(0, 0, 0, 0.1)`
+
+### Hover Effects
+- Botones: cambio de color de fondo
+- Tarjetas: elevación con `translateY(-2px)`
+- Links de navegación: cambio de background
+
+## Convenciones de Nombres de Clase
+
+### Patrón BEM Simplificado
+- **Contenedores**: `.home-container`, `.recipes-container`, `.recipe-container`
+- **Headers**: `.home-header`, `.recipes-header`, `.recipe-header`
+- **Acciones**: `.home-actions`, `.recipe-actions`, `.form-actions`
+- **Elementos específicos**: `.recipe-card`, `.recipe-section`, `.ingredient`, etc.
+
+### Modificadores
+- Tamaño: `.btn-sm`
+- Variante: `.btn-primary`, `.btn-secondary`, `.btn-danger`
+- Estado: se maneja con pseudo-clases (`:hover`)
+
+## Buenas Prácticas
+
+1. **Consistencia**: Usar las clases existentes antes de crear nuevas
+2. **Espaciado**: Mantener el sistema de espaciado basado en `rem`
+3. **Colores**: Usar siempre la paleta definida
+4. **Responsive**: Probar en breakpoint de 768px
+5. **Accesibilidad**: Mantener contraste adecuado para texto
+6. **Semántica**: Usar etiquetas HTML apropiadas antes de depender solo de CSS
+
+## Integración con Handlebars
+
+Al agregar nuevos elementos en las vistas `.hbs`, seguir estos patrones:
+
+```handlebars
+<!-- Contenedor principal -->
+<div class="nombre-container">
+  <!-- Header de sección -->
+  <div class="nombre-header">
+    <h1>Título</h1>
+    <div class="nombre-actions">
+      <button class="btn btn-primary">Acción</button>
+    </div>
+  </div>
+  
+  <!-- Contenido -->
+  <div class="nombre-content">
+    <!-- Contenido aquí -->
+  </div>
+</div>
+```
+
+## Clases de Utilidad Disponibles
+
+No hay clases de utilidad tipo Tailwind. El proyecto usa CSS tradicional con clases semánticas. Si necesitas agregar estilos nuevos, agrega una clase semántica en `public/style.css`.
diff --git a/__tests__/routes.test.js b/__tests__/routes.test.js
@@ -64,4 +64,44 @@ describe('Routes', () => {
     expect(recipe).toBeDefined();
     expect(recipe.title).toBe(newRecipe.title);
   });
+
+  test('POST /recipes/:id/delete should delete a recipe', async () => {
+    // First create a recipe to delete
+    const newRecipe = {
+      title: 'Recipe to Delete',
+      ingredients: 'Test ingredients',
+      method: 'Test method'
+    };
+
+    await db.run('INSERT INTO recipes (title, ingredients, method) VALUES (?, ?, ?)', [
+      newRecipe.title,
+      newRecipe.ingredients,
+      newRecipe.method
+    ]);
+
+    // Get the created recipe
+    const recipe = await db.get('SELECT * FROM recipes WHERE title = ?', [newRecipe.title]);
+    expect(recipe).toBeDefined();
+
+    // Delete the recipe
+    const response = await request(app)
+      .post(`/recipes/${recipe.id}/delete`);
+
+    expect(response.status).toBe(302); // Redirect status
+    expect(response.headers.location).toBe('/recipes');
+
+    // Verify recipe was deleted
+    const deletedRecipe = await db.get('SELECT * FROM recipes WHERE id = ?', [recipe.id]);
+    expect(deletedRecipe).toBeUndefined();
+  });
+
+  test('POST /recipes/:id/delete with non-existent id should not fail', async () => {
+    const nonExistentId = 99999;
+
+    const response = await request(app)
+      .post(`/recipes/${nonExistentId}/delete`);
+
+    expect(response.status).toBe(302); // Redirect status
+    expect(response.headers.location).toBe('/recipes');
+  });
 });
diff --git a/src/routes.js b/src/routes.js
@@ -40,4 +40,18 @@ router.post('/recipes/:id/edit', async (req, res) => {
 	res.redirect(`/recipes/${recipeId}`)
 })
 
+router.post('/recipes/:id/delete', async (req, res) => {
+	const db = await getDbConnection()
+	const recipeId = req.params.id
+	await db.run('DELETE FROM recipes WHERE id = ?', [recipeId])
+	res.redirect('/recipes')
+})
+
+// Get a random recipe
+router.get('/recipes/random', async (req, res) => {
+	const db = await getDbConnection()
+	const recipe = await db.get('SELECT * FROM recipes ORDER BY title LIMIT 1')
+	res.render('recipe', { recipe })
+})
+
 module.exports = router
diff --git a/views/recipe.hbs b/views/recipe.hbs
