front-end-dev-standards 1.0.0 → 1.1.0

package/standards/security.md

@@ -1,6 +0,0 @@
-# Security Standards
-
-> Placeholder — auto-discovered by setup.js when you run standards:setup.
-
-- Never commit secrets or API keys.
-- Use environment variables for sensitive config.

package/standards/testing.md

@@ -1,244 +0,0 @@
-# Testing Standards
-
-> Unit and integration testing conventions for Angular applications using Vitest.
-
----
-
-## Test Stack
-
-| Tool | Purpose |
-|---|---|
-| **Vitest** | Test runner (Angular 21 default) |
-| **Angular TestBed** | Component/service integration |
-| **ng-mocks** / manual stubs | Dependency mocking (when needed) |
-
-Run tests:
-
-```bash
-npm test
-ng test
-```
-
----
-
-## File Conventions
-
-- Co-locate tests: `employee.service.ts` → `employee.service.spec.ts`
-- Page tests: `employee-list.page.spec.ts`
-- Place test utilities in `src/testing/` or feature `testing/` folder.
-
----
-
-## Service Tests
-
-```typescript
-import { TestBed } from '@angular/core/testing';
-import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
-import { EmployeeService } from './employee.service';
-
-describe('EmployeeService', () => {
-  let service: EmployeeService;
-  let httpMock: HttpTestingController;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [EmployeeService, provideHttpClient(), provideHttpClientTesting()],
-    });
-
-    service = TestBed.inject(EmployeeService);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpMock.verify();
-  });
-
-  it('should fetch all employees', () => {
-    const mockEmployees = [{ id: '1', firstName: 'Jane', lastName: 'Doe', email: 'jane@co.com', departmentId: 'd1', createdAt: '2024-01-01' }];
-
-    service.getAll().subscribe(employees => {
-      expect(employees).toEqual(mockEmployees);
-    });
-
-    const req = httpMock.expectOne('/api/employees');
-    expect(req.request.method).toBe('GET');
-    req.flush(mockEmployees);
-  });
-});
-```
-
-### Service Test Rules
-
-- Use `HttpTestingController` for HTTP services.
-- Test success and error paths.
-- Verify request method, URL, headers, and body.
-- No real HTTP calls in unit tests.
-
----
-
-## Component Tests
-
-```typescript
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-
-import { EmployeeListPage } from './employee-list.page';
-import { EmployeeService } from '../../services/employee.service';
-import { of, throwError } from 'rxjs';
-
-describe('EmployeeListPage', () => {
-  let fixture: ComponentFixture<EmployeeListPage>;
-  let component: EmployeeListPage;
-  let employeeService: { getAll: ReturnType<typeof vi.fn> };
-
-  beforeEach(async () => {
-    employeeService = { getAll: vi.fn().mockReturnValue(of([])) };
-
-    await TestBed.configureTestingModule({
-      imports: [EmployeeListPage],
-      providers: [{ provide: EmployeeService, useValue: employeeService }],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(EmployeeListPage);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display employees when loaded', () => {
-    const employees = [{ id: '1', firstName: 'Jane', lastName: 'Doe', email: 'j@co.com', departmentId: 'd1', createdAt: '2024-01-01' }];
-    employeeService.getAll.mockReturnValue(of(employees));
-
-    component.loadEmployees();
-    fixture.detectChanges();
-
-    expect(component.employees()).toEqual(employees);
-  });
-
-  it('should set error signal on failure', () => {
-    employeeService.getAll.mockReturnValue(throwError(() => new Error('Network error')));
-
-    component.loadEmployees();
-    fixture.detectChanges();
-
-    expect(component.error()).toBeTruthy();
-    expect(component.loading()).toBe(false);
-  });
-});
-```
-
-### Component Test Rules
-
-- Import standalone component in `TestBed.configureTestingModule({ imports: [...] })`.
-- Mock services — don't test service logic in component tests.
-- Test signal state, not internal implementation details.
-- Query DOM for user-visible behavior when testing templates.
-- Use `fixture.detectChanges()` after state updates.
-
----
-
-## Testing Signals
-
-```typescript
-it('should compute filtered employees', () => {
-  component.employees.set([
-    { id: '1', firstName: 'Jane', /* ... */ },
-    { id: '2', firstName: 'John', /* ... */ },
-  ]);
-  component.searchTerm.set('Jane');
-
-  expect(component.filteredEmployees()).toHaveLength(1);
-  expect(component.filteredEmployees()[0].firstName).toBe('Jane');
-});
-```
-
-Prefer testing public signal values over private fields.
-
----
-
-## Test Naming
-
-Use descriptive `it` blocks:
-
-```typescript
-// Good
-it('should disable submit button when form is invalid')
-it('should redirect to login when auth guard rejects unauthenticated user')
-
-// Bad
-it('should work')
-it('test submit')
-```
-
-Pattern: `should [expected behavior] when [condition]`
-
----
-
-## Coverage Expectations
-
-| Layer | Minimum Coverage |
-|---|---|
-| Services (business/API) | 80%+ |
-| Utility functions | 90%+ |
-| Smart/Page components | 70%+ |
-| Presentational components | Key interactions covered |
-| Guards / Interceptors | 100% of branches |
-
-Focus on **behavior coverage**, not line-count gaming.
-
----
-
-## What to Test
-
-### Always Test
-
-- Service HTTP calls (success + error)
-- Form validation logic
-- Guards and interceptors
-- Complex computed signals
-- User interactions (click, submit, navigation)
-
-### Skip or Minimize
-
-- Trivial getters with no logic
-- Third-party library internals
-- Static template text with no binding logic
-
----
-
-## Test Data
-
-Create factories in `testing/factories/`:
-
-```typescript
-// testing/factories/employee.factory.ts
-import { Employee } from '../../features/employees/models/employee.model';
-
-export function createEmployee(overrides: Partial<Employee> = {}): Employee {
-  return {
-    id: 'emp-1',
-    firstName: 'Jane',
-    lastName: 'Doe',
-    email: 'jane.doe@company.com',
-    departmentId: 'dept-1',
-    createdAt: '2024-06-01T00:00:00.000Z',
-    ...overrides,
-  };
-}
-```
-
----
-
-## Anti-Patterns
-
-- ❌ Testing implementation details (private methods)
-- ❌ Shared mutable state between tests
-- ❌ `setTimeout` without fakeAsync / vi.useFakeTimers
-- ❌ Snapshot testing for entire templates ( brittle )
-- ❌ E2E tests disguised as unit tests