Testing Plugins

Unit testing with Vitest and end-to-end testing with Playwright for NaaP plugins.

Overview#

NaaP supports two testing approaches:

Unit Tests: Vitest + React Testing Library for component testing
E2E Tests: Playwright for full integration testing

Unit Testing with Vitest#

Setup#

Terminal

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

Create vitest.config.ts:

TypeScript

1	import { defineConfig } from 'vitest/config';
2	import react from '@vitejs/plugin-react';
3
4	export default defineConfig({
5	plugins: [react()],
6	test: {
7	environment: 'jsdom',
8	globals: true,
9	setupFiles: ['./src/test/setup.ts'],
10	},
11	});

Mock Shell Provider#

The SDK provides a MockShellProvider for testing:

TypeScript

1	import { render, screen } from '@testing-library/react';
2	import { MockShellProvider } from '@naap/plugin-sdk/testing';
3	import App from './App';
4
5	describe('App', () => {
6	it('renders the main page', () => {
7	render(
8	<MockShellProvider>
9	<App />
10	</MockShellProvider>
11	);
12
13	expect(screen.getByText('Task Tracker')).toBeInTheDocument();
14	});
15
16	it('shows admin panel for admin users', () => {
17	render(
18	<MockShellProvider
19	auth={{
20	user: {
21	id: '1',
22	roles: ['admin'],
23	permissions: [{ resource: 'admin', action: 'access' }],
24	},
25	}}
26	>
27	<App />
28	</MockShellProvider>
29	);
30
31	expect(screen.getByText('Admin Panel')).toBeInTheDocument();
32	});
33	});

Testing API Calls#

TypeScript

1	import { render, screen, waitFor } from '@testing-library/react';
2	import { MockShellProvider } from '@naap/plugin-sdk/testing';
3	import { vi } from 'vitest';
4	import TaskList from './TaskList';
5
6	// Mock the fetch function
7	global.fetch = vi.fn();
8
9	describe('TaskList', () => {
10	beforeEach(() => {
11	(fetch as any).mockResolvedValue({
12	ok: true,
13	json: () => Promise.resolve({
14	tasks: [
15	{ id: '1', title: 'Test Task', status: 'todo' },
16	],
17	}),
18	});
19	});
20
21	it('loads and displays tasks', async () => {
22	render(
23	<MockShellProvider>
24	<TaskList />
25	</MockShellProvider>
26	);
27
28	await waitFor(() => {
29	expect(screen.getByText('Test Task')).toBeInTheDocument();
30	});
31	});
32	});

Testing Events#

TypeScript

1	import { MockShellProvider, createMockEventBus } from '@naap/plugin-sdk/testing';
2
3	describe('Event handling', () => {
4	it('reacts to theme changes', () => {
5	const mockEvents = createMockEventBus();
6
7	render(
8	<MockShellProvider eventBus={mockEvents}>
9	<MyComponent />
10	</MockShellProvider>
11	);
12
13	// Simulate a theme change event
14	mockEvents.emit('theme:change', { mode: 'dark' });
15
16	expect(screen.getByTestId('theme-indicator')).toHaveTextContent('dark');
17	});
18	});

Running Tests#

Terminal

# Run all tests

$naap-plugin test

# Watch mode

$naap-plugin test --watch

# Coverage report

$naap-plugin test --coverage

E2E Testing with Playwright#

Setup#

Terminal

$npm install -D @playwright/test

$npx playwright install

Example E2E Test#

TypeScript

1	import { test, expect } from '@playwright/test';
2
3	test.describe('Task Tracker Plugin', () => {
4	test.beforeEach(async ({ page }) => {
5	// Login to the shell
6	await page.goto('http://localhost:3000/login');
7	await page.fill('[name="email"]', 'test@example.com');
8	await page.fill('[name="password"]', 'password');
9	await page.click('button[type="submit"]');
10	await page.waitForURL('/dashboard');
11	});
12
13	test('can add a new task', async ({ page }) => {
14	// Navigate to plugin
15	await page.goto('http://localhost:3000/task-tracker');
16
17	// Add a task
18	await page.fill('input[placeholder*="Add"]', 'My new task');
19	await page.click('button:has-text("Add")');
20
21	// Verify it appears
22	await expect(page.locator('text=My new task')).toBeVisible();
23	});
24
25	test('can mark a task as done', async ({ page }) => {
26	await page.goto('http://localhost:3000/task-tracker');
27
28	// Click the toggle button for the first task
29	await page.click('[data-testid="task-toggle"]');
30
31	// Verify the task is marked as done
32	await expect(page.locator('[data-testid="task-item"]').first())
33	.toHaveClass(/done/);
34	});
35	});

Best Practices#

Mock shell services using MockShellProvider instead of real implementations
Test user interactions not implementation details
Use data-testid attributes for reliable element selection in E2E tests
Test both light and dark themes for visual consistency
Test error states to ensure graceful degradation

