cokit-cli 1.0.9 → 1.2.2

package/skills/web-testing/references/ci-cd-testing-workflows.md

@@ -0,0 +1,121 @@
+# CI/CD Testing Workflows
+
+## GitHub Actions - Complete Workflow
+
+```yaml
+name: Test Suite
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20, cache: 'npm' }
+      - run: npm ci
+      - run: npm run test:unit -- --coverage
+      - uses: actions/upload-artifact@v4
+        with: { name: coverage, path: coverage/ }
+
+  e2e-tests:
+    needs: unit-tests
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20, cache: 'npm' }
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npx playwright test --shard=${{ matrix.shard }}/4
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report-${{ matrix.shard }}
+          path: playwright-report/
+```
+
+## Test Splitting
+
+```bash
+# By shard (equal files)
+npx playwright test --shard=1/4
+
+# By timing (Knapsack)
+- uses: chaosaffe/split-tests@v1
+  with:
+    glob: 'tests/**/*.spec.ts'
+    split-total: ${{ matrix.shard }}
+```
+
+## Caching
+
+```yaml
+- uses: actions/cache@v4
+  with:
+    path: |
+      ~/.npm
+      ~/.cache/ms-playwright
+    key: ${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+```
+
+## Flaky Test Management
+
+```yaml
+- run: npx playwright test --retries=2
+- run: npx playwright test --grep-invert @flaky  # Quarantine
+```
+
+## Performance & Security Gates
+
+```yaml
+- run: npm install -g @lhci/cli && lhci autorun
+- run: npm audit --audit-level=high
+- uses: github/codeql-action/analyze@v3
+```
+
+## Merge Reports
+
+```yaml
+merge-reports:
+  needs: e2e-tests
+  steps:
+    - uses: actions/download-artifact@v4
+      with: { pattern: playwright-report-*, merge-multiple: true }
+    - run: npx playwright merge-reports ./all-reports
+```
+
+## GitLab CI
+
+```yaml
+stages: [test, e2e]
+
+unit:
+  stage: test
+  script: [npm ci, npm run test:unit]
+
+e2e:
+  stage: e2e
+  parallel: 4
+  script:
+    - npm ci && npx playwright install --with-deps
+    - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
+  artifacts:
+    when: on_failure
+    paths: [playwright-report/]
+```
+
+## Best Practices
+
+- **Fail fast:** Unit tests before E2E
+- **Parallelism:** Shard E2E across jobs
+- **Cache:** npm, Playwright browsers
+- **Artifacts on failure:** Reports for debugging
+- **Security gates:** npm audit, SAST before merge

package/skills/web-testing/references/component-testing.md

@@ -0,0 +1,94 @@
+# Component Testing
+
+## Philosophy: Test Behavior, Not Implementation
+
+```javascript
+// BAD: Tests internals
+expect(component.state.isOpen).toBe(true);
+
+// GOOD: Tests user-visible behavior
+await userEvent.click(getByRole('button', { name: 'Open' }));
+expect(getByRole('dialog')).toBeVisible();
+```
+
+## React Testing Library
+
+```javascript
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+test('form submission', async () => {
+  render(<LoginForm />);
+  await userEvent.type(screen.getByLabelText('Email'), 'test@example.com');
+  await userEvent.type(screen.getByLabelText('Password'), 'secret123');
+  await userEvent.click(screen.getByRole('button', { name: /login/i }));
+  expect(screen.getByText('Login successful')).toBeInTheDocument();
+});
+```
+
+## Vue Test Utils
+
+```javascript
+import { mount } from '@vue/test-utils';
+
+test('form submission', async () => {
+  const wrapper = mount(LoginForm);
+  await wrapper.find('input[type="email"]').setValue('test@example.com');
+  await wrapper.find('button').trigger('click');
+  expect(wrapper.text()).toContain('Login successful');
+});
+```
+
+## Angular Testing Library
+
+```typescript
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+
+test('form submission', async () => {
+  await render(LoginFormComponent);
+  const user = userEvent.setup();
+  await user.type(screen.getByLabelText('Email'), 'test@example.com');
+  await user.click(screen.getByRole('button', { name: /login/i }));
+  expect(screen.getByText('Login successful')).toBeInTheDocument();
+});
+```
+
+## Query Priority (Accessibility-First)
+
+1. `getByRole` - buttons, links, headings
+2. `getByLabelText` - form fields
+3. `getByPlaceholderText` - inputs
+4. `getByText` - non-interactive elements
+5. `getByTestId` - last resort
+
+## Async Patterns
+
+```javascript
+await screen.findByText('Loaded');
+await waitForElementToBeRemoved(() => screen.queryByText('Loading'));
+await waitFor(() => expect(screen.getByText('Done')).toBeInTheDocument());
+```
+
+## Mocking
+
+```javascript
+vi.mock('./api', () => ({
+  fetchUser: vi.fn().mockResolvedValue({ name: 'John' })
+}));
+
+render(
+  <UserContext.Provider value={{ user: mockUser }}>
+    <Profile />
+  </UserContext.Provider>
+);
+```
+
+## Vitest Browser Mode
+
+```typescript
+// vitest.config.ts - more accurate than jsdom
+export default defineConfig({
+  test: { browser: { enabled: true, name: 'chromium', provider: 'playwright' } },
+});
+```

