← ClaudeAtlas

test-driven-developmentlisted

Use when implementing any feature or bugfix in the Culinary Advisor Next.js project - write the test first, watch it fail, write minimal code to pass; ensures tests actually verify behavior by requiring failure first
Hildegaardchiasmal966/claude-skills · ★ 3 · AI & Automation · score 71
Install: claude install-skill Hildegaardchiasmal966/claude-skills
# Test-Driven Development (TDD) - Culinary Advisor ## Overview Write the test first. Watch it fail. Write minimal code to pass. **Core principle:** If you didn't watch the test fail, you don't know if it tests the right thing. **Violating the letter of the rules is violating the spirit of the rules.** ## When to Use **Always:** - New features (components, API routes, utilities) - Bug fixes - Refactoring - Behavior changes **Exceptions (ask user first):** - Throwaway prototypes - Generated code (Supabase types, migrations) - Configuration files Thinking "skip TDD just this once"? Stop. That's rationalization. ## The Iron Law ``` NO PRODUCTION CODE WITHOUT A FAILING TEST FIRST ``` Write code before the test? Delete it. Start over. **No exceptions:** - Don't keep it as "reference" - Don't "adapt" it while writing tests - Don't look at it - Delete means delete Implement fresh from tests. Period. ## Red-Green-Refactor Cycle ### 🔴 RED - Write Failing Test Write one minimal test showing what should happen. **For React Components:** ```typescript // components/SaveButton.test.tsx import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { describe, test, expect, vi } from 'vitest' import SaveButton from './SaveButton' describe('SaveButton', () => { test('saves recipe when clicked', async () => { const user = userEvent.setup() const mockOnSave = vi.fn() render(<SaveButton recipeId="123" onSave={