create-react-forge 1.0.2 → 1.0.3

package/src/templates/overlays/testing/playwright/tests/e2e/home.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Home Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(/{{PROJECT_NAME}}/);
+  });
+
+  test('displays welcome message', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', { name: /welcome/i })
+    ).toBeVisible();
+  });
+
+  test('has get started link', async ({ page }) => {
+    const getStartedLink = page.getByRole('link', { name: /get started/i });
+    await expect(getStartedLink).toBeVisible();
+  });
+
+  test('navigates to dashboard on get started click', async ({ page }) => {
+    await page.getByRole('link', { name: /get started/i }).click();
+    await expect(page).toHaveURL(/.*dashboard/);
+  });
+});
+
+test.describe('404 Page', () => {
+  test('shows not found for invalid routes', async ({ page }) => {
+    await page.goto('/invalid-route-that-does-not-exist');
+    await expect(page.getByText(/page not found/i)).toBeVisible();
+  });
+
+  test('has link back to home', async ({ page }) => {
+    await page.goto('/invalid-route');
+    await page.getByRole('link', { name: /go back home/i }).click();
+    await expect(page).toHaveURL('/');
+  });
+});
+

package/src/templates/overlays/testing/vitest/manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "testing-vitest",
+  "version": "1.0.0",
+  "description": "Vitest unit testing setup with React Testing Library",
+  "compatibleWith": ["runtime-vite", "runtime-nextjs"],
+  "dependencies": {},
+  "devDependencies": {
+    "vitest": "^2.0.0",
+    "@vitest/ui": "^2.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/user-event": "^14.5.0",
+    "jsdom": "^24.0.0",
+    "msw": "^2.4.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "filePatterns": {
+    "include": ["**/*"],
+    "exclude": ["manifest.json"]
+  }
+}
+

package/src/templates/overlays/testing/vitest/src/components/ui/__tests__/Button.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@/testing/test-utils';
+import { Button } from '../Button';
+
+describe('Button', () => {
+  it('renders children correctly', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleClick = vi.fn();
+    const { user } = render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading state', () => {
+    render(<Button isLoading>Loading</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('can be disabled', () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('applies variant styles', () => {
+    render(<Button variant="danger">Delete</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-red-600');
+  });
+});
+

package/src/templates/overlays/testing/vitest/src/testing/mocks/browser.ts

@@ -0,0 +1,17 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+/**
+ * MSW worker for browser environment (development)
+ * Import and start in your app entry point for API mocking during development
+ *
+ * Example:
+ * ```ts
+ * if (import.meta.env.DEV) {
+ *   const { worker } = await import('./testing/mocks/browser');
+ *   await worker.start({ onUnhandledRequest: 'bypass' });
+ * }
+ * ```
+ */
+export const worker = setupWorker(...handlers);
+

package/src/templates/overlays/testing/vitest/src/testing/mocks/handlers.ts

@@ -0,0 +1,42 @@
+import { http, HttpResponse } from 'msw';
+
+/**
+ * MSW request handlers for mocking API calls in tests
+ * Following bulletproof-react patterns
+ */
+
+const API_URL = 'http://localhost:3001';
+
+export const handlers = [
+  // Example: GET /api/users
+  http.get(`${API_URL}/api/users`, () => {
+    return HttpResponse.json([
+      { id: '1', name: 'John Doe', email: 'john@example.com' },
+      { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+    ]);
+  }),
+
+  // Example: POST /api/auth/login
+  http.post(`${API_URL}/api/auth/login`, async ({ request }) => {
+    const body = await request.json() as { email: string; password: string };
+
+    if (body.email === 'test@example.com' && body.password === 'password') {
+      return HttpResponse.json({
+        user: {
+          id: '1',
+          email: 'test@example.com',
+          name: 'Test User',
+        },
+        token: 'mock-jwt-token',
+      });
+    }
+
+    return HttpResponse.json(
+      { message: 'Invalid credentials' },
+      { status: 401 }
+    );
+  }),
+
+  // Add more handlers as needed
+];
+

package/src/templates/overlays/testing/vitest/src/testing/mocks/server.ts

@@ -0,0 +1,8 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+/**
+ * MSW server for Node.js environment (tests)
+ */
+export const server = setupServer(...handlers);
+

package/src/templates/overlays/testing/vitest/src/testing/setup.ts

@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach, beforeAll, afterAll } from 'vitest';
+import { server } from './mocks/server';
+
+// Establish API mocking before all tests
+beforeAll(() => {
+  server.listen({ onUnhandledRequest: 'error' });
+});
+
+// Clean up after each test
+afterEach(() => {
+  cleanup();
+  server.resetHandlers();
+});
+
+// Clean up after all tests are done
+afterAll(() => {
+  server.close();
+});
+

package/src/templates/overlays/testing/vitest/src/testing/test-utils.tsx

@@ -0,0 +1,39 @@
+import { ReactElement, ReactNode } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+
+/**
+ * Custom render function that includes providers
+ * Following bulletproof-react testing patterns
+ */
+
+type WrapperProps = {
+  children: ReactNode;
+};
+
+function AllProviders({ children }: WrapperProps) {
+  return (
+    <BrowserRouter>
+      {/* Add other providers here (React Query, Theme, etc.) */}
+      {children}
+    </BrowserRouter>
+  );
+}
+
+function customRender(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) {
+  return {
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: AllProviders, ...options }),
+  };
+}
+
+// Re-export everything from testing-library
+export * from '@testing-library/react';
+
+// Override render method
+export { customRender as render };
+

package/src/templates/overlays/testing/vitest/vitest.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/testing/setup.ts'],
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/testing/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/index.ts',
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});
+