package/skills/web-testing/references/contract-testing.md

@@ -0,0 +1,146 @@
+# Contract Testing
+
+## When to Use
+
+- Microservices communicating via HTTP/REST
+- Frontend consuming backend APIs
+- Multiple teams working on separate services
+- Preventing integration failures at runtime
+
+## Pact (Consumer-Driven Contracts)
+
+### Consumer Side
+
+```typescript
+import { Pact } from '@pact-foundation/pact';
+
+const provider = new Pact({
+  consumer: 'Frontend',
+  provider: 'UserService',
+});
+
+describe('User API', () => {
+  beforeAll(() => provider.setup());
+  afterEach(() => provider.verify());
+  afterAll(() => provider.finalize());
+
+  it('gets user by id', async () => {
+    await provider.addInteraction({
+      state: 'user 123 exists',
+      uponReceiving: 'request for user 123',
+      withRequest: {
+        method: 'GET',
+        path: '/users/123',
+      },
+      willRespondWith: {
+        status: 200,
+        body: {
+          id: '123',
+          name: 'John Doe',
+          email: 'john@example.com',
+        },
+      },
+    });
+
+    const user = await userClient.getUser('123');
+    expect(user.name).toBe('John Doe');
+  });
+});
+```
+
+### Provider Side
+
+```typescript
+import { Verifier } from '@pact-foundation/pact';
+
+describe('Pact Verification', () => {
+  it('validates consumer expectations', async () => {
+    await new Verifier({
+      providerBaseUrl: 'http://localhost:3000',
+      pactBrokerUrl: process.env.PACT_BROKER_URL,
+      provider: 'UserService',
+      providerVersion: process.env.GIT_SHA,
+      stateHandlers: {
+        'user 123 exists': async () => {
+          await db.users.insert({ id: '123', name: 'John Doe' });
+        },
+      },
+    }).verifyProvider();
+  });
+});
+```
+
+## MSW (Mock Service Worker)
+
+### Setup
+
+```typescript
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+
+const handlers = [
+  http.get('/api/users/:id', ({ params }) => {
+    return HttpResponse.json({
+      id: params.id,
+      name: 'John Doe',
+    });
+  }),
+];
+
+export const server = setupServer(...handlers);
+
+// In test setup
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+```
+
+### Per-Test Override
+
+```typescript
+it('handles server error', async () => {
+  server.use(
+    http.get('/api/users/:id', () => {
+      return HttpResponse.json({ error: 'Not found' }, { status: 404 });
+    })
+  );
+
+  await expect(userClient.getUser('123')).rejects.toThrow();
+});
+```
+
+## Pact + MSW Combined
+
+```typescript
+// Use MSW to simulate provider during Pact consumer tests
+const pactMswHandler = http.get('/api/users/:id', () => {
+  return HttpResponse.json(expectedPactResponse);
+});
+```
+
+## CI Integration
+
+```yaml
+# Consumer publishes contract
+- run: npx pact-broker publish ./pacts
+    --consumer-app-version=${{ github.sha }}
+    --broker-base-url=${{ secrets.PACT_BROKER_URL }}
+
+# Provider verifies
+- run: npm run test:pact:verify
+    --provider-app-version=${{ github.sha }}
+
+# Can-I-Deploy check
+- run: npx pact-broker can-i-deploy
+    --pacticipant=Frontend
+    --version=${{ github.sha }}
+    --to-environment=production
+```
+
+## Best Practices
+
+- **Consumer-first:** Consumers define expectations
+- **Version contracts:** Tie to git SHA
+- **Pact Broker:** Central contract management
+- **can-i-deploy:** Gate deployments on contract verification
+- **State handlers:** Prepare provider data for each scenario