Testing Plugins

Unit testing with Vitest and end-to-end testing with Playwright for NaaP plugins.

Overview#

NaaP supports two testing approaches:

Unit Tests: Vitest + React Testing Library for component testing
E2E Tests: Playwright for full integration testing

Unit Testing with Vitest#

Setup#

Terminal

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

Create vitest.config.ts:

TypeScript

1	import { defineConfig } from 'vitest/config';
2	import react from '@vitejs/plugin-react';
3
4	export default defineConfig({
5	plugins: [react()],
6	test: {
7	environment: 'jsdom',
8	globals: true,
9	setupFiles: ['./src/test/setup.ts'],
10	},
11	});

Mock Shell Provider#

The SDK provides a MockShellProvider for testing:

TypeScript

1	import { render, screen } from '@testing-library/react';
2	import { MockShellProvider } from '@naap/plugin-sdk/testing';
3	import App from './App';
4
5	describe('App', () => {
6	it('renders the main page', () => {
7	render(
8	<MockShellProvider>
9	<App />
10	</MockShellProvider>
11	);
12
13	expect(screen.getByText('Task Tracker')).toBeInTheDocument();
14	});
15
16	it('shows admin panel for admin users', () => {
17	render(
18	<MockShellProvider
19	auth={{
20	user: {
21	id: '1',
22	roles: ['admin'],
23	permissions: [{ resource: 'admin', action: 'access' }],
24	},
25	}}
26	>
27	<App />
28	</MockShellProvider>
29	);
30
31	expect(screen.getByText('Admin Panel')).toBeInTheDocument();
32	});
33	});

Testing API Calls#

TypeScript

1	import { render, screen, waitFor } from '@testing-library/react';
2	import { MockShellProvider } from '@naap/plugin-sdk/testing';
3	import { vi } from 'vitest';
4	import TaskList from './TaskList';
5
6	// Mock the fetch function
7	global.fetch = vi.fn();
8
9	describe('TaskList', () => {
10	beforeEach(() => {
11	(fetch as any).mockResolvedValue({
12	ok: true,
13	json: () => Promise.resolve({
14	tasks: [
15	{ id: '1', title: 'Test Task', status: 'todo' },
16	],
17	}),
18	});
19	});
20
21	it('loads and displays tasks', async () => {
22	render(
23	<MockShellProvider>
24	<TaskList />
25	</MockShellProvider>
26	);
27
28	await waitFor(() => {
29	expect(screen.getByText('Test Task')).toBeInTheDocument();
30	});
31	});
32	});

Testing Events#

TypeScript

1	import { MockShellProvider, createMockEventBus } from '@naap/plugin-sdk/testing';
2
3	describe('Event handling', () => {
4	it('reacts to theme changes', () => {
5	const mockEvents = createMockEventBus();
6
7	render(
8	<MockShellProvider eventBus={mockEvents}>
9	<MyComponent />
10	</MockShellProvider>
11	);
12
13	// Simulate a theme change event
14	mockEvents.emit('theme:change', { mode: 'dark' });
15
16	expect(screen.getByTestId('theme-indicator')).toHaveTextContent('dark');
17	});
18	});

Running Tests#

Terminal

# Run all tests

$naap-plugin test

# Watch mode

$naap-plugin test --watch

# Coverage report

$naap-plugin test --coverage

E2E Testing with Playwright#

Setup#

Terminal

$npm install -D @playwright/test

$npx playwright install

Example E2E Test#

TypeScript

1	import { test, expect } from '@playwright/test';
2
3	test.describe('Task Tracker Plugin', () => {
4	test.beforeEach(async ({ page }) => {
5	// Login to the shell
6	await page.goto('http://localhost:3000/login');
7	await page.fill('[name="email"]', 'test@example.com');
8	await page.fill('[name="password"]', 'password');
9	await page.click('button[type="submit"]');
10	await page.waitForURL('/dashboard');
11	});
12
13	test('can add a new task', async ({ page }) => {
14	// Navigate to plugin
15	await page.goto('http://localhost:3000/task-tracker');
16
17	// Add a task
18	await page.fill('input[placeholder*="Add"]', 'My new task');
19	await page.click('button:has-text("Add")');
20
21	// Verify it appears
22	await expect(page.locator('text=My new task')).toBeVisible();
23	});
24
25	test('can mark a task as done', async ({ page }) => {
26	await page.goto('http://localhost:3000/task-tracker');
27
28	// Click the toggle button for the first task
29	await page.click('[data-testid="task-toggle"]');
30
31	// Verify the task is marked as done
32	await expect(page.locator('[data-testid="task-item"]').first())
33	.toHaveClass(/done/);
34	});
35	});

Best Practices#

Mock shell services using MockShellProvider instead of real implementations
Test user interactions not implementation details
Use data-testid attributes for reliable element selection in E2E tests
Test both light and dark themes for visual consistency
Test error states to ensure graceful degradation