Write Tests and Improve Quality - NaaP Docs

AI prompts to generate automated tests and improve code quality for NaaP plugins.

When to Use This#

Use these prompts when:

You want to add automated tests to your plugin
You want the AI to review and improve your code quality
You're preparing to publish and want production-ready code
You want to catch bugs before users do

Prompt: Generate Tests for Frontend#

Markdown

1	# Task: Write Tests for My NaaP Plugin Frontend
2
3	## Context
4
5	NaaP plugin frontends use:
6	- React 18+ with TypeScript
7	- Vitest as the test runner
8	- @testing-library/react for component testing
9	- @naap/plugin-sdk/testing for mock shell providers
10
11	Test setup pattern:
12	```typescript
13	import { render, screen } from '@testing-library/react';
14	import userEvent from '@testing-library/user-event';
15	import { MockShellProvider } from '@naap/plugin-sdk/testing';
16
17	function renderWithShell(ui: React.ReactElement) {
18	return render(
19	<MockShellProvider
20	user={{ id: '1', name: 'Test User', email: 'test@test.com' }}
21	config={{ teamId: 'team-1' }}
22	>
23	{ui}
24	</MockShellProvider>
25	);
26	}

Components to Test#

[PASTE YOUR COMPONENT CODE HERE — include the full file for each component you want tested]

Test Requirements#

For each component, generate tests covering:

Rendering: Does it render without errors?
Content: Does it show the expected text, labels, and data?
User interactions: Click buttons, fill forms, toggle switches
Loading states: Does it show a skeleton/spinner while loading?
Error states: Does it show error messages when API calls fail?
Empty states: Does it show a helpful message when there's no data?
Edge cases: Very long text, special characters, missing optional fields
Accessibility: Are buttons focusable, are labels associated with inputs?

Technical Requirements#

Use Vitest (describe, it, expect)
Use @testing-library/react (render, screen, fireEvent, waitFor)
Use userEvent for realistic interactions
Mock API calls with vi.fn()
Each test file named: [ComponentName].test.tsx
Group tests with describe blocks

Generate complete test files with no placeholders.

1
2	## Prompt: Generate Tests for Backend API
3
4	```markdown
5	# Task: Write Tests for My NaaP Plugin Backend API
6
7	## Context
8
9	NaaP plugin backends use Express.js with Prisma ORM.
10
11	Test setup approach:
12	- Use Vitest as the test runner
13	- Use supertest for HTTP assertions
14	- Mock Prisma client for unit tests
15	- Test each route handler independently
16
17	## Routes to Test
18
19	[PASTE YOUR ROUTE FILES HERE — include server.ts and route handler files]
20
21	## Prisma Schema
22
23	[PASTE YOUR schema.prisma]
24
25	## Test Requirements
26
27	For each endpoint, generate tests covering:
28
29	1. Happy path: Valid request returns expected response
30	2. Validation: Missing required fields return 400
31	3. Not found: Non-existent ID returns 404
32	4. Pagination: List endpoints respect page/limit params
33	5. Error handling: Database errors return 500 with message
34	6. Edge cases: Empty strings, very long input, special characters
35
36	## Technical Requirements
37
38	- Use Vitest (describe, it, expect)
39	- Use supertest to test Express routes
40	- Mock Prisma with vi.mock
41	- Test file per route: [resource].test.ts
42	- Include setup/teardown for test data
43
44	Generate complete test files.

Prompt: Code Review and Quality Improvement#

Markdown