package/skills/web-testing/references/cross-browser-checklist.md

@@ -0,0 +1,72 @@
+# Cross-Browser & Responsive Testing
+
+## Browser Coverage
+
+| Browser | Priority |
+|---------|----------|
+| Chrome | Mandatory |
+| Safari | Mandatory (mobile) |
+| Edge | Mandatory |
+| Firefox | Recommended |
+
+## Device Breakpoints
+
+| Device | Viewport | Priority |
+|--------|----------|----------|
+| Mobile S | 320px | High |
+| Mobile M | 375px | High |
+| Tablet | 768px | High |
+| Laptop | 1024px | High |
+| Desktop | 1440px | High |
+
+## Playwright Config
+
+```typescript
+import { devices } from '@playwright/test';
+
+export default defineConfig({
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
+    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
+  ],
+});
+```
+
+## Responsive Checklist
+
+### Layout
+- [ ] Content reflows at all breakpoints
+- [ ] No horizontal scrolling on mobile
+- [ ] Navigation transforms to mobile menu
+- [ ] Touch targets 44px minimum
+
+### Forms
+- [ ] Input fields usable on mobile
+- [ ] Touch keyboard doesn't obscure inputs
+- [ ] Date pickers mobile-friendly
+
+### Interactive
+- [ ] Hover states have touch alternatives
+- [ ] Modals size appropriate per device
+
+## Browser-Specific Issues
+
+- **Safari**: flexbox gap, date input, WebP
+- **Firefox**: CSS grid subgrid, custom scrollbars
+- **Edge**: Same as Chromium (verify anyway)
+
+## Commands
+
+```bash
+npx playwright test --project=chromium
+npx playwright test --project=mobile-chrome --project=mobile-safari
+```
+
+## Testing Services
+
+- **BrowserStack**: Real device cloud
+- **Sauce Labs**: Cross-browser cloud
+- **Playwright**: Local emulation (free)

package/skills/web-testing/references/database-testing.md

@@ -0,0 +1,139 @@
+# Database Testing
+
+## Testcontainers (Real Database Instances)
+
+### Setup
+
+```bash
+npm install -D @testcontainers/postgresql
+# or
+npm install -D @testcontainers/mongodb
+```
+
+### PostgreSQL Example
+
+```typescript
+import { PostgreSqlContainer } from '@testcontainers/postgresql';
+import { Pool } from 'pg';
+
+describe('User Repository', () => {
+  let container: PostgreSqlContainer;
+  let pool: Pool;
+
+  beforeAll(async () => {
+    container = await new PostgreSqlContainer()
+      .withDatabase('testdb')
+      .start();
+
+    pool = new Pool({ connectionString: container.getConnectionUri() });
+    await runMigrations(pool);
+  }, 60000); // 60s timeout for container start
+
+  afterAll(async () => {
+    await pool.end();
+    await container.stop();
+  });
+
+  afterEach(async () => {
+    await pool.query('TRUNCATE users RESTART IDENTITY CASCADE');
+  });
+
+  it('creates user', async () => {
+    const repo = new UserRepository(pool);
+    const user = await repo.create({ email: 'test@example.com' });
+    expect(user.id).toBeDefined();
+  });
+});
+```
+
+### MongoDB Example
+
+```typescript
+import { MongoDBContainer } from '@testcontainers/mongodb';
+import mongoose from 'mongoose';
+
+describe('User Repository', () => {
+  let container: MongoDBContainer;
+
+  beforeAll(async () => {
+    container = await new MongoDBContainer().start();
+    await mongoose.connect(container.getConnectionString(), {
+      directConnection: true,
+    });
+  }, 60000);
+
+  afterAll(async () => {
+    await mongoose.disconnect();
+    await container.stop();
+  });
+
+  afterEach(async () => {
+    await mongoose.connection.dropDatabase();
+  });
+});
+```
+
+## Transaction Rollback Pattern
+
+```typescript
+describe('User Service', () => {
+  let transaction: Transaction;
+
+  beforeEach(async () => {
+    transaction = await db.transaction();
+  });
+
+  afterEach(async () => {
+    await transaction.rollback(); // Always rollback
+  });
+
+  it('creates user within transaction', async () => {
+    const service = new UserService(transaction);
+    await service.create({ email: 'test@example.com' });
+    // Transaction rolls back - no cleanup needed
+  });
+});
+```
+
+## Playwright Database Fixture
+
+```typescript
+// fixtures/db.ts
+import { test as base } from '@playwright/test';
+import { PostgreSqlContainer } from '@testcontainers/postgresql';
+
+export const test = base.extend<{ db: Pool }>({
+  db: [async ({}, use, testInfo) => {
+    const container = await new PostgreSqlContainer().start();
+    const pool = new Pool({ connectionString: container.getConnectionUri() });
+
+    // Seed per-worker data
+    await seedData(pool, testInfo.workerIndex);
+
+    await use(pool);
+
+    await pool.end();
+    await container.stop();
+  }, { scope: 'worker' }]
+});
+```
+
+## In-Memory Alternatives
+
+```typescript
+// SQLite in-memory (faster, less realistic)
+const db = new Database(':memory:');
+
+// PGlite (Postgres in browser/Node)
+import { PGlite } from '@electric-sql/pglite';
+const db = new PGlite();
+```
+
+## Best Practices
+
+- **Real DB in CI:** Use Testcontainers for high fidelity
+- **In-memory locally:** Faster iteration during development
+- **Isolation:** Worker-scoped containers for parallel tests
+- **Migrations:** Always run migrations before tests
+- **Cleanup:** Truncate after each test, stop containers after all
+- **Timeouts:** Increase timeout for container startup (60s)

