tdd-workflow
Yeni özellikler yazarken, hata düzeltirken veya kod refactor ederken bu skill'i kullanın. Unit, integration ve E2E testlerini içeren %80+ kapsam ile test güdümlü geliştirmeyi zorlar.
- License 许可
- MIT
- 最近更新
- 2026-11-10
- Stars
- ★ 1
- Forks
- 0
01 前言 Front Matter
- name
- tdd-workflow
- origin
- ECC
- description
- Yeni özellikler yazarken, hata düzeltirken veya kod refactor ederken bu skill'i kullanın. Unit, integration ve E2E testlerini içeren %80+ kapsam ile test güdümlü geliştirmeyi zorlar.
03 SKILL.md 正文
Test Güdümlü Geliştirme İş Akışı
Bu skill tüm kod geliştirmenin kapsamlı test kapsamı ile TDD ilkelerini takip etmesini sağlar.
Ne Zaman Aktifleştirmelisiniz
- Yeni özellikler veya fonksiyonellik yazarken
- Hataları veya sorunları düzeltirken
- Mevcut kodu refactor ederken
- API endpoint'leri eklerken
- Yeni bileşenler oluştururken
Temel İlkeler
1. Koddan ÖNCE Testler
HER ZAMAN önce testleri yazın, sonra testleri geçmesi için kod uygulayın.
2. Kapsam Gereksinimleri
- Minimum %80 kapsam (unit + integration + E2E)
- Tüm uç durumlar kapsanmış
- Hata senaryoları test edilmiş
- Sınır koşulları doğrulanmış
3. Test Tipleri
Unit Testler
- Bireysel fonksiyonlar ve yardımcı araçlar
- Bileşen mantığı
- Pure fonksiyonlar
- Yardımcılar ve utilities
Integration Testler
- API endpoint'leri
- Veritabanı operasyonları
- Service etkileşimleri
- Harici API çağrıları
E2E Testler (Playwright)
- Kritik kullanıcı akışları
- Tam iş akışları
- Tarayıcı otomasyonu
- UI etkileşimleri
TDD İş Akışı Adımları
Adım 1: Kullanıcı Hikayeleri Yazın
[Rol] olarak, [eylem] yapmak istiyorum, böylece [fayda] elde ederim
Örnek:
Kullanıcı olarak, marketleri semantik olarak aramak istiyorum,
böylece tam anahtar kelimeler olmasa bile ilgili marketleri bulabilirim.
Adım 2: Test Senaryoları Oluşturun
Her kullanıcı hikayesi için kapsamlı test senaryoları oluşturun:
describe('Semantik Arama', () => {
it('sorgu için ilgili marketleri döndürür', async () => {
// Test implementasyonu
})
it('boş sorguyu zarif şekilde işler', async () => {
// Uç durumu test et
})
it('Redis kullanılamazsa substring aramaya geri döner', async () => {
// Fallback davranışını test et
})
it('sonuçları benzerlik skoruna göre sıralar', async () => {
// Sıralama mantığını test et
})
})
Adım 3: Testleri Çalıştırın (Başarısız Olmalı)
npm test
# Testler başarısız olmalı - henüz implement etmedik
Adım 4: Kod Uygulayın
Testleri geçmesi için minimal kod yazın:
// Testler tarafından yönlendirilen implementasyon
export async function searchMarkets(query: string) {
// Implementasyon buraya
}
Adım 5: Testleri Tekrar Çalıştırın
npm test
# Testler artık geçmeli
Adım 6: Refactor Edin
Testleri yeşil tutarken kod kalitesini iyileştirin:
- Tekrarı kaldırın
- İsimlendirmeyi iyileştirin
- Performansı optimize edin
- Okunabilirliği artırın
Adım 7: Kapsamı Doğrulayın
npm run test:coverage
# %80+ kapsam sağlandığını doğrula
Test Kalıpları
Unit Test Kalıbı (Jest/Vitest)
import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'
describe('Button Bileşeni', () => {
it('doğru metinle render eder', () => {
render(<Button>Tıkla</Button>)
expect(screen.getByText('Tıkla')).toBeInTheDocument()
})
it('tıklandığında onClick\'i çağırır', () => {
const handleClick = jest.fn()
render(<Button onClick={handleClick}>Tıkla</Button>)
fireEvent.click(screen.getByRole('button'))
expect(handleClick).toHaveBeenCalledTimes(1)
})
it('disabled prop true olduğunda devre dışı kalır', () => {
render(<Button disabled>Tıkla</Button>)
expect(screen.getByRole('button')).toBeDisabled()
})
})
API Integration Test Kalıbı
import { NextRequest } from 'next/server'
import { GET } from './route'
describe('GET /api/markets', () => {
it('marketleri başarıyla döndürür', async () => {
const request = new NextRequest('http://localhost/api/markets')
const response = await GET(request)
const data = await response.json()
expect(response.status).toBe(200)
expect(data.success).toBe(true)
expect(Array.isArray(data.data)).toBe(true)
})
it('query parametrelerini validate eder', async () => {
const request = new NextRequest('http://localhost/api/markets?limit=invalid')
const response = await GET(request)
expect(response.status).toBe(400)
})
it('veritabanı hatalarını zarif şekilde işler', async () => {
// Veritabanı başarısızlığını mock'la
const request = new NextRequest('http://localhost/api/markets')
// Hata işlemeyi test et
})
})
E2E Test Kalıbı (Playwright)
import { test, expect } from '@playwright/test'
test('kullanıcı marketleri arayabilir ve filtreleyebilir', async ({ page }) => {
// Markets sayfasına git
await page.goto('/')
await page.click('a[href="/markets"]')
// Sayfanın yüklendiğini doğrula
await expect(page.locator('h1')).toContainText('Markets')
// Marketleri ara
await page.fill('input[placeholder="Marketleri ara"]', 'election')
// Debounce ve sonuçları bekle
await page.waitForTimeout(600)
// Arama sonuçlarının gösterildiğini doğrula
const results = page.locator('[data-testid="market-card"]')
await expect(results).toHaveCount(5, { timeout: 5000 })
// Sonuçların arama terimini içerdiğini doğrula
const firstResult = results.first()
await expect(firstResult).toContainText('election', { ignoreCase: true })
// Duruma göre filtrele
await page.click('button:has-text("Aktif")')
// Filtrelenmiş sonuçları doğrula
await expect(results).toHaveCount(3)
})
test('kullanıcı yeni market oluşturabilir', async ({ page }) => {
// Önce login ol
await page.goto('/creator-dashboard')
// Market oluşturma formunu doldur
await page.fill('input[name="name"]', 'Test Market')
await page.fill('textarea[name="description"]', 'Test açıklama')
await page.fill('input[name="endDate"]', '2025-12-31')
// Formu gönder
await page.click('button[type="submit"]')
// Başarı mesajını doğrula
await expect(page.locator('text=Market başarıyla oluşturuldu')).toBeVisible()
// Market sayfasına yönlendirmeyi doğrula
await expect(page).toHaveURL(/\/markets\/test-market/)
})
Test Dosya Organizasyonu
src/
├── components/
│ ├── Button/
│ │ ├── Button.tsx
│ │ ├── Button.test.tsx # Unit testler
│ │ └── Button.stories.tsx # Storybook
│ └── MarketCard/
│ ├── MarketCard.tsx
│ └── MarketCard.test.tsx
├── app/
│ └── api/
│ └── markets/
│ ├── route.ts
│ └── route.test.ts # Integration testler
└── e2e/
├── markets.spec.ts # E2E testler
├── trading.spec.ts
└── auth.spec.ts
Harici Servisleri Mock'lama
Supabase Mock
jest.mock('@/lib/supabase', () => ({
supabase: {
from: jest.fn(() => ({
select: jest.fn(() => ({
eq: jest.fn(() => Promise.resolve({
data: [{ id: 1, name: 'Test Market' }],
error: null
}))
}))
}))
}
}))
Redis Mock
jest.mock('@/lib/redis', () => ({
searchMarketsByVector: jest.fn(() => Promise.resolve([
{ slug: 'test-market', similarity_score: 0.95 }
])),
checkRedisHealth: jest.fn(() => Promise.resolve({ connected: true }))
}))
OpenAI Mock
jest.mock('@/lib/openai', () => ({
generateEmbedding: jest.fn(() => Promise.resolve(
new Array(1536).fill(0.1) // Mock 1536-boyutlu embedding
))
}))
Test Kapsamı Doğrulama
Kapsam Raporu Çalıştır
npm run test:coverage
Kapsam Eşikleri
{
"jest": {
"coverageThresholds": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
}
}
}
Kaçınılması Gereken Yaygın Test Hataları
FAIL: YANLIŞ: Implementasyon Detaylarını Test Etme
// İç state'i test etme
expect(component.state.count).toBe(5)
PASS: DOĞRU: Kullanıcı Tarafından Görünen Davranışı Test Et
// Kullanıcıların gördüğünü test et
expect(screen.getByText('Sayı: 5')).toBeInTheDocument()
FAIL: YANLIŞ: Kırılgan Selector'lar
// Kolayca bozulur
await page.click('.css-class-xyz')
PASS: DOĞRU: Semantik Selector'lar
// Değişikliklere karşı dayanıklı
await page.click('button:has-text("Gönder")')
await page.click('[data-testid="submit-button"]')
FAIL: YANLIŞ: Test İzolasyonu Yok
// Testler birbirine bağımlı
test('kullanıcı oluşturur', () => { /* ... */ })
test('aynı kullanıcıyı günceller', () => { /* önceki teste bağımlı */ })
PASS: DOĞRU: Bağımsız Testler
// Her test kendi verisini hazırlar
test('kullanıcı oluşturur', () => {
const user = createTestUser()
// Test mantığı
})
test('kullanıcı günceller', () => {
const user = createTestUser()
// Güncelleme mantığı
})
Sürekli Test
Geliştirme Sırasında Watch Modu
npm test -- --watch
# Dosya değişikliklerinde testler otomatik çalışır
Pre-Commit Hook
# Her commit öncesi çalışır
npm test && npm run lint
CI/CD Entegrasyonu
# GitHub Actions
- name: Run Tests
run: npm test -- --coverage
- name: Upload Coverage
uses: codecov/codecov-action@v3
En İyi Uygulamalar
- Önce Testleri Yaz - Her zaman TDD
- Test Başına Bir Assert - Tek davranışa odaklan
- Açıklayıcı Test İsimleri - Neyin test edildiğini açıkla
- Arrange-Act-Assert - Net test yapısı
- Harici Bağımlılıkları Mock'la - Unit testleri izole et
- Uç Durumları Test Et - Null, undefined, boş, büyük
- Hata Yollarını Test Et - Sadece happy path değil
- Testleri Hızlı Tut - Unit testler < 50ms her biri
- Testlerden Sonra Temizle - Yan etki yok
- Kapsam Raporlarını İncele - Boşlukları tespit et
Başarı Metrikleri
- %80+ kod kapsamı sağlanmış
- Tüm testler geçiyor (yeşil)
- Atlanmış veya devre dışı test yok
- Hızlı test yürütme (< 30s unit testler için)
- E2E testler kritik kullanıcı akışlarını kapsıyor
- Testler production'dan önce hataları yakalar
Unutmayın: Testler opsiyonel değildir. Güvenli refactoring, hızlı geliştirme ve production güvenilirliği sağlayan güvenlik ağıdırlar.
04 同仓库更多 Skills
vercel-sandbox
Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.
slack
Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.
electron
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
dogfood
Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", "switch to --preset", and for building a design system or applying a DESIGN.md or brand spec to shadcn/ui.