@the-bearded-bear/claude-craft 3.1.2 → 3.3.1-next.f4f0d1e

package/Dev/i18n/de/Angular/commands/check-testing.md

@@ -0,0 +1,292 @@
+---
+description: Angular Test Coverage and Quality Analysis
+---
+
+# Angular Test Coverage and Quality Analysis
+
+Analyze test coverage and quality in the Angular project.
+
+## What This Command Does
+
+1. **Coverage Analysis**
+   - Line coverage
+   - Branch coverage
+   - Function coverage
+   - Statement coverage
+
+2. **Test Quality**
+   - Test patterns (AAA)
+   - Mock usage
+   - Async handling
+   - Edge case coverage
+
+3. **Generated Report**
+   - Coverage metrics
+   - Missing tests
+   - Quality recommendations
+
+## Testing Standards
+
+### 1. Component Testing
+
+```typescript
+// ✅ Good - Comprehensive component test
+describe('UserCardComponent', () => {
+  let fixture: ComponentFixture<UserCardComponent>;
+  let component: UserCardComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserCardComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserCardComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('rendering', () => {
+    it('should display user name', () => {
+      // Arrange
+      const user = { id: '1', name: 'John Doe', email: 'john@test.com' };
+
+      // Act
+      fixture.componentRef.setInput('user', user);
+      fixture.detectChanges();
+
+      // Assert
+      expect(fixture.nativeElement.textContent).toContain('John Doe');
+    });
+
+    it('should show loading state', () => {
+      fixture.componentRef.setInput('loading', true);
+      fixture.detectChanges();
+
+      expect(fixture.nativeElement.querySelector('.loading')).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    it('should emit selected event on click', () => {
+      // Arrange
+      const user = { id: '1', name: 'John' };
+      fixture.componentRef.setInput('user', user);
+      fixture.detectChanges();
+
+      const spy = vi.fn();
+      component.selected.subscribe(spy);
+
+      // Act
+      fixture.nativeElement.querySelector('button').click();
+
+      // Assert
+      expect(spy).toHaveBeenCalledWith('1');
+    });
+  });
+});
+```
+
+### 2. Service Testing
+
+```typescript
+// ✅ Good - Service test with mocked HTTP
+describe('UsersApiService', () => {
+  let service: UsersApiService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        UsersApiService,
+        provideHttpClient(),
+        provideHttpClientTesting()
+      ]
+    });
+
+    service = TestBed.inject(UsersApiService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify(); // Verify no outstanding requests
+  });
+
+  describe('getUsers', () => {
+    it('should return users list', () => {
+      const mockUsers = [{ id: '1', name: 'John' }];
+
+      service.getUsers().subscribe(users => {
+        expect(users).toEqual(mockUsers);
+      });
+
+      const req = httpMock.expectOne('/api/users');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockUsers);
+    });
+
+    it('should handle error', () => {
+      service.getUsers().subscribe({
+        error: err => expect(err.status).toBe(500)
+      });
+
+      const req = httpMock.expectOne('/api/users');
+      req.flush('Error', { status: 500, statusText: 'Server Error' });
+    });
+  });
+});
+```
+
+### 3. Store Testing
+
+```typescript
+// ✅ Good - Signal store test
+describe('UsersStore', () => {
+  let store: UsersStore;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UsersStore]
+    });
+    store = TestBed.inject(UsersStore);
+  });
+
+  it('should initialize with empty state', () => {
+    expect(store.users()).toEqual([]);
+    expect(store.loading()).toBe(false);
+    expect(store.error()).toBeNull();
+  });
+
+  it('should set users', () => {
+    const users = [{ id: '1', name: 'John' }];
+
+    store.setUsers(users);
+
+    expect(store.users()).toEqual(users);
+  });
+
+  it('should compute selected user', () => {
+    store.setUsers([
+      { id: '1', name: 'John' },
+      { id: '2', name: 'Jane' }
+    ]);
+
+    store.selectUser('2');
+
+    expect(store.selectedUser()?.name).toBe('Jane');
+  });
+});
+```
+
+### 4. Guard Testing
+
+```typescript
+// ✅ Good - Functional guard test
+describe('authGuard', () => {
+  let authService: { isAuthenticated: ReturnType<typeof signal> };
+  let router: { createUrlTree: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    authService = { isAuthenticated: signal(false) };
+    router = { createUrlTree: vi.fn().mockReturnValue('/login') };
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: AuthService, useValue: authService },
+        { provide: Router, useValue: router }
+      ]
+    });
+  });
+
+  it('should allow access when authenticated', () => {
+    authService.isAuthenticated.set(true);
+
+    TestBed.runInInjectionContext(() => {
+      const result = authGuard({} as any, {} as any);
+      expect(result).toBe(true);
+    });
+  });
+
+  it('should redirect to login when not authenticated', () => {
+    TestBed.runInInjectionContext(() => {
+      authGuard({} as any, {} as any);
+      expect(router.createUrlTree).toHaveBeenCalledWith(['/auth/login']);
+    });
+  });
+});
+```
+
+## Coverage Requirements
+
+| Metric | Minimum | Target |
+|--------|---------|--------|
+| Lines | 80% | 90% |
+| Functions | 80% | 90% |
+| Branches | 75% | 85% |
+| Statements | 80% | 90% |
+
+## Output Format
+
+```
+══════════════════════════════════════════════════════════════
+ANGULAR TEST COVERAGE REPORT
+══════════════════════════════════════════════════════════════
+
+📊 COVERAGE SCORE: 85/100
+
+📈 COVERAGE METRICS
+──────────────────────────────────────────────────────────────
+Lines:      87.5%  ████████▊  (target: 80%) ✅
+Functions:  82.3%  ████████▏  (target: 80%) ✅
+Branches:   76.8%  ███████▋   (target: 75%) ✅
+Statements: 86.2%  ████████▌  (target: 80%) ✅
+
+🧪 TEST DISTRIBUTION
+──────────────────────────────────────────────────────────────
+Components: 45 tests (18 files)
+Services:   32 tests (12 files)
+Guards:     8 tests (4 files)
+Pipes:      6 tests (3 files)
+Stores:     15 tests (5 files)
+
+⚠️ LOW COVERAGE FILES
+──────────────────────────────────────────────────────────────
+• src/app/features/dashboard/dashboard.component.ts: 45%
+  - Missing: error state, loading state, empty state
+• src/app/core/services/websocket.service.ts: 52%
+  - Missing: reconnection logic, error handling
+• src/app/shared/modal/modal.component.ts: 60%
+  - Missing: keyboard events, focus trap
+
+❌ MISSING TESTS
+──────────────────────────────────────────────────────────────
+• src/app/features/upload/upload.service.ts
+• src/app/core/interceptors/error.interceptor.ts
+• src/app/shared/validators/password.validator.ts
+
+📋 TEST QUALITY ISSUES
+──────────────────────────────────────────────────────────────
+• 3 tests missing AAA pattern
+• 2 tests with hardcoded timeouts (use fakeAsync)
+• 5 tests without proper cleanup
+
+📋 RECOMMENDATIONS
+──────────────────────────────────────────────────────────────
+1. Add tests for dashboard component states
+2. Create tests for upload service
+3. Replace setTimeout with fakeAsync/tick
+4. Add cleanup in afterEach blocks
+
+══════════════════════════════════════════════════════════════
+```
+
+## Test Quality Checklist
+
+- [ ] Coverage meets minimum thresholds
+- [ ] All components have tests
+- [ ] All services have tests
+- [ ] All guards have tests
+- [ ] Tests follow AAA pattern
+- [ ] HTTP tests verify all request properties
+- [ ] Async tests use fakeAsync or async/await
+- [ ] Tests clean up after themselves
+- [ ] Edge cases covered
+- [ ] Error scenarios tested

