behavior-testing

Name: behavior-testing
Author: Svenja-dev

38stars5forks

How to install behavior-testing?

svenja-dev/claude-code-skills/behavior-testing

$npx -y skills add Svenja-dev/claude-code-skills --skill behavior-testing

Installs into the current project.

Summary

// GUT: Prueft API-Contract it('sends message with correct language', async () => { await sendMessage('hello'); expect(mockApi).toHaveBeenCalledWith( 'hello', expect.any(Array), // history 'en', // language code ); }); ```

Files · 1

View on GitHub

SKILL.md

1	# Behavior Testing Skill
2
3	## Trigger
4	- Nach Feature-Implementation
5	- Wenn Tests nur DOM-Rendering pruefen ("smoke tests")
6	- Wenn Code-Review Luecken in der Test-Abdeckung findet
7	- `/behavior-tests` Slash-Command
8
9	## Problem
10	Standard-Tests (via AI-Generation oder Copilot) pruefen oft nur "wird gerendert?", nicht "funktioniert es?". Das fuehrt zu:
11	- Buttons ohne Funktionalitaet bestehen alle Tests
12	- API-Aufrufe mit falschen Argumenten werden nie erkannt
13	- State-Verlust bei Navigation/Re-Mount bleibt unsichtbar
14	- Fehlende Error-UI wird nie getestet
15
16	## 4 Test-Kategorien (PFLICHT)
17
18	### 1. API-Contract Tests
19	Was: Verifiziere, dass API-Funktionen mit den richtigen Argumenten aufgerufen werden.
20	Warum: Falsche Argumente (fehlende Language-Parameter, falsche Endpoints) sind unsichtbar in Rendering-Tests.
21
22	```typescript
23	// SCHLECHT: Prueft nur DOM
24	it('sends message', async () => {
25	await sendMessage('hello');
26	expect(screen.getByText('hello')).toBeInTheDocument(); // DOM only!
27	});
28
29	// GUT: Prueft API-Contract
30	it('sends message with correct language', async () => {
31	await sendMessage('hello');
32	expect(mockApi).toHaveBeenCalledWith(
33	'hello',
34	expect.any(Array), // history
35	'en', // language code
36	);
37	});
38	```
39
40	Checkliste:
41	- [ ] Mock der API-Funktion mit `vi.fn()`
42	- [ ] Pruefe Aufruf-Argumente mit `toHaveBeenCalledWith`
43	- [ ] Pruefe Anzahl der Aufrufe mit `toHaveBeenCalledTimes`
44	- [ ] Pruefe was bei API-Fehler passiert (Error-UI sichtbar?)
45
46	### 2. State-Persistence Tests
47	Was: Verifiziere, dass State nach Re-Mount, Page-Refresh oder Auth-Wechsel korrekt bleibt.
48	Warum: sessionStorage/localStorage-Bugs, Zustand-Resets bei Login/Logout.
49
50	```typescript
51	// Prueft sessionStorage-Persistenz
52	it('persists counter to sessionStorage', async () => {
53	render(<Chat />);
54	await sendMessage('test');
55	expect(sessionStorage.getItem('key')).toBe('1');
56	});
57
58	// Prueft Auth-Transition
59	it('resets counter on login', () => {
60	sessionStorage.setItem('key', '5');
61	useAuthStore.setState({ isAuthenticated: true });
62	// Effect should reset
63	expect(sessionStorage.getItem('key')).toBe('0');
64	});
65	```
66
67	Checkliste:
68	- [ ] sessionStorage/localStorage vor und nach Aktionen pruefen
69	- [ ] Auth-State-Wechsel testen (logged-in -> logged-out und umgekehrt)
70	- [ ] Zustand-Store direkt mit `setState` manipulieren fuer Edge-Cases
71	- [ ] Default-State nach Store-Reset pruefen
72
73	### 3. Error-Boundary Tests
74	Was: Verifiziere, dass Fehler dem User angezeigt werden und die App nicht crasht.
75	Warum: Fehlende Error-UI ist die haeufigste UX-Luecke.
76
77	```typescript
78	// API-Fehler -> Error-UI
79	it('shows error on checkout failure', async () => {
80	mockPost.mockRejectedValueOnce(new Error('Server error'));
81	fireEvent.click(checkoutButton);
82	await waitFor(() => {
83	expect(screen.getByText(/error\|fehler/i)).toBeInTheDocument();
84	});
85	});
86
87	// 204 No Content -> kein Crash
88	it('handles 204 No Content', async () => {
89	mockFetch({ ok: true, status: 204, text: () => Promise.resolve('') });
90	const result = await apiClient.get('/api/logout');
91	expect(result).toEqual({});
92	});
93	```
94
95	Checkliste:
96	- [ ] API-Rejection -> Error-Message sichtbar
97	- [ ] Leere Responses (204, empty body) -> kein Crash
98	- [ ] Rate-Limit (429) -> Retry-Info angezeigt
99	- [ ] Non-JSON Error-Body -> graceful degradation
100
101	### 4. Security-Boundary Tests
102	Was: Verifiziere Input-Validation, Auth-Gates und Redirect-Sicherheit.
103	Warum: XSS-Praevention, Open-Redirect-Verhinderung, Rate-Limit-Enforcement.
104
105	```typescript
106	// Input-Laenge
107	it('rejects input over 2000 chars', async () => {
108	await sendMessage('a'.repeat(2001));
109	expect(mockApi).not.toHaveBeenCalled();
110	expect(screen.getByText(/maximum/i)).toBeInTheDocument();
111	});
112
113	// URL-Validation
114	it('blocks non-stripe.com redirect URLs', async () => {
115	mockPost.mockResolvedValueOnce({ url: 'https://evil.com/steal' });
116	fireEvent.click(checkoutButton);
117	await waitFor(() => {
118	expect(screen.getByText(/error/i)).toBeInTheDocument();
119	});
120	});
121
122	// CSRF-Token
123	it('attaches CSRF token to POST but not GET', async () => {
124	document.cookie = 'csrf_token=abc123';
125	await apiClient.post('/api/data', {});
126	expect(fetchMock).toHaveBeenCalledWith(
127	expect.any(String),
128	expect.objectContaining({
129	headers: expect.objectContaining({ 'X-CSRF-Token': 'abc123' }),
130	}),
131	);
132	});
133	```
134
135	Checkliste:
136	- [ ] Input-Laenge-Limits werden client-seitig enforced
137	- [ ] Auth-Gate blockiert unauthentifizierte User
138	- [ ] Plan-Gate blockiert Free-Plan bei Premium-Features
139	- [ ] Redirect-URLs werden auf erlaubte Domains geprueft
140	- [ ] CSRF-Token wird bei POST angehaengt, nicht bei GET
141	- [ ] Credentials: 'include' auf allen Requests
142
143	## Implementierungs-Workflow
144
145	1. Identifiziere Luecken: Lies bestehende Tests. Pruefe ob sie nur `toBeInTheDocument()` nutzen.
146	2. Mock die APIs: `vi.mock()` fuer Service-Module, `vi.fn()` fuer einzelne Funktionen.
147	3. Setze State direkt: `useAuthStore.setState({...})` statt ueber

