### Setup Test Environment Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Configure the test setup file to include DOM matchers and automatic cleanup after each test. ```typescript import '@testing-library/jest-dom'; // Extends expect with DOM matchers (toBeInTheDocument, etc.) import { cleanup } from '@testing-library/react'; import { afterEach } from 'vitest'; // Automatically cleans up the DOM after each test afterEach(() => { cleanup(); }); ``` -------------------------------- ### Example Feature Explanation: User Authentication Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt A detailed example of explaining the User Authentication feature, including its summary, key files, logic path, and a JavaScript usage example for login and protected requests. ```markdown # Example Feature Explanation: --- ## Feature: User Authentication ### Summary The authentication feature handles user login, registration, and session management using JWT tokens. It exists to secure API endpoints and provide personalized user experiences. ### Key Files - `src/controllers/authController.js`: Handles login/register HTTP requests - `src/services/authService.js`: Business logic for token generation - `src/middleware/authMiddleware.js`: JWT verification for protected routes - `src/models/User.js`: User entity with password hashing ### Logic Path 1. User submits credentials to `POST /api/auth/login` 2. `authController.login()` validates input with Zod schema 3. `authService.authenticate()` verifies password with bcrypt 4. JWT token is generated with 24h expiration 5. Token is returned in response body ### Usage Example ```javascript // Login request const response = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: 'user@example.com', password: 'secret' }) }); const { token } = await response.json(); // Protected request const userData = await fetch('/api/users/me', { headers: { 'Authorization': `Bearer ${token}` } }); ``` --- ``` -------------------------------- ### Install Testing Dependencies Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Install the necessary packages for Vitest, React Testing Library, and accessibility testing. ```bash npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest-axe ``` -------------------------------- ### Setup Vitest Test Environment Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Configure the Vitest test environment by importing necessary testing libraries and setting up cleanup after each test. This ensures a clean state for every test. ```typescript import '@testing-library/jest-dom'; import { cleanup } from '@testing-library/react'; import { afterEach } from 'vitest'; afterEach(() => { cleanup(); }); ``` -------------------------------- ### Configure Vitest for React Projects Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Configure Vitest for a React project by specifying the test environment, setup files, and enabling CSS support. This setup ensures compatibility with React and jsdom. ```typescript /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], test: { globals: true, environment: 'jsdom', setupFiles: './src/test/setup.ts', css: true, }, }); ``` -------------------------------- ### Test Form Submission Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Test a React form submission by simulating user input and button clicks. This example uses userEvent to interact with form elements and verifies that the onSubmit handler is called with the correct data. ```typescript import { render, screen } from './test-utils'; import userEvent from '@testing-library/user-event'; import { vi } from 'vitest'; import { LoginForm } from '../components/LoginForm'; test('submits form with valid data', async () => { const handleSubmit = vi.fn(); const user = userEvent.setup(); render(); await user.type(screen.getByLabelText(/username/i), 'john_doe'); await user.type(screen.getByLabelText(/password/i), 'secret'); await user.click(screen.getByRole('button', { name: /log in/i })); expect(handleSubmit).toHaveBeenCalledWith({ username: 'john_doe', password: 'secret' }); }); ``` -------------------------------- ### Test Asynchronous Data Loading Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Test the display of data after an asynchronous load. This example renders a component, asserts the loading state, waits for specific content to appear using findByText, and then asserts that the loading indicator is no longer present. ```typescript import { render, screen } from '@testing-library/react'; import { UserList } from '../components/UserList'; test('displays users after loading', async () => { render(); // Assert loading state expect(screen.getByRole('status', { name: /loading/i })).toBeInTheDocument(); // Wait for async content const userItem = await screen.findByText(/Alice/i); expect(userItem).toBeInTheDocument(); // Assert loading gone expect(screen.queryByRole('status', { name: /loading/i })).not.toBeInTheDocument(); }); ``` -------------------------------- ### React Bug Reproduction Test Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Example test using React Testing Library to reproduce a bug where a submit button does nothing. This test helps identify the root cause of the issue. ```javascript test('submit button triggers form submission', async () => { const user = userEvent.setup(); render(); await user.type(screen.getByLabelText(/username/i), 'test'); await user.type(screen.getByLabelText(/password/i), 'pass'); await user.click(screen.getByRole('button', { name: /submit/i })); expect(mockSubmit).toHaveBeenCalled(); // This fails - reveals the bug }); ``` -------------------------------- ### Sample JavaScript Usage Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/project-feature-explainer/references/explanation-template.md A basic template for demonstrating feature usage in JavaScript. ```javascript // Sample usage ``` -------------------------------- ### Project Feature Explanation Checklist Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt A checklist to ensure all necessary aspects are covered when explaining a project feature, including context, accuracy, file paths, security, dependencies, and code samples. ```markdown # Checklist (references/checklist.md): - [ ] Context Provided: Explain *why* this feature exists - [ ] Accurate Symbol Names: Match exact function/class/variable names - [ ] File Paths: Include relative paths for all components - [ ] Security/Performance Notes: Mention encryption, caching, etc. - [ ] Dependency Mapping: Identify external libraries used - [ ] Code Samples: Ensure examples are runnable or syntactically correct ``` -------------------------------- ### Project Feature Explainer Skill Configuration Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Configuration for the project-feature-explainer skill, defining its name and a brief description. ```yaml # SKILL.md Configuration --- name: project-feature-explainer description: Expert guidance for explaining project features. --- ``` -------------------------------- ### Project Feature Explanation Workflow and Output Structure Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Defines the workflow steps and the mandatory output structure for explaining a project feature, including sections for Summary, Architecture & Implementation, Key Files, and Logic Path. ```markdown # Workflow: # 1. Identify Entry Points - Main functions, classes, or API endpoints # 2. Trace Dependencies - Internal modules and external APIs # 3. Analyze Data Flow - How data enters, transforms, and returns # 4. Draft Explanation - Use mandatory output structure # 5. Verify - Cross-reference with checklist # Output Structure (references/explanation-template.md): --- ## Summary [High-level overview: what the feature does and why it exists] ## Architecture & Implementation [Deep dive into the code] ### Key Files - `path/to/file1.js`: [Purpose] - `path/to/file2.js`: [Purpose] ### Logic Path 1. User triggers action via [entry point] 2. Request is processed by [service/controller] 3. Data is validated using [validator] 4. Result is stored in [database/cache] 5. Response is returned to client --- ``` -------------------------------- ### Project Analyzer Configuration and Template Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Provides the configuration for the project analyzer skill and the markdown template used for generating reports. ```yaml # SKILL.md Configuration --- name: project-analyzer description: Analyzes a project's codebase to generate a comprehensive summary. --- # Workflow: # 1. Initial Exploration - Understand folder structure # 2. Deep Dive - Map system architecture and identify components # 3. Feature Identification - Search for route definitions, controllers # 4. REST API Discovery - Find API patterns # 5. Infrastructure & Data Analysis - Examine models, integrations # 6. Testing Analysis - Look for test directories # 7. Summary Generation - Use report-template.md # Configuration files to identify: config_files: - package.json # Node.js/JavaScript - requirements.txt # Python - build.gradle # Java/Gradle - go.mod # Go - Cargo.toml # Rust # API Pattern Search Examples: express_routes: "app.get|app.post|router.get|router.post" fastapi_decorators: "@app.get|@app.post|@router.get" spring_controllers: "@GetMapping|@PostMapping|@RestController" ``` ```markdown # Output Template (assets/report-template.md): --- # Project Analysis Report: [Project Name] ## 1. Project Overview [2-3 paragraph description of project, purpose, and target audience] ## 2. Tech Stack | Category | Technologies | | :--- | :--- | | **Languages** | [e.g., TypeScript, Python] | | **Frameworks** | [e.g., React, FastAPI, Spring Boot] | | **Database** | [e.g., PostgreSQL, MongoDB, Redis] | | **Infrastructure** | [e.g., Docker, AWS, Terraform] | | **Testing** | [e.g., Vitest, Pytest, JUnit] | | **Build Tools** | [e.g., Vite, Webpack, Maven] | ## 3. Core Features - **[Feature Name]**: [Brief description of implementation] ## 4. REST Services & Endpoints | Method | Endpoint | Description | | :--- | :--- | :--- | | `GET` | `/api/v1/users` | Retrieve all users | | `POST` | `/api/v1/users` | Create a new user | ## 5. Project Structure ```text src/ ├── components/ ├── services/ ├── models/ └── tests/ ``` ## 6. Architecture Summary [Describe architectural patterns: MVC, Microservices, Clean Architecture, etc.] ``` -------------------------------- ### Create Custom Render Utility Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Implement a custom render function to wrap components with necessary providers like Theme or Auth. ```typescript // src/test/test-utils.tsx import { render, RenderOptions } from '@testing-library/react'; import { ReactElement, ReactNode } from 'react'; import { ThemeProvider } from 'my-theme-lib'; import { AuthProvider } from '../context/auth'; const AllTheProviders = ({ children }: { children: ReactNode }) => { return ( {children} ); }; const customRender = (ui: ReactElement, options?: Omit) => render(ui, { wrapper: AllTheProviders, ...options }); export * from '@testing-library/react'; export { customRender as render }; ``` -------------------------------- ### Mock a module with vi.mock Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Demonstrates how to spy on and mock return values for custom hooks to isolate component logic. ```typescript import { render, screen } from '@testing-library/react'; import { vi } from 'vitest'; import { UserProfile } from '../components/UserProfile'; import * as authHook from '../hooks/useAuth'; vi.mock('../hooks/useAuth'); test('renders user name when authenticated', () => { vi.spyOn(authHook, 'useAuth').mockReturnValue({ user: { name: 'Alice' }, isAuthenticated: true, }); render(); expect(screen.getByText(/Alice/i)).toBeInTheDocument(); }); ``` -------------------------------- ### Custom Render Utility with Providers Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Create a custom render function for React Testing Library that includes necessary providers like ThemeProvider and AuthProvider. This simplifies rendering components within a consistent context. ```typescript import { render, RenderOptions } from '@testing-library/react'; import { ReactElement, ReactNode } from 'react'; import { ThemeProvider } from 'my-theme-lib'; import { AuthProvider } from '../context/auth'; const AllTheProviders = ({ children }: { children: ReactNode }) => { return ( {children} ); }; const customRender = (ui: ReactElement, options?: Omit) render(ui, { wrapper: AllTheProviders, ...options }); export * from '@testing-library/react'; export { customRender as render }; ``` -------------------------------- ### Frontend UI Designer Configuration Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Defines the design system parameters including color palettes, typography scales, and layout spacing for the UI designer skill. ```yaml # SKILL.md Configuration --- name: frontend-ui-designer description: Expert guidance for creating modern, intuitive, and visually stunning user interfaces. --- # Activation: Use when designing or implementing frontend UIs, components, layouts, or styling. # 1. Visual Hierarchy & Composition # - Priority: Most important actions (CTAs) should be most prominent # - F-Pattern: For text-heavy pages # - Z-Pattern: For visual-heavy pages # - White Space: Reduce cognitive load and group related elements # 2. Color Theory - The 60-30-10 Rule primary_color: "#6366F1" # Indigo - 10% accent (CTAs, links) secondary_color: "#0F172A" # Slate - 30% (borders, text) dominant_color: "#F8FAFC" # Light gray - 60% (backgrounds) # Semantic Colors: success: "#10B981" error: "#EF4444" warning: "#F59E0B" info: "#3B82F6" # Text Colors: heading_text: "#0F172A" # Slate-900 body_text: "#475569" # Slate-600 # 3. Typography Scale (Modular - Major Third) typography: h1: { size: "2.25rem", weight: "bold" } # 36px h2: { size: "1.875rem", weight: "semibold" } # 30px h3: { size: "1.5rem", weight: "semibold" } # 24px body: { size: "1rem", weight: "regular" } # 16px small: { size: "0.875rem", weight: "medium" } # 14px line_height_body: 1.5-1.6 line_height_headings: 1.2-1.3 # 4. Layout & Spacing (8pt Grid System) spacing: [4, 8, 16, 24, 32, 48, 64] # px values container_widths: ["max-w-7xl", "max-w-5xl"] # 5. Modern UI Techniques (2025/2026) # Soft Shadows: box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); # Glassmorphism: background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); # Border Radius: border-radius: 8px; # rounded-lg border-radius: 12px; # rounded-xl # Micro-interactions: animation-duration: 150-300ms; # 6. Component Patterns # Form Design: # - Single column layout preferred # - Labels always visible above inputs # - Real-time inline validation # - Support autocomplete attributes # Empty States: # - Never leave blank # - Provide helpful illustration # - Include primary action button # - Example: "No projects yet. [Create Project]" # Skeleton Loading: # - Use shimmering skeleton screens instead of spinners # - Mimic final layout to reduce CLS # 7. Accessibility (A11y) # - Keyboard: Ensure all interactive elements are focusable # - Focus States: ring-2 ring-offset-2 # - Touch Targets: Minimum 44x44px (48x48px preferred) # - Screen Readers: Use semantic HTML and ARIA labels # - WCAG AA/AAA contrast compliance ``` -------------------------------- ### Configure Vitest Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Configure the test environment in vite.config.ts or vitest.config.ts to support React and JSDOM. ```typescript /// import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], test: { globals: true, // Allows using describe, test, expect without imports environment: 'jsdom', setupFiles: './src/test/setup.ts', css: true, // Optional: Process CSS if tests depend on it }, }); ``` -------------------------------- ### Security Review Checklist Reference Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Reference file for the Code Reviewer skill, detailing a comprehensive security review checklist covering OWASP Top 10 vulnerabilities. ```yaml # Reference: code-reviewer/references/security-checklist.md ``` -------------------------------- ### Implement Glassmorphism Effect Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/frontend-ui-designer/SKILL.md Achieve a glassmorphism effect for overlays or navigation bars by applying a semi-transparent background and a backdrop blur. This creates a frosted-glass appearance. ```css background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); ``` -------------------------------- ### Set Border Radius for Soft Aesthetics Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/frontend-ui-designer/SKILL.md Utilize border-radius utilities like `rounded-lg` (8px) or `rounded-xl` (12px) to give UI elements a soft, modern, and approachable look. ```html rounded-lg ``` ```html rounded-xl ``` -------------------------------- ### Perform Login Request via cURL Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/project-feature-explainer/references/example-output.md Sends user credentials to the authentication endpoint to receive a JWT. ```bash # Login request curl -X POST http://localhost:3000/api/auth/login \ -H "Content-Type: application/json" \ -d '{"email": "user@example.com", "password": "securepassword"}' ``` -------------------------------- ### Test async data loading Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Verifies loading states and waits for asynchronous content to appear in the document. ```typescript import { render, screen } from '@testing-library/react'; import { UserList } from '../components/UserList'; test('displays users after loading', async () => { render(); // Assert loading state is shown initially expect(screen.getByRole('status', { name: /loading/i })).toBeInTheDocument(); // Wait for async content to appear const userItem = await screen.findByText(/Alice/i); expect(userItem).toBeInTheDocument(); // Assert loading state is gone expect(screen.queryByRole('status', { name: /loading/i })).not.toBeInTheDocument(); }); ``` -------------------------------- ### Test a form submission Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Uses user-event to simulate typing and clicking, verifying that the onSubmit handler is called with correct data. ```typescript import { render, screen } from './test-utils'; // Custom render import userEvent from '@testing-library/user-event'; import { vi } from 'vitest'; import { LoginForm } from '../components/LoginForm'; test('submits form with valid data', async () => { const handleSubmit = vi.fn(); const user = userEvent.setup(); render(); await user.type(screen.getByLabelText(/username/i), 'john_doe'); await user.type(screen.getByLabelText(/password/i), 'secret'); await user.click(screen.getByRole('button', { name: /log in/i })); expect(handleSubmit).toHaveBeenCalledWith({ username: 'john_doe', password: 'secret' }); }); ``` -------------------------------- ### Ensure Visible Focus States for Accessibility Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/frontend-ui-designer/SKILL.md Apply visible focus states, such as `ring-2 ring-offset-2`, to interactive elements to improve keyboard navigation and accessibility for users who rely on keyboard input. ```html ring-2 ring-offset-2 ``` -------------------------------- ### Check accessibility with vitest-axe Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Extends Vitest expectations to audit components for accessibility violations. ```typescript import { render } from '@testing-library/react'; import { axe, toHaveNoViolations } from 'vitest-axe'; import { expect } from 'vitest'; import { LoginForm } from '../components/LoginForm'; expect.extend(toHaveNoViolations); test('LoginForm has no accessibility violations', async () => { const { container } = render( {}} />); const results = await axe(container); expect(results).toHaveNoViolations(); }); ``` -------------------------------- ### React Refactoring: Context and Hooks Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Eliminates prop drilling by extracting logic into custom hooks and utilizing React Context. ```javascript // Before: Large component with prop drilling function Dashboard({ user, settings, onUpdate, onLogout }) { return (
); } // After: Extract custom hook and use context function useDashboard() { const { user, logout } = useAuth(); const { settings, updateSettings } = useSettings(); return { user, settings, logout, updateSettings }; } function Dashboard() { const { user, settings, logout, updateSettings } = useDashboard(); return (
); } ``` -------------------------------- ### Mocking a Module for Testing Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Mock a specific module, in this case, a custom hook 'useAuth', to control its return value during tests. This allows testing components that depend on the mocked hook in isolation. ```typescript import { render, screen } from '@testing-library/react'; import { vi } from 'vitest'; import { UserProfile } from '../components/UserProfile'; import * as authHook from '../hooks/useAuth'; vi.mock('../hooks/useAuth'); test('renders user name when authenticated', () => { vi.spyOn(authHook, 'useAuth').mockReturnValue({ user: { name: 'Alice' }, isAuthenticated: true, }); render(); expect(screen.getByText(/Alice/i)).toBeInTheDocument(); }); ``` -------------------------------- ### Java Refactoring: Imperative to Functional Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Transforms imperative loops with null checks into modern Java Streams for improved readability and conciseness. ```java // Before: Imperative loop with null checks List names = new ArrayList<>(); for (User user : users) { if (user != null && user.isActive()) { names.add(user.getName()); } } // After: Modern Java with Streams and Optional List names = users.stream() .filter(Objects::nonNull) .filter(User::isActive) .map(User::getName) .toList(); ``` -------------------------------- ### Test custom hooks Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Uses renderHook to test hook logic and act to wrap state updates. ```typescript import { renderHook, act } from '@testing-library/react'; import { useCounter } from '../hooks/useCounter'; test('should increment counter', () => { const { result } = renderHook(() => useCounter()); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); }); ``` -------------------------------- ### Code Reviewer Skill Configuration Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt YAML configuration for the Code Reviewer skill. Activate this skill for pull request reviews, code analysis, or improvement suggestions. ```yaml # SKILL.md Configuration --- name: code-reviewer description: Expert code reviewer specializing in code quality, security, performance, and maintainability. --- # Activation: Use when the user wants a PR review, code analysis, or improvement suggestions. # Review Priorities (in order): # 1. Correctness and Logic - Identify logical errors, edge cases, race conditions # 2. Readability and Maintainability - Clear naming, SRP, DRY # 3. Security - Consult references/security-checklist.md # 4. Performance - Spot inefficiencies, resource leaks # 5. Testing - Verify adequate test coverage # 6. Standards and Conventions - Use language-specific guides # Available Language Guides: # - references/javascript.md # - references/nodejs.md # - references/nextjs.md # - references/react.md # - references/java.md # - references/python.md # - references/golang.md # Review Template Output (assets/REVIEW_TEMPLATE.md): --- # Code Review Report ## Summary [Brief overview of the changes and their overall quality] ## Status: [APPROVED | CHANGES REQUESTED | COMMENT] ## Key Findings ### Critical Issues - [List bugs, security vulnerabilities, or major architectural flaws] ### Important Improvements - [List performance issues, readability concerns, or missing tests] ### Minor Suggestions & Nitpicks - [List style issues or small optimizations] ## Detailed Feedback | File | Line | Issue | Suggestion | | :--- | | [path/to/file] | [L#] | [Problem] | [Proposed Fix] | ## Questions & Clarifications - [Any parts of the code that need more context from the author] ## Positive Highlights - [Acknowledge particularly clean or clever solutions] --- ``` -------------------------------- ### Apply Soft Shadows for Depth Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/frontend-ui-designer/SKILL.md Use soft box shadows to create a sense of depth and dimension, offering a modern alternative to harsh borders. This technique is suitable for cards, modals, or other UI elements. ```css box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); ``` -------------------------------- ### Bug Investigator Skill Configuration Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt YAML configuration for the Bug Investigator skill. Activate this skill when users report bugs or during complex issue troubleshooting. ```yaml # SKILL.md Configuration --- name: bug-investigator description: Expert guidance for systematic bug hunting, root-cause analysis, and regression testing. --- # Activation: Use this skill when the user reports a bug, unexpected behavior, # or when troubleshooting complex issues in the codebase. # Workflow Steps: # 1. Symptom Analysis - Identify what/where/how # 2. Reproduction - Create minimal reproduction case with failing test # 3. Root Cause Analysis - Apply the "5 Whys" technique # 4. Implementation & Verification - Apply targeted fix and verify # 5. Prevention - Add guardrails and documentation # Technology-Specific Testing Examples: # React: Use React Testing Library to simulate user interactions # Java: Use JUnit/Mockito for unit tests # Python: Use pytest or unittest # Node.js: Use jest or mocha # Example Bug Investigation Session: # Step 1: Identify the symptom symptom: "Users cannot submit the login form" expected: "Form submits and redirects to dashboard" observed: "Submit button does nothing on click" # Step 2: Create reproduction test (React example) test('submit button triggers form submission', async () => { const user = userEvent.setup(); render(); await user.type(screen.getByLabelText(/username/i), 'test'); await user.type(screen.getByLabelText(/password/i), 'pass'); await user.click(screen.getByRole('button', { name: /submit/i })); expect(mockSubmit).toHaveBeenCalled(); // This fails - reveals the bug }); # Step 3: Root Cause Analysis using checklist # Reference: bug-investigator/references/checklist.md # - [ ] Are all inputs validated? # - [ ] Are asynchronous operations correctly awaited? # - [ ] Are hooks used correctly (deps arrays)? ``` -------------------------------- ### Debug component roles Source: https://github.com/grishaangelovgh/gemini-cli-agent-skills/blob/main/react-test-engineer/SKILL.md Logs the ARIA roles of a rendered component to the console to help debug selection issues. ```typescript import { logRoles } from '@testing-library/react'; const { container } = render(); logRoles(container); // inspect roles, then remove before committing ``` -------------------------------- ### Debugging React Component DOM Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Utilize React Testing Library's debugging utilities to inspect the DOM during tests. `screen.debug()` prints the current DOM, and `logRoles()` lists ARIA roles for accessibility checks. ```typescript import { logRoles } from '@testing-library/react'; const { container } = render(); screen.debug(); // Print current DOM logRoles(container); // Show ARIA roles // Run: npx vitest --ui // Visual test dashboard ``` -------------------------------- ### JavaScript Refactoring: Reducing Nesting Source: https://context7.com/grishaangelovgh/gemini-cli-agent-skills/llms.txt Uses early returns and optional chaining to flatten nested conditional logic. ```javascript // Before: Nested conditionals with mutation function processUser(user) { let result = null; if (user) { if (user.active) { if (user.email) { result = sendEmail(user.email); } } } return result; } // After: Early returns, const, and optional chaining function processUser(user) { if (!user?.active || !user.email) return null; return sendEmail(user.email); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.