package/Dev/i18n/de/Angular/commands/generate-component.md

@@ -0,0 +1,220 @@
+---
+description: Generate Angular standalone component with tests
+argument-hint: <component-name> [feature]
+---
+
+# Generate Angular Component
+
+Generate a complete Angular standalone component with tests and proper structure.
+
+## Arguments
+
+$ARGUMENTS
+
+- `component-name`: Name of the component (e.g., "user-card", "data-table")
+- `feature` (optional): Feature folder (e.g., "users", "dashboard")
+
+## What This Command Generates
+
+1. **Component file** (`{name}.component.ts`)
+2. **Template file** (`{name}.component.html`)
+3. **Styles file** (`{name}.component.scss`)
+4. **Test file** (`{name}.component.spec.ts`)
+5. **Index file** (`index.ts`)
+
+## Generated Structure
+
+```
+src/app/features/{feature}/components/{name}/
+├── {name}.component.ts
+├── {name}.component.html
+├── {name}.component.scss
+├── {name}.component.spec.ts
+└── index.ts
+```
+
+## Component Template
+
+```typescript
+// {name}.component.ts
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  output,
+  computed,
+  signal
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-{name}',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './{name}.component.html',
+  styleUrl: './{name}.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class {PascalName}Component {
+  // Inputs
+  // data = input.required<DataType>();
+  // optional = input<string>('default');
+
+  // Outputs
+  // action = output<void>();
+
+  // Internal state
+  // loading = signal(false);
+
+  // Computed
+  // derived = computed(() => this.data().property);
+
+  // Event handlers
+  // onAction(): void {
+  //   this.action.emit();
+  // }
+}
+```
+
+## Template File
+
+```html
+<!-- {name}.component.html -->
+<div class="{name}">
+  <!-- Component content -->
+</div>
+```
+
+## Styles File
+
+```scss
+// {name}.component.scss
+.{name} {
+  // Component styles
+}
+```
+
+## Test Template
+
+```typescript
+// {name}.component.spec.ts
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { {PascalName}Component } from './{name}.component';
+
+describe('{PascalName}Component', () => {
+  let component: {PascalName}Component;
+  let fixture: ComponentFixture<{PascalName}Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [{PascalName}Component]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent({PascalName}Component);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('rendering', () => {
+    it('should render component', () => {
+      fixture.detectChanges();
+      const element = fixture.nativeElement;
+      expect(element.querySelector('.{name}')).toBeTruthy();
+    });
+  });
+
+  describe('inputs', () => {
+    // Add input tests here
+  });
+
+  describe('outputs', () => {
+    // Add output tests here
+  });
+
+  describe('interactions', () => {
+    // Add interaction tests here
+  });
+});
+```
+
+## Index File
+
+```typescript
+// index.ts
+export { {PascalName}Component } from './{name}.component';
+```
+
+## Usage Examples
+
+```bash
+# Generate in shared components
+/angular:generate-component button
+
+# Generate in feature
+/angular:generate-component user-card users
+
+# Generate in nested feature
+/angular:generate-component order-item orders/checkout
+```
+
+## Component Types
+
+### Presentational (Dumb) Component
+
+```typescript
+@Component({
+  selector: 'app-user-card',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="user-card">
+      <img [src]="user().avatar" [alt]="user().name" />
+      <h3>{{ user().name }}</h3>
+      <button (click)="selected.emit(user().id)">Select</button>
+    </div>
+  `
+})
+export class UserCardComponent {
+  user = input.required<User>();
+  selected = output<string>();
+}
+```
+
+### Container (Smart) Component
+
+```typescript
+@Component({
+  selector: 'app-user-list-container',
+  standalone: true,
+  imports: [UserListComponent],
+  template: `
+    <app-user-list
+      [users]="users()"
+      [loading]="loading()"
+      (userSelected)="onUserSelect($event)"
+    />
+  `
+})
+export class UserListContainerComponent {
+  private usersService = inject(UsersService);
+
+  users = this.usersService.users;
+  loading = this.usersService.loading;
+
+  onUserSelect(userId: string): void {
+    this.usersService.selectUser(userId);
+  }
+}
+```
+
+## Best Practices
+
+1. **Always use standalone**: `standalone: true`
+2. **Always use OnPush**: `changeDetection: ChangeDetectionStrategy.OnPush`
+3. **Prefer signal inputs**: `input()` and `input.required()`
+4. **Use computed for derived state**: `computed(() => ...)`
+5. **Small, focused components**: Single responsibility
+6. **Test all inputs/outputs**: Comprehensive test coverage

package/Dev/i18n/de/Angular/rules/00-project-context.md.template

@@ -0,0 +1,78 @@
+# Project Context
+
+## Project Information
+
+- **Name**: {{PROJECT_NAME}}
+- **Type**: Angular Application
+- **Angular Version**: {{ANGULAR_VERSION}}
+- **Description**: {{PROJECT_DESCRIPTION}}
+
+## Tech Stack
+
+- **Framework**: Angular {{ANGULAR_VERSION}}
+- **Language**: TypeScript 5.x
+- **Styling**: {{STYLING}} (SCSS/Tailwind/Angular Material)
+- **State Management**: {{STATE_MANAGEMENT}} (Signals/NgRx/NGXS)
+- **Testing**: {{TESTING}} (Vitest/Jest + Cypress)
+- **Build Tool**: Angular CLI / Vite
+
+## Architecture
+
+- **Pattern**: Standalone Components + Domain-Driven Design
+- **Structure**: Feature-based folders
+- **State**: {{STATE_PATTERN}} (Signal Store/NgRx Store)
+
+## Conventions
+
+### File Naming
+
+- Components: `kebab-case.component.ts`
+- Services: `kebab-case.service.ts`
+- Guards: `kebab-case.guard.ts`
+- Pipes: `kebab-case.pipe.ts`
+- Models: `kebab-case.model.ts`
+
+### Component Structure
+
+```typescript
+@Component({
+  selector: 'app-{{component-name}}',
+  standalone: true,
+  imports: [...],
+  templateUrl: './{{component-name}}.component.html',
+  styleUrl: './{{component-name}}.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+```
+
+### Import Order
+
+1. Angular core imports
+2. Angular common/forms/router
+3. Third-party libraries
+4. Internal absolute imports (@app/*, @core/*, @shared/*)
+5. Relative imports
+6. Type imports
+
+## Development Commands
+
+```bash
+# Start development server
+ng serve
+
+# Build for production
+ng build --configuration=production
+
+# Run tests
+npm run test
+
+# Run linting
+ng lint
+
+# Generate component
+ng generate component features/{{feature}}/components/{{name}} --standalone
+```
+
+## Project-Specific Rules
+
+{{CUSTOM_RULES}}