People who liked this also viewed

6 picks

Type

behavior-testing

38stars5forks

View on GitHub

How to install behavior-testing?

svenja-dev/claude-code-skills/behavior-testing

$npx -y skills add Svenja-dev/claude-code-skills --skill behavior-testing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Behavior Testing Skill
2
3	## Trigger
4	- Nach Feature-Implementation
5	- Wenn Tests nur DOM-Rendering pruefen ("smoke tests")
6	- Wenn Code-Review Luecken in der Test-Abdeckung findet
7	- `/behavior-tests` Slash-Command
8
9	## Problem
10	Standard-Tests (via AI-Generation oder Copilot) pruefen oft nur "wird gerendert?", nicht "funktioniert es?". Das fuehrt zu:
11	- Buttons ohne Funktionalitaet bestehen alle Tests
12	- API-Aufrufe mit falschen Argumenten werden nie erkannt
13	- State-Verlust bei Navigation/Re-Mount bleibt unsichtbar
14	- Fehlende Error-UI wird nie getestet
15
16	## 4 Test-Kategorien (PFLICHT)
17
18	### 1. API-Contract Tests
19	Was: Verifiziere, dass API-Funktionen mit den richtigen Argumenten aufgerufen werden.
20	Warum: Falsche Argumente (fehlende Language-Parameter, falsche Endpoints) sind unsichtbar in Rendering-Tests.
21
22	```typescript
23	// SCHLECHT: Prueft nur DOM
24	it('sends message', async () => {
25	await sendMessage('hello');
26	expect(screen.getByText('hello')).toBeInTheDocument(); // DOM only!
27	});
28
29	// GUT: Prueft API-Contract
30	it('sends message with correct language', async () => {
31	await sendMessage('hello');
32	expect(mockApi).toHaveBeenCalledWith(
33	'hello',
34	expect.any(Array), // history
35	'en', // language code
36	);
37	});
38	```
39
40	Checkliste:
41	- [ ] Mock der API-Funktion mit `vi.fn()`
42	- [ ] Pruefe Aufruf-Argumente mit `toHaveBeenCalledWith`
43	- [ ] Pruefe Anzahl der Aufrufe mit `toHaveBeenCalledTimes`
44	- [ ] Pruefe was bei API-Fehler passiert (Error-UI sichtbar?)
45
46	### 2. State-Persistence Tests
47	Was: Verifiziere, dass State nach Re-Mount, Page-Refresh oder Auth-Wechsel korrekt bleibt.
48	Warum: sessionStorage/localStorage-Bugs, Zustand-Resets bei Login/Logout.
49
50	```typescript
51	// Prueft sessionStorage-Persistenz
52	it('persists counter to sessionStorage', async () => {
53	render(<Chat />);
54	await sendMessage('test');
55	expect(sessionStorage.getItem('key')).toBe('1');
56	});
57
58	// Prueft Auth-Transition
59	it('resets counter on login', () => {
60	sessionStorage.setItem('key', '5');
61	useAuthStore.setState({ isAuthenticated: true });
62	// Effect should reset
63	expect(sessionStorage.getItem('key')).toBe('0');
64	});
65	```
66
67	Checkliste:
68	- [ ] sessionStorage/localStorage vor und nach Aktionen pruefen
69	- [ ] Auth-State-Wechsel testen (logged-in -> logged-out und umgekehrt)
70	- [ ] Zustand-Store direkt mit `setState` manipulieren fuer Edge-Cases
71	- [ ] Default-State nach Store-Reset pruefen
72
73	### 3. Error-Boundary Tests
74	Was: Verifiziere, dass Fehler dem User angezeigt werden und die App nicht crasht.
75	Warum: Fehlende Error-UI ist die haeufigste UX-Luecke.
76
77	```typescript
78	// API-Fehler -> Error-UI
79	it('shows error on checkout failure', async () => {
80	mockPost.mockRejectedValueOnce(new Error('Server error'));
81	fireEvent.click(checkoutButton);
82	await waitFor(() => {
83	expect(screen.getByText(/error\|fehler/i)).toBeInTheDocument();
84	});
85	});
86
87	// 204 No Content -> kein Crash
88	it('handles 204 No Content', async () => {
89	mockFetch({ ok: true, status: 204, text: () => Promise.resolve('') });
90	const result = await apiClient.get('/api/logout');
91	expect(result).toEqual({});
92	});
93	```
94
95	Checkliste:
96	- [ ] API-Rejection -> Error-Message sichtbar
97	- [ ] Leere Responses (204, empty body) -> kein Crash
98	- [ ] Rate-Limit (429) -> Retry-Info angezeigt
99	- [ ] Non-JSON Error-Body -> graceful degradation
100
101	### 4. Security-Boundary Tests
102	Was: Verifiziere Input-Validation, Auth-Gates und Redirect-Sicherheit.
103	Warum: XSS-Praevention, Open-Redirect-Verhinderung, Rate-Limit-Enforcement.
104
105	```typescript
106	// Input-Laenge
107	it('rejects input over 2000 chars', async () => {
108	await sendMessage('a'.repeat(2001));
109	expect(mockApi).not.toHaveBeenCalled();
110	expect(screen.getByText(/maximum/i)).toBeInTheDocument();
111	});
112
113	// URL-Validation
114	it('blocks non-stripe.com redirect URLs', async () => {
115	mockPost.mockResolvedValueOnce({ url: 'https://evil.com/steal' });
116	fireEvent.click(checkoutButton);
117	await waitFor(() => {
118	expect(screen.getByText(/error/i)).toBeInTheDocument();
119	});
120	});
121
122	// CSRF-Token
123	it('attaches CSRF token to POST but not GET', async () => {
124	document.cookie = 'csrf_token=abc123';
125	await apiClient.post('/api/data', {});
126	expect(fetchMock).toHaveBeenCalledWith(
127	expect.any(String),
128	expect.objectContaining({
129	headers: expect.objectContaining({ 'X-CSRF-Token': 'abc123' }),
130	}),
131	);
132	});
133	```
134
135	Checkliste:
136	- [ ] Input-Laenge-Limits werden client-seitig enforced
137	- [ ] Auth-Gate blockiert unauthentifizierte User
138	- [ ] Plan-Gate blockiert Free-Plan bei Premium-Features
139	- [ ] Redirect-URLs werden auf erlaubte Domains geprueft
140	- [ ] CSRF-Token wird bei POST angehaengt, nicht bei GET
141	- [ ] Credentials: 'include' auf allen Requests
142
143	## Implementierungs-Workflow
144
145	1. Identifiziere Luecken: Lies bestehende Tests. Pruefe ob sie nur `toBeInTheDocument()` nutzen.
146	2. Mock die APIs: `vi.mock()` fuer Service-Module, `vi.fn()` fuer einzelne Funktionen.
147	3. Setze State direkt: `useAuthStore.setState({...})` statt ueber

People who liked this also viewed

6 picks

Type