feat: integrate Playwright for E2E testing and enhance testing framework
- Added Playwright for end-to-end testing in the `apps/web` module, including a new `login.spec.ts` for testing login functionality. - Updated package.json to include Playwright dependencies and new test commands for E2E testing. - Enhanced .gitignore to exclude Playwright test results and reports. - Modified existing documentation to reflect the integration of Playwright and updated testing guidelines. - Refactored test commands to streamline the testing process, including a dedicated command for E2E tests. These changes improve the testing framework by providing robust E2E testing capabilities, enhancing the reliability and quality of the application.
This commit is contained in:
shancheas
@@ -3,7 +3,7 @@ name: archify
|
||||
description: Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
|
||||
license: MIT
|
||||
metadata:
|
||||
version: "2.16"
|
||||
version: '2.16'
|
||||
author: tt-a1i
|
||||
based_on: Cocoon-AI/architecture-diagram-generator (MIT, v1.0)
|
||||
---
|
||||
@@ -26,6 +26,7 @@ Use this bounded path for ordinary generation. Do not read the optional Viewer R
|
||||
```
|
||||
|
||||
A receipt with only 4 artifact checks is basic validation, never showcase acceptance. A showcase pass must report all 9 artifact checks with 0 composition errors and 0 warnings. If the candidate omits or misspells the exact `meta.quality_profile` field, fix it before geometry. For a workflow v2 geometry diagnosis, run `node bin/archify.mjs validate workflow <candidate.json> --layout-json` and use the stable compiler receipt; solver internals are not authoring controls. A passing final validation freezes the candidate: never edit it afterward.
|
||||
|
||||
5. For a delivered HTML, `deliver` is the final acceptance command:
|
||||
|
||||
```bash
|
||||
@@ -54,13 +55,13 @@ Lifecycle note: phase columns `0..4` occupy the main rail; event/terminal column
|
||||
|
||||
## Type router
|
||||
|
||||
| Type | Use for |
|
||||
|---|---|
|
||||
| Type | Use for |
|
||||
| -------------- | --------------------------------------------------------------- |
|
||||
| `architecture` | Components, services, cloud/security boundaries, infrastructure |
|
||||
| `workflow` | Processes, approval gates, tool calls, runbooks, CI/CD |
|
||||
| `sequence` | API call chains, request lifecycles, async traces, returns |
|
||||
| `dataflow` | Pipelines, ETL/ELT, lineage, governance, consumers |
|
||||
| `lifecycle` | State/status transitions, retries, waiting and terminal states |
|
||||
| `workflow` | Processes, approval gates, tool calls, runbooks, CI/CD |
|
||||
| `sequence` | API call chains, request lifecycles, async traces, returns |
|
||||
| `dataflow` | Pipelines, ETL/ELT, lineage, governance, consumers |
|
||||
| `lifecycle` | State/status transitions, retries, waiting and terminal states |
|
||||
|
||||
When ambiguous, run `node bin/archify.mjs guide "<scenario>" --json`. Scenario proof examples are structural references, not facts to copy.
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ Reference this skill when working on this project. It contains:
|
||||
|
||||
- **Apps**: React 19 + Vite (`apps/web`, `apps/showcase`, `apps/landing`) + Electron (`apps/desktop`) + VitePress (`apps/docs-dev`)
|
||||
- **Packages**: `@repo/ui` (Mantine), `@repo/core-api`, `@repo/core-storage`, `@repo/core-i18n`, `@repo/core-events`, `@repo/utils`, `@repo/brand`, `packages/configs`
|
||||
- **Testing**: Vitest; Testing Library in `packages/ui` and `packages/core-events`
|
||||
- **Testing**: Vitest; Playwright E2E in `apps/web/e2e/`; Testing Library in `packages/ui` and `packages/core-events`
|
||||
- **Package manager**: pnpm 8.15.6 + Turbo
|
||||
|
||||
**Where to work:** product in `apps/web`; copy UI/API usage from `apps/showcase`; concepts from `apps/docs-dev`. Do not invent a parallel UI kit.
|
||||
@@ -128,6 +128,7 @@ export const createFullPageSchema = (t: (key: string) => string) =>
|
||||
```bash
|
||||
pnpm test
|
||||
pnpm --filter web test
|
||||
pnpm test:e2e:web
|
||||
pnpm --filter @repo/ui test
|
||||
pnpm typecheck:web
|
||||
pnpm check:all
|
||||
@@ -135,7 +136,7 @@ pnpm check:all
|
||||
|
||||
- Unit tests colocated as `*.test.ts(x)`
|
||||
- Component tests with Testing Library in packages that already have it
|
||||
- App journeys: browser-verify login and FULL_PAGE index / form / detail
|
||||
- App journeys: Playwright in `apps/web/e2e/` (login is the first sample)
|
||||
- Minimum 80% coverage; TDD (red → green → refactor)
|
||||
|
||||
---
|
||||
@@ -149,6 +150,7 @@ pnpm dev:docs-dev
|
||||
pnpm lint
|
||||
pnpm typecheck:web
|
||||
pnpm test
|
||||
pnpm test:e2e:web
|
||||
pnpm check:all
|
||||
```
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: tdd-workflow
|
||||
description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage using Vitest, Testing Library, and browser journeys.
|
||||
description: Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage using Vitest, Testing Library, and Playwright E2E.
|
||||
---
|
||||
|
||||
# Test-Driven Development Workflow
|
||||
@@ -24,7 +24,7 @@ TDD for this frontend monorepo (Vitest, not NestJS/Supertest).
|
||||
|
||||
- **Unit** — validators, transformers, utils, stores (`*.test.ts`)
|
||||
- **Component** — Testing Library in `packages/ui` / `packages/core-events`
|
||||
- **Journeys** — login and FULL_PAGE index/form/detail; mock HTTP services; browser-verify layout
|
||||
- **Journeys** — Playwright in `apps/web/e2e/` (login sample first); mock HTTP with `page.route`
|
||||
|
||||
## Workflow
|
||||
|
||||
@@ -77,7 +77,7 @@ vi.mock('@repo/core-api/http-client', () => ({
|
||||
|
||||
## File organization
|
||||
|
||||
Colocate `*.test.ts(x)` next to source. No `test/*.e2e-spec.ts` NestJS tree.
|
||||
Colocate unit tests as `*.test.ts(x)` next to source. Playwright E2E lives in `apps/web/e2e/` (see `login.spec.ts`). Do not use a NestJS `test/*.e2e-spec.ts` tree.
|
||||
|
||||
## Commands
|
||||
|
||||
@@ -85,6 +85,7 @@ Colocate `*.test.ts(x)` next to source. No `test/*.e2e-spec.ts` NestJS tree.
|
||||
pnpm test
|
||||
pnpm --filter @repo/ui test
|
||||
pnpm --filter web test -- --watch
|
||||
pnpm test:e2e:web
|
||||
pnpm lint
|
||||
```
|
||||
|
||||
@@ -99,4 +100,4 @@ pnpm lint
|
||||
|
||||
- 80%+ coverage
|
||||
- All tests green
|
||||
- Critical FULL_PAGE flows covered or browser-verified
|
||||
- Critical FULL_PAGE flows covered by Playwright or browser-verified
|
||||
|
||||
Reference in New Issue
Block a user