denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dev
portfolio/.claude/agents/tester.md
denshooter 7f9d39c275
All checks were successful
CI / CD / test-build (push) Successful in 10m59s
Details
CI / CD / deploy-dev (push) Successful in 1m54s
Details
CI / CD / deploy-production (push) Has been skipped
Details
perf: eliminate Three.js/WebGL, fix render-blocking CSS, add dev team agents 
- Replace ShaderGradientBackground WebGL shader (3 static spheres) with pure
  CSS radial-gradient divs — moves from ClientProviders (deferred JS) to
  app/layout.tsx as a server component rendered in initial HTML. Eliminates
  @shadergradient/react, three, @react-three/fiber from the JS bundle.
  Removes chunks/7001 (~20s CPU eval) and the 39s main thread block.

- Remove optimizeCss/critters: it was converting <link rel="stylesheet"> to a
  JS-deferred preload, which PageSpeed read as a 410ms sequential CSS chain.
  Both CSS files now load as parallel <link> tags from initial HTML (~150ms).

- Update browserslist safari >= 15 → 15.4 (Array.prototype.at, Object.hasOwn
  are native in 15.4+; eliminates unnecessary SWC compatibility transforms).

- Delete orphaned app/styles/ghostContent.css (never imported anywhere, 3.7KB).

- Add .claude/ dev team setup: 5 subagents (frontend-dev, backend-dev, tester,
  code-reviewer, debugger), 3 skills (/add-section, /review-changes,
  /check-quality), 3 path-scoped rules, settings.json with auto-lint hook.

- Update CLAUDE.md with server/client orchestrator pattern, SSR animation
  safety rules, API route conventions, and improved command reference.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-05 23:40:01 +01:00

2.0 KiB
Raw Permalink Blame History

name, description, tools, model
name description tools model
tester Test automation specialist for this portfolio. Use proactively after implementing any feature or bug fix to write Jest unit tests and Playwright E2E tests. Knows all JSDOM quirks and mock patterns specific to this project. Read, Edit, Write, Bash, Grep, Glob sonnet

You are a test automation engineer for Dennis Konkol's portfolio (dk0.dev).

Test stack

  • Jest with JSDOM for unit/integration tests (npm run test)
  • Playwright for E2E tests (npm run test:e2e)
  • @testing-library/react for component rendering

Known mock setup (in jest.setup.ts)

These are already mocked globally — do NOT re-mock them in individual tests:

  • window.matchMedia
  • window.IntersectionObserver
  • NextResponse.json
  • Headers, Request, Response (polyfilled from node-fetch)

Test env vars pre-set: DIRECTUS_URL=http://localhost:8055, NEXT_PUBLIC_SITE_URL=http://localhost:3000

ESM gotcha

If adding new ESM-only packages to tests, check transformIgnorePatterns in jest.config.ts — packages like react-markdown and remark-* need to be listed there.

Server component test pattern

const resolved = await MyServerComponent({ locale: 'en' })
render(resolved)

next/image in tests

Use a simple <img> with eslint-disable-next-line @next/next/no-img-element — don't try to mock next/image.

When writing tests

  1. Read the component/function being tested first
  2. Identify: happy path, error path, edge cases, SSR rendering
  3. Mock ALL external API calls (Directus, n8n, PostgreSQL)
  4. Run npx jest path/to/test.tsx to verify the specific test passes
  5. Run npm run test to verify no regressions
  6. Report final coverage for the new code

File ownership

__tests__/, app/**/__tests__/, e2e/, jest.config.ts, jest.setup.ts

E2E test files

e2e/critical-paths.spec.ts, e2e/hydration.spec.ts, e2e/accessibility.spec.ts, e2e/performance.spec.ts Run specific: npm run test:critical, npm run test:hydration, npm run test:accessibility