Menu
Frontend testing guide — unit, integration, visual regression, accessibility, E2E for UI
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Backend testing guide — unit, integration, API contract, database, load testing
Backend development guide — API design, data modeling, business logic, security, performance
Codebase second brain workflow for AI agents — use repo maps and capability maps before deep code reads
Multi-agent coordination skill — task decomposition, dependency tracking, handoff protocol, conflict resolution
Frontend development guide — UI implementation, component architecture, state management, performance
Project management skill — sprint planning, backlog grooming, risk management, reporting, stakeholder communication
| name | frontend-testing |
| version | 1.0.0 |
| description | Frontend testing guide — unit, integration, visual regression, accessibility, E2E for UI |
| requires | [] |
| task_types | ["testing","frontend-testing","qa","e2e"] |
| applies_to_tags | ["testing","frontend","qa","playwright","vitest","cypress"] |
renderHook)// Arrange
const input = { ... }
// Act
const result = fn(input)
// Assert
expect(result).toEqual(expected)
"returns empty array when no results match"render(<TaskCard task={mockTask} />)
// Query bằng role/label — không dùng test-id trừ khi cần
expect(screen.getByRole('heading', { name: 'Fix bug' })).toBeVisible()
await userEvent.click(screen.getByRole('button', { name: 'Claim' }))
expect(mockClaim).toHaveBeenCalledWith(taskId)
getByRole — accessible namegetByLabelText — form fieldsgetByText — visible textgetByTestId — last resortpage.getByRole thay selectors CSSsleeptest('user can claim a task', async ({ page }) => {
await page.goto('/board')
await page.getByRole('button', { name: 'Claim' }).first().click()
await expect(page.getByText('In Progress')).toBeVisible()
})
waitForSelector / waitForResponseimport { axe } from 'jest-axe'
const { container } = render(<Component />)
const results = await axe(container)
expect(results).toHaveNoViolations()
| Loại | Minimum |
|---|---|
| Utility functions | 95% |
| Hooks | 85% |
| Components (branch) | 80% |
| Critical user paths (E2E) | 100% |