1	# Task: Review and Improve My NaaP Plugin Code
2
3	## Code to Review
4
5	[PASTE ALL YOUR PLUGIN'S SOURCE FILES — or the specific files you want reviewed]
6
7	## Please Review For:
8
9	1. TypeScript: Any `any` types, missing types, or incorrect types?
10	2. Error handling: Are all API calls wrapped in try/catch? Are errors shown to users?
11	3. Memory leaks: Are useEffect cleanup functions missing? Are event listeners removed?
12	4. Performance: Unnecessary re-renders? Missing useMemo/useCallback? Large bundle imports?
13	5. Security: User input sanitization? SQL injection risk? XSS risk?
14	6. Accessibility: Missing aria labels? Keyboard navigation? Color contrast?
15	7. Code organization: Should anything be split into smaller components/functions?
16	8. Naming: Are variable and function names clear and consistent?
17	9. Edge cases: What happens with empty data? Network errors? Very long strings?
18	10. Best practices: Is state management correct? Are hooks used properly?
19
20	## Output Format
21
22	For each issue found:
23	1. Location: File name and line number
24	2. Issue: What's wrong (in simple terms)
25	3. Why it matters: What could go wrong
26	4. Fix: Show the corrected code
27	5. Severity: 🔴 Must fix / 🟡 Should fix / 🟢 Nice to have
28
29	Then show the complete corrected files.

Prompt: Add Error Boundaries and Resilience#

Markdown

1	# Task: Make My NaaP Plugin More Resilient
2
3	## Context
4
5	My NaaP plugin needs better error handling and resilience.
6	It should gracefully handle failures instead of crashing.
7
8	## Current Code
9
10	[PASTE YOUR MAIN APP COMPONENT AND KEY CHILD COMPONENTS]
11
12	## Add the Following
13
14	1. React Error Boundary
15	- Wrap main plugin content in an error boundary
16	- Show a friendly error message with a "Retry" button
17	- Log errors to console for debugging
18	- Style it to match the shell theme
19
20	2. API Error Handling
21	- Create a custom useApi hook that wraps usePluginApi with:
22	- Automatic retry (3 attempts with exponential backoff)
23	- Loading state management
24	- Error state with retry callback
25	- Cancel on unmount (AbortController)
26	- Show toast notifications for errors (useNotify)
27
28	3. Offline Detection
29	- Detect when the user goes offline
30	- Show a subtle banner: "You're offline. Changes will sync when reconnected."
31	- Queue actions and replay when back online (optional)
32
33	4. Loading States
34	- Create skeleton components for each main view
35	- Show skeletons during initial load
36	- Show inline spinners for secondary actions (saving, deleting)
37
38	5. Input Validation
39	- Validate form inputs before submission
40	- Show inline validation errors below each field
41	- Disable submit button when form is invalid
42
43	Generate all code with complete implementations.

After Generating Tests#

Terminal

# Install test dependencies

$cd frontend

$npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

# Add vitest config (if not already present)

# The AI should generate vitest.config.ts

# Run tests

$npx vitest run

# Run tests in watch mode (re-runs on file changes)

$npx vitest

# Run with coverage report

$npx vitest run --coverage

When to Use This#

Use these prompts when:

You want to add automated tests to your plugin
You want the AI to review and improve your code quality
You're preparing to publish and want production-ready code
You want to catch bugs before users do

Prompt: Generate Tests for Frontend#

Markdown

1	# Task: Write Tests for My NaaP Plugin Frontend
2
3	## Context
4
5	NaaP plugin frontends use:
6	- React 18+ with TypeScript
7	- Vitest as the test runner
8	- @testing-library/react for component testing
9	- @naap/plugin-sdk/testing for mock shell providers
10
11	Test setup pattern:
12	```typescript
13	import { render, screen } from '@testing-library/react';
14	import userEvent from '@testing-library/user-event';
15	import { MockShellProvider } from '@naap/plugin-sdk/testing';
16
17	function renderWithShell(ui: React.ReactElement) {
18	return render(
19	<MockShellProvider
20	user={{ id: '1', name: 'Test User', email: 'test@test.com' }}
21	config={{ teamId: 'team-1' }}
22	>
23	{ui}
24	</MockShellProvider>
25	);
26	}

Components to Test#

[PASTE YOUR COMPONENT CODE HERE — include the full file for each component you want tested]

Test Requirements#

For each component, generate tests covering:

Rendering: Does it render without errors?
Content: Does it show the expected text, labels, and data?
User interactions: Click buttons, fill forms, toggle switches
Loading states: Does it show a skeleton/spinner while loading?
Error states: Does it show error messages when API calls fail?
Empty states: Does it show a helpful message when there's no data?
Edge cases: Very long text, special characters, missing optional fields
Accessibility: Are buttons focusable, are labels associated with inputs?

Technical Requirements#

Use Vitest (describe, it, expect)
Use @testing-library/react (render, screen, fireEvent, waitFor)
Use userEvent for realistic interactions
Mock API calls with vi.fn()
Each test file named: [ComponentName].test.tsx
Group tests with describe blocks

Generate complete test files with no placeholders.

1
2	## Prompt: Generate Tests for Backend API
3
4	```markdown
5	# Task: Write Tests for My NaaP Plugin Backend API
6
7	## Context
8
9	NaaP plugin backends use Express.js with Prisma ORM.
10
11	Test setup approach:
12	- Use Vitest as the test runner
13	- Use supertest for HTTP assertions
14	- Mock Prisma client for unit tests
15	- Test each route handler independently
16
17	## Routes to Test
18
19	[PASTE YOUR ROUTE FILES HERE — include server.ts and route handler files]
20
21	## Prisma Schema
22
23	[PASTE YOUR schema.prisma]
24
25	## Test Requirements
26
27	For each endpoint, generate tests covering:
28
29	1. Happy path: Valid request returns expected response
30	2. Validation: Missing required fields return 400
31	3. Not found: Non-existent ID returns 404
32	4. Pagination: List endpoints respect page/limit params
33	5. Error handling: Database errors return 500 with message
34	6. Edge cases: Empty strings, very long input, special characters
35
36	## Technical Requirements
37
38	- Use Vitest (describe, it, expect)
39	- Use supertest to test Express routes
40	- Mock Prisma with vi.mock
41	- Test file per route: [resource].test.ts
42	- Include setup/teardown for test data
43
44	Generate complete test files.

Prompt: Code Review and Quality Improvement#

Markdown

1	# Task: Review and Improve My NaaP Plugin Code
2
3	## Code to Review
4
5	[PASTE ALL YOUR PLUGIN'S SOURCE FILES — or the specific files you want reviewed]
6
7	## Please Review For:
8
9	1. TypeScript: Any `any` types, missing types, or incorrect types?
10	2. Error handling: Are all API calls wrapped in try/catch? Are errors shown to users?
11	3. Memory leaks: Are useEffect cleanup functions missing? Are event listeners removed?
12	4. Performance: Unnecessary re-renders? Missing useMemo/useCallback? Large bundle imports?
13	5. Security: User input sanitization? SQL injection risk? XSS risk?
14	6. Accessibility: Missing aria labels? Keyboard navigation? Color contrast?
15	7. Code organization: Should anything be split into smaller components/functions?
16	8. Naming: Are variable and function names clear and consistent?
17	9. Edge cases: What happens with empty data? Network errors? Very long strings?
18	10. Best practices: Is state management correct? Are hooks used properly?
19
20	## Output Format
21
22	For each issue found:
23	1. Location: File name and line number
24	2. Issue: What's wrong (in simple terms)
25	3. Why it matters: What could go wrong
26	4. Fix: Show the corrected code
27	5. Severity: 🔴 Must fix / 🟡 Should fix / 🟢 Nice to have
28
29	Then show the complete corrected files.

Prompt: Add Error Boundaries and Resilience#

Markdown

1	# Task: Make My NaaP Plugin More Resilient
2
3	## Context
4
5	My NaaP plugin needs better error handling and resilience.
6	It should gracefully handle failures instead of crashing.
7
8	## Current Code
9
10	[PASTE YOUR MAIN APP COMPONENT AND KEY CHILD COMPONENTS]
11
12	## Add the Following
13
14	1. React Error Boundary
15	- Wrap main plugin content in an error boundary
16	- Show a friendly error message with a "Retry" button
17	- Log errors to console for debugging
18	- Style it to match the shell theme
19
20	2. API Error Handling
21	- Create a custom useApi hook that wraps usePluginApi with:
22	- Automatic retry (3 attempts with exponential backoff)
23	- Loading state management
24	- Error state with retry callback
25	- Cancel on unmount (AbortController)
26	- Show toast notifications for errors (useNotify)
27
28	3. Offline Detection
29	- Detect when the user goes offline
30	- Show a subtle banner: "You're offline. Changes will sync when reconnected."
31	- Queue actions and replay when back online (optional)
32
33	4. Loading States
34	- Create skeleton components for each main view
35	- Show skeletons during initial load
36	- Show inline spinners for secondary actions (saving, deleting)
37
38	5. Input Validation
39	- Validate form inputs before submission
40	- Show inline validation errors below each field
41	- Disable submit button when form is invalid
42
43	Generate all code with complete implementations.

After Generating Tests#

Terminal

# Install test dependencies

$cd frontend

$npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

# Add vitest config (if not already present)

# The AI should generate vitest.config.ts

# Run tests

$npx vitest run

# Run tests in watch mode (re-runs on file changes)

$npx vitest

# Run with coverage report

$npx vitest run --coverage