tlc-claude-code 1.2.7 → 1.2.9

package/build.md

@@ -354,6 +354,138 @@ Status: ✅ All tests passing (Green)
 {test runner output showing all pass}
 ```
 
+### Step 10: E2E Testing (Optional)
+
+After unit tests pass, offer E2E testing:
+
+```
+✅ Unit tests passing (11/11)
+
+Run E2E tests?
+  [1] Yes - run full E2E suite
+  [2] Skip - proceed to verify
+
+Choice [1/2]: _
+```
+
+**If user chooses E2E:**
+
+#### 10a. Detect E2E Framework
+
+Check `.tlc.json` or detect from project:
+
+```bash
+# Check config
+e2eFramework=$(jq -r '.e2e.framework // ""' .tlc.json)
+
+# Or detect
+if [ -f "playwright.config.ts" ]; then
+  e2eFramework="playwright"
+elif [ -f "cypress.config.ts" ]; then
+  e2eFramework="cypress"
+fi
+```
+
+If no E2E framework:
+```
+No E2E framework detected.
+
+Set up E2E testing?
+  [1] Playwright (recommended)
+  [2] Cypress
+  [3] Skip for now
+
+Choice [1/2/3]: _
+```
+
+#### 10b. Generate E2E Tests from Acceptance Criteria
+
+Read acceptance criteria from PLAN.md and generate E2E scenarios:
+
+```
+Analyzing phase acceptance criteria...
+
+E2E scenarios for Phase 1:
+  1. User can log in with valid credentials
+  2. User sees error for invalid password
+  3. User session persists after refresh
+  4. User can log out
+
+Generate E2E tests? (Y/n)
+```
+
+Create `tests/e2e/phase-{N}.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Phase 1: Authentication', () => {
+  test('user can log in with valid credentials', async ({ page }) => {
+    await page.goto('/login');
+    await page.fill('[name="email"]', 'user@test.com');
+    await page.fill('[name="password"]', 'password123');
+    await page.click('button[type="submit"]');
+
+    await expect(page).toHaveURL('/dashboard');
+  });
+
+  test('user sees error for invalid password', async ({ page }) => {
+    await page.goto('/login');
+    await page.fill('[name="email"]', 'user@test.com');
+    await page.fill('[name="password"]', 'wrong');
+    await page.click('button[type="submit"]');
+
+    await expect(page.locator('.error')).toContainText('Invalid credentials');
+  });
+
+  // ... more tests from acceptance criteria
+});
+```
+
+#### 10c. Run E2E Tests
+
+```bash
+# Playwright
+npx playwright test
+
+# Cypress
+npx cypress run
+
+# Docker (if configured)
+docker-compose --profile test up playwright
+```
+
+Output:
+```
+Running E2E tests...
+
+  ✓ user can log in with valid credentials (1.2s)
+  ✓ user sees error for invalid password (0.8s)
+  ✓ user session persists after refresh (1.5s)
+  ✓ user can log out (0.6s)
+
+✅ 4 E2E tests passing
+
+Phase 1 complete. Ready for /tlc:verify 1
+```
+
+#### 10d. E2E Failures
+
+If E2E tests fail:
+```
+E2E test failed: user can log in with valid credentials
+
+Error: Expected URL '/dashboard', got '/login'
+Screenshot: tests/e2e/screenshots/login-failure.png
+
+Options:
+  [1] Fix and retry
+  [2] Skip E2E (proceed to verify)
+  [3] Debug (open headed browser)
+
+Choice [1/2/3]: _
+```
+
 ## Framework Defaults
 
 ### TLC Default: Mocha Stack
@@ -425,6 +557,51 @@ Projects can have multiple test frameworks. Configure in `.tlc.json`:
 
 When running tests, TLC will execute all frameworks in the `run` array.
 
+### E2E Framework Configuration
+
+Configure E2E testing in `.tlc.json`:
+
+```json
+{
+  "e2e": {
+    "framework": "playwright",
+    "baseUrl": "http://localhost:5001",
+    "command": "npx playwright test",
+    "docker": true
+  }
+}
+```
+
+**Playwright setup** (recommended):
+```bash
+npm init playwright@latest
+```
+
+Creates `playwright.config.ts`:
+```typescript
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  baseURL: process.env.BASE_URL || 'http://localhost:5001',
+  use: {
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+**Cypress setup**:
+```bash
+npm install -D cypress
+npx cypress open
+```
+
+**Docker E2E** (already in docker-compose.dev.yml):
+```bash
+docker-compose --profile test up playwright
+```
+
 Default pytest.ini (Python):
 ```ini
 [pytest]
@@ -472,6 +649,14 @@ Committed: feat: session management - phase 1
 Running tests again...
 ✅ 11 tests passing
 
+Run E2E tests? [1] Yes [2] Skip: 1
+
+Running E2E tests...
+  ✓ user can log in with valid credentials
+  ✓ user sees error for invalid password
+  ✓ session persists after refresh
+✅ 3 E2E tests passing
+
 Phase 1 complete. Ready for /tlc:verify 1
 ```
 

package/help.md

@@ -37,7 +37,7 @@ Launches the visual dashboard. Detects where you are, shows what's next.
 |---------|--------------|
 | `/tlc:discuss` | Shape implementation approach |
 | `/tlc:plan` | Create task plan |
-| `/tlc:build` | Write tests → implement → verify |
+| `/tlc:build` | Write tests → implement → E2E (optional) → verify |
 | `/tlc:verify` | Human acceptance testing |
 
 ### Quality & Testing
@@ -49,7 +49,7 @@ Launches the visual dashboard. Detects where you are, shows what's next.
 | `/tlc:quality` | Test quality scoring and analysis |
 | `/tlc:edge-cases` | Generate edge case tests |
 | `/tlc:autofix` | Auto-fix failing tests |
-| `/tlc:config` | Configure test frameworks |
+| `/tlc:config` | Configure test frameworks (unit + E2E) |
 
 ### Utility
 

package/init.md

@@ -88,10 +88,17 @@ Create `.tlc.json`:
     "run": ["mocha"]
   },
   "testCommand": "npm test",
