원클릭으로 Manus에서 모든 스킬 실행

시작하기

test

스타1

포크0

업데이트2026년 4월 2일 07:08

Guidelines for frontend component and E2E testing in FinanzApp.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

agussantinelli

agussantinelli/FinanzApp-FrontEnd

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Testing (FrontEnd)

Context

Quality assurance in the frontend involves checking both individual component logic and the overall user flow using Vitest and Playwright.

📂 Test Organization

1. Unit & Integration Tests (Vitest)

Unit tests for logic, hooks, and services MUST follow the nested tests/ pattern:

Location: src/[module]/tests/[Name].test.ts(x)
Rule: Every logic file needs a corresponding test (see test-enforcement skill).
Exception: src/app/ tests remain side-by-side with the page.tsx or layout.tsx.

2. Integration Tests (Cross-Layer)

Location: tests/integration/[module]/[Feature].test.tsx (see integration-testing skill).

3. E2E Tests (Playwright)

Location: tests/e2e/[Feature].spec.ts (see e2e-testing skill).

🛠️ General Guidelines

Component Testing: Use Vitest + React Testing Library for unit testing UI components and helper functions.
E2E Testing: Use Playwright for full-flow tests.
Accessibility: Run axe or similar tools regularly to ensure WCAG compliance (see accessibility skill).
Mocking: Use Vitest mocks or MSW (Mock Service Worker) to mock API responses during development/testing.
Naming: Use .test.ts(x) for unit/integration and .spec.ts for E2E.

이 저장소의 다른 Skills

같은 저장소

test-enforcement

agussantinelli/FinanzApp-FrontEnd

Mandatory rule requiring a corresponding test file for every business logic file and UI component.

2026-04-021

clean-structure

agussantinelli/FinanzApp-FrontEnd

Component organization and modern React principles for the FrontEnd.

2026-04-021

global-skills

agussantinelli/FinanzApp-FrontEnd

Catalog of all specialized skills used across the FinanzApp project (Frontend & Backend).

2026-04-021

accessibility

agussantinelli/FinanzApp-FrontEnd

Reglas obligatorias para garantizar la accesibilidad web (A11y) en FinanzApp. Sigue estándares WCAG 2.1 para usuarios con discapacidad visual y navegación por teclado.

2026-04-021

integration-testing

agussantinelli/FinanzApp-FrontEnd

Guidelines for cross-layer testing (Hooks + UI + Services) using real logic and MSW for network interception.

2026-03-181

e2e-testing

agussantinelli/FinanzApp-FrontEnd

Guidelines for end-to-end testing in FinanzApp using Playwright.

2026-03-171

name	test
description	Guidelines for frontend component and E2E testing in FinanzApp.

Testing (FrontEnd)

Context

Quality assurance in the frontend involves checking both individual component logic and the overall user flow using Vitest and Playwright.

📂 Test Organization

1. Unit & Integration Tests (Vitest)

Unit tests for logic, hooks, and services MUST follow the nested tests/ pattern:

Location: src/[module]/tests/[Name].test.ts(x)
Rule: Every logic file needs a corresponding test (see test-enforcement skill).
Exception: src/app/ tests remain side-by-side with the page.tsx or layout.tsx.

2. Integration Tests (Cross-Layer)

Location: tests/integration/[module]/[Feature].test.tsx (see integration-testing skill).

3. E2E Tests (Playwright)

Location: tests/e2e/[Feature].spec.ts (see e2e-testing skill).

🛠️ General Guidelines

Component Testing: Use Vitest + React Testing Library for unit testing UI components and helper functions.
E2E Testing: Use Playwright for full-flow tests.
Accessibility: Run axe or similar tools regularly to ensure WCAG compliance (see accessibility skill).
Mocking: Use Vitest mocks or MSW (Mock Service Worker) to mock API responses during development/testing.
Naming: Use .test.ts(x) for unit/integration and .spec.ts for E2E.