@smartsoft001-mobilems/claude-plugins 2.85.0 → 2.87.0

package/plugins/flow-legacy/skills/test-unit/SKILL.md

@@ -1,500 +0,0 @@
----
-name: test-unit
-description: Write unit tests following project conventions for Angular 14 legacy projects. Generates Jest tests for components, services, and NestJS using AAA pattern.
-allowed-tools:
-  - Bash
-  - Read
-  - Write
-  - Edit
-  - Glob
-  - Grep
----
-
-# Unit Test Skill (Angular 14 Legacy)
-
-Write unit tests following project conventions using Jest framework with AAA (Arrange-Act-Assert) pattern for Angular 14 legacy projects.
-
-## Testing Framework
-
-- **Framework**: Jest for all unit tests
-- **File naming**: `{name}.spec.ts` alongside source files
-- **Test runner**: Nx 14 (`nx test {project}`)
-
-## Test File Location
-
-Place test files next to the source files they test:
-
-```
-feature/
-├── feature.service.ts
-├── feature.service.spec.ts
-├── feature.component.ts
-└── feature.component.spec.ts
-```
-
-## Naming Convention
-
-- **Describe blocks**: `@{package-name}: ClassName`
-- **Test format**: `it('should...')` with clear behavior description
-
-## Test Structure (AAA Pattern)
-
-Always use Arrange-Act-Assert pattern with blank line separation (no comments):
-
-```typescript
-it('should perform expected operation', () => {
-  const input = 'test';
-
-  const result = service.performOperation(input);
-
-  expect(result).toBe('expected output');
-});
-```
-
-## Angular 14 Component Testing
-
-### Basic Component Test (NgModule-based)
-
-```typescript
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-import { FeatureComponent } from './feature.component';
-
-describe('@mms/shared-angular: FeatureComponent', () => {
-  let component: FeatureComponent;
-  let fixture: ComponentFixture<FeatureComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FeatureComponent], // NOT imports (not standalone)
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FeatureComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display expected content', () => {
-    component.title = 'Test Title';
-    fixture.detectChanges();
-
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Test Title');
-  });
-});
-```
-
-### Testing Components with @Input/@Output
-
-```typescript
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-import { FormFieldComponent } from './form-field.component';
-
-describe('@mms/shared-angular: FormFieldComponent', () => {
-  let component: FormFieldComponent;
-  let fixture: ComponentFixture<FormFieldComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FormFieldComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FormFieldComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should accept input value', () => {
-    component.label = 'Test Label';
-    fixture.detectChanges();
-
-    expect(component.label).toBe('Test Label');
-  });
-
-  it('should emit output event', () => {
-    const spy = jest.fn();
-    component.changed.subscribe(spy);
-
-    component.onValueChange('new value');
-
-    expect(spy).toHaveBeenCalledWith('new value');
-  });
-
-  it('should support two-way binding', () => {
-    const valueChangeSpy = jest.fn();
-    component.valueChange.subscribe(valueChangeSpy);
-
-    component.value = 'initial';
-    component.onInputChange('updated');
-
-    expect(valueChangeSpy).toHaveBeenCalledWith('updated');
-  });
-});
-```
-
-### Testing with BehaviorSubject State
-
-```typescript
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing';
-import { of, BehaviorSubject } from 'rxjs';
-
-import { ListComponent } from './list.component';
-import { StateService } from './state.service';
-
-describe('@mms/shared-angular: ListComponent', () => {
-  let component: ListComponent;
-  let fixture: ComponentFixture<ListComponent>;
-  let mockStateService: {
-    items$: BehaviorSubject<Item[]>;
-    isLoading$: BehaviorSubject<boolean>;
-  };
-
-  beforeEach(async () => {
-    mockStateService = {
-      items$: new BehaviorSubject<Item[]>([]),
-      isLoading$: new BehaviorSubject<boolean>(false),
-    };
-
-    await TestBed.configureTestingModule({
-      declarations: [ListComponent],
-      providers: [{ provide: StateService, useValue: mockStateService }],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should display items from state', () => {
-    mockStateService.items$.next([
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' },
-    ]);
-    fixture.detectChanges();
-
-    const items = fixture.nativeElement.querySelectorAll('li');
-    expect(items.length).toBe(2);
-  });
-
-  it('should show loading spinner', () => {
-    mockStateService.isLoading$.next(true);
-    fixture.detectChanges();
-
-    const spinner = fixture.nativeElement.querySelector('app-spinner');
-    expect(spinner).toBeTruthy();
-  });
-});
-```
-
-### Testing with Services (Constructor DI)
-
-```typescript
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { of } from 'rxjs';
-
-import { FeatureComponent } from './feature.component';
-import { DataService } from './data.service';
-
-describe('@mms/shared-angular: FeatureComponent', () => {
-  let component: FeatureComponent;
-  let fixture: ComponentFixture<FeatureComponent>;
-  let mockDataService: jest.Mocked<DataService>;
-
-  beforeEach(async () => {
-    mockDataService = {
-      getData: jest.fn().mockReturnValue(of(['item1', 'item2'])),
-      saveData: jest.fn().mockReturnValue(of(true)),
-    } as unknown as jest.Mocked<DataService>;
-
-    await TestBed.configureTestingModule({
-      declarations: [FeatureComponent],
-      providers: [{ provide: DataService, useValue: mockDataService }],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FeatureComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should load data on init', () => {
-    expect(mockDataService.getData).toHaveBeenCalled();
-    expect(component.items).toEqual(['item1', 'item2']);
-  });
-});
-```
-
-## Angular 14 Service Testing
-
-### Service with BehaviorSubject
-
-```typescript
-import { TestBed } from '@angular/core/testing';
-import { take } from 'rxjs/operators';
-
-import { StateService } from './state.service';
-
-describe('@mms/shared-angular: StateService', () => {
-  let service: StateService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [StateService],
-    });
-    service = TestBed.inject(StateService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should emit initial state', (done) => {
-    service.items$.pipe(take(1)).subscribe((items) => {
-      expect(items).toEqual([]);
-      done();
-    });
-  });
-
-  it('should update items', (done) => {
-    const newItems = [{ id: '1', name: 'Test' }];
-
-    service.setItems(newItems);
-
-    service.items$.pipe(take(1)).subscribe((items) => {
-      expect(items).toEqual(newItems);
-      done();
-    });
-  });
-
-  it('should return current value', () => {
-    const items = [{ id: '1', name: 'Test' }];
-    service.setItems(items);
-
-    expect(service.currentItems).toEqual(items);
-  });
-});
-```
-
-### Service with HTTP (Angular 14 HttpClientTestingModule)
-
-```typescript
-import { TestBed } from '@angular/core/testing';
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing';
-
-import { DataService } from './data.service';
-
-describe('@mms/shared-angular: DataService', () => {
-  let service: DataService;
-  let httpMock: HttpTestingController;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      providers: [DataService],
-    });
-
-    service = TestBed.inject(DataService);
-    httpMock = TestBed.inject(HttpTestingController);
-  });
-
-  afterEach(() => {
-    httpMock.verify();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should fetch data', () => {
-    const mockData = [{ id: 1, name: 'Test' }];
-
-    service.getData().subscribe((data) => {
-      expect(data).toEqual(mockData);
-    });
-
-    const req = httpMock.expectOne('/api/data');
-    expect(req.request.method).toBe('GET');
-    req.flush(mockData);
-  });
-});
-```
-
-## NestJS Service Testing
-
-### Basic Service Test
-
-```typescript
-import { TestingModule, Test } from '@nestjs/testing';
-
-import { FeatureService } from './feature.service';
-
-describe('@mms/module-name: FeatureService', () => {
-  let service: FeatureService;
-  let module: TestingModule;
-
-  beforeEach(async () => {
-    module = await Test.createTestingModule({
-      providers: [FeatureService],
-    }).compile();
-
-    service = module.get<FeatureService>(FeatureService);
-  });
-
-  afterEach(async () => {
-    await module.close();
-  });
-
-  it('should be defined', () => {
-    expect(service).toBeDefined();
-  });
-
-  it('should perform expected operation', () => {
-    const input = 'test';
-
-    const result = service.performOperation(input);
-
-    expect(result).toBe('expected output');
-  });
-});
-```
-
-## Mocking Patterns
-
-### Service Mock
-
-```typescript
-const mockService = {
-  getData: jest.fn().mockReturnValue(of(mockData)),
-  createItem: jest.fn().mockReturnValue(of(mockItem)),
-  updateItem: jest.fn().mockReturnValue(of(updatedMockItem)),
-};
-```
-
-### LocalStorage Mock
-
-```typescript
-let localStorageMock: any;
-
-beforeEach(() => {
-  localStorageMock = (() => {
-    let store: Record<string, string> = {};
-    return {
-      getItem: jest.fn((key: string) => store[key] || null),
-      setItem: jest.fn((key: string, value: string) => {
-        store[key] = value;
-      }),
-      removeItem: jest.fn((key: string) => {
-        delete store[key];
-      }),
-      clear: jest.fn(() => {
-        store = {};
-      }),
-    };
-  })();
-  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
-});
-```
-
-### Router Mock
-
-```typescript
-const mockRouter = {
-  navigate: jest.fn(),
-  navigateByUrl: jest.fn(),
-  createUrlTree: jest.fn(),
-};
-
-// In providers
-{ provide: Router, useValue: mockRouter }
-```
-
-### ActivatedRoute Mock
-
-```typescript
-const mockActivatedRoute = {
-  params: of({ id: '123' }),
-  queryParams: of({ filter: 'active' }),
-  snapshot: {
-    params: { id: '123' },
-    queryParams: { filter: 'active' },
-  },
-};
-
-// In providers
-{ provide: ActivatedRoute, useValue: mockActivatedRoute }
-```
-
-## Test Commands (Nx 14)
-
-```bash
-# Run tests for specific project
-nx test web
-nx test shared-angular
-
-# Run tests in watch mode
-nx test web --watch
-
-# Run tests with coverage
-nx test web --coverage
-
-# Run all tests
-nx run-many --target=test
-
-# Run specific test file
-nx test shared-angular --testFile=feature.service.spec.ts
-```
-
-## What to Test
-
-- Business logic in services
-- Component behavior and state changes
-- Public API contracts (@Input/@Output)
-- BehaviorSubject state management
-- Error handling scenarios
-- Input validation
-- Edge cases and boundary conditions
-
-## What NOT to Test
-
-- Third-party libraries
-- Framework internals (Angular/NestJS)
-- Simple getters/setters without logic
-- Auto-generated code
-- Private methods directly (test through public API)
-
-## Workflow
-
-1. **Read source file** to understand the code being tested
-2. **Create test file** with `.spec.ts` extension next to source
-3. **Write describe block** with package and class name
-4. **Add beforeEach** with TestBed setup (declarations, not imports)
-5. **Write tests** using AAA pattern
-6. **Run tests** with `nx test {project}`
-7. **Fix failures** and ensure all pass
-
-## Best Practices (Angular 14)
-
-1. **One assertion per test** when practical
-2. **Descriptive test names** that explain behavior
-3. **Independent tests** - no shared state between tests
-4. **Mock external dependencies** - isolate unit under test
-5. **Test edge cases** - empty arrays, null values, boundaries
-6. **Keep tests fast** - avoid real HTTP calls or timers
-7. **Clean up** - use afterEach for cleanup when needed
-8. **Use declarations** - components are NOT standalone in Angular 14
-9. **Mock BehaviorSubjects** - not signals (no signals in Angular 14)