package/skills/web-testing/references/e2e-testing-playwright.md

@@ -0,0 +1,119 @@
+# E2E Testing with Playwright
+
+## Setup
+
+```bash
+npm init playwright@latest
+npx playwright install
+```
+
+## Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('User Login', () => {
+  test('should login successfully', async ({ page }) => {
+    await page.goto('/login');
+    await page.getByLabel('Email').fill('user@example.com');
+    await page.getByLabel('Password').fill('password123');
+    await page.getByRole('button', { name: 'Login' }).click();
+    await expect(page).toHaveURL('/dashboard');
+  });
+});
+```
+
+## Selector Priority (Accessibility-First)
+
+1. `getByRole('button', { name: 'Submit' })` - Most preferred
+2. `getByLabel('Email')` - Form fields
+3. `getByPlaceholderText('Search')` - Inputs
+4. `getByText('Welcome')` - Static text
+5. `getByTestId('submit-btn')` - Last resort
+
+## Advanced Fixtures
+
+### Worker-Scoped Authentication
+
+```typescript
+// fixtures/auth.ts
+export const test = baseTest.extend<{ authPage: Page }>({
+  authPage: [async ({ browser, request }, use, testInfo) => {
+    // API login per worker
+    const res = await request.post('/api/auth', {
+      data: { email: 'test@example.com', password: 'pass' }
+    });
+    const { token } = await res.json();
+
+    const context = await browser.newContext();
+    await context.addCookies([
+      { name: 'token', value: token, domain: 'localhost', path: '/' }
+    ]);
+    const page = await context.newPage();
+    await use(page);
+    await context.close();
+  }, { scope: 'worker' }]
+});
+```
+
+### Database Seeding Fixture
+
+```typescript
+// See ./database-testing.md for Testcontainers patterns
+```
+
+## Network Patterns
+
+### Wait for API
+
+```typescript
+const responsePromise = page.waitForResponse('**/api/users');
+await page.click('button:text("Load")');
+await responsePromise;
+```
+
+### Mock API
+
+```typescript
+await page.route('**/api/users', route =>
+  route.fulfill({ status: 200, body: JSON.stringify([]) })
+);
+```
+
+## Configuration
+
+```typescript
+export default defineConfig({
+  workers: process.env.CI ? 1 : undefined,
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    screenshot: 'only-on-failure',
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+## Sharding (CI)
+
+```bash
+npx playwright test --shard=1/4
+npx playwright test --shard=2/4
+```
+
+## Commands
+
+```bash
+npx playwright test                    # Run all
+npx playwright test --ui               # UI mode
+npx playwright test --project=chromium # Specific browser
+npx playwright codegen https://example.com  # Generate
+npx playwright show-report             # View report
+```
+
+## Related
+
+- `./playwright-component-testing.md` - CT patterns
+- `./playwright-fixtures-advanced.md` - Complex fixtures
+- `./database-testing.md` - DB fixtures