-  "testDirectory": "test"
+  "testDirectory": "test",
+  "e2e": {
+    "framework": null,
+    "directory": "tests/e2e",
+    "command": null
+  }
 }
 ```
 
+(E2E framework is configured in Step 11)
+
 Add test scripts to package.json:
 ```json
 "scripts": {
@@ -283,15 +290,96 @@ This branch is used by:
 - `/tlc:build` - suggests merging back to this branch
 - PR reviews - compares against this branch
 
-### 11. Report Summary
+### 11. Set Up E2E Testing
+
+Check for existing E2E setup:
+
+```bash
+# Detect existing E2E
+if [ -f "playwright.config.ts" ] || [ -f "playwright.config.js" ]; then
+  e2e="playwright"
+elif [ -f "cypress.config.ts" ] || [ -f "cypress.config.js" ]; then
+  e2e="cypress"
+elif [ -d "tests/e2e" ] || [ -d "e2e" ]; then
+  e2e="detected"
+fi
+```
+
+**If no E2E found:**
+
+```
+No E2E testing detected.
+
+Set up E2E tests for full user flow verification?
+  [1] Yes - Playwright (recommended)
+  [2] Yes - Cypress
+  [3] No - skip for now
+
+Choice [1/2/3]: _
+```
+
+**If Playwright selected:**
+
+```bash
+npm init playwright@latest
+```
+
+Create `playwright.config.ts`:
+```typescript
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  baseURL: process.env.BASE_URL || 'http://localhost:5001',
+  use: {
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+Update `.tlc.json`:
+```json
+{
+  "e2e": {
+    "framework": "playwright",
+    "directory": "tests/e2e",
+    "command": "npx playwright test"
+  }
+}
+```
+
+Add to `package.json`:
+```json
+{
+  "scripts": {
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  }
+}
+```
+
+**If E2E already exists:**
+
+```
+Detected E2E framework: playwright
+E2E directory: tests/e2e
+Existing E2E tests: 5 files
+
+Keeping existing E2E setup.
+```
+
+### 12. Report Summary
 
 ```
 TLC initialized for [project name]
 
 Stack: [detected]
-Test framework: [framework] (existing/newly configured)
-Test directory: [path]
-Existing tests: [count] files
+Unit tests: [framework] (existing/newly configured)
+Unit test directory: [path]
+E2E tests: [framework] (existing/newly configured)
+E2E test directory: [path]
+Existing tests: [count] unit, [count] E2E
 Untested files: [count] identified
 
 Next steps:

package/new-project.md

@@ -252,7 +252,12 @@ Create `.tlc.json` with default test settings:
     "run": ["mocha"]
   },
   "testCommand": "npm test",
-  "testDirectory": "test"
+  "testDirectory": "test",
+  "e2e": {
+    "framework": "playwright",
+    "directory": "tests/e2e",
+    "command": "npx playwright test"
+  }
 }
 ```
 
@@ -271,10 +276,13 @@ Scaffold based on chosen stack:
 ```
 project/
 ├── src/
-├── test/
+├── test/                    # Unit tests
+├── tests/
+│   └── e2e/                 # E2E tests (Playwright)
 ├── .env.example
 ├── .tlc.json
 ├── .mocharc.json
+├── playwright.config.ts     # E2E config
 ├── docker-compose.yml
 ├── Dockerfile
 ├── [package.json | pyproject.toml | go.mod]
@@ -309,6 +317,69 @@ Add to `package.json`:
 }
 ```
 
+### Step 9: Set Up E2E Testing
+
+E2E tests verify full user flows in the browser.
+
+```
+Set up E2E testing?
+  [1] Playwright (recommended)
+  [2] Cypress
+  [3] Skip for now
+
+Choice [1/2/3]: _
+```
+
+**If Playwright (default):**
+
+```bash
+npm init playwright@latest
+```
+
+Create `playwright.config.ts`:
+```typescript
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  baseURL: process.env.BASE_URL || 'http://localhost:5001',
+  use: {
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+});
+```
+
+Create `tests/e2e/.gitkeep` to establish the directory.
+
+Add to `package.json`:
+```json
+{
+  "scripts": {
+    "test": "mocha",
+    "test:watch": "mocha --watch",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  }
+}
+```
+
+**If Cypress:**
+
+```bash
+npm install -D cypress
+npx cypress open
+```
+
+**Summary output:**
+```
+✓ Unit tests: mocha + chai + sinon
+✓ E2E tests: playwright
+✓ Test directories: test/ (unit), tests/e2e/ (E2E)
+
+Ready to build. Run /tlc:plan to create your first phase.
+```
+
 ## Usage
 
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",